网站重构：应用Web标准进行设计（第2版）

引言 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