本书讲述如何应用可变或不固定布局及弹性布局来实现灵活设计，以满足用户的根据自己需求而调整浏览站点的窗口大小的要求。
全书共分为9章，内容包括：理解灵活布局、可变布局和弹性布局存在的挑战、设计灵活布局的方法、准备网页设计、创建可变布局结构、创建弹性布局结构、规范灵活性、设置文字间距、添加背景图像和颜色、创建灵活的图像。

可变或者不固定布局可以基于用户设备的查看大小更改宽度。弹性布局则可以根据用户设置的特定文字大小改变宽度。这两种类型的灵活设计都为那些根据自己需求而调整浏览站点的窗口大小的用户带来显而易见的好处，而对那些习惯于完美像素控制的Web设计师而言，它们则提出了挑战。尽管如此，如果能正确规划并构建，灵活布局仍会是很有视觉吸引力且容易创建的。同时，灵活Web设计的概念和技巧也会使固定宽度的CSS设计受益，因为设计师学会了如何针对实现Web的内在灵活性而进行设计，而不再基于输出媒介的刚性属性或者基于网格的布局来展开设计。
使用符合标准和跨浏览器兼容性的(X)HTML和CSS设计的设计师可以从本书中学到如下知识：
■ 灵活布局的好处。
■ 何时选用可变设计、弹性设计或混合设计。
■ 如何设计图形设计版式以及如何对该设计版式进行切片处理才能达到灵活设计的效果。
■ 如何从头创建可变布局和弹性布局。
■ 如何创建灵活背景图形和可伸缩内容图像。
■ 何时以及如何限制Web页面中的灵活性。

作者简介
Zoe Mickley Gillenwater 是一位经验丰富的Web设计师、项目经理以及技术类文章的撰稿人，Web标准社区频频出现她活跃的身影。在北卡罗来那州大学(UNC)公路安全研究中心任设计服务经理期间，Zoe主持设计和开发了许多信息丰富的Web站点和应用程序。她的工作主要是创建结合了美感以及标准兼容性、可用性和易访问性的Web站点。身为Web开发培训站点Community MX合伙人的她撰写了大量关于Web设计主题方面的文章，这些文章的内容广泛涉及CSS、(X)HTML、Dreamweaver以及易访问性。同时，她还是 Web Standards Project（Adobe Web标准计划任务组）Adobe Task Force的成员之一。

