前言

Note

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

注释：¹ 原文为“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.Holzschlag

2004年8月