11.1　开始布局注意事项

下面列举的一些要点有助于对网站进行布局，并在发布之前对网站进行调整。

  1. 内容与显示分离
  • 作为最佳实践，应始终保持内容（HTML）与显示（CSS）分离。第8章介绍了如何通过外部样式表实现这一点。如果对所有的页面都这样做，就可以共享相同的布局和整体样式。这也让日后修改整个网站的设计变得更加容易——只修改CSS文件就可以了。
  1. 浏览器注意事项

  • 并非所有的访问者都使用同样的浏览器，同样的操作系统，甚至同样的设备访问你的网站。因此，大多数情况下，在将网站放到服务器上发布之前，通常需要在很多浏览器上对页面进行测试。推荐在开发过程中就用几个浏览器对页面定期进行测试，这样，在最后进行全面测试时，碰到的问题就会少一些。关于如何对页面进行测试，以及测试用浏览器的有关信息，参见20.6节。

  • 有时，有必要针对IE的特定版本编写CSS样式规则，以修复IE的异常行为引起的问题。这对IE6和有所改善的IE7来说尤其常见。

有几种办法可以实现上述要求，不过从性能上说，最好的方法是使用条件注释在html元素上创建IE版本特有的类，并在样式表中应用这个类。更多细节参见http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/。这个页面包含的内容较多，如果你想看该用什么代码，可以直接转至标题“Throw it on the html tag”（同时请阅读代码后面的注解）。另一种方法是使用条件注释引入位于单独样式表中的IE补丁。

我在本书网站的代码示例中提供了这两种技术的例子。第一种方法位于finished-page.html（参见本章导语），第二种方法位于同一目录下的finished-page-conditional-stylesheets.html。关于条件注释，参见www.quirksmode.org/css/condcom.html。

  1. 布局方法

有几种布局的方式。

  • 对于固定（fixed）布局，整个页面和每一栏都有基于像素的宽度。顾名思义，无论是使用移动电话和平板电脑等较小的设备查看页面，还是使用桌面浏览器并对窗口进行缩小，它的宽度都不会改变。你在浏览万维网时已经见过不少固定布局的网站了，尤其是公司网站和大牌网站。固定布局也是学习CSS时最容易掌握的布局方式。

  • 流式（fluid或liquid）布局使用百分数定义宽度，允许页面随显示环境的改变进行放大或缩小。这种方法后来被用于创建响应式（responsive）布局和自适应（adaptive）布局，这些布局方式不仅可以像传统的流式布局那样在手机和平板电脑上缩小显示，还可以根据屏幕尺寸以特定方式调整其设计。这就可以在使用相同HTML的情况下，为移动用户、平板电脑用户和桌面用户定制单独的体验，而不是提供三个独立的网站。（Ethan Marcotte创建了术语“响应式Web设计”（responsive Web design）及其背后的技术包。想要对此有所了解，参见他发表在A List Apart上的文章（www.alistapart.com/articles/responsive-web-design/）。他在Responsive Web Design一书中对此作了深入探讨，强烈推荐读者去读一读。自适应布局使用了一些相同的技术。）

  • 弹性（elastic）布局对宽度和其他所有属性的大小值都使用em，从而让页面根据用户的font-size设置进行缩放。

没有一种布局方式可以适用于所有的情景，事实上还有一些混合的方式。本章将讲解如何创建一个混合流式布局和固定布局的布局：每栏都是流式的、基于百分数的宽度，从而可对其进行放大或缩小，不过整个页面宽度拥有一个固定的最大宽度，限制了它能放大到的宽度。