作者：(美)Dave Shea,Molly E. Holzschlag

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

CSS禅意花园(修订版)试读：

前言

可以到www.csszengarden.com浏览“CSS禅意花园”网站和本书中列出的所有设计作品。

若想查看某段HTML标记，可使用浏览器的“查看源文件”功能，该功能通常位于“查看” 菜单中。若想查看设计中使用的CSS，首先选择该作品，然后找点击页面中的“View This Design's CSS”链接。需要注意的是，不同作品中该链接在页面中的位置也各不相同。

欢迎阅读这本关于一个将要塑造We b未来的项目的图书。

本书的诞生缘于2003年5月8日创办的一个网站。该网站的初衷是改变人们对We b设计的看法，但最终却出乎意料地改变了全球技术发展的趋势。该网站名为“CSS禅意花园”，是来自世界各地的众多天才协力合作的结晶。“CSS禅意花园”在发布宣言和展示作品两方面双管齐下，其创建目的在于展示基于CSS设计可实现的视觉效果。网站以样式表和图像的方式向设计师征集原创作品，但规则是所有作品都必须使用相同的HTML文件。每件作品的HTML都完全相同，无一例外。

不可思议？甚至有点疯狂？也许兼而有之，但毫无疑问，只要使用得当， CSS与任何设计工具相比都毫不逊色。本书展示了网站收到的36件最杰出的作品，深入剖析了创作人员的设计历程及他们使用的工具和编码方法。

整本书就谈论一个网站？是真的吗？如果这是一个普通的网站，当然有理由这样怀疑。但“CSS禅意花园”的内容是如此丰富多彩而又如此实用，并且都由世界各地各怀绝技的设计师创作，因此对本书来说最严峻的挑战则是如何将其揉合到一本书中。本书介绍的内容

本书是介绍和描述该网站的吗？从某种意义上说，是的。本书是有关Web设计最佳实践和技巧的教程吗？显然如此。它是一个令人赏心悦目的设计画廊，设计网站时能从中获取灵感吗？当然没问题。“CSS禅意花园”涉及了众多有关如何完成现代Web设计的主题，如果专门探讨设计的某个方面，比如布局，那么连展示该网站的冰山一角都谈不上。编写本书时，我们就清楚地认识到了这一点，因此必须涵盖方方面面：文字的使用、色彩理论、布局设计技巧，应有尽有。

从本书中能够学到CSS知识吗？当然，但不是入门水平的基础知识。要侧重于视觉设计技巧，必须跳过入门课程，直接进入中级。市面上的另外一些不错的技术书可帮助读者快速掌握有关CSS句法和语法的基础知识。我们建议读者购买其中一本进行快速入门，然后在本书中学习如何以极具视觉震撼力的方式应用CSS技术。

本书将重点放在解决视觉设计问题上，而不是详细描述CSS规范的方方面面。在恰当的时候也会讨论浏览器的支持情况，以保证实用性。本书针对的读者

本书适合所有对设计和开发网站感兴趣的读者阅读。设计师

本书采用视觉化的方式讨论CSS设计理论和实践，以使用基于标准的最新技术完成实际作品和解决实际问题为目标。程序员

本书的重点是视觉艺术，但并不要求读者具有图形设计基础。作者从始至终都在尽最大努力以最佳的方式定义设计术语，确保即使读者不具备任何设计知识，也能理解并运用本书中介绍的概念和技巧。CSS新手

尽可能少用行话和技术术语，即使读者对CSS没有足够清晰的认识，也能理解大部分章节。建议CSS新手从推荐读物（参见本书末尾的“结语”部分）中选择一本阅读，学习基本概念和语法，然后通过阅读本书来拓展这些概念并在作品中实际应用。

书中探讨了一些基本的We b设计原则，适用于大多数但不是所1有情况。当然可以使用Adobe Dreamweaver等自动设计工具来创建基于CSS的网页，但对那些使用HTML编辑器手工编写代码的设计人员来说，本书介绍的大部分CSS技巧将显得更加有用。如果仅依赖拖放来完成Web设计，将会发现本书在很多方面技术性太强。但愿这不会让读者丧失拓展知识的勇气。1

注释： 原文为“Macromedia Dreamweaver”，但Macromedia已与Adobe公司合并，产品名称也有所改变。——译者注CSS高级用户

