网站重构：应用Web标准进行设计

Jeffrey Zeldman用他敏锐的分析来帮助我们了解Web标准如何促进搜索引擎变得更友好，以及Web 2.0的应用给网络媒体带来的新的活力。读者也将从《网站重构：应用Web标准进行设计（第2版）》学习到最新的、兼容多浏览器的CSS布局技术，学习到使Web内容有更好的易用性（accessible）的方法并将从中获益匪浅。

《网站重构：应用Web标准进行设计（第2版）》与第1版保持同样的写作风格，作者用幽默诙谐语言，把复杂的事情讲得简单明了，引人入胜。书的核心依然是指导我们如何建立一个显示的速度更快、能访问的用户更多、设计和维护成本更低的网站。
畅销书作者、网页设计师、Web标准的“传教士”Jeffrey Zeldman已经对他震撼业界的经典书籍《网站重构：应用Web标准进行设计（第1版）》进行了升级更新。新版（现在原版书是全彩的）增加了在第1版出版之后各浏览器的发展动态以及为适应标准化设计所做的最新改进。

Jeffrey Zeldman，是最早一批Web设计师之一，之前他曾担任艺术总监和广告文案撰稿人。1995年，他开始建立最有影响力的个人站点撰写Web设计方面理论的经验教程，该网站拥有广泛的读者。
1998年，他牵头创建了Web标准推广组织“The Web Standards Project”。这是一个民间自发的组织，主要目的是说服Microsoft和Netscape在他们开发的浏览器中支持相同的技术。同年，他为“网站建设者”们建立了“A List Apart”，成为当时业界最有权威和影响力的电子杂志。
Jeffrey Zeldman是“Happy Cog”的发起人之一和创意总监（Happy Cog则是一位Web设计和用户体验专家），他写过许多文章，出版过两本书，其中包括这本“Designing With Web Standards”。他是一位深受读者喜爱的环球演讲师，在2005年，Jeffrey和Eric Meyer共同创办了“An Event Apart”，一个关于Web标准设计和编码的传播会议。
Ethan Marcotte（第2版技术编辑）
Ethan Marcotte从事网络设计和开发已将近十年，但他依然对本书介绍的知识感到惊诧和兴奋。他是Vertua工作室的发起人和首席设计师，致力于建设基于标准的、美观的、可用性好的网站。
Ethan在基于标准设计方面已经初露锋芒，受人尊敬。他是世界Web设计大会（Web Design World）和SxSW（the South by Southwest）交互大会的特邀演讲人，并维护一个受人喜爱的小博客（sidesh0w.com，虽然更新不多）。他的客户包括：纽约杂志（New York Magazine）、哈佛大学、迪士尼和道富银行（State Street Bank）等。
Ethan的个人网站是unstoppablerbotninja.com。
J. David Eisenberg（第1版技术编辑）
J. David Eisenberg住在加利福尼亚州的圣何塞（San Jose），和他的两只可爱的猫：Marco、Big Tony一起生活。他在长春谷学院（Evergreen Valley College）教授HTML、XML、Perl和JavaScript课程，喜欢写网络教程。他还是“SVG Essentials”（SVG编程指南）以及“OASIS OpenDocument Essentials”（OASIS开放文档格式指南）两本书的作者。
在美国伊利诺大学时，David曾参与过PLATO计算机辅助教学项目（PLATO computer-assisted instruction project）的开发，还为Burroughs公司和Apple公司工作过。
Eric Meyer（第1版技术编辑）
Eric Meyer从1993年的晚些时候起就开始在Web上工作，他是CSS和Web标准应用方面国际公认的专家，是最棒的CSS图书作者、CSS方面的权威泰斗。他的七本书被翻译成六种语言，销售了几千万册。目前Eric是Complex Spiral Consulting公司的总监，致力于帮助客户使用Web标准来缩减成本、改善用户体验。他帮助的对象从大学到政府实验室，到世界财富500强公司都有。近期比较知名的客户包括：America On-Line（美国在线）、Apple（苹果）公司、Macromedia、Sandia National Laboratory（美国桑地亚国家实验室）和Wells Fargo Bank（美国富国银行）。