现在，拿起你手中正在阅读的这本书，调整它的大小，以便更易于阅读。
非常抱歉，我提出了一个不切实际的要求。但是，我保证，本书所包含的练习都是非常实用的，而非荒谬可笑的。因为我们接下来将要探讨的是Web设计，这不受纸张的物理限制。
尽管Web页面和纸张都可以呈现美观和令人印象深刻的设计，但是这两种方式各有利弊。成功的Web设计需要结合呈现介质的优势，其中的一个优势就是灵活性。这里所指的灵活性是广义上的，适用于各种查看情况。用户控制Web站点的经验将达到一定水平，最终会超过使用其他介质。他们开始选择（无论是自觉的还是自愿的），不考虑浏览Web页面的设备类型、屏幕和窗口的尺寸、文字以及字体的大小，也不考虑是浏览静态图像还是Flash动画。真正精明的用户甚至可以创建起自己的样式表对所浏览站点的视觉效果进行或大或小的调整。有些用户甚至不是“浏览”Web站点，取而代之的是，他们会去聆听或感受这些站点。
从狭义的角度来讲，Web媒介也是灵活的，即Web页面和内容的大小并不固定。默认情况下，可以调整Web页面的宽度和高度，以适应用户不同的文本大小和窗口宽度。这对使用div和CSS构建的Web页面和使用表格构建的Web页面而言都是一样的。
固定宽度的Web页面（由设计者设定了像素的页面）使得Web天生的灵活性无法发挥其作用。创建固定宽度的设计有一定的好处，这将在第1章介绍。但是固定宽度的替代选择会带来很多好处，而且其所适用的站点类型要远比你想象的多。
可变（或不固定）的站点是一种替代选择，该站点会根据用户窗口的大小进行调整，根据用户文本大小进行调整的弹性站点则又是另外一种替代选择。这两种设计类型都利用了Web天生的灵活性，并且，如果利用得当，将可以极大地改善用户体验—用户看到的所有页面都将与固定宽度的站点一样吸引人。
这就是本书的主要内容：为什么灵活设计是一个好东西，以及如何做好它。你或许会想，只要将这一灵活性融入Web中，那么设计灵活的或具有弹性的Web站点就是小菜一碟了。遗憾的是，事实并非如此。
尽管Web中融入了灵活性并且带来了很多好处，但是灵活的和具有弹性的Web站点依然很少。或许是因为这些网站在设计和开发阶段都有一些挑战，大多数Web设计师还不习惯。目前还没有太多直面这些挑战的通用方法，但是本书做到了。
你将学到的和不会学到的
本书旨在告诉你：
每一种类型的灵活布局的好处。
如何为特定的内容、设计或用户选择合适的布局类型。
哪些视觉元素适合灵活设计，哪些应该避免。
如何在灵活性思维的指引下构建并切割图形设计版式。
灵活、弹性和混合布局中的（X）HTML和CSS。
如何让背景和内容在灵活布局容器中工作。
而你不会学到的内容是：固定宽度布局是“魔鬼”，如果你创建了一个固定宽度的布局，那么你就是一个可怕的人或是黑客—并不是因为我的编辑让我把溢出的内容给剪切掉了，而只是因为这不是真的。
“固定宽度布局与灵活布局”的争论在Web设计社区里非常激烈，本书不会明确回答何者“更好”。我和很多设计师都认为，固定宽度布局和灵活布局拥有各自的优势，并各自适合于不同类型的网站。我的网站就使用了各种类型的布局，其中包括固定宽度布局。
本书仅为该争论中未过多涉及的一方—灵活布局—提供了更多详细的信息。如果你认为灵活布局适合你的站点（我希望本书能让你更明白灵活布局何时更有效），那么本书会教你如何做好它，并且不会很麻烦。
本书的读者对象
本书面向那些已经有创建网站经验的专业Web设计师们，它不会教你有关（X）HTML或CSS的知识，要阅读本书，你至少需要在这两方面具备中等水平。我假定你已经有足够的CSS基础并能够使用它创建基本的布局，但你不必是CSS布局方面的专家。当然，你也不必拥有任何使用CSS创建灵活布局的经验。
即便你仍然计划以从事固定宽度的站点的设计为主，你仍可以使用本书中提供的很多设计理念来改善你的设计。由于Web具有用户控制属性（例如，如何让你的页面优雅地与不同的用户文本大小相匹配），固定宽度设计也会用到一定程度的灵活性，这就是CSS设计者应当了解的。
本书对从前那些习惯于基于表格的布局但又致力于创建纯CSS布局的平面设计师和Web设计师尤为有用。它将告诉你如何以CSS的思维方式来思考问题，从而让CSS设计更自然，你也不会再为创建页面时出现不合适的设计版式而感到苦恼了。
示例与练习文件
每一章中的Web设计技巧示例都可以在本书的网站（www.flexiblewebbook.com）上找到。你可以使用这些具有代表性的示例文件作为起始点来应用本书所展示的技巧，无须复制书中所有的代码。
绝大多数章节还包含了练习部分，你可以通过这部分内容在真实的页面中逐步练习本章前面讲到的一些技巧。通过整本书，你将经历从设计版式到完成整个页面的这一创建灵活Web站点的全过程。你可以登录www.flexiblewebbook.com下载这些练习的文件，也可以在阅读每个练习中的步骤时即时尝试。
没有哪个Web页面可以保证在所有浏览器中都看上去一样或以同样的方式工作，本书中的示例和练习文件也不例外。这些文件已经在各种主流浏览器（Internet Explorer、Firefox、Safari和Opera）的最新版本中测试通过。一些较老但仍然比较流行的版本（比如Internet Explorer7和6）也可以正确地应用这些代码，不过比IE6更早的版本（包括适于Mac的Internet Explorer）则无法正确地应用该代码了，因为它们的市场份额太小。在这些浏览器中仍然可以查看到文件中的内容的，但看上去可能就不会那么漂亮了！
本书约定
注意本书使用的以下术语：
（X）HTML是指HTML和XHTML语言。
IE 6及更早版本的浏览器是指IE 5.0至IE 6.0的版本。
IE 5.x指IE 5.0和IE 5.5。
除非特定说明外，本书中提及和所用到的CSS是基于CSS 2.1规范的。HTML 4.01 Strict用于标记示例，但所有示例也会适用于XHTML 1.1。
列出的所有CSS示例应置于一个外部样式表中或（X）HTML文档的head中，而所有（X）HTML示例则应置于文档的body元素中。偶尔，（X）HTML和CSS片段会在同一示例中显示，一个接一个，这是为了简洁的需要。不过，每一个片段都需要放在其对应的位置，从而正确的工作。
同样是为了简洁，一些代码示例中会用到省略号（...）以表明被删除或重复的部分。例如，下面这一段代码示例中的省略号就表明ul中的li元素未全部显示出来：

　
• Apples

　
• Bananas

