漫画图说CSS+DIV网页布局

鸶雯

漫画图说CSS+DIV网页布局（上）
2003 年在美国旧金山召开过一次名为Seybold的 有关设计与排版的研讨会，。
在这个研讨会上，美国的一个叫做 Scott Design的公司，做过一个关于CSS网页布局与传统表格布局之间比较的讲演，生动有趣，今天的内容就是根据那次讲演的文档进行的讲解。
主要内容是希望说明为何使用表格排版为什么是不明智的。表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border=”0″ 使得设计师可以将图片和文本放在这无形的网格中。迄今为止，表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法。下面我们开始寻找这个问题滋生的源头，并学习创建过渡性的，甚或完全不需表格的排版方式。
使用表格进行页面布局会带来很多问题问题：
* 把格式数据混入你的内容中。
　　 o 这使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息。
　　 o 带宽并非免费。
* 这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。
* 这还使我们保持整个站点的视觉的一致性极难，花费也极高。
* 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。
而使用CSS进行网页布局这样一种工作方式，它会：
* 使你的页面载入得更快
* 降低你的流量费用
* 让你在修改设计时更有效率而代价更低
* 帮助你的整个站点保持视觉的一致性
* 让你的站点可以更好地被搜索引擎找到
* 使你的站点对浏览者和浏览器更具亲和力
* 在世界上越来越多人采用 Web 标准时，它还能 提高你的职场竞争实力 (事实上也就是降低失业的风险)。
我们还会讨论如何用层叠式样式表 (CSS) ——也许是一个和你曾经采用的方式 (表格) 有些微不同的——思维方式来处理你的内容和标记。
因此，解决方案就是使用CSS 与结构化标记，通过在 HTML 文档中使用结构化的标记以及层叠式样式表来排版，我们可以使页面的实际内容与它们呈现的格式相分离。



漫画图说CSS+DIV网页布局（中）
使用CSS进行网页布局的基本思想就是：结构化标记，所写即所想，所想即所写。即便书写 CSS 很简单，使用 CSS 来排版却真的需要一种和我们以往有些不同的思维方式。
我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构。
我们用 h1标记来标示最重要的头条；次一级的条目则用 h2 来标记，以此类推；而段落则放在 p标记中。
这就是我们称之为“结构标记”或“语义标记”的东西。
你的内容将不放在表格和表格元素中，取代它们的是 div 元素。还要给你的 div 元素安排一个 id 或 class，不过这是为了描述它们的内容或功能，而非它们的外观。
在今天的讲解内容中，我们通过两个实例，演示了使用CSS进行网页布局的基本思想，以及用这种方法与用表格布局相比，所带来的巨大的好处。
希望大家在看了这些讲解以后，在头脑中可以建立起来使用CSS/DIV布局思维方式，以及Web标准的意识，这样对今后在工作中更好地运用这些方法，都是具有十分重要的意义的。



漫画图说CSS+DIV网页布局（下）
从玩弄表格技巧到遵循 Web 标准
首先，如果要重构一个用表格布局的网站，需要考虑好一个移植策略。是一口气把整个站点移植了呢，还是逐个逐个部分地一步步完成？
检查一下，找出会因为移植而受益的页面和分支。自然而然地，从首页、新产品通告之类的页面开始检查会比较好。
分解页面
如果已经把站点的内容分好了类，那么是时候分析每个页面，把它们按照逻辑关系进行分解了。
　* 主导航条
　　 * 子导航条
　　 * 页眉与页脚
　　* 内容
　　 * 相关信息
　　 * 其他
注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构 (因为我们希望把它们替换为用 div 标记组织的那种简单得多的表格结构)。
检查应该替换的标记
一旦分析好页面的结构，就可以着手揭开表象，分析你现在的页面代码中可以转换成结构化标记的那些地方。
* 作为一个完美主义者，消灭所有的 font 标记和间隔 GIF 吧！
　　* 同样的，一并搞定 b 和 br 标记。
　　* 去除表格中的那些外观标记 (bgcolor, background, 等等)。
　　* 把纯粹用来表示外观的那些 CSS 调用 改成结构化的标记。
把描述外观的标记改为描述结构的标记
可以使用“查找加替换”(或者正则表达式)，不过最好的方法还是在浏览器里打开这个页面，然后把文本复制粘贴到你的 HTML 编辑器里。
关键还是要用结构化的方式来思考！仅仅把b 标记替换为 strong 是远远不够的。
最重要的条目是哪个？用 h1 来标记它。次要一点的就用 h2，依此类推。用 p 来标记段落。把导航条标记为无序列表。
选定一个 DOCTYPE 来使用。(我们推荐 XHTML transitional，除非你是此道高手，否则别用 XHTML strict。)
把你的页面合理分布在的 div 中
把你的主导航条放在一个 id 属性设为 mainnav 的 div 中，子导航条则放在一个 id 或者 class 是 subnav 的 div 中。而页脚类似这个形式：[div id=”footer”]，至于整个页面，它被放在 [div id=”content”] 里边。
即便现在它还不怎么讨人喜欢，但只要你开始给样式表添加规则，它就会马上变得可爱起来。
是开始自己编写 CSS 的时候了
首先，给每个 div 设置一个边界。例如： div {border: 1px dotted gray; padding: .5em} 这可以帮助你完完整整地看到里边的内容，也不再需要卷动屏幕了。
首先为以定义的元素编写 CSS (html, body, p, h1, h2, ul, li, 等等。)
尽量运用上下文相关或者有递归下降结构的选择符。这可以使得你的标记更清晰。例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 将能够只能影响你的子导航栏的 div 中的列表项。