Web标准设计

第一章 Web标准不是神话.
1.1 理解Web标准 1
1.1.1 Web标准是什么 1
1.1.2 错误的思维 5
1.1.3 无障碍网页倡议（WAI） 7
1.2 量化Web标准 8
1.2.1 大部分通过W3C校验的网站只是伪标准 8
1.2.2 Web标准要求一览表 9
1.2.3 是追求标准还是理解标准 10
1.3 为什么选择Web标准 11
1.4 CSS为什么着火 12
1.4.1 CSS的作用 12
1.4.2 CSS 布局 VS. 表格布局 13
1.5 我能否学好Web标准 14
1.5.1 我需要具备什么素质和条件才能学好Web标准 14
1.5.2 学习的重点与难点 14
1.6 欲善其事，先利其器 15
1.6.1 软件的选择 16
1.6.2 调试环境 18
第二章 XHTML——浏览器上的新大陆
2.1 一切从语义开始 20
2.2 网页的构成 22
2.3 常见标签 23
2.3.1 标题 23
2.3.2 内容 25
2.3.3 列表 29
2.3.4 表格 31
2.3.5 表单 33
2.3.6 注释 38
2.4 比HTML多出一个X 38
2.4.1 还多了什么 38
2.4.2 谁影响了网页的样子 40
2.4.2.1 浏览器的多模式 40
2.4.2.2 开启通往标准的模式 40
2.4.3 坚持Strict Markup 41
2.4.4 语义化 42
2.5 按语义来分类 42
2.6 块元素与内联元素 43
2.7 div不是神 45
2.7.1 合理应用 46
2.7.1.1 嵌套 46
2.7.1.2 div不是table 47
2.7.2 div与span的差别 48
第三章 CSS——网页美容师
3.1 语法结构 49
3.1.1 基本结构 49
3.1.2 样式表中的注释 50
3.1.3 字符转义 50
3.2 选择符的使用 50
3.2.1 通配选择符 50
3.2.2 类型选择符 51
3.2.3 包含选择符 51
3.2.4 子对象选择符 52
3.2.5 相邻选择符 53
3.2.6 属性选择符 54
3.2.6.1 匹配属性和属性值 54
3.2.6.2 类选择符 55
3.2.7 ID选择符 56
3.2.8 选择符分组 56
3.3 伪元素与伪类 57
3.3.1 伪类 57
3.3.1.1 :first-child伪类 57
3.3.1.2 链接伪类——:link 和 :visited 58
3.3.1.3 动态伪类——:hover、:active与:focus 58
3.3.1.4 语言伪类——:lang 59
3.3.2 伪对象 60
3.3.2.1 :first-letter 60
3.3.2.2 :first-line 60
3.3.2.3 :before和 :after 61
3.4 常用单位 62
3.4.1 长度单位 62
3.4.1.1 px vs. em 62
3.4.1.2 百分比单位 64
3.4.1.3 其他长度单位 64
3.4.2 颜色单位 64
3.5 应用 CSS 在网页上 67
3.5.1 链入外部样式表 67
3.5.2 定义内部样式 68
3.5.3 定义内联定义 69
3.5.4 导入指定的外部样式表 69
3.5.5 各种方式的差异 69
3.5.6 糟糕的手持设备 70
3.6 继承与覆盖 71
3.7 优先权的计算 72
第四章 用XHTML和CSS来“摆”网页
4.1 开始你的第一个页面 74
4.2 文字的表现 76
4.2.1 字体的外型 76
4.2.2 颜色的定义 85
4.2.3 背景的定义 86
4.3 最简单的布局 88
4.3.1 Margin 与 Padding 89
4.3.2 单列固定宽度居中 90
4.3.3 单列自适应宽度 92
4.3.4 奇怪的高度 94
4.3.5 边框的定义 95
4.4 郁闷的盒模型 98
4.5 文字旁边的图片 100
4.5.1 baseline 100
4.5.2 垂直对齐 101
4.5.3 图片的浮动 103
4.6 列表的应用 105
4.6.1 定义列表的外观 105
4.6.2 导航菜单的应用 107
4.6.3 列表的常见应用 113
4.7 表格 114
4.7.1 表格的控制 115
4.7.2 为不同浏览器使用不同的选择符 120
4.7.3 伪表格——看起来像，其实却不是表格 123
4.8 表单 124
4.8.1 样式表单 124
4.8.2 表单元素的细节 131
4.8.3 注册表单 134
第五章 布局之道
5.1 固定的左右分栏 140
5.1.1 经典的三行两列固定宽度的布局 140
5.1.2 两列等高——背景伪造篇（一） 146
5.1.3 自由与未来 149
5.2 自适应的左右分栏 153
5.2.1 经典的三行两列自适应宽度的布局 153
5.2.2 两列等高——背景伪造篇（二） 155
5.2.3 百分比的细节 156
5.2.4 clear:right与overflow 160
5.3 一栏固定宽度，一栏自适应宽度 164
5.3.1 单栏浮动 164
5.3.2 浮动的负值可以让主要的内容优先显示 168
5.3.3 Min & Max 171
5.4 多栏布局 174
5.4.1 三栏固定宽度和自适应的布局 174
5.4.2 混合固定宽度和自适应宽度的多栏布局 176
5.4.3 流出固定宽度的两栏在自适应宽度的中栏后面 177
5.4.4 偏移出来固定宽度的两栏在自适应宽度的中栏后面 181
5.5 组合之路 185
第六章 不要害怕各式各样的浏览器
6.1 浏览器的市场 186
6.1.1 古老的IE5.x 186
6.1.1.1 IE5.x/win 186
6.1.1.2 IE5.x/mac 187
6.1.2 讨厌的IE6 187
6.1.3 里程碑——IE7 187
6.1.4 新一代的IE4 187
6.1.5 开发利刃——Firefox 188
6.1.6 华丽的Oprea 188
6.1.7 异军——Safari 188
6.2 兼容之道 189
6.2.1 条件注释 189
6.2.2 过滤浏览器 190
6.2.3 破坏属性 192
6.2.4 Hack之道 192
6.3 兼容问题 193
6.3.1 一切从浮动开始 193
6.3.2 Layout初体验 195
6.3.3 闭合浮动元素 198
6.3.4 IE受不了浮动 202
6.3.4.1 浮动元素双倍margin 202
6.3.4.2 消失的margin-bottom 204
6.3.4.3 砍掉的内容 206
6.3.4.4 消失的内容 206
6.3.4.5 多了一只“猪” 207
6.3.5 IE的其他问题 208
6.3.5.1 背景消失 208
6.3.5.2 背景原点 209
6.3.5.3 没有内容的内容 210
6.3.5.4 消失的滚动条 211
6.3.5.5 更多的消失 213
6.3.6 Layout全接触 216
6.3.6.1 默认Layout元素 216
6.3.6.2 属性触发Layout 217
6.3.6.3 关于内联元素 217
6.3.6.4 重置hasLayout 217
6.3.6.5 引起问题 218
6.3.7 块级格式化范围（block formatting context）.. 219
6.3.8 其他浏览器的问题 223
第七章 CSS常用技巧
7.1 滑动门技术 224
7.1.1 滑动门的原理 224
7.1.2 当只有文字被放大时 227
7.1.3 一张图片当N个门使用 228
7.1.4 一些可能会被忽略的问题 229
7.1.5 其他的一些应用 231
7.2 圆角 233
7.3 图片的细节 236
7.3.1 载入中的图片 237
7.3.2 加载不了的图片 238
7.3.3 缩放的图片 239
7.3.4 伪类缩放的图片 240
7.4 被放大的文字 245
7.5 当前标识 248
7.5.1 视觉标识 248
7.5.2 面包屑（Breadcrumbs） 250
7.5.3 操作步骤 253
7.6 居中元素 256
7.6.1 垂直居中多行文字 256
7.6.2 未知大小图片在已知大小容器中垂直和水平居中 258
7.6.3 相对页面垂直和水平居中已知大小的容器 260
7.7 隐藏的Tips会出现 262
7.7.1 实现原理 262
7.7.2 图片信息 265
第八章 文字的艺术
8.1 中文的特殊性 268
8.2 缩放机制 269
8.2.1 缩放的文字 270
8.2.2 缩放的盒子 272
8.3 行高与基线 274
8.3.1 行高的细节 274
8.3.2 基线 278
8.3.3 文本空间 280
8.4 input里的文字 283
8.5 链接的范围 284
8.5.1 额外的点击空间 285
8.5.2 缺少的点击空间 285
8.6 不间断的文字 287
8.7 省略掉的文字 288
8.8 字体的介绍 290
8.8.1 中文字体 290
8.8.2 英文字体 293
8.9 语言会影响到字体 296
第九章 细品命名与微格式
9.1 命名规则 298
9.2 命名原则 298
9.3 不再陌生的 Microformats 300
9.3.1 认识微格式 300
9.3.2 从微格式中提炼知识 302
9.4 ID与CLASS选择谁 304
9.5 自定义标签 305
9.6 命名的重要性 306
第十章 换个思维来设计
10.1 消失了文字，看到了彩虹 308
10.1.1 文字变成图片的几种方法 308
10.1.2 文字也可以用Flash来表现 311
10.2 用div代替html/ body 313
10.3 缩放的布局 315
10.3.1 实现原理 315
10.3.2 缩放一半 318
10.3.3 精准em 321
10.4 网页是可以用叠的 322
10.4.1 在一屏幕里显示所有内容 322
10.4.2 图片的位置 332
10.4.3 position:absolute的层叠 335
10.5 百分比加减固定数值 339
10.5.1 50%+200px 339
10.5.2 50%–200px 342
10.6 两列等高——margin负值篇 344
10.7 类display:inline-block的应用 345
第十一章 隐藏在浏览器背后的CSS
11.1 (X)HTML与CSS校验的意义 348
11.2 IE背后的善良 349
11.2.1 IE常见私有属性 349
11.2.2 滤镜 353
11.3 火狐狸的尾巴带着CSS3的味道 360
11.3.1 At-rules 规则 360
11.3.2 Properties 属性 360
11.3.3 Values 属性值 367
11.4 其他浏览器的兼容方案 368
第十二章 JavaScript让Web动起来
12.1 概念 370
12.1.1 什么是JavaScript 370
12.1.2 ECMAScript是什么 371
12.1.3 什么是DOM 371
12.1.4 什么是BOM 372
12.1.5 想法 372
12.1.6 怎样让JavaScript运行 372
12.2 编程基础 373
12.2.1 语法 374
12.2.2 变量 376
12.2.3 基本数据类型 377
12.2.3.1 数值 377
12.2.3.2 字符串 378
12.2.3.3 布尔型 379
12.2.4 表达式与运算符 379
12.2.4.1 算术运算符 379
12.2.4.2 关系运算符 380
12.2.4.3 逻辑运算符 381
12.2.4.4 赋值运算符 381
12.2.5 基本语句 382
12.2.5.1 条件语句 382
12.2.5.2 循环语句 383
12.2.6 函数 384
12.2.7 对象 386
12.3 DOM无处不在 387
12.3.1 把文档表示为树 387
12.3.2 树的节点 388
12.3.3 节点的属性 390
12.3.4 HTML DOM 特征 391
12.4 事件处理 392
12.4.1 什么是事件 392
12.4.2 Event对象 393
12.4.3 事件的绑定 394
12.4.4 分离 396
12.5 只要改变className就可以改变很多——下拉菜单的练习 396
12.5.1 结构的选择 396
12.5.2 分离实现效果 397
12.5.3 想法 401
12.6 表单的辅助 402
12.6.1 检查数据 402
12.6.2 隐式提示 403
12.6.3 创建内容——innerHTML VS createElement 406
12.6.4 setTimeout的用处 409
12.6.5 Ajax初体验 410
12.6.6 HTML5的表单元素 411
12.7 class特效 412
第十三章 亲 和 力
13.1 概念 415
13.2 Web内容可访问性指南 416
13.2.1 并非所有的内容都是显示的 416
13.2.2 保持原有功能的有效性 421
13.2.3 让文字看得见 422
13.2.4 热键操作 423
13.2.5 导航 428
13.2.6 标题与内容 429
13.2.7 语言与编码 430
13.2.8 亲和力声明 430
13.2.9 建议 431
13.3 技术层上的一些亲和力 431
13.3.1 如何让链接变得更有表达能力 431
13.3.2 扩展链接的提示 434
13.3.3 节省步骤 437
13.3.4 图片还是背景图片 440
第十四章 XML的无限变化
14.1 XML的作用 442
14.1.1 XML能做什么 442
14.1.2 XML的表现 442
14.1.3 XML+CSS的表现 443
14.1.4 元素的语义 446
14.1.5 XSLT初体验 448
14.2 XPath与XSLT 450
14.2.1 XPath简介 451
14.2.2 XSLT应用XPath 452
14.2.3 程序性转换的XSLT 454
14.2.4 XSLT常见元素 455
14.2.5 XSLT函数 document 461
14.2.6 XPath定位 462
14.2.6.1 定位路径表达式 462
14.2.6.2 轴 462
14.2.6.3 节点测试 464
14.2.7 XPath基本表达式 464
14.2.8 XPath常见函数 465
14.2.9 X练习 467
14.3 华丽的RSS 467
14.3.1 复习 468
14.3.2 转换时间格式的模板与参数的应用 470
14.3.3 过滤与排序 471
14.3.4 背景色交替 472
14.3.5 显示(X)HTML内容 473
14.3.6 还能做什么？ 475
14.4 XML的周边与命运 475
14.4.1 XML Schema 475
14.4.2 WML 476
14.4.3 SVG 477
14.4.4 XML的未来 478
第十五章 简单的实战
15.1 创建开源社区系统OpenLab的首页 480
15.1.1 分析结构 481
15.1.2 叠出来的头部 482
15.1.3 一张背景的导航 487
15.1.4 表格无敌 489
15.1.5 隐藏内容 499
15.1.6 显示的变化 501
15.2 Ao.A相册 502
15.2.1 分析结构 503
15.2.2 大背景 503
15.2.3 基本结构 505
15.2.4 图片展示 506
15.2.5 浮动的空白 510
15.2.6 小小的Tip提示 513
15.2.7 IE的兼容问题 515
15.2.8 放弃也是一种美！ 519
15.2.9 精准到px 520
15.2.10 让网页动起来——JavaScript 521
15.2.10.1 那JavaScript要应用在哪些地方呢？ 522
15.2.10.2 那使用JavaScript要注意什么呢？ 522
15.2.11 让网页动起来——Flash 524
15.2.12 网页并非会按我们所想的显示 525
15.2.13 网页并不一定要用浏览器看的 527
15.2.14 打印网页 529
15.3 架构前端 530
15.3.1 脚本框架 530
15.3.2 模块化样式表 531
15.3.3 模块化(X)HTML 532
15.3.4 文件架构 533
15.4 给自己做点什么 534
15.4.1 开始设计属于你自己的网站 534
15.4.2 结构与表现 535
15.4.3 华丽的效果源自哪里? 535
第十六章 最后的建议
16.1 思维的乐趣 538
16.1.1 坚持独立思考 538
16.1.2 要善于自己发现和解决问题 539
16.1.3 不断丰富知识，提高所掌握知识的质量 539
16.1.4 换个角度思考问题 540
16.2 减少重复开发的选择 540
16.3 让维护方便点 541
16.3.1 适当的注释 541
16.3.2 API手册 542
16.4 以后自学的方向 543
附录... 545