15.1 “禅意花园”页面HTML结构分析

在本教程的第2章中，我们介绍了一些“CSS禅意花园”的精美作品。在那时，读者还刚剐开始了解CSS，无法深入进行介绍和实践。

而现在，读者已经经过了十几章CSS和HTML案例的磨练，相信在这个过程中既感受到了思考的辛苦，也感受到了成功的喜悦。

在本章中，就结合前面所有章节介绍的技术，利用CSS禅意花园的网页和作品，进行一些综合的练习。

在本章中，介绍禅意花园的侧重点与《the Zen of CSS design》一书的区别在于，本书将更重视一个方案是如何做出来的，使读者更容易地理解其结构。在学习完本书后，还可以花一些时间，结合自己的创意，做出更多的禅意花园作品。如果读者制作出了令自己满意的作品，欢迎读者发给网页学习网，共享读者收获的心得。

首先介绍一下Dave Shea设计的这个HTML文档，因为所有CSS都是基于这同一个HTML文档的。该文件位于本书光盘“第15章/no-css.htm”。

在不使用任何CSS时显示效果请读者观察一下。

读者只要知道这个页面中的内容分为3个部分，这3个部分的id分别为“intro”、“supportingText”和“Iinklist”，

它们都放置在一个id为“container”的div中。每一个部分又分为若干个div，每个div都有各自的id，以便使用CSS设置它们的样式。

如果仔细读一下HTML代码，就会发现它和一般的网页HTML代码有一定的区别。例如下面摘录的一小段代码：lodidance.com

在每一个具体放置文字内容的div中，例如“preamble”div中，为每个文字段落都设置了id，目的是使设计师有足够的空制能力，

可以灵活地单独控制任何一个段落盒的样式。此外每一个段落和标题中都套有一对<span>和</span>标记，

这样设计师可以灵活地做出很多效果，例如可以通过这种方式使用滑动门技术，或者使用图像来替代文字内容，等等。

在实际制作一个网站的时候，当然不用这样繁琐地加入这么多标记，这里增加了这些标记

，是为了实现完全不改动HTML而产生各种效果的目的，希望读者理解其中的道理。

最后，为了便于英语不是很好的读者学习，这里简单介绍一下这些id的中文含义，如下表所示。

具体每一个段落中的英文含义就不必搞懂它了。

现在请读者在网页编辑软件中，打开这个HTML文档。浏览一遍代码，找到上面介绍的各个代码段对应的位置，尽快熟悉这个网页，包括它的各个组成部分。

最后说明的是，在文档的末尾还有6个空的div．这几个div是留给设计师在一些特殊情况下使用的，绝大多数作晶里没有用到这些附加的div。