即使是对CSS了如指掌的读者也能从阅读本书的过程中受益良多。本书侧重于视觉艺术，辅以实际的CSS示例，这些实例均出自当今最具创意的一些设计师之手；书中涉及的主题丰富多彩，即使是那些经验最为丰富的专业人员也能从中学到一些全新的技巧。如何阅读本书

网站通常都有入口，被称为主页。在这里，用户可以通过点击某个标题跳转到网站的任何地方，浏览其中包含的内容；也可以使用搜索功能查找所需的内容；还可以随意单击，了解能获悉哪些更深入的内容。

本书采用的也是这种模型，阅读的方式也没有对错之分。既可以从头开始逐页阅读，也可以直接跳到感兴趣的章节。读者可以以任何非线性方式阅读本书，以任何顺序研究书中的每个作品。

本书分为两个主要部分：

□ 第一部分为第1章，讨论网站“CSS禅意花园”的创建及其最基本的主题，包含正确的标记结构和灵活性设计等；

□ 第二部分包括6章，占据了本书的大部分篇幅。每章剖析“CSS禅意花园”收录的36件设计作品，每章介绍的作品围绕一个主要的设计概念展开，如文字的使用。通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的Web设计原则和CSS布局技巧的运用。

下面概述这7章的内容。第1章 追本溯源

概述“CSS禅意花园”的来历及CSS的发展历程，讨论正确的标记结构和设计。第2章 设计

阐述基本设计元素及其在We b设计中的应用，包括色彩理论、比例、位置、文字和图片之间的关系以及如何协调地使用Adobe Photoshop和CSS。第3章 正文布局

详细阐述如何创建复杂的CSS布局，包括分栏、浮动内容和定位方案。第4章 图像

使用图像改善布局以及如何生成图像，包括图像替换、图形文件格式及寻找图像素材。第5章 字体排印

Web上字体的局限性及其避免方法等有关文字的方方面面，包括字号、字体的选择和基于图像的文字等。第6章 特效

掌握基本知识后该做什么？根据用户使用的浏览器采用不同样式的高级CSS效果、创建灵活布局的技巧，以及使用巧妙的代码克服技术的局限性。第7章 重构

介绍6位设计师进行重构的方法。给出了这6件设计作品创建的过程，详细阐述了每一步。综合运用本书其他5章介绍的设计原则，就能在这里获得最佳的效果。

可以看到，我们竭尽所能，将尽可能多的优秀内容揉合到本书中，这几乎是市面上最全面的有关基于标准的现代Web视觉设计的参考资料。

编写本书是一种享受，但愿你阅读时也是如此！Dave Shea，Molly E.Holzschlag2004年8月Dave Shea感谢

首先也是最重要的，感谢我的妻子April容忍我在那么多的夜晚中独自在星巴克咖啡店中写作。若是没有她的支持、理解和耐心，我不可能完成本书。（这也提醒了我——感谢这家本地的星巴克咖啡店的所有员工给我带来那么美味的拿铁咖啡，且对总是独自呆在角落中敲击着PowerBook的我没有丝毫厌烦。）

感谢我的父母Gord和Linda以及我的兄弟Matt和Jeremy，能善意地装作理解我的所作所为。

感谢DreamFire工作室（www.dreamfirestudios.com），虽然访客越来越多，但从开始到现在，它一直为禅意花园网站提供着服务器。

围绕在禅意花园的设计师社区给了我很多支持和鼓励，这些都是我在两年前着手本书写作时从未想到过的。这里有太多太多的人需要感谢，但很遗憾不能在书中全部列出，感谢你们曾经给我的帮助。虽然下面列出了很多人，但还有很多人没列出来，但你们的那些让We b更加丰富多彩的作品却无时无刻地带给我无穷的勇气和灵感。

最好、最多、最真诚的感谢，献给我的合作者Molly，感谢她能把她的想法和经验与我分享，感谢她给我的鼓励。很多年前她的一本书将我带入了We b设计的殿堂，能够与她共同完成本书是我的荣幸。Molly E. Holzschlag感谢

若是某个领域中的学生很快就能成为我们的老师，那么能处在这个领域中绝对会是段不平常的经历。我们现在做的正是这样的事情——立即改变人们对Web的想法。与Dave合著该书时我也再次感受到了从学生到老师的那个奇迹般的过程——我的作品启发了一个人，这个人很快又启发了新的一批Web设计师。Dave以及很多禅意花园设计师都让我更好地理解了CSS，进而更有效地教授CSS，最终又以一种全新的方式对Web充满了热情。因此，最主要的感谢必须致以Dave，以及所有本书的贡献者——很多人都是我的朋友或老师，都曾在过去的一段时间中帮助我认识到了We b项目中的最重要之处。

