无懈可击的Web设计 利用XHTML和CSS提高网站的灵活性与适应性PDF电子书下载

第1章　灵活的文字 1

1.1　常见的方法 2

1.2　权衡我们的选择 5

1.2.1　长度单位 5

1.2.2　表示“相对大小”的关键字 6

1.2.3　百分比值 6

1.2.4　表示“绝对大小”的关键字 6

1.3　无懈可击的方法 7

1.3.1 关键字 7

1.3.3　两个需要克服的障碍 8

1.3.2　放弃像素级别的精确度 8

1.3.4　简化的Box Model Hack 11

1.4　为什么说它是无懈可击的 11

1.5　有了灵活基础后的操作 12

1.5.1　设置基准值 12

1.5.2　使用百分比值来获取和基准值不同的尺寸 13

1.6　结合使用关键字和百分比值 16

1.6.1 设定一个中间的关键字基准值 16

1.6.2 谨慎使用嵌套百分比值 18

1.6.3 百分比值的一致性试验 20

1.7　本章小结 21

第2章　可伸缩的导航栏 23

2.1　常见的方法 24

2.1.1 选项卡 25

2.1.2 通常的翻转效果 26

2.2 为什么这样做不是无懈可击的 26

2.2.1 堆积如山的代码 26

2.3　无懈可击的方法 27

2.2.4　缺乏灵活性 27

2.2.3　可伸缩性的问题 27

2.2.2　不方便使用的问题 27

2.3.1 无样式 28

2.3.2　两张小图片 29

2.3.3 应用样式 29

2.3.4　用浮动来解决 30

2.3.5　为选项卡定形 31

2.3.6　对齐背景图片 32

2.3.7 增加底边 34

2.3.8　悬停变换 35

2.4　为什么这样做是无懈可击的 36

2.3.9 选中状态 36

2.5 其他示例 37

2.5.1 MOZILLA.ORG 37

2.5.2　斜杠 38

2.5.3 ESPN.COM的搜索栏 38

2.6　本章小结 40

第3章　可扩展的行 43

3.1　常见的方法 44

3.2.2　固定的行高 46

3.2.1 非必要的图片 46

3.2　为什么这样做不是无懈可击的 46

3.2.3　臃肿的代码 47

3.3　无懈可击的方法 47

3.3.1　HTML代码结构 47

3.3.2　标识出各部分 48

3.3.3　没有添加样式时的情形 49

3.3.4　设定背景 49

3.3.5　安排内容的位置 50

3.3.6　消失的背景 51

3.3.7　添加更多细节 53

3.3.8　四个圆角 55

3.3.9　文本和链接的细节 56

3.3.10　最后一步 58

3.4　为什么这样做是无懈可击的 60

3.4.1　代码结构与设计效果的分离 60

3.4.2　不再有固定不变的高度 61

3.5 自适应扩展的另一个例子 62

3.5.1 HTML代码 63

3.5.2　创建这两张图片 63

3.5.3　添加CSS 64

3.6　本章小结 66

3.5.4 EXPAND-O-MATIC 66

第4章　巧妙的浮动 69

4.1　常见的方法 71

4.2　无懈可击的方法 73

4.2.1　对HTML代码的无止境抉择 73

4.2.2　使用定义列表 74

4.2.3 HTML代码结构 75

4.2.4　没有样式时的情形 77

4.2.5 为外围容器增加样式 78

4.2.6　标识图片 79

4.2.7　应用基本的样式 80

4.2.8　给图片定位 84

4.2.9 反向浮动 85

4.2.10　为任意长度的描述文字开路 88

4.2.11 尾声 93

4.2.12 切换浮动方向 95

4.2.13　栏式效果 97

4.2.14　一个替代用的背景 101

4.3 为什么这样做是无懈可击的 104

4.4　本章小结 104

第5章　牢固的方框 105

5.1　常见的方法 106

5.2　为什么这样做不是无懈可击的 109

5.3　无懈可击的方法 110

5.3.1 HTML代码结构 110

5.3.2　图片策略 111

5.3.3　应用样式 113

5.4　为什么这样做是无懈可击的 116

5.5　其他圆角实现技术 116

5.6　本章小结 125

第6章　页面在缺失图片或CSS的情况下仍然易读 127

6.1　常见的方法 128

6.2　为什么这样做不是无懈可击的 131

6.3　无懈可击的方法 132

6.4 为什么这样做是无懈可击的 133

6.5　有或者没有样式 136

6.5.1 10秒钟可用性测试法 136

6.5.2　常见的方法 137

6.5.3 无懈可击的方法 138

6.6.1 Favelets 140

6.6　无懈可击的工具 140

6.6.2 Web Developer Extension（Web开发者扩展） 142

6.6.3 Web Accessibility工具条 143

6.6.4　把校验作为一种工具 143

6.7 本章小结 146

第7章　可转换的表格 147

7.1　常见的方法 148

7.2　为什么这样做不是无懈可击的 150

7.3　无懈可击的方法 151

7.3.1 HTML代码结构 151

7.3.2 应用样式 158

7.4　为什么这样做是无懈可击的 173

7.5　本章小结 174

第8章　流动的布局 177

8.1　常见的方法 178

8.2　为什么这样做不是无懈可击的 180

8.2.1　大量的代码 181

8.2.2　维护的噩梦 181

8.2.3　并非最佳的内容顺序 181

8.3　无懈可击的方法 182

8.3.1 HTML代码结构 182

8.3.2　创建栏：浮动与定位 183

8.3.3 应用样式 185

8.3.4 Gutters 189

8.3.5　栏的padding 192

8.3.6　设置宽度的最大和最小值 197

8.3.7　滑动伪分栏 200

8.3.8　三栏布局 203

8.4　为什么这样做是无懈可击的 210

8.5　本章小结 210

第9章　构成一个整体 213

9.1 目标 214

9.2　为什么这样做是无懈可击的 215

9.2.1　流动的布局 216

9.2.2　灵活的文字 217

9.2.3　没有图片？没有CSS？也没问题 217

9.3 构建过程 219

9.3.1 HTML结构 219

9.3.2　基本的样式 221

9.3.3　布局结构 221

9.3.4　侧边栏背景 223

9.3.5　页头 225

9.3.6　信息行 227

9.3.7　栏间空白（gutter） 229

9.3.8 内容栏 230

9.3.9　侧边栏 239

9.3.10　页脚 245

9.4 针对IE的CSS调整 246

9.4.1 Hack管理 247

9.4.2　页脚补丁 247

9.4.3 自清除问题的补丁 248

9.5　本章小结 249