针对语义编写HTML所带来的巨大优势将在本章稍后部分介绍。现在我们只要记住，使用CSS进行设计时的主要任务之一，就是从编写合法的、带有良好结构并拥有语义的HTML文档开始。完成了这一步之后，我们才能在这个坚实牢固的基础之上应用各种CSS样式。
为表现样式编码和为实现正确的语义编码，二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。下面这一段HTML就是为了实现某种表现样式而编写的：
在开始使用CSS布局之前，首先要保证你的Web页面是以标记结构化的方式编写的。既然正在阅读本书，那么你十有八九已经听过将结构( structure)和表现(presentation)分开的说法。若你对此尚不熟悉，也不用担心——基于CSS进行设计的最主要的优势就是，只要HTML文档结构良好，那么今后将很容易通过添加一层CSS作为修饰，让文档样式变得非常漂亮。
长期以来，格式化Web页面时基本HTML元素的选择都取决于它们的显示的样式。若需要一个带有缩进的段落，你可能会选择用标签将这段文字包围起来，让段落两端显示出一些空白。但顾名思义，blockquote元素表示其中包含的内容是一段引用自其他来源的文字。如果我们仅仅是为了让某一段文字以缩进形式显示而使用blockquote元素，而这段文字却并非引用自其他来源的话，那么就意味着我们错误地使用了HTML标签-HTML标签是用来表示文档结构的。对于文档的显示样式（例如某一元素的缩进），应该使用CSS来实现。
几天之内，陆续有用户开始提交他们的设计：在站点发布的第一周里，每天就有成千上万个访问者到来。人们还志愿将禅意花园翻译成数十种语言。
很明显，禅意花园的出现满足了人们压抑已久的对CSS设计方面的需求，这在当时没有任何其他网站能够做到。自发布以来，禅意花园已经出现在全球范围内的数十种杂志、图书中，巩固了它在Web设计历史上独一无二的地位。感谢信更是从世界的各个角落纷至沓来，设计师和开发者用禅意花园向他们的雇主、客户以及同事证明了使用CSS进行设计的优势。提交作品的设计师也由此声名远扬，禅意花园甚至推进了他们的职业发展。
虽然前5个初始设计都对禅意花园的成功起到了至关重要的作用，但从长远来看，只有默认的第一个设计始终保持着较高的知名度。精致简洁的“安静”始终被设定为禅意花园的默认界面。虽然也曾考虑将2号设计“鲑鱼奶油奶酪”作为默认界面，因为该设计第一眼给人的冲击力较强，但谢天谢地，最后还是选择了“安静”。
除了正文部分之外，默认设计中的所有图片和文字都是在Adobe Photoshop中手工绘制的。起初Shea希望能够用书法手工写出标题的这段文本，不过在尝试了一个小时的毛笔和墨汁之后，Shea还是决定使用另一种让人更加满意的方法-Bitstream的Calligraphic 421字体（图1-1-12）。
因为汉字笔画复杂、样式美观，所以很多设计师非常欣赏它所体现出的细节。一种典型的西方设计方式就是一知半解地将若干汉字拼凑起来，以体现出某种“神秘”的意味，但Shea却不想这样o Shea花费了一段时间研究将要放在页面左上角卷轴中的汉字，希望能够让这些汉字表示出一定的含义。虽然初衷是好的，但结果仍旧让人遗憾：卷轴中的汉字在英语中的含义大概为beginning、complete、Whole和skill l 。
Continue Reading →Douglas Bowman在其文章“使用背景图片来替换文本”中给出了一种权宜之计（这种解决方案目前已经是声名狼藉）：首先在页面中将前景图片和某些文本元素关联起来，然后用图片来代替原来的文本。使用CSS加上一些少量的额外标记，即可很容易地实现这个hack与标签及其alt属性的表现非常类似。
2003年4月，禅意花园的计划正式开始了。设计者发布了一个单独的HTML文件作为所有设计的基础，随着这个HTML文件发布的还有5个初始设计（图1-1-7～图1-1-11）。