引言 1
第1部分 休斯顿，我们遇到麻烦了
在开始之前 11
费用上升，效益下降 12
终止网站淘汰的怪圈 14
什么是向后兼容 15
没有规则，没有教条 16
实践，不是理论 18
这样的转变真的必需吗 20

第1章 99.9%的网站都是过时的 21
1.1 现代浏览器和Web标准 22
新版本中的新代码 24
1.2 “多浏览器版本”问题 25
1.3 向前兼容的代价 27
1.3.1 过时的标记：网站所有者的成本 31
1.3.2 向前兼容 33
1.3.3 屏蔽用户对商务不利 33
1.3.4 愚蠢之路 38
1.4 垃圾代码 39
1.5 治疗 41

第2章 根据标准设计和制作 43
2.1 历经磨难 45
2.2 无标准时代的设计成本 46
2.3 时髦的站点，古老的方法 47
2.4 悲惨的王国 51
2.5 Web标准三剑客 53
2.5.1 结构 53
2.5.2 表现 56
2.5.3 行为 57
2.6 实际应用 57
2.7 过渡方法的好处 58
2.8 Web标准组织：跨平台性 60
文档一次建立，随处使用 63
2.9 “A List Apart”：一个页面，多种浏览方式 63
2.9.1 屏幕以外的设计 65
2.9.2 节约时间和成本，增加扩展性 66
2.10 我们要去往哪里 67
2.10.1 过渡型的向后兼容（混合设计） 67
2.10.2 严格的向后兼容 69

第3章 推广标准的困难 73
3.1 看起来漂亮，代码却丑陋 74
3.1.1 共同的目标，共同的手段 76
3.1.2 理解vs真实 77
3.2 2000年：浏览器之年 78
3.2.1 IE5/Mac：DOCTPE转换和放大 79
3.2.2 Netscape的大胆转移 82
3.2.3 普遍支持 82
3.3 太少，太迟 83
CSS：第一次尝试 84
3.4 糟糕的浏览器养成坏习惯 84
3.4.1 默认样式的缺点 85
3.4.2 缺乏继承 86
3.4.3 混乱的交互行为 87
3.4.4 最终的标准化脚本语言 88
3.5 混乱的网站和令人困惑的标签 89
3.5.1 理论vs经济 90
3.5.2 软件会帮你做 91
3.5.3 了解产品vs了解标准 91
3.6 字母F 92
3.6.1 Flash的价值 94
3.6.2 使用Flash的问题 96
3.6.3 另外一些使用Flash的问题 96
3.7 兼容是一个禁忌词语 97
3.7.1 语言对于形成理解的威力 97
3.7.2 灵感问题 98
3.7.3 其他问题 99

第4章 可寻性、聚合、博客、播客、长尾、Ajax（和其他标准胜利的理由） 101
4.1 通用的语言（XML） 103
4.1.1 XML和HTML的比较 104
4.1.2 一个父母，多个孩子 105
4.1.3 专业定制软件的基本要素 105
4.1.4 比White Rapper更流行 106
4.1.5 选择XML的五个因素 108
4.1.6 创造力的宝藏 109
4.1.7 Web发布工具 113
4.1.8 等候你的使用 114
4.2 XML应用程序和你的站点 116
4.3 与生俱来的兼容性 116
4.4 协作的新时代 117
4.4.1 校验程序及其规范 117
4.4.2 校验程序是怎么工作的 118
4.4.3 WHAT工作小组 119
4.4.4 IE7和Web标准组织
4.4.4 WaSP 119
4.5 Web标准和创作工具 120
4.5.1 Dreamweaver特别小组 120
4.5.2 WYSIWYG工具的成熟 121
4.5.3 从FrontPage到Expression Web Designer 122
4.6 CSS布局的出现 122
4.6.1 浏览器向标准升级之战 123
4.6.2 风起云涌 126
4.6.3 无数正在转变的个人网站和他们依靠的帮助网站 128
4.6.4 最全的CSS知识库 131
4.7 流行时尚 131
4.8 Web标准的主流 132
4.8.1 商业站点冒险尝试 134
4.8.2 Wired Digital的重构 135
4.8.3 设计师的转变 137
4.8.4 点击随之而来 139
4.8.5 通过校验是成功的保证 140

