渐进增强的Web设计PDF电子书下载

第一部分 测试驱动的渐进增强方法 2

第1章 我们的方法 2

1.1测试浏览器能力 3

1.2规划渐进增强：X光透视 4

1.3从X光到实践：渐进增强开发的构成 5

1.4理论结合实践 6

第2章 渐进增强实践：X光透视 7

2.1 X光透视概述 7

2.1.1定义内容层级并将组件映射到HTML 8

2.1.2编写基础标记和尽可能少的安全样式 10

2.1.3应用标记、样式和脚本增强 11

2.2案例1：规划新闻网站的结构和组织方式 12

2.2.1评估内容组织和命名方式 12

2.2.2借助原生HTML层级功能实现内容组织 13

2.2.3构建导航 14

2.2.4处理分层和动画内容 15

2.2.5支持动态过滤和排序 16

2.3案例2：结账表单中的工作流、验证和数据提交 17

2.3.1解构结账表单设计 17

2.3.2标记表单以确保可访问性 23

2.3.3添加限制与验证 24

2.3.4组合基本和增强体验 25

2.4案例3：预算计算器里的交互数据可视化 25

2.4.1选择预算线组件的基本标记 26

2.4.2从基础标记开始创建可访问的滑块 28

2.4.3制作饼图 28

2.5案例4：支持功能完备浏览器应用程序的各种功能——照片管理器 30

2.5.1制作全局导航元素的标记 31

2.5.2支持专辑和多张照片的复杂交互 32

2.5.3创建自定义表单和叠加 37

2.5.4创建返回按钮支持 38

2.6在实践中运用X光的核对清单 39

第3章 编写有意义的标记 40

3.1标记文本和图像 41

3.1.1用于标记有意义文本的元素 41

3.1.2列表 45

3.1.3表格式数据 46

3.1.4图像 48

3.1.5嵌入式富媒体 49

3.1.6嵌入外部网页内容 50

3.2标记交互内容 51

3.2.1锚链接 51

3.2.2表单结构 51

3.2.3表单控件 53

3.3创建页面环境 57

3.3.1了解何时该用块级元素或内联元素 58

3.3.2用ID和类标识元素 59

3.3.3用WAI-ARIA路标角色标识页面主要版块 60

3.3.4保持源代码顺序清晰易读 60

3.3.5使用title属性 62

3.4建立一张HTML文档 63

3.4.1 DOCTYPE 64

3.4.2文档头 65

3.5加入可访问性 68

3.5.1可访问性指导原则和法律标准 69

3.5.2 Web内容可访问性指南 70

第4章 有效应用样式 71

4.1将样式应用到网页 71

4.1.1将样式保存在外部样式表里 71

4.1.2链接到外部样式表 72

4.1.3使用有意义的命名惯例 74

4.2为基本和增强体验添加样式 74

4.2.1基本体验里的安全样式 75

4.2.2为增强体验添加样式 76

4.3可访问性的考虑要点 77

4.4应对bug和浏览器差异 78

4.4.1条件注释 78

4.4.2常见问题和变通方法 79

第5章 编写增强和交互脚本 83

5.1如何正确引用JavaScript 83

5.1.1避免内联JavaScript 83

5.1.2引用外部JavaScript 84

5.2理解JavaScript在基本体验里的位置 84

5.3脚本增强的最佳实践 85

5.3.1在内容就绪时运行脚本 85

5.3.2给标记应用行为 85

5.3.3用JavaScript构建增强标记 87

5.3.4管理内容可见性 89

5.3.5应用样式增强 90

5.4保持和增强可用性与可访问性 90

5.4.1实现键盘访问 91

5.4.2指派WAI-ARIA属性 92

5.43测试可访问性 93

5.4.4维持状态和“后退”按钮 93

第6章 测试浏览器能力 95

6.1 EnhanceJS：一套能力测试框架 95

6.2通过EnhanceJS应用增强 98

6.3配置EnhanceJS 100

6.3.1载入额外的样式表 101

6.3.2载入额外的脚本 102

6.3.3自定义体验切换链接 103

6.3.4强制通过或不通过EnhanceJS测试 104

6.4扩展EnhanceJS测试套件 105

6.4.1用EnhanceJS选项修改测试套件 105

6.4.2创建EnhanceJS的新实例或多个实例 105

6.4.3为调试开启能力测试警告 106

6.5在服务器上优化EnhanceJS 107

第二部分 渐进增强实战 110

第7章 用渐进增强方法构建组件 110

