漫画图说CSS+DIV网页布局（上）

本节课时长15分00秒，下载文件14.9兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。

2003 年在美国旧金山召开过一次名为Seybold的 有关设计与排版的研讨会，详情请见 http://www.seybold365.com/sf2003/。

在这个研讨会上，美国的一个叫做 Scott Design的公司，做过一个关于CSS网页布局与传统表格布局之间比较的讲演，生动有趣，今天的内容就是根据那次讲演的文档进行的讲解。

主要内容是希望说明为何使用表格排版为什么是不明智的。表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border=”0″ 使得设计师可以将图片和文本放在这无形的网格中。迄今为止，表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法。下面我们开始寻找这个问题滋生的源头，并学习创建过渡性的，甚或完全不需表格的排版方式。

使用表格进行页面布局会带来很多问题问题：

* 把格式数据混入你的内容中。
　　 o 这使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息。
　　 o 带宽并非免费。
* 这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。
* 这还使我们保持整个站点的视觉的一致性极难，花费也极高。
* 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。

而使用CSS进行网页布局这样一种工作方式，它会：

* 使你的页面载入得更快
* 降低你的流量费用
* 让你在修改设计时更有效率而代价更低
* 帮助你的整个站点保持视觉的一致性
* 让你的站点可以更好地被搜索引擎找到
* 使你的站点对浏览者和浏览器更具亲和力
* 在世界上越来越多人采用 Web 标准时，它还能 提高你的职场竞争实力 (事实上也就是降低失业的风险)。

我们还会讨论如何用层叠式样式表 (CSS) ——也许是一个和你曾经采用的方式 (表格) 有些微不同的——思维方式来处理你的内容和标记。

因此，解决方案就是使用CSS 与结构化标记，通过在 HTML 文档中使用结构化的标记以及层叠式样式表来排版，我们可以使页面的实际内容与它们呈现的格式相分离。