第2部分 设计与构建
第5章 现代标记语言 143
5.1 垃圾代码标记的可耻秘密 148
5.2 重新阐述了什么 150
5.3 执行概要 152
5.4 什么样的XHTML适合您 152
5.4.1 XHTML 2为我还是为你而生 152
5.4.2 切换到XHTML的10个最主要的理由 154
5.4.3 不要切换到XHTML的5个最主要的理由 155

第6章 XHTML：Web重构 157
6.1 转换到XHTML：规则
6.1 简单，容易上手 158
6.1.1 用正确的文档类型（DOCTYPE）和命名空间（Namespace） 158
6.1.2 声明你的内容类型 161
6.1.3 用小写字母书写所有的标签 163
6.1.4 给所有属性值加引号 165
6.1.5 所有属性都需要值 166
6.1.6 关闭所有的标签 167
6.1.7 “空”标签也要关闭 167
6.1.8 不要在注释内容中使用“——” 168
6.1.9 将所有的<和&符号编码 168
6.2 执行概要：XHTML
6.2 的规则 169
6.2.1 字符编码：无趣，
5.4.1 很无趣，真的无趣 169
6.2.2 结构康复——对我有益 171
6.2.3 用理性代替样式来标志你的文档 171
6.3 视觉元素和结构 175

第7章 紧凑而坚固的页面保证：以严格和混合的标记组成的结构 177
7.1 所有的元素都必须是结构化的吗 178
7.1.1 div、id和其他助手 179
7.1.2 语义化标记和可重用性 183
7.2 混合布局和简洁的标记：
7.2 要做什么和不要做什么 187
7.2.1 给坏习惯命名 187
7.2.2 在超文本标记中的普遍错误 188
7.2.3 divs刚刚好 191
7.2.4 热爱id 192
7.2.5 消除冗余的表格单元 194
7.3 过时方法的展示 195
7.3.1 映射的时代 195
7.3.2 映射和它的不足 196
7.3.3 没有结构就没有可访问性 197
7.3.4 切割 197
7.3.5 切割时代 198
7.3.6 多余的冗长表格 199
7.3.7 劣质CSS登场 200
7.3.8 继续前进 204

第8章 XHTML的示例：混合布局（第一部分） 205
8.1 本章使用的过渡方法的好处 206
用样式表代替JavaScript 206
8.2 基本方法（概述） 206
8.2.1 分割表格：CCS和可访问性的优点 208
8.2.2 什么是跳过导航，以及为什么跳过 208
8.2.3 附加的id属性 213
8.3 开始标记和结束标记是对应的 214
8.3.1 导航标记：第一个表格 215
8.3.2 陈述、语义、纯度、错误 216
8.3.3 内容标记：第二个表格 217

第9章 CSS入门 219
9.1 CSS概述 220
CSS的优点 220
9.2 样式解析 222
9.2.1 选择器、声明、属性和值 222
9.2.2 多重声明 223
9.2.3 空格和不区分大小写 224
9.2.4 字体选择和默认值 225
9.2.5 群选择符 226
9.2.6 继承和它的不足之处 226
9.2.7 包含选择符 228
9.2.8 id选择符和包含id选择符 229
9.2.9 类别选择符 230
9.2.10 组合使用选择符创造精致的设计效果 231
9.3 外联、嵌入、内联样式 234
9.3.1 外联样式表 234
9.3.2 内联样式 238
9.4 “最合适方案”设计方法 238
9.4.1 从嵌入样式到外联样式：双表法 239
9.4.2 相对及绝对文件路径 240
9.4.3 最佳方案设计法和双表法的优点 240

第10章 CSS应用：混合布局（第二部分） 243
10.1 准备图片 244
10.2 设置基本参数 246
10.2.1 总体样式，关于缩写和边距的更多内容 246
10.2.2 隐藏与块 247
10.2.3 给链接加上颜色（推荐用伪类属性） 249
10.2.4 其他一般元素示意图 251
10.2.5 关于字号的更多内容 253
10.2.6 设置页面分界线 256
10.3 导航元素：第一个步骤 259
10.4 CSS导航条：在第二个步骤的第一次尝试 262
10.5 CSS导航条：最后一个步骤 263
10.6 最后一个步骤：外联样式和“You Are Here”效果 268

第11章 使用浏览器
第一部分：DOCTYPE转换和标准

