十二 构建响应式网站
制作可伸缩图像的步骤
1.对任何想做成可伸缩图像的图像，在HTML的img标签中省略width和height属性。
2.在样式表中，为每个想做成可伸缩图像的图像应用max-width: 100%。
创建弹性布局的步骤
1.对于需要某个宽度实现预期布局的元素，设置width: percentage;，其中percentage表示你希望元素在水平方向上占据容器空间的比例。通常说来，不必设置width: 100%;，因为默认设置为display: block;的元素（如p以及其他很多元素）或手动设置为display: block;的元素在默认情况下会占据整个可用空间。
2.作为可选的一步，对包含整个页面内容的元素设置max-width: value;，其中value表示你希望页面最多可增长到的最大宽度。通常，value以像素为单位，不过也可以使用百分数、em值或其他单位的值。
设置相对的max-width
包含整个页面的.page div 设置了以像素为单位的max-width（960），参见图12.3.6。这个值能否使用灵活的相对单位呢？其实，设置.page { max-width: 60em; }就可以了。下面是具体的解释：
em宽度是基于元素字体大小的。例如，如果其字体大小等价于14像素，则width: 10em;会将宽度设置为140像素。
.page div没有指定font-size，因此它从父元素（body元素）继承。我们知道，body的默认字体大小通常等于16像素。因此，如果希望将.page的最大宽度设为960像素，960/16=60em。
设置.page { max-width: 60em; }与使用960px是相似的，但它们有一个显著的不同：前者会根据浏览器默认字体大小进行缩放。第三条提示里讲了如何看到这一效果。
移动优先方法
我会遵循移动优先为页面设计样式，推荐你在设计网页时也遵循这一点。下面是具体过程。
1.首先为所有的设备提供基准样式。这同时也是旧版浏览器和功能比较简单的设备显示的内容。基准样式通常包括基本的文本样式（字体、颜色、大小），内边距、边框、外边距和背景（视情况而定），以及设置可伸缩图像的样式。通常，在这个阶段，需要避免让元素浮动，或对容器设定宽度，因为最小的屏幕并不够宽。内容将按照常规的文档流由上到下进行显示。网站的目标是在单列显示样式中是清晰的、中看的。这样，网站对所有的设备（无论新旧）都具有可访问性。在不同设备下，外观可能有差异，不过这是在预期之内的，完全可以接受。
2.从这种样式开始，使用媒体查询逐渐为更大的屏幕（或其他媒体特性，如orientation）定义样式。大多数时候，min-width和max-width媒体查询特性是最主要的工具。
十三：使用web字体
Web字体可以使用一系列文件类型。需要特别指出的是，下面介绍的前三种字体类型是如今经常使用的。
•内嵌OpenType（Embedded OpenType，.eot）。在使用@font-face时，Internet Explorer 8及之前的版本仅支持内嵌OpenType。内嵌OpenType是Microsoft的一项专有格式，它使用数字版权管理技术防止在未经许可的情况下使用字体。
•TrueType（.ttf）和OpenType（.otf），台式机使用的标准字体文件类型。TrueType和OpenType得到了Mozilla Firefox（3.5及之后的版本）、Opera（10及之后的版本）、Safari（3.1及之后的版本）、Mobile Safari（iOS 4.2及之后的版本）、Google Chrome（4.0及之后的版本）及Internet Explorer（9及之后的版本）的广泛支持。这些格式不使用数字版权管理。
•Web开放字体格式（Web Open Font Format，.woff）。这种较新的标准是专为Web字体设计的。Web开放字体格式的字体是经压缩的TrueType字体或OpenType字体。WOFF格式还允许在文件上附加额外的元数据。字体设计人员或厂商可以利用这些元数据，在原字体信息的基础上，添加额外的许可证或其他信息。这些元数据不会以任何方式影响字体的表现，但经用户请求，这些元数据可以呈现出来。Mozilla Firefox（3.6及之后的版本）、Opera（11.1及之后的版本）、Safari（5.1及之后的版本）、Google Chrome（6.0及之后的版本）及Internet Explorer（9及之后的版本）均支持Web开放字体格式。
•可缩放矢量图形（Scalable Vector Graphics，.svg）。简言之，应避免对Web字体文件使用SVG。它更多地用于早期Web字体，因为它是iOS 4.1上移动Safari唯一支持的格式（还有可能引起一些崩溃的情况）。从iOS 4.2（于2011年初即被广泛使用）起，移动Safari开始支持TrueType。
十四：使用CSS进行增强
浏览器快速吸纳了很多新的CSS3属性，让上述情况有了改观。如今，仅使用CSS创建圆角、渐变和阴影以及调整透明度等已经变成现实
十五：列表
所有的列表都是由父元素和子元素构成的。父元素用于指定要创建的列表的类型，子元素用于指定要创建的列表项目类型。
下面列出了三种列表类型以及组成它们的元素。
•有序列表，ol为父元素，li为列表项。
•无序列表，ul为父元素，li为列表项。
•描述列表，dl为父元素，dt和dd分别代表dl中的术语和描述。
十六：表单
表单有两个基本组成部分：访问者在页面上可以看见并填写的控件、标签和按钮的集合；以及用于获取信息并将其转化为可以读取或计算的格式的处理脚本。
构造表单的字段和按钮很直观，同创建网页的其他部分是相似的。基本的表单字段类型包括文本框、单选按钮、复选框、下拉菜单、更大的文本区域。如果你曾在网上购过物，曾加入过社交网络，或撰写过基于Web的电子邮件，那么你会很熟悉即将在这里学到的表单元素。我还会演示如何使用CSS设置表单的样式。
十七：视频、音频和多媒体
在页面上添加电影、声音、图像和动画可以增强访问者的体验。在HTML5出现之前，为网页添加多媒体的唯一办法就是使用第三方的插件（如Adobe Flash Player和苹果的QuickTime）。通过引入原生的多媒体（浏览器负责一切），HTML5改变了这一状况。
并非所有支持HTML5的浏览器都支持相同格式的视频和音频格式。你将在本章学到如何提供多种格式（以及为不支持任何一种格式的浏览器提供备用Flash），让不同的访问者都能正常使用。
十八：表格
HTML表格可以很复杂，不过很少需要实现特别复杂的表格
十九：添加JavaScript
HTML定义网页的内容，CSS定义网页的表现，JavaScript则定义特殊的行为。建立网站不可能脱离HTML（如果要让网站看起来很吸引人，则离不开CSS），但JavaScript并不是必需的。在大多数情况下，JavaScript的特性都是用于增强访问者体验的——它们在由HTML和CSS构建的核心体验的基础上进行增强。
通过编写简单的JavaScript程序，可以显示和隐藏内容；通过编写复杂一些的程序，可以加载数据并动态地更新页面。可以操作定制的HTML5 audio和video元素控件，使用HTML5的canvas元素创建游戏。可以利用地理定位，根据访问者所在的位置定制其体验；可以让访问者通过将文件拖放到浏览器窗口进行上传（Dropbox的网站就是一个这样做的例子）。可以利用JavaScript和一些强大的HTML5特性及相关技术构建成熟的Web应用程序。
如你所见，JavaScript的功能非常强大，而它的使用也呈现了爆炸式的增长。jQuery（jquery.com）等JavaScript库确保了为页面添加简单交互和复杂行为的过程变得容易了许多。还有很多跟jQuery功能类似的库，但在这些库中，jQuery是用得最多的一个，这主要是因为初学者很容易上手，同时它有很好的在线文档和大型社区支持。除了jQuery以外，还有各式各样的JavaScript可用于帮你构建大型Web应用。使用Node.js（http://nodejs.org）甚至可以用JavaScript构建Web服务器。
浏览器厂商花费了大量的精力确保其浏览器处理JavaScript的速度较几年前的版本有了显著提升。JavaScript也可以在平板电脑和现代移动浏览器中运行，不过出于性能方面的原因，可能需要为这些设备考虑在页面中加载的脚本的大小。
不过JavaScript本身是一个独立、庞大的主题，因此我们不会在本书讲解这门语言。我仍会解释如何将创建好的脚本插入到HTML文档中去，同时给出一些关于如何在插入脚本时尽量降低其对页面影响的建议，此外还会提供对事件处理程序的概览。
当你熟悉HTML和CSS后，你就可以开始学习JavaScript（以及jQuery）。
JavaScript要比HTML和CSS更复杂一些，因此，如果你发现自己要花费较长的时间学习，也不要感到气馁。对任何事物来说，你操作越多，就越熟练。
二十：测试和调试网页
在HTML、CSS和众多的浏览器（尤其是旧浏览器）和平台之间，很容易产生各种各样的问题。
这些调试技术中的一部分看起来相当基础，但网页的问题往往也非常基础。在查找大的问题之前，要确保没有任何小的问题。
无论如何，应该在一个或多个平台的几种浏览器中对网站进行充分的测试，查看各个页面是不是按照预期的方式工作。
二十一：发布网站
步骤：
•获得域名
•为网站寻找主机
•将文件传送至服务器
网友评论