7.1组件是如何编写的 110

7.2在组件各章里导航 111

7.3可下载的范例代码 112

第8章 可折叠内容 113

8.1 X光透视 113

8.2创建可访问的可折叠内容 115

8.2.1基础标记和样式 115

8.2.2增强标记和样式 116

8.2.3实现可折叠的增强脚本 119

8.3使用可折叠脚本 121

第9章 标签页 122

9.1 X光透视 122

9.2创建标签页 124

9.2.1基础标记和样式 124

9.2.2增强标记和样式 126

9.2.3标签页脚本 130

9.3让标签页更进一步 132

9.3.1书签和历史（后退按钮）追踪 132

9.3.2自动轮换的标签页 135

9.3.3引用外部标签内容 136

9.3.4将标签页显示为手风琴组件 136

9.4使用标签页脚本 136

第10章 工具提示 138

10.1 X光透视 138

10.2用title内容创建工具提示 142

10.2.1基础标记和样式 142

10.2.2增强标记和样式 143

10.2.3工具提示增强脚本 145

10.3用锚链接创建工具提示 146

10.4用外部来源创建工具提示 148

10.5使用工具提示脚本 150

第11章 树形控件 151

11.1 X光透视 151

11.2创建树形控件 154

11.2.1基础标记和样式 154

11.2.2增强标记和样式 156

11.2.3树形控件增强脚本 159

11.3使用树形控件脚本 165

第12章 HTML5 canvas图表 167

12.1 X光透视 168

12.2基础标记 169

12.3创建可访问的图表 172

12.3.1解析表格数据 172

12.3.2用canvas实现数据可视化 176

12.3.3添加表格增强样式 183

12.3.4保持数据的可访问性 184

12.4让canvas图表更进一步：visualize.js插件 186

第13章 对话框和叠加层 189

13.1 X光透视 190

13.2创建对话框 191

13.2.1基础标记和样式 191

13.2.2增强标记和样式 193

13.2.3对话框增强脚本 198

13.3让对话框更进一步 202

13.4使用对话框脚本 202

第14章 按钮 206

14.1 X光透视 206

14.2给基于input的按钮添加样式 208

14.2.1基础标记和样式 208

14.2.2增强标记和样式 210

14.2.3悬停状态增强脚本 213

14.3创建带有复杂视觉格式的按钮 214

14.3.1基础标记和样式 215

14.3.2增强标记和样式 215

14.3.3 input转button增强脚本 216

14.4使用input转button脚本 219

14.5让按钮更进一步 219

第15章 复选框、单选按钮和星级评分 221

15.1 X光透视 222

15.2创建自定义复选框 224

15.2.1基础标记 224

15.2.2增强标记和样式 225

15.2.3复选框脚本 228

15.3创建自定义单选按钮 230

15.3.1基础标记 230

15.3.2增强标记和样式 231

15.3.3单选按钮脚本 233

15.4让自定义input更进一步：星级评分组件 235

15.4.1基础标记 236

15.4.2增强标记和样式 237

15.4.3编写星级评分组件脚本 238

15.5使用自定义input和星级评分脚本 241

第16章 滑块 242

16.1 X光透视 242

16.2创建滑块 246

16.2.1基础标记和样式 246

16.2.2增强标记和样式 247

16.2.3滑块脚本 252

16.3使用滑块脚本 257

第17章 下拉菜单 260

17.1 X光透视 260

17.2创建可访问的自定义下拉菜单 262

17.2.1基础标记和样式 262

17.2.2增强标记和样式 263

17.2.3自定义下拉菜单增强脚本 270

17.3让自定义下拉菜单更进一步：给选项添加高级样式 277

17.4使用自定义下拉菜单脚本 279

第18章 列表生成器 281

18.1 X光透视 281

18.2创建列表生成器 283

18.2.1基础标记和样式 283

18.2.2增强标记和样式 284

18.2.3列表生成器脚本 287

18.3让列表生成器更进一步：多项选择、排序、自动完成和上下文菜单 292

18.3.1多项选择 292

18.3.2拖放排序 292

18.3.3自动完成 293

18.3.4上下文菜单 293

18.4使用列表生成器脚本 293

第19章 文件输入控件 295

19.1 X光透视 296

19.2创建自定义的文件输入控件 298

19.2.1基础标记和样式 298

19.2.2增强标记和样式 299

19.2.3自定义文件输入控件的脚本 302

19.3使用自定义文件输入控件脚本 304

放眼未来 306