第11章 模式 271
11.1 DOCTYPE转换的传奇故事 272
11.1.1 控制浏览器性能：DOCTYPE转换 274
11.1.2 所有完整的XHTML DOCTYPE 277
11.2 感谢浏览器的多样性！（或至少学会接受） 280

第12章 使用浏览器
第二部分：第12章 盒模型、bug和工作区 285
12.1 盒模型和它的不足之处 286
12.1.1 盒模型是怎样工作的 287
12.1.2 盒模型是怎样失效的 288
12.1.3 盒模型Hack方法：
12.1.3 使CSS更安全 295
12.2 IE/Windows上的空格bug 298
12.3 IE6/Windows上的漂浮“（Float）”bug 302
漂浮（Float），时隐时现，远离 304
12.4 Flash和Quick Time，期望的对象 304
12.4.1 可嵌入对象 305
12.4.2 折中方法：在支持标准的同时嵌入多媒体 306
12.4.3 对象故障 307
12.4.4 权宜之计 308

第13章 使用浏览器
第三部分：排版 311
13.1 字号问题 311
13.2 用户控制 312
13.3 守旧的方法 312
磅值产生差异 314
13.4 目前使用的标准尺寸，但它又能延续多久 315
13.4.1 好工作会被随便一个单击而否定 318
13.4.2 探寻被遗忘的角落：对浏览器上变化的错误反应 318
13.4.3 标准尺寸和最佳做法 320
13.5 em理论的失败 321
用户的选择和em单位 321
13.6 像素的作用 322
13.6.1 最小的单位：它是相对而言的 323
13.6.2 像素的缺点 324
13.7 字体关键字法 325
13.7.1 为什么关键字比em和百分比好 325
13.7.2 关键字执行程序的首要问题 326
13.7.3 可用字体：持续问题 329

第14章 可访问性基础 331
14.1 有关访问性的书籍 333
14.2 普遍的错误观念 334
天才的参与 335
14.3 法律和布局 338
508条款的解释 339
14.4 深入分析对可访问性的错误说法 341
14.4.1 错误的说法：可访问性迫使你要为网站创建两个版本 341
14.4.2 错误的说法：纯文档网站能给每个人都提供相等的可访问性 341
14.4.3 错误的说法：可访问性代价太高 341
14.4.4 错误的说法：可访问性迫使你创建原始的、低档的设计 343
14.4.5 错误的说法：根据508
14.4.4 条款，网站必须在所有的浏览器和用户代理上看上去都一样 344
14.4.6 错误的说法：可访问性“只是为残障人士服务的” 344
14.4.7 错误的说法：Dreamweaver MX/Cynthia Says/Lift/InsertTool Name以及其他一些工具可以解决所有可访问性问题 345
14.4.8 错误的说法：如果客户提出可以忽略可访问性，设计师就可以不理睬可访问性条款 346
14.5 关于可访问性的一点技巧，一个元素接一个元素 346
14.5.1 图片 346
14.5.2 苹果的QuickTime和
14.5.2 其他视频流媒体 349
14.5.3 Macromedia Flash 4/5 349
14.5.4 Macromedia Flash MX和Flash 8 349