从个人角度，我要感谢深爱的Michael以及我的家人和朋友，你们忍受了我善变的性格并自始至终陪在我身边。还要感谢David Fugat，这位异常优秀的文字编辑，也是我的好朋友，从不吝惜他的鼓励和指导。

更要感谢我的网站的读者和访客：对我而言，你们长久以来的支持和鼓励是任何其他东西都无法替代的！Dave和Molly共同的感谢

献给所有参与本书编辑出版工作的朋友一个最真诚的感谢！Cheryl England不但是个绝佳的编辑，也让编辑的过程充满了乐趣！感谢Shaun Inman帮助本书在技术上精益求精，感谢Elissa Rabellino细心的编辑工作。同样感谢产品团队的成员（Charlene Will、Kim Scott和Hilal Sala）帮助我们保证了本书的质量。最后，一份特殊的感谢献给Nancy Ruenzel和Cliff Colby，是你们坚信本书的取材，并随后帮助我们付诸于实践。特别感谢

感谢所有认为CSS禅意花园值得参与的朋友，是你们造就了禅意花园的今天。若是没有你们的努力，世上决计不会出现本书。第1章 追本溯源

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

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

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

人们还在不停地挑战极限。但同时，HTML也以一种用来标记研究论文的简单语言的身份呱呱坠地。浏览器厂商和图形设计师都对其低下的布局能力颇有微词。于是，类似 标签和被强行用作布局[1]的

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

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

总之，当时的情况是一团糟。尽管存在着这样那样的问题，但.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页面完全可能以统一的样式呈现在各种浏览器和操作系统之上。图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也能实现如此特别的布局效果。图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-[2]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所示，第一版的禅意花园草案还远远称不上吸引人。图1-1-3 禅意花园原型之一，地图1-1-4 禅意花园原型之一，火图1-1-5 禅意花园原型之一，风图1-1-6 禅意花园原型之一，水

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

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

2003年4月，禅意花园的计划正式开始了。设计者发布了一个单独的HTML文件作为所有设计的基础，随着这个HTML文件发布的还有5个初始设计（图1-1-7～图1-1-11 ）。图1-1-7 1号设计，安静图1-1-8 2号设计，鲑鱼奶油奶酪图1-1-9 3号设计，暴风雪图1-1-10 4号设计，拱门图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）。图1-1-12 Calligraphic 421字体

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

还记得小学时候的这类小作品吗？将墨汁倒在一张白纸上，然后用吸管将墨汁吹成类似树的形状，最后撕下一些卫生纸片作为“花”。页面右下角的那棵树的设计过程将会让你回忆起这段美好的时光。从屏幕截图中可以看到，这棵树经历了若干次修正（图1-1-13）。整个过程从树的轮廓开始，只包含一些很简单的颜色，然后再基于该轮廓，以不断添加图层的方式进行改善。图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元素，而这段文字却并非引用自其他来源的话，那么就意味着我们错误地使用了HTML标签——HTML标签是用来表示文档结构的。对于文档的显示样式（例如某一元素的缩进），应该使用CSS来实现。

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

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

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

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

Our Family

Pictured are Matt and Jeremy.As

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

where he isn't.

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

Our Family

Pictured are Matt and Jeremy. As usual, Matt is

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

　isnÕt.

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

而在第二个代码片断中，却一点都没有对页面显示样式的说明——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元素”之间到底有什么区别？大多数时候它们表示的是同一个东西，但仍有一些细微的区别。“标签”指简单的HTML分隔符，例如

、

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

示例：

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

设置文档的字符集。这里为UTF-8。•指定标题

每个HTML页面都需要一个用来描述页面内容的

示例：

•选用恰当的元素

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

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

示例：

The Road to Enlightenment

而不要使用这样的HTML：

The Road to Enlightenment•避免过度使用div和span

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

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

示例：

css Zen Garden

The Beauty of CSS Design

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

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

示例：

The Zen Garden aims to excite, inspire, and encourage participation.

而不要这样：

The Zen Garden aims to excite,

　inspire, and encourage participation.

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

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

三个合法的标识符：

两个不合法的标识符：

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

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

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

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

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

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

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

在全球化的环境中（例如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）。

　

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

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

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

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

css Zen Garden

The Beauty of CSS Design

试读结束[说明：试读内容隐藏了图片]

下载完整电子书