从玩弄表格技巧到遵循Web 标准：通盘考虑

2008-04-12 17:26:06

　　首先，你得考虑好一个移植策略。是一口气把整个站点移植了呢，还是逐个逐个部分地一步步完成？

　　检查一下，找出会因为移植而受益的页面和分支。自然而然地，从首页、新产品通告之类的页面开始检查会比较好。

分析你的站点的内容分别属于下面的哪些类型：

分解你的页面，找出逻辑结构

　　如果你已经把站点的内容分好了类，那么是时候分析每个页面，把它们按照逻辑关系进行分解了。

　　注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构(因为我们希望把它们替换为用div 标记组织的那种简单得多的表格结构)。

改变古老的WEB建设习惯，注意以下标签

　　一旦你分析好页面的结构，就可以着手揭开表象，分析你现在的页面代码中可以转换成结构化标记的那些地方。

　　消灭所有的<font> 标记和间隔GIF ！(W3C的说法是：请不要使用这种消灭所有的<font> 标记过时垃圾)

　　搞定<b>ed 和<br>eakfast 标记。

　　去除表格中的那些外观标记(bgcolor, background, 等等)。

　　把纯粹用来表示外观的那些CSS 调用(比如<span class="header">) 改成结构化的标记。

把描述外观的标记改为描述结构的标记

　　你可以使用“查找加替换”(或者正则表达式)，不过最好的方法还是在浏览器里打开这个页面，然后把文本复制粘贴到你的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 中的列表项。

　　记得在尽可能多的浏览器下进行测试。

网站重构要缓行，不能一蹴而就。

　　对于已经采用老的table定位的网站来说，重构是一场噩梦

有什么想说的吗？