第1部分 休斯顿，我们遇到麻烦了
在开始之前
本书是为那些希望自己的网站成本变得更低，运行得更好，访问者更多的网页设计师、开发者、网站所有者及管理者写的。如果你希望自己的网站不仅仅能适应目前的浏览器、屏幕阅读器和无线设备，也能适应明天的、明年的甚至更长远的新设备，那么本书正是你所需要的。
由于技术的快速发展，大部分网站已经不可避免地经历了几轮淘汰。每当浏览器升级或者新的网络设备和技术出现时，刚建成（或者刚支付了建设费用）的网站看起来就已经过时了。
我们建立网站的目的似乎就是为了再次升级。通常情况下，改版升级并没有增加客户需要的功能或者提高网站的可用性，仅仅是为了跟上新的浏览器和设备，并且预算一定会超出我们的计划和开发周期。
即使偶尔有一个新浏览器或设备的出现没有影响我们网站的情况，但我们采用的“向前兼容”技术（让站点在所有的浏览器版本中的外观和行为均一样）也会迫使我们花费大量人力和财力。“这些是在Web上做生意必须付出的代价”——我们已经习惯这样，甚至成了标准。但是这样的成本是大多数人不能长期承受的。
费用上升，效益下降
复杂的代码、层层嵌套的表格、标签，以及其他的冗余代码使简单的页面打开需要两至三倍的带宽。访问者花钱上网并不是为了无休止地等待页面打开，除了少数有毅力和耐心的客户能等到所有页面打开，大多数人早已因厌倦而离开，这样的网站是难以让人去访问的。
我们托管或者租用服务器也都是有费用的，如果打开一个原本只需要20KB就可以满足需求的页面，现在却要耗费60KB的带宽——那我们就不得不为这浪费的40KB带宽向ISP支付更多费用（或者增加我们的IT预算）。我们的网站访问者越多，所需的成本就越高。为了应付一些特别的前端设计，我们的数据库需要支持更多的查询，费用进一步增加。最终，我们不得不购买或者租用更多的服务器来满足服务需求；但费用增加不是因为访问者增加，而是因为臃肿冗余的标记和代码。
网站开发过程中，我们聘用的程序员都是按小时计价的（注：国外计费方式），“六版本”方法（针对不同版本浏览器写六种不同页面以保证页面表现效果一致）使成本非常高，甚至花光我们所有的钱。如果这时侯，又有新的浏览器版本或无线设备出现，而我们却没有更多的钱来升级代码以适应新浏览器新设备了，那么我们就只能等着被淘汰。
许多人都曾经遇到过这样吃惊的体验：用新浏览器访问一个网站时，被告知浏览该网站需要一个“更新”版本的浏览器，其实这个“更新”版本的浏览器比我们正在使用的版本要老很多。实际原因通常是：那个网站并不愚蠢，也不是不顾及别人，只是用尽了他们的预算，没有更多的钱去继续维护这个网站，这个网站已经被淘汰、被放弃了。
在另外一些例子中，问题并不是缺少资金，而是缺乏知识，或是投资被误导。Connected Earth，这个口号为“How communication shapes the world”的公司，据报道最近花费了100万英镑（约合180万美元）重新设计了网站。尽管在开发上投入了庞大的资金，但这个网站居然不支持目前多数主流的浏览器，网站拒绝Mozilla（如图l所示）、Netscape 6/7及Opera（如图2所示）浏览器的访问，同时也不支持所有非Windows操作系统的浏览器。而Macintosh的浏览器（包括Mac IE）的用户就更不幸了。

　　距离《网站重构——应用Web标准进行设计（第1版）》的出版，已经两年了。
　　现在，越来越多的网页设计师熟悉并使用Web标准来构建网站，越来越多的企业领导者们也意识到Web标准带来的好处（大的门户网站，以及企业公司网站也采用了Web标准来构建），用Web标准构建的网站更是如雨后春笋般，比比皆是。
　　同时，很多网页设计师正在通过论坛或者博客等方式自发地组织讨论着关于Web标准的知识和分享交流Web标准设计的经验。因此，我们很欣慰地看到，用Web标准构建网站已经成为当今网页设计这个行业的潮流和方向。
　　我们在《网站重构——应用Web标准进行设计（第1版）》的翻译过程中，浏览器业发生了不少的变化；出版以后，我们也收到了许多设计师及读者们的批评意见和建议。而通过翻译这本书，我们也结识了许许多多的网页设计师，在这两年里一起交流学习，共同成长，获益匪浅。作为本书的译者，在这里衷心地感谢所有《网站重构——应用Web标准进行设计（第1版）》的读者们，谢谢你们对本书的关注，谢谢你们对Web标准的关注。
　　IT行业技术更新很快，作为本书的作者Jeffrey Zeldman先生，在第1版的基础上，及时地更正了一些落后的资讯，并且补充了一些最新的有关Web标准的信息，出版了“Designing with Web Standards”第2版，我们也重新翻译了《网站重构——应用Web标准进行设计》的第2版，希望能让国内的网页设计师及时获得并了解到国外最新的Web标准方面的信息。
　　总之，我们希望《网站重构——应用Web标准进行设计（第2版）》的翻译和出版能给目前日益普及的Web标准设计再添一把力，让更多的设计师来使用Web标准设计构建网站，让更多符合Web标准的网站涌现。
　　再次衷心地感谢所有关注《网站重构——应用Web标准进行设计》这本书的读者们！
　　译者
　　2007年12月于北京