我的书签
添加书签
移除书签Web设计的流程经历了戏剧性的变化，但优秀设计的原则从未改变过。无论是选用调色板，还是把握欣赏者浏览作品的顺序，或者合理有效地使用图形，亦或是管理页面相关的元素，传统设计中的关键之处在Web设计中同样重要。
这一章中将要介绍的作品能够阐明设计的关键之处，同时也会澄清当代We b设计师心中的一个疑虑：应该如何把握设计的流程。是首先在Adobe Photoshop中拟出设计的草图，然后转向到CSS中，还是一开始就直奔主题编写CSS代码？相信在阅读完这一章之后，您一定会有所收获。
Kevin Davis，设计师
www.csszengarden.com/028
简洁的设计，统一，象征手法
视觉作品是用来交流的。一个成功的作品将传递给欣赏者用语言无法描述的信息。作品应该能够唤起某种气氛和感情，体现独特的风格，并最终引起欣赏者的共鸣。
如同室内设计师将桌椅、柜台、油画组合成一间带有忧郁色彩的咖啡屋一样，在创建亚特兰蒂斯时，Kevin Davis也希望能够将文字和图像以类似的方式组合起来。Davis从相片和调色板入手，将各种元素不断组合直至满意。然后将设计好的作品付诸于CSS实现。
2.1.1 简洁的设计
除了充满细节的页首部分之外，亚特兰蒂斯给人的第一印象就是其相对的简洁性。通过将相片元素和令人不可思议的简单布局结合起来，Davis用一种少见的方式将复杂和简洁统一了起来。
禅意花园自身的HTML结构导致了很多平庸的设计都显得方方正正，过于“简洁”（图2-1-1A～图2-1-1C）。但这并不是这些作品的错，列出它们只不过是为了说明问题而已。
图2-1-1A～图2-1-1C 一些早期的简单设计
这些作品之所以显得平庸，是因为作者有一个常见的误解：这些作品的设计者都不是传统观念中图形设计师，所以在创意方面自然略显欠缺。当然，纠正这个错误的观点也正好是禅意花园的主要创办目的之一。
亚特兰蒂斯的出现无疑是对此类疑虑的一个辛辣嘲讽，它用事实证明了简洁并不一定就等同于糟糕：当您一次又一次看到同一件东西的无数种样子之后，将很快感到厌倦。一餐中同时品尝马铃薯泥、烤马铃薯和薯片，再好的东西也将变得没什么新意。火鸡配一些马铃薯泥（或是豆腐）才是一顿简单却美味的晚餐。
也正是在这种情况下，这样一个低调、简洁的设计才会显得如此成功。毕竟内容决定了设计，若是内容本身就十分复杂，且足够吸引浏览者注意的话，那么也没有必要为其添加过多的修饰。
若想设计一个极其精彩且简洁的作品，从另一个角度看
即使对于专家来说也不是一件容易的事。当设计元素很简单时，浏览者也将用更挑剔的目光检阅页面的各个角落。这时每个元素都会显得格外重要，所以在这种情况下，只有对细节的良好把握才能让作品从平庸中脱颖而出。
若想学习如何恰到好处地使用设计元素，那么你定会从研究亚特兰蒂斯强大、简洁的布局中受益非凡。若我们移除页首的图像，那么其简洁性不言自明（图2-1-2）：中间为主要的内容区域，左边围绕着一个略小的菜单。
图2-1-2 除去页首图像的亚特兰蒂斯
1.排版样式
在亚特兰蒂斯中，正文部分的文字按照比例来讲要远大于菜单部分的文字，用来更好地区分这两个区域。Davis通过合理地使用字号来暗示浏览者——左边的内容并没有右边的内容那么重要（图2-1-3）。同样，更大的标题字体也将标题区域与正文区域区别开来。这些视觉上的差异为浏览者提供了额外的信息，即表明每一段文字之间重要性的相对高低。
图2-1-3 正文部分的文本大小几乎是菜单部分的两倍
排版是一种起交流作用的表现方式，它拥有内建的层次结构、模式和韵律。通过运用不同的文本大小、文字间距和颜色来调整版面样式，作品将为读者带来很多文字之外的丰富信息。
2.图标
左边的菜单中，Davis在每个作品名的左边都插入了一个小图标。因为这些图标的大小和文字大小接近，所以给人的感觉是它们半隐藏于文字中，仅仅起到标号的作用，而不会喧宾夺主地吸引或让浏览者转移视线。这个简单的细节为作品链接之间提供了上下文关系，并与菜单的其他部分区别开，也为这个设计简洁的菜单添加了一些令人玩味的独到之处。
图标是一类简化了的符号，用来表示某件物品或者某类概念，或者用来以抽象的图形化概念替代一段较长的文字描述。物品通常都会有较直观的视觉抽象方法，但类似过程和操作之类的概念却很难描绘。一个好的图标所代表的含义无需加以解释，但前提是图标是对物体本质的抽象。设计图标的关键在于，要将图标尽可能地以某种强烈、一致的方式与其要表示的概念关联起来。这样，当浏览者对该图标产生重复印象之后，就能用直觉体会出图标的含义。
3.分界线
Davis用两种样式的分界线将作品中的不同区域分开。页面最上边的一段与页首部分重叠的文字用虚线包围，白色的实线更进一步将标题和页脚与正文分开（图2-1-4）。这些简单的分界线既为作品添加了额外的上下文信息，又不至于让浏览者感到迷惑。
图2-1-4 白色的实线将标题与正文分开
适当地使用线条能够在页面中定义区域的边界，让页面显得有韵律，甚至给页面添加额外的维度。但也不要过度使用——未闭合的方框以及过多的平行线将给浏览者类似网格结构的暗示，而实际上您的本意却并非如此。浏览者也可能会尝试寻找本不存在的规律与模式，进而迷失于作品中，所以在使用线条时必须足够谨慎、明智，只用在最需要的地方。
4.外边距（Margin）
为了让作品始终处于浏览器窗口的中心区域，Davis尽力控制了页面中各元素间的距离。页面的两边都采用了可变宽度的空白区域，以期让内容居中显示。有时候全屏的设计让人愉悦，但另外一些时候定宽的布局似乎更为可取。
对于这两种情况，适当的左右外边距将会让作品的正文部分不至于显得太局促。默认情况下，大多数浏览器会在页面的边缘添加一个极小的外边距。但不幸的是，即使这样，文本仍将从左到右近乎写满整个屏幕。
这是个布局理念方面的问题——文本需要一些呼吸的空间，缺乏足够的外边距将让文本与浏览器的边缘重合在一起。这种情况下默认的外边距设定将无法满足我们的要求，因此设计师自然有责任做出适当的调整。
在这种简洁的布局中，外边距是仅有的几种被使用的设计元素之一，合理地应用外边距能让页面显得完全不同。足够大的外边距更是可以将内容置于浏览器窗口的中心位置，让浏览者一眼就能看到。
Note
大多数设计师不会受到浏览器默认的外边距设置的影响，因为他们总是简单地将默认设置覆盖掉。但对于非专业的业余爱好者来说，这一点的确值得注意。但若是浏览器在这方面做得再好一些，例如能够像标准打印机一样在内容周围自动添加足够的外边距，那么也就不会有这种混乱情况出现了。
2.1.2 统一和象征手法
在用设计元素营造气氛方面，亚特兰蒂斯如Davis所愿地堪称经典之作。据古希腊哲学家柏拉图所述，亚特兰蒂斯是远古时期沉入到海底的一片大陆。页首锈迹斑斑的螺旋贝壳以及古典的石雕支柱都会让欣赏者陷入到对这个传说的深深回忆中，深蓝和黑色也营造出了深海的气氛。Davis在动笔之前就为作品选择好了图像和色彩，这样就在设计的过程中坚守住了最先的设计灵感。
1.一致性
页首贝壳的颜色经过了一定的调整，以便与旁边的抽象图案融合起来。贝壳的边缘也用Adobe Photoshop进行了更大程度的柔化处理，与整个页首图片融为一体。但Davis并没有将贝壳的颜色调整为与主题一致的蓝色系，而是留下了足够多的、锈迹斑斑的黄色，增强整个作品的对比度（图2-1-5）。若是整个作品都使用蓝色系，那么将给人以过多的沉重感（图2-1-6）。
图2-1-5 橙黄色系的贝壳提供了恰到好处的对比度
图2-1-6 蓝色的页首图像，这样可能会显得与主题更加统一，但整个作品却因此缺少了对比度
设计中用到的元素可能各不相同，但作品整体达到统一的意境却是最重要的。除了使用单一的色系之外，还有一些更加巧妙的方式来实现一致性：例如将最重要的、起支配地位的元素用艺术线条或照片表示，或在悉心调整匹配区域的大小后再用线条环绕等。
在亚特兰蒂斯的页首，我们可以看到一些白色的实线圆圈，它们都以类似的方式融合在贝壳和旁边的抽象图案中。若是没有上下文的话，这类简单的白色圆圈并没有什么实在的意义。但在圆弧形以及蓝色背景的衬托下，浏览者将很容易将其认同为水中荡漾的波纹。这些圆圈的大小也和贝壳相近，二者交相辉映，显得非常协调和统一。
2.借喻
借喻（用简单的设计元素表示复杂的图像或概念）是一种强大的设计方法，可以为作品添加一些微妙的气氛并增加作品的深度。若不是我们在前面已经指出了的话，您可能很难发现页首的那些白色线条。但现在您一眼就能看出来，并能把它们想象成水中荡漾的波纹。
亚特兰蒂斯中使用象征的地方不仅仅是这些简单的线条——页首部分的图片中还包含了很多。从前的亚特兰蒂斯——一个强盛富有的帝国——现在，已经带着那些象征着文明与力量的石柱和美轮美奂的雕像消失在了蓝色的背景中。现今的亚特兰蒂斯——锈迹斑驳、静静地躺在海底。一个消失了的帝国，荣耀已经远去，页首左右部分的空间关系恰如其分地体现了这些。这种看似简单的设计却在不经意之间委婉道出了一段沉重的历史，并为整个作品添加了相当的深度，让欣赏者不得不陷入其中，仔细体会。
但对于那些从CSS角度审视作品的人来说，Davis在页首使用的贝壳还有另一个意义：这体现了他对Eric Meyer的CSS经典示例作品Complexspiral （可在www.meyerweb.com/eric/css/edge/complexs piral/demo.html浏览，图2-1-7）的敬意。
图2-1-7 Eric Meyer的示例作品Complexspiral，亚特兰蒂斯中同样在页首使用了类似的贝壳
2.1.3 作品亮点
这个作品在与读者交流，引起共鸣方面做得非常好：贯穿网站的一条清楚且统一的主线为提高用户体验打下了良好的基础。但也并不是所有的站点都需要如此的精心设计，对于那些内容和功能占主要地位的网站来说，设计师一般应该尽可能地简化图片等设计元素，以简洁实用为首要目标。
Radu Darvas，设计师
www.csszengarden.com/026
游离于光、影、形状和空间中
某一天，Radu Darvas的双眼突然被阳台上的向日葵吸引，随后他开始为这些向日葵拍照， Zunflower的设计灵感也随之迸发。Adobe Photoshop中对这些相片的处理更是让他理清了思路，最终完成了Zunflower的设计。
Zunflower的精妙之处在于，它并不是以“框”的形式设计的。深入观察这件作品，可以看到每一栏的位置都被仔细调整过，在视觉上形成重叠的效果。这种效果表现了光和影之间、形状和空间之间的相互影响，最终成就了作品明亮积极的主色调。
2.2.1 寻找光源
当你读到这里的时候，无论正坐在什么地方，总会至少有一个光源让你看清书上的文字。把你的视线从书本中暂时移开——光源在什么地方？它是如何照亮你周围的物体的？影子又在哪里呢？
视觉艺术家通常使用光和影为作品添加真实感，或者让作品中的某个部分凸现出来，以体现层次感。
回顾一下Web设计过去的十余年，我们将发现很多对光的使用。例如让图像实现梯度效果（图2-2-1），为按钮添加立体的斜边（图2-2-2），给照片创建阴影（图2-2-3）等，光影效果在Web中的用途非常广泛。
图2-2-1 梯度填充，作品创建于1995年左右。在压缩比率较高时，图像会出现抖动和条带，显得不够专业
图2-2-2 带有立体文字的立体按钮。这类视觉效果常见于20世纪90年代中期的Web页面中
图2-2-3 应用了经典的投射阴影效果的照片
不幸的是，一些没有正式学习过视觉设计的Web设计师经常错误地使用光线，在种种限制中能够确保完成任务也成为不小的挑战。但最终，趋势依然影响了技术——即使光线的效果并不真实，光源的位置也显得矛盾（图2-2-4）。
图2-2-4 错误地使用光源——注意两个物体的阴影投射方向并不一致
2.2.2 保留阴影
Zunflower演示了正确使用光源投射阴影的方法。虽然强烈的梯度和斜角在当代的Web设计中已经基本上绝迹，但投射阴影仍一直被广泛应用。原因如下：
□ 阴影可为页面添加丰富的视觉效果。
□ 投射出的阴影能让浏览者感到页面以及页面中的元素存在着层次感。
□ 在绘图软件中，阴影非常易于实现。
为了避免上面提到的那些使用阴影可能会导致的问题，例如相互矛盾的光源等，这里我们给出了如下的几条一般性的指导建议：
□ 注意阴影颜色的深浅——阴影的亮度表示物体与阴影投射表面的距离。深色的阴影代表物体与背景较近，而浅色的阴影则表示物体与背景较远，即更靠近观察者。
□ 阴影的长宽也会给用户造成不同的距离感。较为细小的阴影让人感觉物体与背景较近，而较宽大的阴影则让物体看起来离背景稍远。
□ 要确保光源的真实性。若页面中包含多个对象，则它们的阴影方向要保持统一，以体现出光源的一致性。
例如，头两栏的重叠让Zunflower居中一栏的阴影显得很自然，就像是光线从左边照射过来一样（图2-2-5）。
图2-2-5 正确使用光源可以实现恰到好处的阴影效果
同样，右面一栏的淡出效果也为作品增加了更多的光影效果。这一栏的颜色逐渐变淡，最终在我们的视线中淡出（图2-2-6）。
图2-2-6 继续使用同一个光源，为作品带来强烈的真实感
Tip
若使用Photoshop实现阴影特效，请确保选中了“Use Global Angle”单选框。这样即可让作品中各个阴影的效果保持一致。
2.2.3 走近形状
与色彩一样，形状也能影响我们的心理。设计师可以通过选择某类特定性质的形状来唤起欣赏者的某种特定的情绪。
形状对人心理的影响不仅仅限于计算机或印刷作品中。人类自从能够在地面画出符号、在岩洞的石壁上刻出描述故事的象形符号开始就已经在使用形状了。环顾四周，形状无处不在——这几乎是人类与生俱来的天性。无论是用来描述复杂的数学公式，还是为某个建筑添加修饰，甚至是代表象征意义的图腾，使用形状是我们的一种本能的自我表达方式。
在Zunflower中，页首的一丛花极其显眼——任何人都会被它的颜色和形状所表现出的内涵所深深吸引。
1.主要形状
圆弧形经常与女性、阴柔关联起来，表示温暖、舒适、暧昧以及爱情等。进一步拓宽适用范围，圆弧形也能用来代表社区、全体、忍耐、运动以及安全等含义。很多以女性、社区、整体生活或浪漫传奇为主题的网站经常使用圆弧形来强调其主题。
三角形则通常会让人联想到男性、阳刚，用来表达诸如强壮、攻击以及运动感等含义。棱角的方向也会影响形状的含义——浏览者的目光通常会被吸引至处于支配地位的棱角所指向的方向。指向上方体现了向上的趋势以及攻击性，而指向下方则通常暗示出消极的意味，表示被动和无力。
当然，三角形（包括方形）的适用范围也可以被拓宽。方形暗示了力量和根基，这很有可能因为它们看上去足够的坚实稳重。方形的设计能给浏览者带来有序、逻辑、严密以及安全的感觉。
2.组合各种形状带来最大限度的视觉冲击
可以看到，Zunflower图像本身是由三角形和圆弧形构成的。当然，这是大自然创造的结果，但Darvas又在Photoshop中对这一印象进行了强化，使花的颜色和形状更加鲜明。因此，这幅图片给人以强烈的感官刺激——阳刚和阴柔并存，并创造出一种非常独特且让人难以忘怀的意境（图2-2-7）。
图2-2-7 近距离观察Zunflower是如何将三角形和圆弧形组合起来的
在Zunflower中，作者还用显眼的方形平衡了由花带来的阴柔感，奠定了整个作品的基石（图2-2-8）。
图2-2-8 方形用来让设计保持均衡，不至于过度偏向阴柔
形状之间合理的组合能够给欣赏者带来最大限度的视觉冲击。再为其添加适当的色彩和光影之后，作品将更加引人入胜。页首部分恰当保留的部分空间也进一步增强了作品给人带来的冲击感。
2.2.4 把我的空间给我
正如光、影、形状一样，间隔空间也能够对人产生心理上的影响，从古到今的艺术家们一直都在采用这种方法拉近作品与欣赏者的距离。
在视觉设计中添加间隔空间是考虑到这样一个原理——适当的空间可以将浏览者的目光引导至页面中的关键位置。空间还能够对文本和图像的过密产生一定的缓冲，让眼睛有休息的余地。这将大大提高内容的可读性，并给浏览者足够的思考内容的时间。
1.心理和社会意义
空间感在心理和社会方面都有着极为明显的含义。从心理学角度考虑，主要有如下几点：
□ 间隔空间和经济形势息息相关。间隔空间的多少及其使用的方式同样也能够传达出很多信息。挤成一团的设计决不会显得美观，这时恰到好处的间隔空间就会让作品充满优雅的气息。
□ 使用间隔空间并不意味着这个位置什么都没有（间隔空间反而能够帮助我们定义对象）。拥挤的设计意味着信息过多，会让浏览者绷紧了神经。但若是添加了足够且恰当的间隔空间，传达给信息的方式就会变得更为完善、优雅，让浏览者备感轻松。
□ 间隔空间与特定地区的文化也有关系。正如带有不同文化背景的人对同样色彩和形状的感受各不相同一样，文化背景也决定了人们对间隔空间的不同看法。在某些国家中，交流中的身体接触表示关系的亲密。但在另一些文化背景中，例如美国，对身体接触的看法却大相径庭。
若我们在设计时曾考虑过上述几点，就会认识到间隔空间并不仅仅是页面缺少内容的副产品而已，而是作品中的一个极其重要的、需要全方面考虑的大问题。
2.正空间和负空间
首先让我们解释一下正空间和负空间的区别，之后你会更容易地理解间隔空间与作品融为一体的方法。
正空间是指组成作品的对象所占据的空间，负空间则是指非作品对象部分（即背景）占据的空间。尽管定义如此清晰，我们也不能将正空间和负空间割裂开来，二者互相依赖、相辅相成。负空间起到定义正空间边界的作用，作品中对象的边界也正是负空间的开始，这个边界本身就是一种形状（图2-2-9）。
图2-2-9 当背景被设置为黑色时，我们即可清楚地看到负空间是如何定义对象边界的。负空间自身也是由一系列的形状组成的
2.2.5 添加专业的光泽
理解正确使用光源的方法将会帮助你在创建阴影及相关效果时达到协调统一。无论是在整体视觉效果中，还是在诸如网站标志或图标等特定之处，形状在设计中所起到的角色都值得深入讨论。充分地理解认识空间及其使用方法和使用目的，将会帮助您把想要表达的信息更好地传达给浏览者。
学会并掌握对光线、空间和形状的控制将让您的作品更加完美，如Zunflower一样熠熠生辉。
Boér Attila，设计师
www.csszengarden.com/083
用色彩激发情感
寒冷、单调的冬天过去之后，Boér Attila迎来了第一个晴朗明媚的春日，让他感受到了向上、充满活力和欢乐的色彩。从冬到春的颜色变化也让Attila产生了创作的灵感。
人们很早就发现，颜色可以引起人情绪的变化。这也正是将红色定义为暖色的原因——红色让人容易联想到火焰或辛辣的胡椒粉。随后，我们又自然地将这种联想应用到设计中的颜色选择上。例如，人们经常将象征着土地、大自然的棕色和褐色用于天然产品的包装上。
在春天中，冬日那单调乏味的颜色和春天万物萌发的颜色被混合在了一起，让作品的颜色选择既不显得过冷，也不显得过热。但整个设计却强烈地表达出了温馨与和谐的意味，给欣赏者带来积极愉悦的感官享受。
2.3.1 色彩的影响力
若是设计师希望向观众传达某种信息，那么理解色彩所包含的心理效果、文化影响、性别偏好等将与掌握其使用技巧同等重要。
1.清楚地表达信息
页面的内容、布局及图片的使用无疑都会体现出该站点将要表达的意愿，但色彩的使用同样是一种非常重要的交流方式。优秀的设计师了解如何恰当地使用色彩来表达设计意图，并加深浏览者的印象。对于浏览者来说，色彩表达的含义与图像或文本一样令人信服，某些时候甚至还要强于它们。
若你要为一个重金属乐队设计站点，那么选择在白色的背景下使用黄色或粉色等明亮的颜色显然将与主题格格不入。重金属带有黑暗的意味，虽然作品中仍可以使用一些明亮的颜色，但对于该音乐流派，深沉、浓重的色彩基调则毫无疑问最具代表性。
相反，若你要为某个古典四重奏设计站点，那么深色主题也很难与这一流派音乐的轻柔舒缓特点相符合。选择与网站主题一致的色彩在设计时至关重要，这也是创建成功网站过程中的重要一环。
2.色彩和人类心理
色彩对人类情绪有着非常大的影响。二者关系非常复杂，包括很多方面的因素。
对于无法感知光线的盲人来说，色彩无关紧要。对于那些色盲（一种先天性疾病，患者无法区分两种特定的颜色，最常见的是红色和绿色，即红绿色盲）或色弱的人来说，颜色的理解也和正常人有所差别。色盲人群的分布较广泛，在北美，大约每12个人中就有一例1。因此，考虑到这些潜在的浏览者，设计时就更要在选择色彩上多加小心。
注释：1 在我国，男性红绿色盲的发病率为7%～8%,女性的发病率为0.5%。——译者注
某种颜色的色调同样可以影响它的含义。一般来讲，浅绿色能够唤起某种较愉悦的感觉，但深绿色却恰恰相反。类似地，添加了材质（texture）的颜色也会让人对其有不同的理解。表2-3-1列举了一些常见的颜色及其带来的一般心理联想。
表2-3-1 常见的颜色及其心理联想
Note
当然，这类挑战常理的色彩选择也许反而能达到某些意想不到的效果。尽管如此，在这样使用前也必须要格外小心地准备和验证，确保能够实现你的预期的目标。文中的观点仅仅用来说明通常情况下人类对色彩的反应。
你可能会注意到，某种颜色可能会引起两种截然相反的心理联想，就像黑白两种相反的颜色一样。例如红色，既可能表示激情也同样能代表危险（或许激情和危险的差别并不是很大？）。此外，还有很多因素与这种看上去的矛盾相关，例如文化背景和性别差异都会让人对相同的颜色产生不同联想。
在春天中，对绿色的色调以及亮度的选择都非常恰如其分，让人联想到青草和树叶，带来温和、舒适的感觉。作品中偶见的一丝蓝色也进一步体现出了大自然的意味（图2-3-1）。
图2-3-1 春天的颜色选择，包括一系列的绿色、一种淡蓝色和白色
3.色彩、文化和性别
Attila是匈牙利人。艺术家所生长的文化背景会影响到他（或她）对颜色的理解和选择吗？专家们对此都持肯定的态度。类似地，欣赏者的文化背景以及性别也会影响到他们对作品的理解。
文化背景和性别差异都会扩展并复杂化前一节中列出的颜色引发的心理联想。表2-3-2列出了一些由不同的文化背景和性别导致的对颜色的不同理解。从中我们可以很容易看出，色彩的使用，特别是对于在世界范围，例如互联网中的作品来说，必须慎之又慎。
表2-3-2 文化背景和性别差异对色彩理解的影响
Note
若想了解更多关于色彩的研究论文、图书以及其他资源，请访问J. L. Morton教授的网站：Colorcom（www.color com.com）。还有一个色彩相关的站点也非常不错， Causes of Color（http://webexh ibits.org/c ausesofcolor）。
2.3.2 网站中使用的调色板
在为某个网站选择调色板时，应该对上述色彩相关的问题有所了解。正如要清楚作品要表达的含义一样，你还需要对浏览者的期望有足够的了解，以便于根据需要做出最恰当的选择。
研究你的听众
交流中的一个黄金法则就是了解你的听众。因为人与人之间文化背景和性别等差异都会影响到他们对同一色彩的理解，所以在使用色彩之前对作品的浏览者进行充分的研究就显得非常必要。对于某些颜色，大多数人对其的理解和认同感都惊人的相似。这也正是蓝色、棕色以及春天中用到的绿色等被广泛应用于各种作品中的原因。
色彩学专家J. L. Morton（前面介绍过他的网站）建议设计师们尽可能地选择与预期浏览者的通常理解相接近的颜色。例如在为儿童设计网站时，一般应该选取表达欢乐的颜色。若要表现出高雅，那么黑色和银色的组合在美国将会非常受欢迎。若想吸引男性浏览者的关注，那么通常说来大量地使用蓝色总归没有错。而若是想引起女性浏览者的兴趣，那么红色和粉红色则要比蓝色好得多。要是想设计大自然主题相关的网站，那么绿色、蓝色和棕色也自然将是你的不二之选。
Note
在开始设计之前，最好先创建一些测试用的调色板。在Photoshop中创建调色板非常容易（图2-3-2）。新建一个文档，然后使用颜色选择器（Color Picker）将不同颜色以条带形式添加进去，最后看看它们的配合效果。之后你还可以创建一个测试HTML文档，并在CSS中尝试使用一下这些颜色。
图2-3-2 在Photoshop中创建调色板
CSS在为作品创建原型的阶段能够起到非常大的帮助：对于这些测试用的调色板，你可以为其相应地创建若干个CSS文件，然后将这些CSS依次应用到测试HTML文档上并观察其实际效果。这种方法甚至可以用于可用性研究中——把应用不同调色板的设计草图发送给你的用户，然后分析他们的反馈。
2.3.3 在CSS中使用颜色
幸运的是，CSS提供了很多描述颜色的方法。我们可以在下面几种方法中随意选择：
□ 颜色名称。CSS目前支持17种颜色的名称，分别为black（黑色）、silver（银色）、gray（灰色）、white（白色）、maroon（栗色）、red （红色）、purple（紫色）、fuchsia（紫红色）、green（绿色）、lime （鲜绿色）、olive（橄榄色）、yellow（黄色）、navy（藏青色）、blue （蓝色）、teal（凫蓝）、aqua（浅蓝绿色）和orange（橙色）。例如：
color: orange;
□ RGB值（绝对值表示）。我们可以使用红（Red，R）、绿（Green，G）、蓝（Blue，B）三种颜色的绝对值来描述某种颜色。颜色的RGB值可以在Photoshop或其他图像处理软件中得到（如图2-3-3所示）。例如下面这段代码就表示一种淡蓝色：
图2-3-3 用Photoshop得到颜色的RGB值
color: rgb(51,153,204);
□ RGB值（百分比表示）。按照百分比混合红绿蓝即可得到想要的颜色。例如下面这段代码表示一种紫色：
color: rgb(93%, 51%, 93%);
□ 十六进制值。使用六位的十六进制值表示一种颜色，Photoshop（图2-3-4）和很多在线参考文档中都使用了这种方法。这种表示方法混合使用了数字和字母，每两位相应地表示红绿蓝三种颜色中的一种。十六进制值颜色表示方法已经在Web中使用了很长时间，所以大多数读者都比较熟悉：
图2-3-4 使用Photoshop的颜色选择器得到十六进制的颜色值
color: #0000FF;
□ 十六进制简写值。只有分别表示红绿蓝的三对字母均两两相同时，才能使用这种简写形式。例如#FF6699就可以使用简写形式1，但#808080则不能。上面例子中的蓝色的简写形式如下：
注释：1 简写形式为#F69。——译者注
color: #00F;
□ 系统颜色。系统颜色是在CSS 2.1规范中引入的一系列关键词，允许设计师使用浏览者计算机上的系统颜色配置。例如：
color: WindowText;
2.3.4 色彩丰富的结论
无论是在设计个人网站还是专业网站，都应该事先确定网站将要传达的主旨，并充分地了解浏览者群体的喜好。这些内容都将在选择颜色时助您一臂之力，也会让您更好地表达出作品的设计意图。
春天就是一个非常好的例子，它完全实现了作品在设计上的本意：表达出由冬到春的过渡，唤起浏览者平静且乐观情绪。作品还同时保证了来自全球的、各种文化背景、不同性别的欣赏者都能体会到同样的感觉，这一点已经毫无疑问地被禅意花园的浏览者所证实。
Note
若想了解更多有关系统颜色的信息，请访问www.w3.org/TR/CSS21/ui.htm l#system-colors。注意，这些颜色将不会被CSS 3.0支持。
Note
很多人仍然坚持使用“Web安全（Web Safe）”的调色板。但由于目前主流的计算机都能够显示数百万种颜色，所以已经没有必要再受限于这个规定了，除非你确认作品是为某个特定的、使用古老计算机的人群所专门设计的。熟悉“Web安全”调色板的读者将很容易地发现，春天中选用的一些颜色也并不在Web安全所规定的256种颜色当中。
Laura MacArthur，设计师
www.csszengarden.com/022
在图案、材质和对比度中找到平衡
翠绿活力的色彩基调是单调的绿色，但若着眼细节，将会发现作品让我们联想到了森林中长满苔藓的大地，或天鹅绒一般柔软的织物。Laura MacArthur也正是希望能用这个作品捕获住这份平衡、宁静的感觉。
通过使用重复的图案以及模拟的材质效果， MacArthur用丰富的细节平衡了作品其他方面的简单。深沉的单一色系让作品不至于变得太过拥挤，且虽然作品中使用了繁复的图案，但大片的绿色空白区域也给眼睛留下了足够的休息空间。
2.4.1 图案
翠绿活力中使用的图像主要是很多视觉上相似的图案。深入分析可以发现，这些图案在整个作品中都保持一致，主要分为两种类型：第一种由网点组成，而第二种则由类似植物形态的弯曲花纹组成（图2-4-1、图2-4-2）。两种图案均用Adobe Photoshop的滤镜将剪贴图案元素拼接而成。当然，这些图案在细微之处均有所变化，丰富细节的同时也不至于让作品的视觉效果过于一致，导致单调乏味。
图2-4-1 近距离观察网点类型的图案
图2-4-2 近距离观察弯曲花纹类型的图案
图案是指重复填充到指定区域内的某一种（也可能多于一种）小块视觉元素。在各个视觉作品，例如时装、室内装潢乃至自然界（例如橘皮上的气孔、树叶上的脉络等）中，都经常能够找到图案的身影。
漂亮的图案是Web设计师最好的朋友。对于一片内容很少或者根本没有内容的区域，我们必须想些办法：某些作品选择使用单一的填充颜色，另一些作品则干脆直接留出一片空白。虽然这些方法都能在某种程度上解决问题，但在某些特殊情况下，我们还需要对这片区域添加更多的细节修饰。
当代Web设计中的一些限制引起了人们对图案的关注和使用。一个简单的小图片可以很容易地被重复填充到页面中的某个区域中，很小的图片也意味着在作品中添加这种细节修饰并不需要花费太多的网络带宽。例如，哪怕是一个只有500字节大小的图片，也能很容易地完全填充到某个900像素宽的大区域中。
CSS中内建的background-repeat属性就是用来设定重复显示选项的。background-repeat属性的使用方法非常简单，其可选值包括repeat、no-repeat、repeat-x以及repeat-y，分别代表让图像重复显示、只显示一次（非重复显示）、只在x方向重复显示以及只在y方向重复显示。
h3 {
background-repeat: no-repeat;
}
body {
background: #669999 url(z_bgrnd.gif) repeat-x 0px 1px;
}
在前面这段示例代码中可以发现，我们可以独立指定background-repeat属性。该属性并不需要依赖于其他任何的背景（background）相关属性，也并不一定要写在冗长的background规则中。
2.4.2 材质
在浏览Web页面时，我们并不能用触觉感受到什么信息，通常来讲，整个计算机行业中也都是如此。虽然简单的力反馈功能在游戏手柄上较为常见，但除此之外触觉却并没有什么更进一步的用武之地。
在本世纪初的几年里，罗技（Logitech）公司实验性地发明了一种名为“iFeel”的鼠标产品，这种鼠标能够给手指一定的反馈，让操作系统中的元素以及网页带有一定的“材质”感。例如，将指针移到超链接上将会感受到类似在橡胶表面上移动鼠标的感觉。但最近一段时间这种技术似乎销声匿迹了，罗技公司也不再生产这种鼠标。虽然看上去不错，但却没有人知道这种技术到底有什么用，所以它也一直未能流行起来。
因此，在传统观念中Web并不能很好地体现材质：唯一的触觉反馈可能就是在点击按钮时。但材质却并不一定必须要通过触觉才能感受，视觉也能够体现材质感。
以人物雕像为例，设计师一般都会在石头上仔细雕琢出人物的衣物。我们自然可以想象到，若触摸这些石制的衣物，将只能感觉到光滑、坚硬的外表（图2-4-3）。但我们也都理解它要代表的是真实的衣物，因为二者在视觉上有很多的类似之处。
图2-4-3 用雕刻手法为石像模拟出衣物的材质感
图案是体现材质感所必不可少的。通常情况下，无论是否是刻意而为，图案都能够模拟出材质的效果。很多材质的元素都自然地由图案的重复而体现出来。
虽然翠绿活力中的图案并不是由照片得来的，但这些图案却毫无疑问地模拟出了真实世界中的材质感。网点类型的图案让人联想到凸凹不平的表面，上面的小方块也让人感觉这像是一块带有方格纹的棉布。弯曲花纹类型的图案则给人以怀旧风格的地毯或华丽的布料的感觉。若以织物的角度体会，翠绿活力将很容易让人联想到一个诱人、舒适的长沙发。
2.4.3 对比度
选择像翠绿活力一样单调的色系在设计中是个非常冒险的行为，除非你经过了仔细考虑。但丰富的色彩和细节也可能导致潜在的对比度问题，这一点在设计时同样不容忽视。
对比度差别可以用来区分不同的元素。若对比度过低，则元素将失去彼此的界限并混合在一起，文字也变得难以辨认。若对比度过高，则将给浏览者带来压迫感，同样不会觉得舒适。
1.高对比度
对比度过高将让作品显得过于拥挤，有过度设计之嫌。虽然翠绿活力中用到的颜色范围较窄，但材质和文本的合理使用却依然起到了提高对比度的作用。若颜色种类过多，作品看上去将充满了噪音，显得不够和谐（图2-4-4）。
图2-4-4 若是在翠绿活力中使用更强的颜色对比度，将与丰富的图案产生冲突
几个世纪以来，各种出版物均是在白纸上印刷出黑色的文字。虽然彩色印刷的历史也不算短，但白底黑字仍旧是最好的对比度组合，读者也都对这样的组合非常习惯。一般来讲，白底黑字原则在计算机屏幕上同样是达到最佳对比度的不二之选。
但还是有些例外情况。真正的书本靠反射光线阅读，但计算机屏幕却是自身发光的，这种差别也给屏幕显示带来了一些特有的问题。例如，黑暗房间中的一个明亮的LCD屏幕将显得极为刺眼。在这种环境下，阅读任何纯白背景上的文字无疑都是对视力的巨大挑战。
考虑到对比度之后，使用颜色将变得愈加复杂。由于同时色对比（simultaneous contrast）1的原因，某些颜色的色块放在一起会格外显眼。若将两种互补色，例如橙色和蓝色或红色和绿色相邻放置，那么将显示出明显的边界以及强烈的对比效果（图2-4-5），进而引发令人不愉快的视觉上的紧张感。
注释：1 同时色对比是指两种不同的色光同时作用于视网膜的相邻区域时，颜色视觉因受到影响所发生的变化。眼睛为了更加清楚地分辨出颜色差异，会尝试夸大颜色的色调、亮度和对比度等。——译者注
图2-4-5 同时色对比导致的颜色边缘强化
但在某些需要表现浓烈色彩的情况中，我们也可以充分利用同时色对比所带来的效果。例如，黄色背景下的橙黄色将显得更接近橙色，但若是在橙色或红色背景下，则看起来会更接近黄色（图2-4-6）。在更加暗淡的颜色背景衬托下，偏暗的颜色也会变得明亮起来。例如，若是将某种比较暗淡的红色置于灰色背景中，则该红色看起来会鲜艳许多。
图2-4-6 同样的橙色，在黄色背景下显得偏橙，在红色背景下显得偏黄
2.低对比度
若作品的对比度过低，则往往会给人带来压抑的感觉。在表现变化和差别时，我们需要适当的对比度。翠绿活力中选择了从明到暗的多种绿色，但若是这些绿色都趋于一致，那么整个作品将缺少了让人感觉眼前一亮和平静舒缓的区别，变得毫无生气，最终导致打破整个视觉上的平衡（图2-4-7）。
图2-4-7 对比度不足的翠绿活力
但低对比度也有其独到之处。在设计中，有些时候即使是一个像素也会显得太大，但因为像素已经是屏幕显示的最小单位，所以我们也没有任何办法画出一条比单一像素还要细的直线。这时若是降低这条线与其背景之间的对比度，则能够让其看上去变得更细一些（图2-4-8）。
图2-4-8 使用较淡的按钮边框颜色会让其显得更细
用类似的方式降低设计元素之间的对比度同样也可以实现一种柔和的效果。例如，对于某段不是那么重要的文本，我们就可以为其应用一些较浅的颜色。对于某些非活动的图标或链接，我们同样可以通过降低其对比度来实现“变灰（grayed out）”效果，让用户了解该选项当前不可用。
但对于低对比度的使用仍旧需要格外小心。双眼视力都是5.0的读者在阅读浅灰色背景上的深灰色文字时可能没什么问题。但对于那些视力不那么好的读者来说，若想看清楚这段文字，将不得不凑近屏幕或者增大文本的字号。但无论在何种情况下，黑色的文字总是能够带来更好的可读性。
色彩的对比度同样会影响到内容的可读性，不同的色调对应的可读性也不尽相同。例如，纯黄色看起来就比蓝色显得淡一些。所以即使读者的双眼视力都是5.0，白色背景上的黄色文字依然基本上无法阅读。
3.色盲
若想更深入地研究色彩对比度问题，那么自然会考虑到那些患有色盲的读者（图2-4-9A和图2-4-9B）。颜色方面的缺陷有很多种，每种也都有它的变化。最常见的可分为如下两大类：
图2-4-9A 模拟红色盲患者眼中的禅意花园设计
图2-4-9B 模拟绿色盲患者眼中的禅意花园设计
□ 红色弱/绿色弱——患有红色弱或绿色弱的人仍旧能够看到大多数颜色，但对不同颜色的分辨能力会有所减弱。红色弱/绿色弱也被叫做三色感知异常（anomalous trichromacy）。
□ 红色盲/绿色盲——这类的颜色感知障碍较为少见，但却更加致命。患者通常无法正常分辨出红色和绿色，他们的世界中只有黄色、棕色和蓝色。红色盲/绿色盲也被叫做dichromacy。
以上各种类型的色弱/色盲患者均部分甚至完全不能感受红色和绿色（也可能会有蓝色，但非常少见）。一般地，每12个人中就有一个存在着颜色感知障碍，且男性的发病率要远高于女性。
但若是某个患有颜色感知障碍的人在欣赏某个作品，且该作品中恰好包含了一些他无法感知的颜色的话，会出现什么问题呢？若是设计师想要依赖颜色传递某些重要的信息，那么在这些患有颜色感知障碍的浏览者眼中，其精心挑选出的调色板可能将变得毫无用处。例如，若某个患有色盲的浏览者无法看出红色和深棕色或黑色之间的区别，那么我们就不能给出诸如“点击红色按钮”的提示。虽然对正常人来讲区分颜色不过是小菜一碟，但在这类特殊的浏览者看来，很多时候某种颜色将和其背景完全混在了一起，区分二者成为了根本不可能完成的任务。
没有什么方法可以完全模拟出色盲患者看到的世界。将作品转化为灰度图像似乎是个不错的办法，但这也不是作品在大多数色盲患者眼中的真实样子。很多图像处理软件中都提供了各种各样的滤镜，用来模拟不同类型色盲患者眼中图像的样子，但这种模拟也仅仅是近似而已。颜色感知障碍存在着个体差异，每个人的症状都会有所不同。
既然针对颜色感知障碍浏览者的测试不可行，那么又该如何是好呢？“ Web Content Accessibility Guidelines” 中的第2条指导意见（www.w3.org/TR/WCAG10/#gl-color）给出了解答：对于任何依赖于颜色传递的信息，我们都应该提供如下方式中的至少一种来告知用户：蓝色且带有下划线的超链接、包含图标或文本的绿色按钮、带有实线边框的红色警告信息等。
Note
Colorblind Web Page Filter滤镜（http://colorfilter.wickline.org）可以用来模拟色盲患者眼中的图像。
2.4.4 统一
为了让作品的视觉效果趋于统一，在设计时就需要考虑到作品的各个方面。若是翠绿活力没有考虑到材质与色彩、文本与图案之间的相互影响，那么作品将变得过分张扬且拥挤不堪。但由于Laura MacArthur注意到了这些问题并仔细平衡了各种设计元素，作品的整体效果最终远远地超过了其每一个组成部分。
Charlotte Lambert，设计师
www.csszengarden.com/068
用想象创造视觉流向并引导视线
禅意花园的本意就是让人们沉思，Charlotte Lambert的视觉作品叙事曲也正是为了表达这种感受而作。Lambert在她的花园中来了一次精神上的散步。想象在花园中自由飞驰，一路上她遇到了很多具有象征性的东西：一段楼梯、一座小桥、一只闲逛的猫。
从想象回到现实，Lambert创建了几幅草图来帮助自己完善关于作品的想法。她在这些草图上手工绘制出了旅途中的所见，然后用中国的墨水和白色的颜料在纸上，甚至是啤酒包装箱上开始了创作。之后，Lambert在Photoshop中将它们组织起来，最终完成了将用于作品中的图像。
2.5.1 引导视线
一个良好的作品应该能够引导读者的视线，让读者以合理的逻辑顺序逐一阅读内容中的重点，但同时又不会让读者觉察出来。这一点至关重要，既表达了设计师希望传达的意图，也不会让读者觉得被控制。
为了引导读者的视线，我们必须引出视觉流向的概念。视觉流向是指通过使用图片和内容，让读者的视线从一个重要地点移动至下一个的过程。在叙事曲中，我们就能看到这样一条清晰且相当优雅的视觉流向。
网站配置导航条、作品存档、资源链接等起辅助导航作用的内容都被统一放置在了页面的左边，与主要内容分开（图2-5-1）。大多数人在浏览网页时都习惯于在页面的左边或上边寻找导航条，所以将导航条布置在这些位置上将让浏览者易于发现，进而迅速转向页面的主要内容。
图2-5-1 在叙事曲中，导航和辅助信息与内容区域完全分开。采用这种方式，作品可以很容易地将读者的视线吸引到其内容上
在Lambert的作品中，我们不停地被从一段中带入到另一段，就像真的走在花园小路上一样。我们从门廊（图2-5-2）开始，经过了第一段之后走下台阶（图2-5-3）来到了第二段。花园中的每一段都有着独一无二的样子，并为内容提供了足够的空间。标题部分描述了每一段的概要，让该段的内容与视觉流向融为一体。
图2-5-2 叙事曲中的门廊。这个小插图让整个作品显得生动活泼
图2-5-3 从门口到台阶，以充满技巧性的暗喻方式引导了读者的视线
在引导读者的视线时，还有一个重要之处，即为读者的眼睛提供一些休息的空间。达到这个目的的最常见作法就是在页面中添加足够、适当的空白（图2-5-4）。颜色可以用来将读者引导至页面中的关键部分，而形状和线条则可以为读者的视线移动指明方向。
图2-5-4 每一块内容中都提供了大量的白色空余空间，既让眼睛有休息的余地，也增加了内容的可读性
在叙事曲中，设计师用块状的白色来表示主要内容区域。这在提供足够的、易于阅读的对比度的同时，也给内容区域中保留了足够的空白让眼睛休息。作品的颜色选择极为简单，只使用了棕色、黑色和白色，似乎为我们留下了这样的疑问：这是在冬天的花园中么？还是秋天的？带着这些问题，读者将会饶有兴致地欣赏整个作品并尝试去寻找更多的线索。
最终，树叶（图2-5-5）、小溪、拱桥和脚印（图2-5-6）也为作品增添了一些非同寻常的元素，将我们的视线引至远方，并留给我们无尽的美好遐想。
图2-5-5 一条布满落叶小路带人们走出了花园
图2-5-6 一只小猫守望在作品的左上角，让叙事曲充满了令人愉悦、引人入胜的细节，欣赏者也总是能够在不经意之间找到小小的惊喜
2.5.2 CSS的思考
最近几年，出现了一大批创新的、不愿按照守旧派的方式使用表格布局的设计师。作为table的替代品，他们认为CSS应该承担起布局并呈现样式的重任。虽然所有禅意花园的作品都力求说服人们使用CSS进行布局，但仍有那么一些守旧的设计师固执己见，坚持使用复杂的table布局。在叙事曲中，设计师完全能够直接用CSS实现预期的设计效果。但若是选择table布局，情况又将如何呢？
1.守旧派的悲哀
让我们来看看守旧派眼中应该如何实现这个作品。你将很容易发现在该作品中使用表格布局将是一次噩梦般的尝试。若是在Macromedia Fireworks中用图片分割工具进行布局，哪怕仅仅是从作品中取出两个主要的小节，你也将得到一个复杂的表格加上其中大量的分割图片：
<table bgcolor="#ffffff" border="0" cellpadding="0"
cellspacing="0"
width="597">
<tr>
<td rowspan="3"><img name="ballade_r1_c1"
src="../Images/ballade_r1_c1.gif" width="30"
height="887"
border="0" alt=""></td>
<td><imgname="ballade_r1_c2" src="../Images/
ballade_r1_c2.gif"
width="537" height="273" border="0" alt=""></td>
<td rowspan="3"><img name="ballade_r1_c3"
src="../Images/ballade_
r1_c3.gif" width="30" height="887" border="0"
alt=""></td>
<td><img src="../Images/spacer.gif" width="1"
height="273"
border="0" alt=""></td>
</tr>
<tr>
<td><img name="ballade_r2_c2" src="../Images/
ballade_r2_c2.gif"
width="537" height="429" border="0" alt=""></td>
<td><img src="../Images/spacer.gif" width="1"
height="429"
border="0" alt=""></td>
</tr>
<tr>
<td><img name="ballade_r3_c2" src="../Images/
ballade_r3_c2.gif"
width="537" height="185" border="0" alt=""></td>
<td><img src="../Images/spacer.gif" width="1"
height="185"
border="0" alt=""></td>
</tr>
</table>
查看上述代码，很容易发现许多明显的复杂之处，包括：
□ 表格布局添加了大量的不必要标记。
□ 使用间隔图像1，而不是CSS中的内外边距设定，不必要地增加了页面的文件大小。
注释：1 间隔图像是在table布局中常用到的一个技巧，通常是一个1×1大小的透明GIF图像，用在撑大表格等辅助布局中。——译者注
□ 图片是用img标签添加到页面中的，这些额外的img标签增加了页面的文件大小，导致页面加载需要更长时间。
□ 既然选择了表格布局，那么网站中的各个页面也必须统一使用table。每个页面都包含着类似的table和img标记，因此每次页面加载时浏览器都必须重新请求这些内容并进行重绘2。但若是使用CSS，这些布局信息即可缓存于浏览器中。例如在禅意花园的作品中，应用图片的代码只需要加载一次。
注释：2 事实上，浏览器都会自动缓存<img>标签引用的图片。反而有些浏览器（例如IE6）无法缓存定义于CSS中的图片。——译者注
Note
虽然从总体说来，CSS布局的呈现速度以及友好性要强于过度复杂的表格布局，但它也存在着一个常见的问题——FOUC（无样式内容瞬间，Flash of Unstyled Content）。在IE浏览器中，若以import而不是link的形式引入CSS，则将发生FOUC现象。但只要在HTML文档的head部分存在着一个script或link元素，即可避免FOUC。禅意花园选择了用script元素来避免这个问题，让页面加载更为平滑。若想了解更多FOUC的相关内容，请参考http://www.bluerobot.com/web/c ss/fouc.asp。
自然，这些都是表格布局中遇到的常见问题。绝大多数设计师也都了解过度使用表格导致的另外一些问题，包括可访问性——很多为盲人准备的屏幕阅读设备都无法正确理解采用表格布局的页面。再来考虑一下叙事曲中最重要的设计意图——引导读者视线，我们就会发现使用表格将导致的另外一个问题：因为table布局页面的加载过程通常都不会那么平稳自然，所以这种笨拙守旧的布局方式将很有可能扰乱作品的视觉流向。
2.创新派的设计流程
但若是使用了CSS，那么我们很容易就能想象出让作品平滑加载且对用户友好的方法。设计师不必再陷入复杂的表格、不规则的图像切片或是间隔图像中，而是可以相对独立地为页面元素设置样式。
但这并不是说在基于CSS的设计中就不能使用嵌入到HTML中的img标签。若图像属于“内容”，而不是“样式”的一部分，例如“公司介绍”页面中的一张CEO照片或是软件网站中某个产品的屏幕截图，则显然应该使用img标签。使用CSS的关键之处在于将页面的表现样式从页面结构中分离开来——页面的表现样式属于设计部分，而并不属于内容。
Note
若图片实际上起到了标题的作用，那么将其包围在标题中也就显得恰如其分。禅意花园是用“图像替换”技术来实现的，关于“图像替换”，将在第4章中详细介绍。
Note
Mozilla和Mozilla Firefox的Web Developer工具可以在此免费下载：http://chris pederick.com/work/firefox/webdeveloper。
在下面的代码中，可以看到叙事曲的主要内容段部分是如何将图像以背景的形式应用到段首标题之上的：
preamble h3 {
background: url(road.jpg) top left no-repeat;
height: 106px;
}
explanation h3 {
background: url(about.jpg) top left no-repeat;
height: 168px;
}
participation h3 {
background: url(particip.jpg) top left no-repeat;
height: 154px;
width: 565px;
}
benefits h3 {
background: url(benef.jpg) top left no-repeat;
height: 171px;
}
requirements h3 {
background: url(req.jpg) top left no-repeat;
height: 125px;
}
在Mozilla和Mozilla Firefox的Web Developer扩展工具中，我们可以让其自动标出页面中的块级（block level）元素，并查看其id与class（图2-5-7）。图中可以看到，这个工具能够帮助我们容易地找到页面元素的精确位置。
图2-5-7 使用Mozilla和Mozilla Firefox的Web Developer扩展工具查看叙事曲的页面。这里标出了每个块级元素的位置，演示了设计师布局和使用背景图片的方法
通过将内容置于HTML页面中并使用背景图像创建样式，作品将能够得到很多极为明显的改善：
□ 通过改进标记方法，降低了页面文件大小。
□ 由于CSS将被浏览器缓存，因此若是将大多数（甚至所有）的样式标记置于CSS中的话，浏览器将不必每次都从服务器端重复取得页面的样式，也自然大大加快了页面的加载速度。
□ 网站的可访问性得到了立竿见影的增强，因为HTML中再没有任何表示样式相关的代码。
□ 网站更加易于管理。比如说春天来了，我们想给叙事曲添加一些绿色和金色的元素，让作品不再是现在这样冷冰冰的感觉。按照现在的设计方式，我们只要修改CSS以及其使用到的图片即可，具有相当的灵活性。修改这种CSS布局的网站要远远简单于表格布局的网站，即降低了管理费用。
2.5.3 寻找跨越的桥梁
寻找一种有效的Web设计方法并不简单。设计师必须全方位地考虑许多问题。在叙事曲中，我们学到了如何让作品充分引导读者的视线，如何用色彩表达某种特定的感觉，以及为什么CSS布局要远强大于表格布局等很多知识。CSS让设计师挣脱了传统技术的桎梏，来到了一个全新的世界。
对于那些正从table布局转向CSS布局的设计师来说，最大的挑战就是如何在这种新技术下找到灵感。虽然CSS让我们从前人设计的限制中解放了出来，但Photoshop、HTML标记和样式仍旧是设计中不可或缺的环节。挑战实际上在于如何找到新旧技术间跨越的桥梁。Charlotte Lambert的叙事曲给出了足够的启发，让作为设计师的我们找到了这座桥梁，展开想象的翅膀，使用最新的技术从传统的Web设计方式中飞跃至最新的CSS设计理念中。
Dave Shea，设计师
www.csszengarden.com/064
将网站设计变为代码，并解决转换中遇到的问题
Dave Shea驾车在夜幕刚刚降临的城市中行进，耳边传来John Coltrane的轻柔的萨克斯曲调，黄色的路灯闪过车窗，外面是深蓝色的天空。很快，他在这纯美的夏夜中找到了Night Drive的创作灵感。
深颜色确定了作品模糊、温暖的基调。文本和图像所使用的深橙色以及零星点缀的亮橙色平衡了作品的色调，让作品不至于显得过于沉闷。散布在作品各处的淡蓝色小块同样起到了很好的补充作用，表现朴素安静的同时也避免显得过于单调。
作品中的照片是根据其色彩和主题选择的——行驶在刚刚日落的街道中，你会看到昏黄模糊的灯光、玻璃一样的水面和朦胧的蓝色地平线。
2.6.1 将设计图转化为代码
最初在Adobe Photoshop中设计Night Drive时，Shea几乎没有考虑过如何用CSS实现的问题。设计图首先完成，这样，任何有关实现的问题就只能在编写CSS的过程中解决了。
应该如何将设计图转化为具有交互性的、真正的网站呢？首先，设计图应该分割成片存放，然后再用CSS将其组装起来。图片分割的过程没有什么硬性的规定，当然也没有什么放之四海而皆准的法则，只要把握住最重要的一点——灵活性即可。事先多考虑几种方法，将会让你在作决定时游刃有余。
2.6.2 选择
首先考虑Night Drive的页首标题部分——页首由一系列方框组成，右上方还覆盖着一个闪闪发光的、带有立体效果的黄色徽章（图2-6-1）。这里我们将遇到两个挑战：首先是如何布局这些照片和线条，其次就是如何将背景透明的徽章图片置于最上方。仔细斟酌之后，Shea找到了如下两种方案：
图2-6-1 Night Drive的页首标题部分
□ 将整个页首部分设计图保存成单独的一张JPG图片。但图片只能轻微压缩，以保证图像的质量。当然，这种方法带来的图像文件势必较大。
□ 将页首部分的图像分割为若干个小图片，然后再将图片添加至#pageHeader中的各种元素，或是结尾部分的#extraDiv元素（使用绝对定位将这些元素放置在页面顶部）上，最后把这些小图片重新组装起来（图2-6-2）。
图2-6-2 标题被分割为若干独立的切片
最终Shea选择了第二种方案，但也采用了一些第一种方案中的想法：Shea没有直接将这一大块图案简单分成几个小块，而是有选择性地将两幅照片图像存为了JPG文件（图2-6-3）。标题文字“css Zen Garden”以GIF格式保存，在这些图片后面、作为布局背景的衬底也被存为一个高度压缩的GIF图像。从设计图到代码的过程竟如此崎岖——我们仅仅是想把页首部分正确显示出来而已，最终结果却是混杂使用了两种布局方案，图像也根据需要分别被保存为GIF和JPG两种格式。
图2-6-3 照片和文字与背景图片分开保存
保存完这些图片文件之后，接下来的一个问题就是如何将它们再次组装起来：这些图片都分别应该应用到哪个HTML元素之上呢？在明智地选择使用background-image属性和图像替换技术之后，答案显而易见：#pageHeader中没有足够多的元素，我们还需要使用定义在HTML文档末尾的#extraDiv，并将其放置于页面的顶部。最后，Shea将最大的那张背景图片与h1元素绑定起来，并将标题文字“css Zen Garden”应用到了h2之上。
下面代码中的高亮部分演示了为元素应用背景图像的方法：
h1 {
width: 770px;
height: 166px;
margin: 0;
background: #000 url(bg2.gif) top left no-repeat;
}
h2 {
width: 244px;
height: 42px;
background: #000 url(h1.gif) top left no-repeat;
position: absolute;
top: 120px;
margin: 0;
margin-left: 495px;
}
h1 span, h2 span {
display: none;
}
上面代码中最下面的一个样式隐藏了span中的文本，因为其内容将被图像所替代。但目前已经不建议再使用这种方法了。
Note
关于图像替换技术的详细使用方法以及使用中的各种问题，请参考这篇文章：“Using Background-Image to Replace Text”（www.stopdesign.com/articles/re place_text）。
2.6.3 绝对定位技巧
从布局角度说，将本来在HTML结尾部分的照片图像定位到页首的确是个不小的挑战，这部分内容则为实现该效果打好了基础。绝对定位在处理居中时并不那么方便。Shea使用了一种非常有用的技巧来处理这个问题：首先将父元素绝对定位于页面的最左边，并将其宽度指定为100%，在水平方向占满整个浏览器窗口。然后将其子元素——这里就是那些span——设置为居中。
考虑到很多浏览器的缺陷，这部分代码如下：
extraDiv1 {
position: absolute;
top: 41px;
left: 0;
text-align: center;
width: 100%;
}
extraDiv1 span {
background: transparent url(granville.jpg) top left no-
repeat;
display: block;
margin-left: auto;
margin-right: auto;
height: 123px;
width: 770px;
}
若是希望子元素绝对居中的话，那么这样就算大功告成了。但若并不想要其绝对居中，需要加上些偏移量，又该如何处理呢？为子元素添加一定的内边距（padding）能够增加元素的总宽度，这样即可让其偏离原本的绝对中心位置。但这个偏移量的值在指定到内边距上时要加倍计算——因为在给元素添加内边距的同时也增加了元素的总宽度。还有，内边距要添加在与期望偏移方向相反的一侧，例如若要让在正中央图像向左移动，那么应该为图像添加右侧的内边距值（指定padding-right属性），反之亦然。
Note
内边距值需要二倍于期望的偏移量。例如指定了100px的padding-right，在中心坐标系中将只会让元素向左移动50px。
由于元素居中放置，且添加内边距值也同样增加了元素的宽度，所以元素将同时向左右两个方向移动相等的距离。
2.6.4 垂直分割线的花招
完成页首部分的布局之后，Shea在把它连接到页面其他内容时又遇到了麻烦。Shea想要用两条平行线将页面的左右两栏分开，但将背景图像垂直重复应用到左栏或右栏的方法却都行不通——左边的一栏（#linkList）的高度不够撑满页面，而右面一栏实际上却是由三个独立的div元素（#quickSummary、#preamble和#supportingText）组成的。
因为右栏中没有一个作为容器的最外层元素，所以Shea将这幅两条平行线的背景图片分别应用到了组成右栏的全部三个div上。Shea假定这三个div元素有着同样的宽度，且水平对齐。
quickSummary, #preamble, #supportingText {
background: transparent url(bg4.gif) top left repeat-y;
margin: 0 0 0 400px;
width: 342px;
}
这三个div元素的确水平对齐，但还是出现了一个意料之外的问题：这些div两两之间都有一条水平缝隙（图2-6-4）。我们并没有为其指定任何的外边距（margin）值，那么这些缝隙又是从何而来的呢？
图2-6-4 div之间导致问题的缝隙
2.6.5 外边距重叠
CSS盒模型（box model）中有一个较为晦涩的概念——外边距重叠（collapsing margin）。外边距重叠是指，若两个元素上下毗邻且都定义了不为0的外边距值，同时又没有任何内边距、边框等设定，那么这两个元素之间的距离将小于二者外边距的和1。因此，两个都带有20px外边距的元素垂直相接并不会显示出40px的缝隙——两个外边距会重叠在一起，最终元素之间的距离只有20px。
注释：1 对于都为正数的两个外边距定义来说，两个元素之间的距离为二者外边距距离中较大的一个，即外边距要尽可能地重合。——译者注
但这和Shea遇到的那个缝隙问题又有什么关系呢？原因在于，重叠效果将同时作用于父元素和子元素之上——由于这三个div都没有设定外边距，因此每个div的底部外边距将与其最后一个子元素（即段落元素p）的底部外边距重叠。因为总共的外边距值并不为零，所以其最后一个子元素的10px外边距值仍然要被计算进去，看上去就像是子元素“戳开”了包含它的div父元素（图2-6-5）。
图2-6-5 段落元素“戳开”了包含它的div元素的底部
搞清楚产生原因之后，问题也就非常容易解决。为这三个div元素添加1px的垂直内边距，这样将不再满足形成外边距重叠的条件，div之间的缝隙自然也就消失了：
quickSummary, #preamble, #supportingText {
background: transparent url(bg4.gif) top left repeat-y;
margin: 0 0 0 400px;
padding: 1px 0;
width: 342px;
}
Note
外边距重叠定义与CSS 2.1规范中：两个或更多个块级元素（内容必须不为空，且没有内边距或边框的定义，也没有应用清除浮动样式）的相邻（外部相连或内部嵌套）外边距将重叠成一个单一的外边距。（www.w3.org/TR/CSS21/box.html#collapsi ng-margins）
2.6.6 图片使用技巧
现在页首和正文部分都已经完成，该考虑如何将那个黄色的徽章定位在页面右上角了。在将图片覆盖在其他图片上时，选用带有透明区域（这里是徽章投下的阴影）的图片所带来的好处就是无须考虑被覆盖图片上是什么内容。Shea自然可以选择在Photoshop中将原稿的各图层合并，然后将徽章以及其周围的阴影、被覆盖图片内容一起保存为GIF或JPG格式，这样即可保留住徽章漂亮的阴影（图2-6-6）。当然，Shea也可以抛弃掉那部分周围被覆盖的图片，只是将徽章本身保存为透明的GIF格式，但这样却无法留住徽章周围的阴影（图2-6-7）。
图2-6-6 徽章与其周围背景一起保存，没有透明度设定
图2-6-7 去掉背景只保留徽章本身，受限于GIF对透明度的支持，阴影部分的效果并不理想
但因为对作品来说，这个徽章并不是“必不可少”的，所以Shea并没有使用上述两种方法中任何一种，而是将其存为了PNG格式，这样也免去了很多不必要的麻烦。因为无论放置于什么地方，带有256级透明度的PNG图像都能完美地显示出阴影效果。图2-6-8和图2-6-9就演示了该PNG图片在两种不同背景上的样子。
图2-6-8 透明PNG格式的徽章覆盖在白色背景上
图2-6-9 透明PNG格式的徽章覆盖在黑色背景上
PNG格式将在本书稍后部分详细介绍，目前为止需要指出的就是， Windows平台下的IE浏览器并不能显示其透明度信息1，因此，我们就要想办法在IE中隐藏该徽章。最简单的实现方法是使用IE同样不支持的子孙选择器（child selector）2，这样即可有选择性地只将该徽章呈现在能够正常显示其透明度信息的浏览器中。
注释：1 IE7.0已经能够正常显示出PNG图像的透明度信息。——译者注
注释：2 IE7.0已经支持了子选择器。——译者注
html>body #extraDiv4 span {
background: transparent url(seal.png) top right no-
repeat;
}
但显然，对于那些更为正式的Web项目来说，即使是那些非“必不可少”的图像也必须同样显示于IE中，以保证站点的严肃和统一。虽然GIF格式中简单的“开/关”透明度设置3会带来不少限制，但如果仔细规划的话，仍旧有办法实现所需的功能。禅意花园鼓励这种实验性质的超前尝试，但你的客户或许并不能如此“通情达理”。
注释：3 GIF格式只支持设定某个像素是否完全透明，但并不能够设置其具体的透明度，例如30%透明等。——译者注
2.6.7 迈出小小的一步
在规定期限内，仅仅从设计图开始，直至编写出完全基于CSS布局的Web页面的确是个不小的挑战。成功的关键在于将其合理地分割成一些较小的任务——例如，对于Night Drive的页首部分布局，我们就将其分为了两个步骤进行。
事先多考虑几种可能，将使您在问题到来时更加沉着冷静，并做出最正确的决定。对于任何问题，例如改变页面中元素的位置、调整元素的外边距或是为元素添加某种特效等，这一条都是颠扑不破的真理。
