人们常说成功的最好办法是站在巨人的肩膀上。因此，想最高效地制作出优秀网页的您，站在优秀设计师的肩膀上不失为上策。本书由经验丰富的Web设计师所撰写，集纳了很多实用的案例技巧，是想快速学习灵活网页设计的人们的不错选择……

本书讲述如何应用可变或不固定布局及弹性布局来实现灵活设计，以满足用户的根据自己需求而调整浏览站点的窗口大小的要求。

全书共分为9章，内容包括：理解灵活布局、可变布局和弹性布局存在的挑战、设计灵活布局的方法、准备网页设计、创建可变布局结构、创建弹性布局结构、规范灵活性、设置文字间距、添加背景图像和颜色、创建灵活的图像。

本书适用于网页设计人员、网页设计爱好者。

译者序

前言

致谢

第1章　理解灵活布局 1

 1.1　布局类型 2

1.1.1　固定宽度：固定像素 2

1.1.2　可变布局或不固定布局：根据视口调整 4

1.1.3　弹性：与文本大小相适 7

1.1.4　混合布局 10

 1.2　可变布局和弹性布局带来的挑战 12

1.2.1　摆脱网格束缚：进行设计非舒适区域 12

1.2.2　告别像素的完美性 13

1.2.3　让设计看上去很大或是很小 14

1.2.4　处理文本溢出的问题 14

1.2.5　处理水平滚动条的问题 15

1.2.6　在弹性框中适配固定宽度的内容 15

1.2.7　更长的设计时间和测试时间 16

1.2.8　浏览器缺陷 16

 1.3　为页面选择合适的布局类型 16

1.3.1　固定宽度布局 17

1.3.2　可变布局 18

1.3.3　弹性布局 19

第2章　设计灵活布局的方法 20

 2.1　灵活布局的设计原理 21

2.1.1　避免：包含文本的内容采用固定高度 21

2.1.2　避免：不规则形状 24

2.1.3　避免：与不能扩展的图像相匹配的文字 26

2.1.4　避免：固定宽度和全宽度内容 33

2.1.5　规划：超出原始尺寸的图像 40

2.1.6　规划：设计位于最大宽度之外的白色区域 41

2.1.7　规划：折成多行的并排放置的项 43

 2.2　 设计前和设计后：我们的非兼容设计和固定的设计 48

第3章　准备网页设计 53

 3.1　创建图像版式 54

3.1.1　设置画布尺寸 54

3.1.2　使用图层和页面来管理版式 55

3.1.3　非破坏性编辑技术 58

 3.2　针对灵活设计对图形进行切片处理 60

3.2.1　为切片创建多个单独的文件 61

3.2.2　切分方框 64

 3.3　站点创建练习：为构建站点准备Beechwood AnimalShelter版式 65

3.3.1　在版式中导航 65

3.3.2　为页眉创建切片 66

3.3.3　为主页创建切片 68

3.3.4　为步骤页创建切片 71

3.3.5　导出图像 72

第4章　创建可变布局结构 74

 4.1　为CSS布局准备页面 75

4.1.1　通用页面的创建步骤 75

4.1.2　为本章实例准备页面 76

 4.2　使用浮动创建可变栏 79

4.2.1　使用浮动创建栏位并且匹配侧边缘 80

4.2.2　通过浮动所有对象创建栏 91

4.2.3　使用浮动和负边缘创建栏位 95

 4.3　禁止布局横跨整个视口 100

4.3.1　更改栏位宽度 101

4.3.2　指定侧边缘 103

4.3.3　为包装器指定百分比宽度 108

 4.4　站点创建练习：创建Shelter的内页布局结构 109

4.4.1　准备页面 110

4.4.2　添加基本样式 111

4.4.3　创建双栏布局 112

4.4.4　减少双栏的宽度 115

第5章　创建弹性布局结构 117

 5.1　将尺寸换成em 118

5.1.1　em的定义 118

5.1.2　嵌套em度量 118

5.1.3　有选择性地采用em度量 119

 5.2　使用浮动创建弹性栏 121

5.2.1　复习：本章实例 122

5.2.2　使用浮动创建栏位与匹配侧边缘 122

5.2.3　通过浮动所有元素来创建栏 135

 5.3　站点创建练习：创建Shelter的主页布局结构 139

5.3.1　准备页面 139

5.3.2　添加基础样式 141

5.3.3　创建栏 142

第6章　规范灵活性 147

 6.1　创建混合布局 148

6.1.1　固定侧边栏搭配可变居中栏位 148

6.1.2　带弹性居中栏的固定侧边栏 153

 6.2　添加最小和最大宽度 165

6.2.1　保护你的用户、设计和内容 165

6.2.2　选择min-width和max-width值 166

6.2.3　使用min-width和max-width属性 168

6.2.4　IE 6和更早版本的浏览器中的不兼容 177

 6.3　限制灵活性的其他方式 178

6.3.1　使用overflow属性 178

6.3.2　让栏位下移 181

 6.4　站点创建练习：限制Shelter的页面的灵活性 182

6.4.1　修改Programs页面 183

6.4.2　修改主页面 184

第7章　设置文字间距 187

 7.1　匹配度量单位 188

7.1.1　可变布局间隔 188

7.1.2　弹性布局间隔 197

 7.2　混合度量单位 198

7.2.1　为宽度较窄的div添加边缘和填充 199

7.2.2　为内容而非div添加边缘和填充 200

7.2.3　添加缓冲div 202

 7.3　站点创建练习：为主页和内页添加间隔 205

7.3.1　为页眉添加间隔 205

7.3.2　为页脚添加间隔 210

7.3.3　处理边缘塌陷 211

7.3.4　为Programs页面内容添加间隔 212

7.3.5　为主页内容添加间隔 215

第8章　添加背景图像和颜色 221

 8.1　混合背景图像 222

8.1.1　创建渐变 222

8.1.2　创建圆角 225

8.1.3　创建曲线边缘 229

 8.2　创建等高栏 232

8.2.1　可变－固定宽度混合布局的伪列布局 233

8.2.2　可变布局的伪列布局 237

8.2.3　弹性布局的伪列布局 241

 8.3　站点创建练习：为主页和内页添加背景 242

8.3.1　调整页眉的背景和颜色 242

8.3.2　调整Programs页面背景 245

8.3.3　调整主页背景 250

第9章　创建灵活的图像 252

 9.1　动态更改图像的屏幕区域 253

9.1.1　与布局同时缩放的前景图像 253

9.1.2　隐藏和显示部分图像 255

9.1.3　创建变化的合成图像 260

 9.2　创建灵活的图像组 262

9.2.1　趣味缩览图列表 263

9.2.2　缩览图库 267

 9.3　站点创建练习：为主页添加灵活的图像 272

9.3.1　添加可变裁切的横幅广告图像 272

9.3.2　创建趣味缩览图列表 273