footer中的这些链接是个列表……难道不应该用ul来组织吗？这是个反问句——这些链接确实应该包含在某个列表元素中。
quickSummary p {
quickSummary > p + p {
quickSummary > p + p + p {
quickSummary p:nth-child(2) {

[第1章追本溯源]

长久以来， We b设计就在快速变化着。We b设计师需要逐字逐句地查看源文件，反复试验并挑战自己的极限。这是一个有趣的过程，也通常是我们自发来做的工作。

随着时间的流逝， We b标准及其最佳实践开始逐渐浮出水面，这个过程直接指向了我们的工作所基于的最重要的软件——We b浏览器。在本书中，你将学到掌握当代We b设计的理念、过程和技术所必需的一切知识。

追本溯源

20世纪90年代末的互联网是一个疯狂且危险的新领域。任何事情都可能发生，新东西不停地出现。没有人能确定互联网当年应该是怎样的。就像孩童拿到了一件新玩具一样，“挑战极限”成了那时人们的口头禅。

起源

人们还在不停地挑战极限。但同时，HTML也以一种用来标记研究论文的简单语言的身份呱呱坠地。浏览器厂商和图形设计师都对其低下的布局能力颇有微词。于是，类似 <font>标签和被强行用作布局的<table>标签等hack¹应运而生，用来克服HTML的这些布局上的弱点。但这些hack却破坏了HTML语言的本意——以结构化的方式表示文档。

注释：¹ 指一些偏重于技巧类的、非常规的用来实现某种布局要求的手段和方法。例如用<table>标签进行布局就属于一种hack。——译者注

一些基本的HTML元素被滥用于与其本意毫不相关的页面布局中。同时一些具有明确功能的元素却因为不够“美观”而被人们抛弃。为了迁就网站的视觉效果，正确的文档结构往往被忽视。

当然，那时主流的浏览器生产厂商并没有帮上什么忙。在事情向好的方向发展之前，情况似乎还将变得更加糟糕。当时的两大浏览器霸主——微软和网景都在不停地开发出自己的私有扩展，再基于这些扩展进一步提供新的扩展，这就是著名的浏览器之战。虽然竞争有利于创新，但这个过程也同样让人感到窒息：Web开发者不得不为同一个站点维护多个版本的HTML代码，因为为某种浏览器编写的HTML代码极少能够在另一种浏览器中正常显示。

figure_0019_0004

总之，当时的情况是一团糟。尽管存在着这样那样的问题，但.com兴起时吸引的大量的资金仍旧让Web保持了不断的增长——有了足够的钱，即使要为同一个网站编写两套不同的HTML也没什么大不了的。但在千年之交的时候，无论是网站编写者还是投资者，都终于无法忍受了。

1.曙光初现

在新世纪之初，资金枯竭，Web上的预算减少。随着状况急转直下，那些尚未失业的Web开发者很快认识到，为各种非标准浏览器编写代码所带来的额外工作已不能承受，是时候去改变一些东西了。

一些“草根”Web设计师组成了一个叫做Web标准项目（Web Standards Project，WaSP；www.webstandards.org）（图1-1-1）的组织，并劝说主流浏览器生产厂商将它们的那些“狂放不羁”的浏览器标准统一起来，共同遵从W3C（World Wide Web Consortium）所“建议”的规范。这样，浏览器生产厂商基于W3C规范进行标准化的过程就为Web开发注入了一丝“一致性”的意识。人们有理由相信，在未来的一段时间之内，Web设计师所创建的复杂HTML页面完全可能以统一的样式呈现在各种浏览器和操作系统之上。

figure_0020_0005

图1-1-1 Web标准项目

W3C规范大都专注于解决较高层的编码及架构方面的问题，但普通的Web设计师却很少需要关心这些。即使这样， W3C还是从20世纪90年中期发布标准化HTML版本开始，陆续提供了一系列的规范。这一系列规范约束了发送给浏览器的HTML代码，旨在以一种智能、易用并便于实现的方式解决浏览器之间的兼容性问题。

Note

W3C致力于推动互联网的发展。自1996年发布第一份规范开始，W3C不停地挑战着现有的互联网规则，并为很多种技术提供了规范的解决方案。

2.为什么是这些标准

W3C 工作组成员由很多不同背景的专业人士组成，这些专业人士聚集在一起，讨论解决一些超前的、普通Web设计师永远都不用关心的问题。他们的目标就是提供一系列经过深思熟虑的建议，这些建议为软件开发者和浏览器指明了发展的方向。若网站编写者和设计师遵从了这些建议，就可以保证其站点能够在最多数的用户代理（user agent）中正常显示并正常使用。

当然，这里的“用户代理”指的是浏览器。但普通的桌面浏览器仅仅是众多“用户代理”中的冰山一角而已。随着移动设备（例如移动电话）的迅速发展，越来越多的用户不再被束缚在PC机前。而且，也不是所有的用户都有能力用浏览器访问网站——因为有些用户不能使用浏览器。例如，一些有特殊可访问性需求的视力不便的用户可能需要借助屏幕阅读器软件、盲文设备或屏幕放大软件等来帮助访问网站。

因为W3C创建这些规范的目的是改变20世纪90年代Web领域中的各种混乱的不兼容现象，所以很难为所有用户代理制定出统一的网站规范。考虑到这些，W3C发布了一系列的规范，包括HTML 4.01、XHTML、层叠样式表（Cascading Style Sheets，CSS）和DOM等。

这些规范所包含的技术都是Web标准项目组织里的设计师和开发者所希望看到的。遵从这些规范，我们就可以在保证网站支持大多数最广泛的用户代理的同时，也能够对其布局进行精确的控制（使用CSS），但这确实是一种与以往完全不同的网站创建方法。要让设计师们相信学会CSS是他们最好的出路并不是件容易的事。新千年的头几年一直都在阐释如何使用CSS。

就在这样的互联网大环境中，“CSS禅意花园”迎来了它的春天。当时，研究CSS的人们主要是程序设计师，这些程序设计师在如何从技术角度使用CSS方面非常精通，但他们的作品却都略显简单乏味，从艺术角度看，实在不敢恭维。而图形设计师却无法掌握使用CSS的精髓，因为当时并没有什么出色的CSS设计作品可供参考。

3.播下种子

在2002年的晚些时候，禅意花园的创立者Dave Shea开始考虑这个问题。对于那些有能力学会并用CSS做出漂亮效果的设计师来说，这类由程序员创建的平常之作又怎能引起他们的兴趣呢？Shea同时具有程序设计和视觉艺术两方面的背景，这也让他坚信CSS有成为一门设计语言的潜质。Shea同样意识到，那些真正应该使用CSS的人们反而没有在使用。于是他产生了这样的想法：如果有一个网站，集合了大量的的优秀CSS设计该多好啊。简单地搜集现有的资源用处不大——因为还没有什么现成的，唯一的办法就是鼓励优秀的设计师去创造全新的作品。就这样，Shea在内心播下了禅意花园的种子。

•先驱者

Web标准项目的创始人之一Jeffrey Zeldman在2002年发表了一篇文章，文中恳求那些已经了解了基于Web标准设计的好处的人们暂时放弃“说教”他人，而是去“使用”Web标准。“使用”成了宣扬Web标准最有说服力的武器，“展示而不是说教”也成为这批Web标准拥护者的信条。

2002年，一个叫Chris Casciano的Web开发者发起了一个名为Daily CSS Fun的项目（图1-1-2）。Casciano计划在为期一个月的时间内，每天发布一个新版本的CSS文件，让同一个HTML页面呈现出完全不同的样子。Casciano从未声称过他是图形设计师，但这个项目的结果却异常引人注目——人们都纷纷叹服于CSS也能实现如此特别的布局效果。

figure_0021_0006

figure_0021_0007

figure_0021_0008

图1-1-2 几个Daily CSS Fun的示例CSS效果

由于Netscape Navigator 4在当时还非常流行，且它对CSS的支持并不好，所以Casciano的这个项目也仅仅在理论上让人赞叹而已，离实际应用还有相当的距离。随着Netscape Navigator 4市场占有率的不断下降，直到2003年IE开始一统天下，CSS布局大行其道的日子似乎已经指日可待。CSS的全面应用重新被提上了议事日程。

•早期的想法

禅意花园的构思终于成熟，2003年5月，Shea发布了他的个人站点，即www.mezzoblue.com，很快又转到了现在的域名之上：www. csszengarden.com。

Note

需要注意的是，所谓Web“标准”，并不是传统意义上的“标准”——“Web标准”只是一种建议而已，并不是强制执行的规定。这一点在W3C的文档中也有体现：文档的名称都以“建议（Recommendation）”命名，而不是“标准（Standard）”。尽管如此，很多开发者仍旧将其作为“标准”来遵守。若想详细地了解这里面“标准”与“建议”之间的区别，请参考这篇文章：“Web标准是什么”（http://www.webstandards.org/2004/10/26/what-is-a-web-standard/¹）。

注释：¹ 原文给出的链接已经失效。——译者注

Note

可以在www.zeldman.com/daily/0802c.html#Evangeline这个页面浏览Zeldman的原文。

Note

可以在www.placenamehere.com/neuralustmirror/200202这个页面浏览Daily CSS Fun项目。

在2002年的晚些时候，Shea就已开始尝试为禅意花园编写原型，这个原型能够在四套样式表之间切换，分别代表了四种古代的元素——地、水、火和风。但这个想法并没有充分体现，主题中也没有用到足够的图片。如图1-1-3～图1-1-6所示，第一版的禅意花园草案还远远称不上吸引人。

figure_0023_0009

图1-1-3 禅意花园原型之一，地

figure_0023_0010

图1-1-4 禅意花园原型之一，火

figure_0023_0011

图1-1-5 禅意花园原型之一，风

figure_0023_0012

图1-1-6 禅意花园原型之一，水

这些设计似乎显得有些令人厌倦，因为它们都缺少了图片修饰。背景图片可以通过CSS的background-image属性声明，而作为内容的前景图片则不能。若是使用了<img>标签，则页面就会丧失了灵活性：我们将不得不被限制于一些确定了的图片中，无论CSS样式如何变化，都不能改变这些已经用<img>标签定义了的图片。但是，很多时候只使用背景图片是不够的，因为设计时所用的图片往往用来修饰文本，也就是说，这些图片需要放置于文本的两侧，而不是作为背景和文字混在一起。显然，只使用背景图片还不能完全满足这样的设计要求。

Douglas Bowman在其文章“使用背景图片来替换文本”中给出了一种权宜之计（这种解决方案目前已经是声名狼藉）：首先在页面中将前景图片和某些文本元素关联起来，然后用图片来代替原来的文本。使用CSS加上一些少量的额外标记，即可很容易地实现这个hack——与<img>标签及其alt属性的表现非常类似。

2003年4月，禅意花园的计划正式开始了。设计者发布了一个单独的HTML文件作为所有设计的基础，随着这个HTML文件发布的还有5个初始设计（图1-1-7～图1-1-11 ）。

figure_0024_0013

图1-1-7 1号设计，安静

figure_0024_0014

图1-1-8 2号设计，鲑鱼奶油奶酪

figure_0024_0015

图1-1-9 3号设计，暴风雪

figure_0024_0016

图1-1-10 4号设计，拱门

figure_0024_0017

图1-1-11 5号设计，血色欲望

Note

如果你曾读过Bowman 的原文（http://www.stopdesign.com/articles/repla ce_text/），则会发现这个解决方案存在着一些非常致命的可访问性问题。禅意花园的很多设计也使用了同样的技巧，该技巧将在第4章中详细介绍。

Note

因为禅意花园的HTML文件一旦发布，就不能再修改（其他人会开始为这个HTML编写CSS样式文件并提交上来），所以Shea花费了一段时间来检查文档的标记和内容是否合适，且还要保证文档中有足够的class和id元素，以便于日后用不同的CSS进行修饰。但即使如此细心，在HTML正式发布之后还是出现了一些事先难以预料的问题——这些将在本章稍后部分介绍。

4.默认的设计——安静

虽然前5个初始设计都对禅意花园的成功起到了至关重要的作用，但从长远来看，只有默认的第一个设计始终保持着较高的知名度。精致简洁的“安静”始终被设定为禅意花园的默认界面。虽然也曾考虑将2号设计“鲑鱼奶油奶酪”作为默认界面，因为该设计第一眼给人的冲击力较强，但谢天谢地，最后还是选择了“安静”。

除了正文部分之外，默认设计中的所有图片和文字都是在Adobe Photoshop中手工绘制的。起初Shea希望能够用书法手工写出标题的这段文本，不过在尝试了一个小时的毛笔和墨汁之后，Shea还是决定使用另一种让人更加满意的方法——Bitstream的Calligraphic 421字体（图1-1-12）。

figure_0025_0018

图1-1-12 Calligraphic 421字体

因为汉字笔画复杂、样式美观，所以很多设计师非常欣赏它所体现出的细节。一种典型的西方设计方式就是一知半解地将若干汉字拼凑起来，以体现出某种“神秘”的意味，但Shea却不想这样。Shea花费了一段时间研究将要放在页面左上角卷轴中的汉字，希望能够让这些汉字表示出一定的含义。虽然初衷是好的，但结果仍旧让人遗憾：卷轴中的汉字在英语中的含义大概为beginning、complete、whole和skill¹。

注释：¹ 在图1-1-7中我们可以看到，这几个汉字为“完”、“全”、“技”等。隐约可以感到Shea似乎要表达出类似“最高水平”的意思。——译者注

还记得小学时候的这类小作品吗？将墨汁倒在一张白纸上，然后用吸管将墨汁吹成类似树的形状，最后撕下一些卫生纸片作为“花”。页面右下角的那棵树的设计过程将会让你回忆起这段美好的时光。从屏幕截图中可以看到，这棵树经历了若干次修正（图1-1-13）。整个过程从树的轮廓开始，只包含一些很简单的颜色，然后再基于该轮廓，以不断添加图层的方式进行改善。

figure_0025_0019

图1-1-13 树的绘制过程图解

5.禅意花园的影响

几天之内，陆续有用户开始提交他们的设计：在站点发布的第一周里，每天就有成千上万个访问者到来。人们还志愿将禅意花园翻译成数十种语言。很明显，禅意花园的出现满足了人们压抑已久的对CSS设计方面的需求，这在当时没有任何其他网站能够做到。

自发布以来，禅意花园已经出现在全球范围内的数十种杂志、图书中，巩固了它在Web设计历史上独一无二的地位。感谢信更是从世界的各个角落纷至沓来，设计师和开发者用禅意花园向他们的雇主、客户以及同事证明了使用CSS进行设计的优势。提交作品的设计师也由此声名远扬，禅意花园甚至推进了他们的职业发展。

虽然创建和维护是由一个人完成的，但禅意花园在很大程度上是志愿者协作的结果——才华横溢的设计师们贡献给自己的作品，帮助它获得成功。每个人都能在禅意花园中找到不同的价值。虽然创建禅意花园的本意是演示CSS在设计中的作用，但它同样在很多当初没有预料到的领域中给人们带来了帮助。

□ 若是某位设计师正在被一个布局问题所困扰，那么现在他有了寻求帮助的地方——禅意花园中有数百个不同的设计，他所遇到的问题极有可能已经被别人解决了。禅意花园允许并鼓励人们学习它的CSS，并将其使用在其他站点上。

□ 类似地，禅意花园中也不断出现新的页面布局技术及CSS效果。我们都有机会在数百个作品中找到一些新奇的东西。

□ 禅意花园还是一个绝佳的浏览器兼容性测试网站。其中所有的设计都使用有效的、基于标准的代码编写，所以理论上这些设计应该能够在所有浏览器中以一致的方式呈现出来。（当然实际上并非如此完美。由于某些浏览器的缺陷或对某些元素缺乏支持，大多数设计师都不得不考虑浏览器之间显而易见的呈现差别，并使用多种CSS过滤器和hack来解决。）

□ 当你正尝试说服你的雇主或客户使用Web标准设计页面时，禅意花园就是一个极其令人信服的证明。

□ 当你灵感枯竭的时候，禅意花园中的设计或许能够给你一些启发。感觉江郎才尽了？来禅意花园逛逛吧，说不定灵感就在不经意之间出现了呢！

□ 禅意花园为经验丰富的专家和积极努力的设计师提供了一个良好的展示自我的平台。雇主和潜在的客户很愿意主动联系它们中意作品的设计师，提供工作或者合作机会。这些优秀的作品也经常出现在国际性的图书和杂志中。

□ 禅意花园已成为教师和讲师在教授当代Web设计实践时的一个有力工具。

1.1.2 打好CSS布局的基础

Note

只有对HTML元素非常熟悉，才能知道何时应该选用何种标签。这里我们推荐Dan Cederholm的Web Standards Solutions:The Markup and Style Handbook一书（2004年由Friends of ED出版社出版），作为实际开发中关于结构化标记的参考。

在开始使用CSS布局之前，首先要保证你的Web页面是以标记结构化的方式编写的。既然正在阅读本书，那么你十有八九已经听过将结构（structure）和表现（presentation）分开的说法。若你对此尚不熟悉，也不用担心——基于CSS进行设计的最主要的优势就是，只要HTML文档结构良好，那么今后将很容易通过添加一层CSS作为修饰，让文档样式变得非常漂亮。

长期以来，格式化Web页面时基本HTML元素的选择都取决于它们的显示的样式。若需要一个带有缩进的段落，你可能会选择用<blockquote>标签将这段文字包围起来，让段落两端显示出一些空白。但顾名思义，blockquote元素表示其中包含的内容是一段引用自其他来源的文字。如果我们仅仅是为了让某一段文字以缩进形式显示而使用blockquote元素，而这段文字却并非引用自其他来源的话，那么就意味着我们错误地使用了HTML标签——HTML标签是用来表示文档结构的。对于文档的显示样式（例如某一元素的缩进），应该使用CSS来实现。

结构化HTML文档主要体现在对HTML标签正确、合理地使用中。选择HTML标签时要根据其语义，而不是其样式进行。

既然现在CSS设计已经是可用的了，那么就应该把所有的格式化和设计相关的实现放在CSS文件中，让HTML只用来表示文档结构。作为一门用来设计表现样式的语言，CSS建立于HTML的文档结构之上并为其应用可视化样式，而HTML则只用来表示文档的结构，不再用于页面样式的设计中。

那么正确、合理的文档结构能够带来什么好处呢？这一节中所提到的“结构”到底又是什么东西呢？

1.带有语义的标记

为表现样式编码和为实现正确的语义编码，二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。下面这一段HTML就是为了实现某种表现样式而编写的：

<b><font size="2">Our Family</font></b>

<font size="1">Pictured are Matt and Jeremy.As

usual,Matt is msking a funny face. We don't have many hotos

where he isn't.</font>

下面这一段HTML是为了达到正确的语义而编写的：

　<h3>Our Family</h3>

　<p>Pictured are Matt and Jeremy. As usual, Matt is

　making a funny face. We donÕt have many photos where he

　isnÕt.</p>

</div>

在第一个代码片断中，所有的HTML标签都是用来表现样式的。 <br>标签用来换行，<b>标签用来给文本加粗，<font>标签则指定了文本显示的大小。

而在第二个代码片断中，却一点都没有对页面显示样式的说明——h3和p元素仅仅用来描述页面中某一段内容的功能。p元素中包含了一个自然段的文字，而h3元素则表示其内容是页面中的第三级标题。

关键之处就在于，第二个代码片段并没有考虑这些元素将要以何种样式呈现出来，因为元素的呈现样式将由CSS控制。之所以选择这些标签，是因为它们恰如其分地描述了其中的内容。这也正是HTML中语义的概念：选择何种HTML标签取决于标签本身的语义，而不是其默认显示出的样式。

针对语义编写HTML所带来的巨大优势将在本章稍后部分介绍。现在我们只要记住，使用CSS进行设计时的主要任务之一，就是从编写合法的、带有良好结构并拥有语义的HTML文档开始。完成了这一步之后，我们才能在这个坚实牢固的基础之上应用各种CSS样式。

2.创建良好的标记

每个页面都在结构上有自己不同的需求，所以对于创建HTML来说，很难找到一个完美的一揽子解决方案。但我们却能够总结出一些通用的指导方针，将这些要点烂熟于胸，一定会对编写HTML大有裨益。

•选择DOCTYPE

在HTML的最开始部分声明DOCTYPE（Document Type的简写）可以让浏览器或其他用户代理知道你要使用的HTML语言的类型。无论你打算选择何种类型的HTML语言，DOCTYPE都是一个健壮的文档所必需的，也是你在编写HTML时要做的第一件事情。

Note

“<p>标签”和“p元素”之间到底有什么区别？大多数时候它们表示的是同一个东西，但仍有一些细微的区别。“标签”指简单的HTML分隔符，例如<p>、<div>和</body>等。而“元素”则是由一对开始结束“标签”构成的，用来包含某一些内容——这里有一个值得注意的例外，即<br/>本身既是开始标签又是结束标签，其中不包含任何内容。

Note

若想了解更多关于将文档结构和表现分开的内容，请参考Roger Johansson在456 Berea Street网站给出的白皮书 ——“ Developing with Web Standards”（www.456bereastreet.com/dwws）。

Note

若想了解更多关于DOCTYPE的相关内容，请参考Jeffrey Zeldman在A List Apart网站中的文章——“Fix Your Site with the Right DOCTYPE”（www.alistapart.com/articles/doctype）。

一般地，“元素”用来表示某一段明确的结构，而“标签”则仅仅是用来创建文档结构的语法而已。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

•指定语言和字符集

与声明DOCTYPE同样重要的是将HTML文档指定为某一种人类的语言。如果你曾偶然闯入某个看似乱码的网页，而实际上其文字却是日语、希腊语、斯瓦希里语或者其他什么语言，你就会知道页面编写者忘记设置页面编码所造成的后果了。因为Google和其他搜索引擎会根据搜索请求的语言来过滤搜索结果，所以如果你不想放弃搜索引擎带来的流量的话，那么正确地设置页面的编码将显得极为重要。本章稍后将详细介绍字符编码的相关内容。

示例：

设置文档的XML语言。这里设置为英语的ISO代码en。

设置文档的字符集。这里为UTF-8。

•指定标题

每个HTML页面都需要一个用来描述页面内容的<title>元素。在访客将页面保存至收藏夹时，<title>元素中的内容将作为链接的描述同样被保存在访客的浏览器中。搜索引擎也对<title>元素中包含的关键字格外感兴趣，因此好的<title>可以明显地提高页面在搜索引擎中的排名。网站中的每个页面都应该尽可能地有一个唯一的标题，标题应该极具描述性地概括该页面的内容，而不是泛泛地介绍整个站点。

示例：

<title>css Zen Garden: The Beauty in CSS Design</title>

•选用恰当的元素

我们在前面已经分析了这个问题，但还是有必要在这里重复一遍：根据文档内容的结构而选择HTML元素，而不是根据HTML元素的样式。例如，用p元素包含文字段落，而不是为了换行；用blockquote包含被引用的文字，而不是为了得到缩进等。

当然，并不是所有的HTML元素都可以在XHTML 1.0 Strict标准中使用的。事实上，虽然XHTML 1.0 Strict标准（以及XHTML 1.1标准）中可使用的HTML元素较少，但这些元素却有着更加明确的意义。若你在创建文档时找不到合适的、可以恰当描述其结构的标签，那么可以考虑使用通用的div或span元素。当然，这也是一个警告……接下来将会介绍。

示例：

<h3>The Road to Enlightenment</h3>

而不要使用这样的HTML：

<code style="font-size: 1.5em;">The Road to Enlightenment</code>

•避免过度使用div和span

设计HTML时一个常见的错误就是过度使用div和span。少量、必要地合理使用可以明显增强文档的结构性。但若是文档中使用了太多的div和span，那么你就应该考虑一下是不是还有更加合适的HTML元素供选择了。例如，若是h3更能表示内容的含义，那么就不应该使用div，span也不应该替代label的作用。

但这并不意味着应避免使用div和span。文档中合适位置的少量div元素可以使文档更易于应用样式，且在逻辑段落上也显得更加清晰。我们可以将div看作一个可以被重用的容器：将内容深深隐藏于太多的容器中并不是一个好主意，但是几个合理位置中的div却可以让文档显得井井有条。

示例：

　<h1>css Zen Garden</h1>

　　<h2>The Beauty of <acronym title="Cascading Style

　　Sheets"> CSS</acronym> Design</h2>

</div>

Note

在W3Schools的“XHTML 1.0 Refere nce”（http://w3schools.com/xhtml/xhtml_reference.asp）中可以找到XHTML 1.0中允许使用的所有HTML元素。

•尽可能少使用标签

前面两个提示所隐藏的含义就是，HTML标签使用得越少越好——事实上也确实如此。若想创建出良好的文档结构，那么尽可能少使用标签应该是一个自始至终都要考虑的问题。仅仅使用必要的标签，将其他不必要的都删掉。这样做的好处不仅在于能够让文件保持小巧（也就意味着用户下载速度的提高），也可以让浏览器能够很快完成文档的解析，即得到更快的呈现速度。

示例：

<p>The Zen Garden aims to excite, inspire, and encourage participation.</p>

而不要这样：

<div>

　<p><span class="text">The Zen Garden aims to excite,

　inspire, and encourage participation.</span></p>

</div>

•适当地使用class和id

为元素添加起标示作用的属性可以让你在稍后很容易将该元素与CSS或JavaScript关联起来。class是一类可重用的属性，能够被重复应用到页面中的任何元素上；而id则是独一无二的，同一个id在每个页面上只能出现一次。

一个元素可以应用多个class，一个class也可以应用在多个页面元素上。我们也可以为同一个元素同时应用class和id，但要记住：在同一个页面上不能为多个元素指定相同的id。class和id可以选用字母或数字（a～z、A～Z、0～9）命名¹，但必须以字母开头。虽然有些浏览器对class和id名称的大小写不敏感，但为了今后便于调试，还是小心为妙。

注释：¹ 下划线“_”也可以使用。——译者注

三个合法的标识符：

两个不合法的标识符：

3.时间的检验

若曾编写过在未来相当长的一段时间内都要保持不变的文档，你就会发现在编写的过程中必须处处小心，让文档尽可能完美。

以出版行业为例，为了保证语言流畅简洁和内容的正确性，这本书曾被很多人修改编辑过。原因很明显：与网页在浏览器缓存中存在的时间相比，书籍在书架中停留的时间要长得多。所有这些预先的检查工作都是为了确保书籍在出版时的正确性（但愿出版后好运相伴）。

但是在同样的问题上，Web却没有此类的限制。每次用户来访，Web站点都从服务器将内容发送给访客。这样就意味着，即使在网站发布之后，你仍旧可以修改页面的内容或重新设计页面的样式，每个再次访问的用户都能够立即看到这些变化，而并不需要像图书这样，只有重印或再版的时候才有机会修改。自然，网站的不断改进会让人非常高兴，但这也会让那些签了固定合同的设计师感到些许郁闷。

虽然禅意花园也是一个网站，但在编写HTML的过程中却遇到了一些独特的挑战，让这个过程更像是写书而不是网站。若是在用户已经提交了设计之后再修改页面的HTML，那么就有可能破坏掉从前的设计，这也与禅意花园的最初目标相悖。即使修改的仅仅是页面中的文本，也会对文档以及文档中某块内容的大小造成影响，并有可能无法预知地改变某些作品的布局。这样看来，一旦发布之后再对禅意花园的HTML进行任何结构或内容的修改都可能是有害且不可接受的，所以在编写HTML时就需要尽可能小心准确。

4.禅意花园的HTML源代码

我们应该把禅意花园的HTML结构看作像书一样持久不变。虽然有数不清的可改善之处，但禅意花园的HTML结构仍然没有过大的修改。文档的内容可能会略加改进，但最基本的HTML元素以及文档结构则不会，就像被刻在石头上一样¹。

注释：¹ 禅意花园现在的HTML代码已经与接下来列出的有所不同，但在文档结构上仍没有任何改变。——译者注

为了便于本书后面章节参考，下面几页中完整地列出了禅意花园的HTML源代码。你也可以访问禅意花园站点（www.csszengarden.com），并在浏览器中查看源文件来得到这份代码。关于查看源文件的步骤，在大多数浏览器中都差不多：从工具条中选择View > View Source或其他最类似的选项即可。或者也可以通过禅意花园页面中的下载源代码链接得到其HTML文件。本书列出的代码删除了原版本中的注释，而改为在边栏对某些段落或条目给出了一些注解。若想看到原版本中的注释，请直接访问禅意花园站点。

指定用来标识文档类型的DOCTYPE是每个页面都必需的。请参考本章前面的“选择DOCTYPE”小节。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

在全球化的环境中（例如Web），为文档指定字符编码也极其重要。请参考本章前面的“指定语言和字符集”小节。若想了解更多关于字符编码的内容，请参考Joel Spolsky在Joel on Software网站上的文章：“The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)”（www.joelonsoftware.com/articles/Unicode. html）。

　<title>css Zen Garden: The Beauty in CSS Design</title>

这个空的script元素用来避免Windows下IE中可能出现的文档样式短暂失效问题¹。该问题在Blue Robot网站中的“Flash of Unstyled”一文（www.bluerobot. com/web/css/fouc.asp）中有详细介绍。

注释：¹ 指在IE加载页面时的一个缺陷：首先显示出没有应用任何样式的文档，随后页面闪烁一次并重新显示应用了样式的文档。——译者注

这种方式用来让Netscape Navigator 4浏览器不要加载并应用外部样式文件，而是直接显示出简单的、未经CSS修饰过的HTML文档²。就目前来讲，这种方法已经不是那么必要了³。若想了解更多相关内容，请参考Eric Meyer on CSS网站中的“Tricking Browsers and Hiding Styles” 一文（www.ericmeyeroncss.com/bonus/trick-hide.html）。

注释：² 因为Netscape Navigator 4对CSS的支持非常不好，加载了CSS不但不能起到修饰页面样式的作用，甚至反倒会让页面难以辨认。——译者注

注释：³ 因为目前Netscape Navigator 4浏览器已经近乎绝迹。——译者注

　　@import "sample.css";

　</style>

</head>

应用到body元素上的id叫做“CSS签名（CSS Signature）”。借助CSS签名的帮助，用户自定义的样式表可以覆盖页面中的部分甚至所有CSS样式。请参考“[css-d] CSS signatures”（http://archivist.incutio.com/viewlist/css-discuss/13291）。

将页面中的元素按照逻辑上的相关程度分开放置于不同的div元素中，可以让后期应用样式变得更加简单灵活。

　　　<h1><span>css Zen Garden</span></h1>

　　　<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>

　　</div>

　　　<p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>

　　　<p class="p2"><span>Download the sample <a href="zengarden-sample.html" title="This pageÕs source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css"title="This pageÕs sample CSS, the file you may modify.">css file</a></span></p>

让事情简单点，再简单点！虽然那些准备为禅意花园提交设计的朋友都应该知道如何下载这些文件（在链接上右键单击，选择Save As¹），但这个方法却不是每个想要学习的人都了解的。仍不时有电子邮件询问如何下载这些文件，这也从一个侧面证明了你的目标群体中总是会有一些无法预料到的成员。

注释：¹ 中文版浏览器中该选项一般是“另存为”。——译者注

　　</div>

事后诸葛地考虑，若是#intro div在这里结束，并将#preamble²置于#supportingText中，页面的结构无疑将变得更有意义。#preamble的内容在逻辑上更适合文章正文，而不是文章的介绍部分。从样式或布局的角度考虑，这样的改变也会增强其灵活性。

注释：² preamble的英文含义为“导言”。——译者注

　　　<h3><span>The Road to Enlightenment</span></h3>

　　　<p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken<acronym title="Cascading Style Sheets">CSS</acronym>support.</span></p>

　　　<p class="p2"><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym >, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.</span></p>

从语法和标记上都能看出来，W3C是一个技术上的简称，而不是取首字母的缩写词。事实也正是如此，且HTML中专门为声明简称定义了abbr元素，虽然IE并不支持这个元素，但我们也可以使用IE支持的acronym元素来代替。

　　　<p class="p3"><span>The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web. </span></p>

　　</div>

　　　<h3><span>So What is This About?</span></h3>

　　　<p class="p1"><span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing th-at has changed is the external .css file. Yes, really.</span></p>

　　　<p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illus-trated in a way that gets people excited is by demonstrating wh-at it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examp-les of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</span></p>

我们并不知道“结构至上者（structurist）”描述的是哪一类人。在当初编写页面内容时似乎有一种感觉，那就是我们应该把那些编写代码的人和那些注重于HTML结构的人区别开来。现在看来，其原因已经无从知晓了。

　　</div>

　　　<h3><span>Participation</span></h3>

　　　<p class="p1"><span>Graphic artists only please. You are modifying this page, so strong <acronym title="Cascading Style Sheets"> CSS</acronym> skills are necessary, but the example files are commented well enough that even <acronym title="Cascading Style Sheets">CSS</acronym> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"> <acronym title="Cascading Style Sheets">CSS</acronym> Resource Guide</a>for advanced tutorials and tips on working with <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p>

　　　<p class="p2"><span>You may modify the style sheet in any way you wish, but not the <acronym title="HyperText Markup Language">HTML</acronym>. This may seem daunting at first if you’ve never worked this way before, but follow the listed link s to learn more, and use the sample files as a guide.</span></p>

’表示什么？它是一个起到替代作用的字符编码，表示印刷中用到的朝向左边的单引号（'），而不是我们常用的普通单引号（'）。Web页面能够显示很多种印刷符号和习惯用法，可在任何可能的地方使用。请参考A List Apart上的“The Trouble With EM ‘n EN (and Other Shady Characters)” 一文（http://www.alistapart.com/articles/emen）。

　　　<p class="p3"><span>Download the sample <a href="zengarden-sample.html" title="This pageÕs source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css"

　　　title="This pageÕs sample CSS, the file you may modify.">css file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your .css file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.</span></p>

由于提交量过多，对提交作品的要求有所改变。在提交作品之前，请参考mezzoblue.com上最新版本的“Submission Guidelines”（www.mezzoblue.com/zengarden/submit/guidelines）。

　　</div>

　　　<h3><span>Benefits</span></h3>

　　　<p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.</span></p>

　　</div>

　　　<h3><span>Requirements</span></h3>

　　　<p class="p1"><span>We would like to see as much <acronym title="Cascading Style Sheets, version 1">CSS1</acronym> as possible. <acronym title="Cascading Style Sheets, version 2">CSS2</acronym> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <acronym title="Cascading Style Sheets">CSS</acronym> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <acronym title="Cascading Style Sheets">CSS</acronym> validates.</span></p>

目前已经有了一些方法，在使用某些高级CSS效果的同时，也略微减少了专为低版本浏览器设计的样式，这些将在第7章中介绍。在一些设计中，该方法已经被付诸实践，所以这个对浏览器支持的需求或许可以改为“使用自己的最佳判断”。

　　　<p class="p2"><span>Unfortunately, designing this way highlights the flaws in the various implementations of <acronym title="Cascading Style Sheets">CSS</acronym>. Different browsers display differently, even completely valid <acronym title="Cascading Style Sheets">CSS</acronym> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a> page for information on some of the fixes available. Full browser compl-iance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’it accept it.</span></p>

在将某个作品添加到禅意花园之前，通常都要在几个不同的浏览器中检查一下，设计者自然也应该对此项检查负责。但若你还是发现某个作品的样式不正常，那么也不必太过计较——毕竟作品的征集是全世界范围内的，设计者可能接触不到您所用的浏览器或操作系统。

　　　　<p class="p3"><span>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable,

　　　　outright pornography will be rejected.</span></p>

　　　　<p class="p4"><span>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <acronym title="Cascading Style Sheets">CSS</acronym> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/sa/1.0/"title="View the Zen GardenÕs license information.">one on this site</a> so that others may learn from your work.</span></p>

　　　　<p class="p5"><span>Bandwidth graciously donated by <a href="http://www.dreamfirestudios.com/">DreamFire Studios</a>. Get the <a href="/book/"> Book </a>!</span></p>

　　　</div>

　　　　<a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s XHTML">xhtml</a>  

footer中的这些链接是个列表……难道不应该用ul来组织吗？这是个反问句——这些链接确实应该包含在某个列表元素中。

　　　</div>

　　　　　<h3 class="select"><span>Select a Design:</span></h3><ul>

　　　　　<li><a href="/" title="AccessKey:a" accesskey ="a">Sample #1</a> by <a href="http://www .mezzoblue .com/" class="c"> Dave Shea</a>  </li>

在禅意花园最初版本的HTML代码中，包含链接的元素是span，而不是现在的li。但在使用某些自动化的工具或服务（例如HiSo-ftware的Cynthia Says，www.cynthiasays.com）检查页面的可访问性时会导致检测失败。每个链接结尾部分的那个额外的 ¹就是为了尝试解决这个问题而添加的，但事实证明这样做只是徒劳。好在我们很快悬崖勒马，用列表元素代替了原本的span，但这些 却在不经意间流传了下来²。

注释：¹  在页面中显示为空格。——译者注

注释：² 在最新版本的禅意花园HTML代码中，该 已经被移除。——译者注

　　　　　<li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzob-lue.com/" class="c">Dave Shea</a>  </li>

　　　　　<li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzo-blue.com/" class="c">Dave Shea</a>  </li>

　　　　　<li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzo-blue.com/" class="c">Dave Shea</a>   </li>

　　　　　<li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http: //www .mezzob-lue.com/" class="c">Dave Shea</a>   </li>

　　　　　<li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http: //www.mezzob-lue.com/" class="c">Dave Shea</a>  </li>

　　　　　<li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http: //www.mezzo-blue.com/" class="c">Dave Shea</a>  </li>

　　　　　<li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http:// www.mezzo-blue.com/" class="c">Dave Shea</a>  </li>

快捷键（accesskey）是一项起辅助作用的技术，用来让浏览者更加容易地在页面中导航，但快捷键也并非是完美无瑕的。请参考WATS.ca上的“Using Accesskeys-Is it worth it?”这篇文章（www.wats.ca/articles/accesskeys/19）。

　　　　</ul>

　　　</div>

　　　　<h3 class="archives"><span>Archives:</span></h3>

　　　　<ul>

　　　　　<li><a href="/" title="View next set of designs. AccessKey: n" accesskey="n"> <span class="access-key">n</span>ext designs »</a> </li>

用这种方式在作品之间导航似乎非常可笑，现在我们已经有了100多件作品，将这个链接指向一个外部的列表或许会更加有效（www.mezzoblue.com/zengarden/alldesigns）¹。但很多人都没注意到这个链接，他们以为禅意花园只有8个作品，且从来没有看到过其他作品。不要犯同样的错误哦！

注释：¹ 在最新版本的禅意花园HTML代码中，该链接已经指向了该站点。——译者注

　　　　　<li><a href="/" title="View previous set of designs.AccessKey: p" accesskey="p">« <span class="accesskey">p</span>revious designs</a></li><li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>

　　　　</ul>

　　　</div>

　　　　<h3 class="resources"><span>Resources:</span></h3>

　　　　<ul>

　　　　　<li><a href="http://www.csszengarden.com/001/001 .css"title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey= "v"><span class="accesskey">V</span>iew This Design’s

　　　　　</a></li>

虽然“查看源代码”的方法一直存在于各个浏览器中，但还是有不少的初学者发邮件询问如何查看某个作品的CSS文件。所以很快我们又添加了这个链接。

　　　　　<li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r"accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li>

　　　　　<li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey"> S</span>ubmit a Design</a></li>

　　　　　<li><a href="http://www.mezzoblue.com /zengarden/transl ations/" title="View translated version sof this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span> ranslations</a></li>

　　　　</ul>

　　　</div>

这些完全空白的div和span可以用来在页面上添加原本不在其中的图片，稍后可以看到一些实例。我们可以将其看作一类可重用的img元素。

</body>

</html>

HTML结构的图示

设计师Andy Clarke为禅意花园HTML结构创建了一个图形化的示意图（图1-1-14）。这个示意图清晰地显示了各个元素之间的嵌套关系，如果想学习禅意花园的HTML结构，或是想为禅意花园设计新的样式，那么这个图示无疑是个很好的开始。请参考Clarke的说明文档“3D CSS Zen Garden”（www.stuffandnonsense.co.uk/archives/3d_css_zen_garden.ht ml）。

figure_0040_0020

图1-1-14 禅意花园HTML结构的图形化示意图，由Andy Clarke编写

Tip

在W3C的“5 Selectors”（www.w3. org/TR/CSS21/selector.html）中可以了解到更多关于CSS2选择器的内容。

6.提供足够的灵活性

从一开始，我们编写这套HTML的一个主要目标就是为各个设计的变化提供足够的灵活性支持。为禅意花园的HTML提供尽可能多的额外信息是非常必要的，这样才能让页面中的每个元素都能依照需要被修改和调整。如果没有这些额外的信息，选择页面中的某个特定元素将变得很难，甚至不可能实现，虽然使用后代选择器（descendant selector）可以完成某一类元素的选择，例如：

quickSummary p {

　color: red;

}

但按照上述CSS的定义，#quickSummary中所有的p元素都将变为红色。如果我们只想修改#quickSummary中的第二个段落，那又将如何实现呢？除了为#quickSummary中的所有段落都添加独一无二的class之外，我们只能选用更加高级的CSS2选择器：

quickSummary > p + p {

　color: red;

}

quickSummary > p + p + p {

　color: inherit;

}

这段代码似乎已经有些难以理解了。第一条规则将子选择器（child selector）和邻接选择器（adjacent selector）组合了起来，表示的含义为：“若某个段落元素¹紧跟着另外一个段落元素出现，且该段落元素还定义于#quickSummary中，则为其应用该样式”。这样就意味着除了第一段之外，#quickSummary中所有的其他段落都将应用该样式。接下来又用第二条规则覆盖了第一条中的定义，为紧跟着两个或两个以上段落后出现的段落恢复了其默认样式，当然这些段落也必须同样在#quickSummary中，即除了前两段之外，#quickSummary中所有的其他段落都将应用该样式。

注释：¹ 这里指HTML的p标签。——译者注

天啊！只是要选择一个元素而已，居然弄出了这么冗长的代码。谢天谢地，在CSS3中我们有了一个简单的方法：

quickSummary p:nth-child(2) {

　color: red;

}

但是也别高兴得太早了，有件事情你必须知道：这两种方法IE都不能支持¹！除非你有什么实在特殊的理由，以至于可以放弃绝大多数浏览者，否则你可以先把这两种方法忘掉了。IE的使用者比例可能将在几年之后有所变化，但在本书出版时它的市场占有率仍在90%左右。

注释：¹ 最新发布的IE7已经支持了子选择器和邻接选择器。——译者注

上面这一长段讨论其实只是为了选择到一个简单的元素。从这段讨论中我们也可以明显地看出，为了保证灵活性，给元素添加额外class是非常必要的。由于类似的原因，我们也添加一些额外的span标签。在页面的段落中声明内部元素，也就意味着在设计时我们可以为这些元素应用某些额外的样式。

•图像替换

这些额外的span标签还有个用途，那就是图像替换。这是为设计禅意花园的HTML时CSS设计领域中流行的一种全新的方法所准备的。让我们举例说明这个方法：若你想用图片替换页面上的某一个标题（例如一个h3标签）中的文字，那么就必须用两个标签（一个h3和一个span）将文字包围起来。

然后我们可以用display: none之类的规则将span中的文字隐藏起来，并为h3应用背景图像，这样一个带有丰富图形效果的标题就做好了。因为禅意花园中所有的元素中都包含了这样的一个span，所以这种形式的扩展也就非常易于应用。

但为什么宁可要这么麻烦，也不使用同样能实现该功能的img元素呢？同样也是出于灵活性方面的考虑。若是将图片的地址直接写入到HTML中，就不可能只通过替换样式文件让页面来个“大变脸”了。但这个图像替换的方法也存在着一些问题，将在本书稍后部分介绍。

• Lighten Up（“减肥”）

这些决定及实现方式都是基于当时大家认同的最佳设计方案。与最近出现的一些技术相比，这种实现方式的代码量偏多，现在回顾起来，不难发现很多可改进的地方。

Tip

在W3C的“Selectors”（www.w3. org/TR/css3-selectors）中可以了解到更多的关于CSS3选择器的内容。

Tip

OPAL Group的SelectORacle（http://g allery.theopalgroup.com/selectoracle）是一个很不错的CSS选择器分析工具。在分析复杂CSS时可能会助你一臂之力。

Note

如果灵活性是设计的要求，那该如何考虑呢？一些项目的确需要足够灵活的样式选项，所以一个常见的问题就是，如何在设计HTML时保证其拥有最大的灵活性。

若具有足够的判断力，那么使用禅意花园类似的方法将会是一个不错的开始。建议从一些最基础的HTML元素（段落、标题、列表等）开始定义页面的内容。在必要时添加额外的作为逻辑上容器的div，并为其指定唯一的id。如果需要的话，适当且最小限度地为其中的元素指定class。禅意花园中用到的这些span基本上不是必要的，除非有极特别的需求，否则不要这样使用。

禅意花园发布不久，一种新的、不需要额外span的图像替换方法横空出世，因此HTML文档中的大部分span自然也受到了冷落。98%的提交作品中都没有使用这些额外的span，所以基本上可以认为这些span是多余的。除了被某些设计师用于实现一些极为特殊的视觉效果之外，文档结尾部分的那些空的div和span也没有太大的用处。

对于其他网站来说，文档结尾部分的那些空的div和span并没有什么意义。但在禅意花园中它们却有存在的必要，即为了实现最大的灵活性。因为并不是每一个网站都需要如此多样的设计，所以在为这些网站编写HTML时也不必考虑这些。

若你决定以禅意花园的HTML为基础开始编写页面（我们祝愿你的老板会同意你这样做），请记住基于标准的设计中很重要的一个目标就是避免不必要的元素。偶尔使用div元素将一些逻辑上相关的元素包围起来并没什么问题，但若是把页面中的每一个段落或标题都用span元素包围起来，那么就有些过度了。关于如何正确、合理地组织文档结构，将在本章稍后讨论。

1.1.3 学到的教训

禅意花园的主要目的是为了演示基于标准进行设计所能实现的效果。通过浏览这些种类繁多的作品，访客也能体会到CSS所提供的强大的灵活性。就其自身来讲，CSS是一种用来增强某种基本标记语言（例如HTML、XHTML或XML）的设计性语言。CSS1在1996年被提出，很快W3C又在1998年提出了CSS2标准。各种浏览器也开始逐步支持这两种标准，到了1998年，Web设计师普遍采用链接外部CSS文件的方式来部分地控制页面的样式。当时几乎所有人都这样做，直到四五年之后。

为什么设定字体时我们都会选用CSS？原因很简单，能在所有浏览器中有一致表现的，也几乎只有字体这一种CSS设定了。虽然效果并非总是如此理想，但使用CSS定义字体还有一种非常独特的优势，这种优势让很多设计师最终转向了CSS。

这个优势在于，某个单一的CSS文件可能被站点中所有的文档所引用。若在这个CSS文件中声明了字体，那么所有的页面都会应用这一设定。若你想对字体或字号进行修改，那么只要更新一下该CSS文件中的定义即可，站点中所有的页面都会立即被更新——大功告成，就这么简单。

相对于从前的<font>标签，这种方法有了明显的进步：那个声名狼藉的<font>标签是文档级别的、用于设定文字样式的元素，使用时需要将其应用于站点中的每一个实例上。最终几百个页面中的每一页上都可能会有七八个<font>标签，若是这时想修改，想必过程一定非常耗时且痛苦吧。

这个样式方面的分离只不过是CSS所带来的诸多优势中的冰山一角。一个简单的重新设计要求就让实现的过程有了数量级上的简化。从以前的方案迁移过来也同样简单：无须在众多文件中替换成千上万个<font>标签，只要将HTML内容复制过来，然后声明相应的CSS即可。

但<font>标签还是被使用了很长时间。一些较老的浏览器对比较高级的CSS样式的支持并不好，这些浏览器过了几年之后才逐渐消失。为了照顾这些浏览器，在这段时间之内使用CSS还是有一些不切实际。

到了2000年之后，浏览器对CSS的最小支持普遍有所提高，已经足够实现完全的CSS布局了。虽然当时浏览器对CSS的支持还不甚完美（现在也依旧如此），但这已经足够让CSS更进一步发挥作用，而不只是用来控制页面的字体。在经过了几年通力合作之后，全球范围内的Web设计师给出了一些足够可靠的使用CSS进行页面布局的方法，包括使用浮动（floating）或绝对定位模型进行布局，以及对非标准浏览器的一些临时补救措施等。

这就是我们现在所面对的情况。直到2005年，仍有一些浏览器在解析1998年就已经出台了的CSS2标准时还存在问题。但即便如此，主流浏览器对CSS的支持在大体上已经足够完善。很多网站都转向使用CSS且基于标准进行设计，设计者也自然享受到了基于标准所带来的好处。

接下来让我们简要总结一下这些好处。既然您已经在阅读本书，那么很可能您已经认识这些好处。如果还想更深入地了解一些细节，那么请参考本书结语中的推荐阅读列表。

基于Web标准开发的好处

基于Web标准的设计要同时使用CSS和结构化HTML。二者相互依存，很难将其带来的优势分割开来。我们只有用HTML结构化地描述文档的结构，同时使用CSS展现文档的样式，才会从Web标准中真正受益。

禅意花园的各种不同设计证明，只要为其应用不同的CSS，HTML页面的布局样式就可以被随心所欲地修改。CSS正是一种用来展现设计的方法，我们只需将其与原始的HTML文档结构关联起来即可。虽然CSS依赖于HTML结构并建立于其上，但却能够相对独立地为其提供丰富的表现样式。

Note

W3C的HTML验证器在W3C的“Validate Your Markup”页面中（http://validator.w3.org）。

Note

只有使用了外部的CSS文件，才会享受到节省带宽带来的好处。我们可以将CSS嵌入到HTML文档中，但这样的话浏览器将不能像对待外部CSS文件一样对其进行缓存，你也会由此失掉一些缓存带来的好处。

但非常重要的一点是，HTML文档必须有一个良好组织且合法的结构。一个非法的HTML文档会在浏览器中呈现的样式可能是不可预料的，且可能会导致很多本可以避免的麻烦。若CSS布局出了问题，那么首先要检查的就是HTML文档的合法性。

•更小的文件、更快的下载速度

将样式相关的标记从HTML移至CSS之后，通常文件的大小也会降低。很有可能出现的情况就是，一张混杂着内容和表现的30KB大小的HTML文档，完全可以用一个10KB的HTML加上一个10KB或不到10KB的CSS文件代替。

除了将在最初降低文件大小之外，CSS文档还能够被缓存于浏览器中。考虑如果要添加另外一些页面，每一个都有30KB，那么用户要浏览网站中的每个页面都必须从服务器下载30KB的内容。每一次浏览都是如此，无论页面中实际有多少内容。若是访问了这样站点中的10个页面，则用户需要下载300KB的内容，而其中大部分都是不必要的。

但若是将表现样式移至单独的CSS文件，那么不仅最终的页面大小将降低，每个页面共用的CSS文件也将不必被重复下载。这样用户访问某张页面时只要下载10KB的页面内容即可，而另外10KB的CSS文件可以直接从浏览器的缓存中得到。前面例子中的300KB的总下载量在这里将减至110KB。

无论对服务器还是对最终用户来讲，这种文件大小的降低都有非常显著的效果。当站点的流量非常大时，这些省下来的字节将极大地降低你的带宽需求。运动主题的ESPN网站从2003年早些时候开始切换至CSS，这个数字可能并不准确。在对ESPN.com的开发者进行的一次采访中（采访内容最初发布在网景公司的DevEdge网站上。该网站目前已经停止运营，现在请参考这个地址：www.mikeindustries.com/blo-g/archive/2003 /06/espn-interview），该开发者估计ESPN网站每日可以由此节省大概2TB的流量！这就意味着ESPN在无需任何额外的硬件投资情况下就可以支持更多的并发访问人数，且响应速度也将有所提高。的确是一本万利！

•增强对移动设备的支持

实际上，一个正确、合理组织的页面甚至并不需要CSS来辅助呈现。在某些场景中这一点非常重要：当你为一个足够大的1024×768的屏幕设计网页时，将有大量的空间可以随意发挥；但对于一个小巧的、240×320的掌上电脑来说，情况却大为不同。

Note

W3C的 “ 7 Media Types” 页面（www.w3.org/TR/CSS21/media.html）中介绍了一些CSS媒介类型的概要信息。

即使没有了CSS的修饰，原始的文档内容也十分易读：超链接仍然可以点击，表单元素也可以正常使用。无需任何额外工作，结构化的HTML文档就自动拥有在移动设备上正常显示的能力，这意味着可以免费得到网站的移动设备版本。

但CSS仍旧为多种显示设备提供了支持——你可以为某种显示设备指定不同的、专有的CSS样式。计算机屏幕、移动设备（例如移动电话）以及打印机都有它们自身的媒体类型（media type），且对更多的媒体类型的支持也正在研发中。

专门用于打印机设备的CSS宣告了那个小小的“打印该页面”链接的死亡。只要专门为打印机编写一个CSS文件，网站中的任何页面都可以直接打印出来。这个CSS文件能够有选择地格式化一些内容。隐藏另外一些条目，并专门根据打印机设备的特性进行适当的优化，以期得到最佳的打印效果。由于打印机与显示器相比所受到的限制更多，所以专门为打印机设备设计的CSS将变得非常有用。

理论上总会有这么一天，所有的设备在显示网页时都将依赖于自己的媒介类型。但现状却是，除了屏幕之外，很少有人使用其他类型的显示设备。对于移动电话来说，CSS的控制范围一般只局限于文本大小和颜色上；而用语言进行“浏览”的浏览器，即“听觉”设备类型还尚未出现。

这是个先有鸡还是先有蛋的问题。因为除非已经拥有了足够多的内容，否则该设备将不会得到更多的CSS支持，但同时又没有人为一些甚至并不存在的设备编写内容。当然，这种状态也在缓慢改进中，或许某一天将出现一个专为移动电话和PDA编写的移动版本的禅意花园。

•更好的可访问性

正确、合理地组织的HTML本身就具有良好的可访问性。如果用有效的标记编写页面，那么该页面的90%内容都将符合W3C的“内容可访问性指导建议（content-accessibility guidelines）”。

和那种只等同于文本的内容，还有多个版本的、维护起来极其痛苦困难的网站说再见吧，让我们来拥抱这种“一次编写，到处适用”的页面编写方式！在大多数情况下，即使是那些视力不佳而需要用屏幕阅读器（屏幕阅读器将朗读出网站的内容）的用户也同样可以访问你的站点，而这并不需要什么额外的工作。

Note

W3C的“内容可访问性指导建议（WCAG）”可以从这个地址访问：www.w3.org/TR/WAI-WEBCONTENT。

当然，这其中也有一些需要注意的地方。本章稍后部分将介绍一些可能由CSS引入的可访问性问题。

•精确的控制

作为一门专注于文档表现样式的语言，CSS提供了很多极为丰富的、全新的功能，而这些功能是HTML所无法企及的。例如对行间距的精确控制（line-height属性）、对元素之间的距离的精确控制（margin和padding属性）和指定元素在页面中的绝对/相对位置（absolute和relative属性）等。

如果你曾受限于基于表格的布局所强加的网格，那么使用CSS进行定位则可以将表格一脚踢开，让你随心所欲地将元素置于页面中的任何位置上。如果你曾期待能对元素的背景有更加精确的控制，而不是只能选择某种颜色或是某个单一、重复的背景图片，那么CSS所提供的background属性将给你带来一些小小的启示。

Note

Bobby（http://bobby.watchfire.com/）是一个在线的页面可访问性检查工具。例如Cynthia Says （www.cynthiasays.com）和WebAIM’s Wave （http://wave.webaim.org/）等一些其他工具也提供了同样的功能。

1.1.4 学到的教训

没有任何网站是完美的，包括禅意花园在内。虽然现在亡羊补牢已经太晚了，但过去几年中相关讨论所揭示出的一些额外的知识却仍旧值得分享。

1.可访问性检验

编写完成之后，我们使用Bobby¹对禅意花园的HTML进行了一次快速的可访问性检验，并确认它已经满足了大多数可访问性要求。当然，在正式发布之前还必须修复由Bobby发现的一些小问题。禅意花园页脚部分添加的“AAA²”链接也表明了该页面在设计时曾考虑过这个问题。

注释：¹ Bobby（http://webxact.watchfire.com/）是一个用来检查Web页面是否满足可访问性的软件。——译者注

注释：² 按照W3C对页面可访问性的分级，AAA是最高一级，达到该级别的页面即表示其通过了W3C最严格的可访问性检验。请参考：http://www.w3.org/TR/WAI-WEBCONTENT/#wc-priority-3。——译者注

真的考虑过么？似乎Bobby的检查并不是十分严格的。若熟悉W3C的“内容可访问性指导建议”（请参考本章前面部分的“更好的可访问性”小节），将会发现有些条款Bobby并不能检查。例如条款2.1，“在颜色不可用时，用户应该仍然能够得到那些由颜色传达的信息”，类似Bobby的软件无论如何也不能检查到这一点，特别是当信息和颜色被嵌入到图片中时。

实际上，在Bobby的网站上就有这样一段声明：

“可访问性在根本上还是由人决定的。带有各种不同程度残疾的人是否都能够有效地获取页面中的信息，才是可访问性问题的关键所在。Bobby仅仅是在提高页面的可访问性工作中的一步而已，而并不能保证其百分之百满足可访问性要求。”

——常见问题

这样，禅意花园的HTML源代码在理论上通过了所有有关标记的可访问性检查，但可访问性的要求还不止这些。有些条款甚至还对CSS有所限制，但一段时间之后，我们可以很明显地发现，一些作品并没有考虑到这些问题。考虑一下Fahrner图像替换（将在第4章中详细介绍）对可访问性的影响，我们很容易就能看出，任何一个自动化的可访问性检查软件都没法发现这个由CSS带来的问题。

从中学到的教训就是，在创建具有良好可访问性页面时，使用类似Bobby的自动化工具可以帮我们迈出良好的第一步。但“内容可访问性指导建议”还包含很多同等重要的条款，对于这些条款的检查却并不能由此类工具代劳。

2.文本的可缩放性

一个比较独特的、由CSS导致的可访问性问题就是文本的可缩放性。在编写网页时，我们经常会倾向于选择较小的字号，以便能够一次在页面中显示更多的内容。总之，我们都清楚自己在设计时有多么的“寸土必争”，所以也很有理由相信网页中文本的字号仍将越变越小。

问题在于，很多人又恰好看不清低于某个字号的文字。例如某些人无法辨认12像素高的文字，在某些极端的情况下，甚至24像素也还嫌小。当然，在现在的低分辨率¹显示器的条件下，没有人会在开始设计时就选择24像素作为主要文字大小²。

注释：¹ 这里的“分辨率”指显示设备的单位长度/面积中像素点的数目，而并不是指屏幕整体“分辨率”（例如1024×768等）。——译者注

注释：² 在目前“Web 2.0”的浪潮中，很多网站也会反其道而行之，在正文中使用极大的字号，以方便用户把握其主要内容。但这样大字号的设计的主要目的并不是用来增强可访问性，而是考虑到了用户心理学。——译者注

幸运的是，当前所有浏览器都提供了内建的对文本进行缩放的机制。虽然不是所有的用户都知道如何使用，但对于那些知道的用户，这个功能却是无价之宝。但问题也随之而来：IE只能对用em或%为单位指定的文本进行缩放，若字号大小采用px设定，那么IE将对此无计可施。

对于这种情况，浏览器中内建的文本缩放机制将如鸡肋一般食之无味，字号的问题也仍然无法解决。但若是设计师不用px单位，那么就万事大吉了吗？或许是这样的吧，但在本书第5章中也介绍了一些完全不同的、使用em或%单位造成的问题。

即使文本大小在任何浏览器中都可以正常缩放，我们还是要考虑很多问题：作品自身必须允许缩放（图1-1-15）。听起来似乎很简单，但若是将固定大小的元素（例如一幅20像素高度的背景图片）和可变大小的元素（例如一段文本，用户将其原始大小14px改变为了24px）放在了一起，你将很快发现在进行文本缩放时，这个依赖于固定大小的设计将出乎意料地显示得一团糟。大多数禅意花园的设计都通过了文本缩放测试，其中的文本都可以被调整至很大的字号。

figure_0048_0021

图1-1-15 即使图片以及区域的大小是不可变的，文本仍旧可被缩放

从中学到的教训就是，无论你将文本设置为多大，有些用户仍然想要设置得再大一点。所以我们要特别注意并清楚地认识到当用户对文本进行缩放时可能遇到的潜在问题，且我们需要在合理范围之内对该问题有所准备。

XHTML和MIME类型

禅意花园是基于XHTML 1.1标准发布的。既然禅意花园的HTML代码通过了XHTML 1.1验证，有什么理由不选用XHTML 1.1来代替老版本的XHTML 1.0 Strict呢？

虽然如此，但XHTML却远远不止“完全将标签闭合”这一点要求。即使XHTML通过了验证且整篇文档都完全合法，若是不为其指定正确的MIME类型，从技术角度上说它仍不是一个真正的XHTML文档。

MIME是一种用来描述信息的标准，在这里介绍MIME的唯一原因就是XHTML的正确MIME类型为application/xhtml+xml。当然，也可以使用更加常见的text/html（HTML的默认值），但只有XHTML需要向下兼容的时候才应该这样做。千万不要把XHTML 1.1文档的MIME类型指定为text/html，XHTML 1.1文档始终应该拥有XML类的MIME类型。

为XML文档制定正确的MIME类型，就意味着已经以编程的方式改变了服务器发送的HTTP头部信息（通过.htaccess或httpd.conf文件）。如果您对上面这句话一头雾水，那也不是您的错。对于专注于设计的人来说，这些都是非常底层的技术问题，通常由服务器管理员来处理。

Note

A List Apart网站中介绍了更多的XHTML及其DOCTYPE，可在www. alistapart.com/articles/doctype访问。

但即使已经为文档指定了正确的MIME类型，问题也远远没有结束。只有最新的浏览器才支持application/xhtml+xml，所以我们需要一个转换的方法，用来有选择性地发送合适的MIME类型，以便为那些较老版本的浏览器指定一个更加兼容的MIME类型。

此外，若指定了application/xhtml+xml MIME类型，将触发浏览器的XML解析过程。XML有一套自己的判断错误的方法，例如若文档中缺失了一个</p>标签，浏览器将停止解析并返回一条错误信息。发生错误的文档也不会被部分呈现在浏览器中，也就是说，在浏览器中将无法看到任何一段页面内容（图1-1-16）。XML文档必须有着良好的结构——必须这样，不允许有任何错误发生。

figure_0049_0022

图1-1-16 浏览结构不正确的XML文档的结果

XHTML真的那么值得使用吗？毕竟XHTML的整体目标就是将HTML重构为一种XML的应用。所以若使用了XHTML却不按照XML格式编写，就显得有些奇怪了。XHTML所带来的优势却基本上并不存在，但理论上只有这样做才能称其为XHTML，application/xhtml+xml的MIME类型仍是必不可少的。即使不想使用application/xhtml+xml MIME类型也没有关系——很多世界上一流的Web设计师也同样毫不顾忌地将XHTML的MIME类型指定为text/html。不要因此而不安，只要避免使用XHTML 1.1并选择XHTML 1.0即可。同样，坚持使用HTML 4.01也可以帮助您完全避免这个问题——HTML 4.01使用更加宽容的text/html作为MIME类型。当然，在之后编写文档标记的过程中，仍旧可以遵循XHTML的规范。

从中学到的教训就是，XHTML看上去似乎很简单，但是一旦你开始深入到其中，将会发现前面等待你的却是一大团纠缠不清的问题。

4.其他语言

在计算机行业中曾经有那么一段时间，若你想用非英语的语言写点什么（假设你并不在英语国家），则必须要靠其他软件的帮助才行。

谢天谢地，当前的软件在设计时都考虑了相当多的国际化问题。万维网中就能找到相当好的证据——非英语的网站数目正在一刻不停地快速增长。

为了能够让更多人了解，禅意花园鼓励志愿者将其翻译成各国语言（www.mezzoblue.com/zengarden/translations）。当各种各样的翻译版本出炉之后，问题也随之浮出水面：处理其他语言需要对字符编码有初步的了解，而翻译却更加类似一门艺术，而不是科学。

Note

这两篇文章详细介绍了MIME类型相关的内容：其一在Web标准组织网站（www.webstandards.org/learn/askw3c/se p2003.html），其二在XML.com （www.xml.com/pub/a/2003/03/19/dive-into-xml.html）中。

Tip

关于字符编码的更多建议请参考“WaSP Asks the W3C”（www.webstandards. org/learn/askw3c/dec2002.html）这篇文章。

•字符编码

目前的操作系统都能够良好地处理非英语字符。但按照默认设定，最基本的Windows XP或Mac OS X安装并不包含对世界上所有语言的支持。但安装CD中都附带了语言包，加载了这些语言包之后，计算机即可正确显示多种非英语语言的字符。

能够看到文字不过是完成了一半的任务：只有在字符编码匹配时，将内容直接从源文档复制并粘贴至目标HTML文档才行得通。例如，使用shift_jis编码（日语）的文本将无法在utf-8编码（Unicode）的文档中正确显示。所以我们必须要保证当前编写的内容要与HTML文档的字符编码相匹配。

字符编码可以在服务器端设定，并作为网站中所有页面的默认配置。即使已经有了这些，仍需要在HTML文档中用meta标签再次指明字符编码：

禅意花园使用的字符编码是iso-8859-1，该字符编码中包含了大多数主要的欧洲语言。各种各样的翻译版本都使用了不同的编码，但事后才发现最好的选择却是统一的UTF-8。

UTF-8是一种Unicode，Unicode则是一种流行的国际性编码方案。使用UTF-8所带来的好处就是，不同字符集的多种语言，例如法语、日语、阿拉伯语和希腊语等，将能够共存于同一张页面中。

目前唯一阻碍UTF-8在Web中广泛应用的就是，一些古老的、没有考虑到国际化需求的服务器端软件以及页面开发工具并不支持UTF-8。目前的各种浏览器在处理UTF-8时都没有任何问题，所以用户这一端并不是问题所在——问题正是出现在服务器端。但在处理亚洲语言时，由于其需要极其复杂的字符集，UTF-8也将生成不必要的庞大文件。因此，若文档的主要语言是中文，那么指定一个更加明确的字符集可能会更好些。

从中学到的教训就是，考虑到UTF-8在处理多语言时的强大之处，若是相关服务器端软件和开发工具能够支持的话，我们应该尽可能地选择使用UTF-8编码。

•翻译中的差异

因为翻译禅意花园属于自愿行为，所以翻译的质量也自然良莠不齐。以这些翻译版本所用语言作为母语的读者现在还时常提出建议和修改意见：显而易见的语法以及拼写错误很容易纠正，但对于词句给出的替代翻译将会变得难以抉择，毕竟仁者见仁，智者见智。

即使选择专业的翻译服务，不同语言之间也并不是可以直接互换的。同样的一个短语，却可以以不同的方式理解成不同的含义，因此如何选择就取决于翻译者的经验以及该语言所代表的文化背景。例如，短语“That will never fly”指的是一个馊主意，还是某架有缺陷的飞机？这种模棱两可的二义性可以借助上下文来澄清，但前提条件是翻译者正确地理解了上下文的含义。

与计算机语言相比，人类的语言显得非常“不精确”，所以关于翻译的问题始终存在。解决这个问题最值得信赖的方法就是遵从大多数使用这种语言的人的意见。但区域性的方言所带来的一些变化却对此雪上加霜（例如对于“颜色”这个单词，是使用美国式的color还是英国式的colour呢？），甚至大多数人的意见也很难统一。特别是若你不讲这门语言的话，那更是无从下手了！

从中学到的教训就是，翻译并不是个轻松的任务，想做到完美更是几乎不可能。所以结果就是，禅意花园愉快地接受了这个现实，并声明翻译上的差错是无法避免的，我们愿意忍受这些小小的不便。

5.版权保护和抄袭者

除了起到演示的作用之外，禅意花园的价值还在于灵感的展现以及知识的分享。这是一把双刃剑，因为分享就意味着迟早有一天，人们希望得到的要超过你愿给出的范围。

从一开始，禅意花园的提交作品都遵循这样的协议，即作品的CSS应用创作共用许可协议¹，允许其他人在某个限制范围之内使用。但考虑到图像对于作品而言独一无二的重要性，其著作权仍完全保留给设计师。如果你想要基于某件作品进行创作，那么可以自由复制并修改其CSS，但若要使用作品中的GIF、JPE或PNG文件，或是要使用整个设计，则首先要征得原设计师的同意。

注释：¹ 关于创作共用许可协议以及其发布者—— 知识共享组织，可在其网站http://cn.creativecommons.org/中了解更多内容。——译者注

理论上，这样的版权规定既可以让别人参考、重用作品的部分CSS代码，以其达到学习的目的，也能够为作品的设计师保留足够的权力。禅意花园的本意是为了分享知识，所以这样的规定看起来也似乎非常完美。但实际上，却很难实现这样的理想。

有些站点同时使用并修改了禅意花园部分的图像和CSS，或是重用了一些设计上的元素，给人一种“似曾相识”的感觉。在一些情况下，我们也很难辨认某个网站是否抄袭了禅意花园的创意。还有一种情况是，某些设计中CSS起到了非常主要的作用（无论是否使用了图像），然而模仿者原封不动地照搬却让原作品的设计师感到极其无奈。

对于第二种情况，我们有什么办法呢？大多数情况下，我们会给抄袭者发送一封电子邮件，简单说明问题——因为大多数人都会尊重原作者的权利和意愿。但若是抄袭者并不是那么肯合作，我们也无计可施。毕竟创作共用许可协议的条款比较宽松，除非抄袭者直接使用了原设计的图像，否则我们并没有追索权。从技术角度上考虑，虽然会让很多设计师感到不快，但这类的重用却是完全合法的。

创作共用许可协议在侵权行为的定义上有一个漫长的灰色地带。对原有作品进行了多少的修改之后才能算作新作品？若最终作品与原作品完全不同的话，允许人们以原作品为基础并开始自己的创作吗？这些问题甚至在法庭上都会引起很大争论，所以目前也并没有一个完美的答案。

对于禅意花园来说，最理想的解决方案就是既让CSS公开，让别人有足够的参考资源，同时却不鼓励未经原作者允许就全盘或部分照搬其代码，甚至用于商业作品中。这里需要良好把握的就是尺度问题——过于自由会让设计师在提交作品时顾虑重重，而过于严格的保护也将影响到禅意花园建立的初衷。

除非彻底关闭禅意花园，否则将永远没有办法保证作品不被以与设计师初衷相反的方式“重用”。是否有版权协议保护，是发布创造性作品时自然要考虑的问题——这类作品非常容易被剽窃。这样的事情一直在发生——看看pirated-sites.com就知道了。

借助于每个浏览器中都内建的“查看源文件”功能，抄袭Web页面变得非常容易。但同时借助于引用记录以及搜索引擎，发现这类抄袭也较为容易。

在撰写本书时，彻底解决这个问题仍是遥遥无期。目前我们仍决定允许受限制地使用作品的CSS，并用创作共用许可协议保护，但却禁止将其用于商业用途。这并不是个完美的解决方案，但至少我们为此已经做出了努力。

Note

禅意花园的CSS文件应用了By-Attribution Non-Commercial Share-Alike许可。Creative Commons网站中列出了该许可的全文：http://creativecommons. org/licenses/by-nc-sa/2.0。

从中学到的教训就是，无论应用了什么样的版权协议，还是会有一些人会无视这些条款，为所欲为地进行抄袭。所以解决方法就是选择某种有效的途径警告这些人，让其知道他们可以做什么，不可以做什么。

6.将禅意花园做大、做好

很多访问者都提出了建议，希望禅意花园能够做大些、做好些、做得与众不同、做得更有影响力，甚至是添加一些维生素C figure_0053_0023 只要是你能想到的建议，我们都收到过。下面就列举了一些建议。

•CMS版本的禅意花园

为一张页面给出不同的CSS设计，这个想法非常好。但为什么不将一张页面扩展为一个完整的网站呢？这个网站可以通过内容管理系统（Content Management System，CMS）维护。这样也可以更好地反映出真实世界中网站的状况。

•电子商务版本的禅意花园

类似于CMS禅意花园的创意，为什么不为一个提供了真实且不断改变的商品的电子商务网站应用不同的CSS设计呢？CSS可以用于修饰购物车、商品列表、推荐商品等页面。

•JavaScript版本的禅意花园

将文档的结构和表现样式分开是个很不错的目标。但为什么不更进一步，添加一个控制页面行为的JavaScript层呢？这一层增强禅意花园的表现能力，且同样也能与前两层彻底分开。

这个想法的创始者之一，Rares Portan提交了一个非常不错的示例作品（图1-1-17，www.csszengarden.com/javascript/）。随之也出现一些对这种增强做法优劣之处的讨论（www.mezzoblue.com/archives/ 2004/05/04/javascript_b）。

figure_0053_0024

图1-1-17 一个带有JavaScript脚本的禅意花园设计作品，其特色在于页首移动的云彩

•XML/XSLT/RSS/随意版本的禅意花园

首先用最基本的标记语言编写内容，然后用CSS修饰其样式。那为什么不充分展现出CSS和基于XML的语言之间配合的潜力，而却只选用XHTML呢？

•这些禅意花园在哪里

毫无疑问，这些主意都非常吊人胃口。其中很多都能给Web设计社区带来额外的宝贵资源。大多数情况下，这些想法的创始者都会收到正面的反馈与建议，人们都很乐于看到将这些想法付诸实现的示例站点。

但事实上，禅意花园只是专注于几个目标，也不能满足所有人的所有需求。从这一点考虑，前面那些建议就都意味着需要修改创建禅意花园的本意，这对那些已经参与进来的贡献者来讲是不公平的。

但创建一些新的网站来实现这些创意却是不错的想法。若能发明一种更好的捕鼠器，那就去做吧！一两个这样的站点随之而生，但却并没有维持太长的时间。关于为什么会出现这样的结果，每个人都有自己的想法，我们也不例外。

首先，为禅意花园设计作品非常容易。其难点在于设计技巧以及CSS编程知识，但作品却并不需要花费长达数周的时间来完成。为整个站点编写CSS将困难很多，特别是对于那些内容不停变化的站点来说。当设计师由此得到实际利益时，前面花费的时间自然物有所值。但若是不能，那么耗费大量时间也就自然成为制约这类网站发展的门槛。

其次，禅意花园最主要的目标已经实现。禅意花园的创办目的就是为了改变人们对基于CSS进行设计的理解，这个任务已经完成。既然CSS样式可以很容易地应用到一张页面上，那么也不难对其进行扩展，并将其应用到多页面网站中。

若你还是无法想象如何将CSS应用到多于一个的页面中，那么很多真实世界中基于标准设计的网站或许能够更好地证明这一点。目前，很多企业站点都转向了基于标准的设计，例如Wired News（www.wire d.com）、ESPN.com、Chevrolet（www.chevrolet.com）、AOL.com等。

从中学到的就是，人们非常需要一个编写各种各样网站时都能够遵从的、“放之四海皆真理”的标准。但这样的标准是没有的，相反，真实世界中的实例网站却是最好的学习对象，它们在阐明标准方面要远远好于禅意花园之类的演示站点。

第1章 追本溯源

footer中的这些链接是个列表……难道不应该用ul来组织吗？这是个反问句——这些链接确实应该包含在某个列表元素中。

quickSummary p {

quickSummary > p + p {

quickSummary > p + p + p {

quickSummary p:nth-child(2) {

第1章追本溯源