　 ...
　
• Watermelon

可变或者不固定布局可以基于用户设备的查看大小更改宽度。弹性布局则可以根据用户设置的特定文字大小改变宽度。这两种类型的灵活设计都为那些根据自己需求而调整浏览站点的窗口大小的用户带来显而易见的好处，而对那些习惯于完美像素控制的Web设计师而言，它们则提出了挑战。仅管如此，如果能正确规划并构建，灵活布局仍会是很有视觉吸引力且容易创建的。同时，灵活Web设计的概念和技巧也会施益于固定宽度的CSS设计，因为设计师学会了如何针对实现Web的内在灵活性而进行设计，而不再基于输出媒介的刚硬属性或者基于网格的布局来展开设计。
使用符合标准和跨浏览器输出兼容性的（X）HTML和CSS设计的设计师可以从本书中学到如下知识：
n 灵活布局的好处。
n 何时选用可变设计、弹性设计或混合布局。
n 如何设计图形设计版式以及如何对该设计版式进行切处处理才能达到灵活设计的效果。
n 如何从头创建可变布局和弹性布局。
n 如何创建灵活背景图形和可伸缩内容图像。
n 何时以及如何限制Web页面中的灵活性。

Zoe Mickley Gillenwater是一位经验丰富的Web设计师、项目经理以及技术类文章的撰稿人，Web标准社区频频出现着她活跃的身影。在北卡罗来那州大学（UNC）公路安全研究中心任设计服务经理期间，Zoe领导设计了许多信息丰富的Web站点和应用程序的开发。她的工作主要是创建结合了美感以及标准兼容性、实用性和访问性的Web站点。身为Web开发训练站点Community MX合伙人的她撰写了大量关于Web设计主题方面的文章，这些文章的内容广及CSS、（X）HTML、Dreamweaver以及访问性。同时，她还是Adobe Task Force of the Web Standards Project（Adobe Web标准计划任务组）的成员之一。Zoe喜欢以CSS讨论邮件列表中的调解人、Adobe的CSS指导老师、会议演讲者以及顾问身份来帮助其他人从她的工作中学到Web标准。

Zoe Gillenwater：暂无简介

李静：暂无简介

设计是一个极度彰显个性的东西。不同人喜欢的、选择的产品各异。因此，“众口难调”几乎道出了所有设计师的心声。
为了尽量满足用户的使用和审美需求，能应需求而改变的灵活设计就成了理想设计的首选。灵活意味着多变、复杂；而多变和复杂预示着设计难度的提升；难度的提升又表现在设计师要考虑得更为周全。环环紧扣，这无疑给灵活设计蒙上了一层神秘的面纱。实际上，灵活设计并非如此神秘，它是有规律可循的。根据面向的用户群体不同，版式的不同，版面图像的丰富程度，以及文字所占比例的大小，资深的网页设计师们已经总结出了许多实用的设计规律。
人们常说成功的最好办法是站在巨人的肩膀上。因此，想最高效地制作出优秀网页的您，站在优秀设计师的肩膀上不失为上策。本书由经验丰富的Web设计师所撰写，集纳了很多实用的案例技巧，是想快速学习灵活网页设计的人们的不错选择……
本书的特点是，几乎每章都配有与本章内容紧密相关的案例练习，且所有案例均前后相互呼应，形成了一个整体。如果你想快速上手，完整地了解各种灵活布局的适用情况，针对不同情形选择最为实用的技法，那么不必多说，拿起本书，just do it……
本书由李静、贺倩、陈平锋、梁晓琴、李凌燕、贺强、吴启文、卢祖英、苏建忠、马睿倩和翁子扬翻译。由于译者水平有限，疏漏之处在所难免，望读者批评指正。

译　者
2009年5月25日

译者序
前言
致谢
第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 Animal
Shelter版式 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