Posts Tagged '国外教程翻译'

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

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

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

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

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

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

几天之内，陆续有用户开始提交他们的设计：在站点发布的第一周里，每天就有成千上万个访问者到来。人们还志愿将禅意花园翻译成数十种语言。

很明显，禅意花园的出现满足了人们压抑已久的对CSS设计方面的需求，这在当时没有任何其他网站能够做到。自发布以来，禅意花园已经出现在全球范围内的数十种杂志、图书中，巩固了它在Web设计历史上独一无二的地位。感谢信更是从世界的各个角落纷至沓来，设计师和开发者用禅意花园向他们的雇主、客户以及同事证明了使用CSS进行设计的优势。提交作品的设计师也由此声名远扬，禅意花园甚至推进了他们的职业发展。

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

1. 若是某位设计师正在被一个布局问题所困扰，那么现在他有了寻求帮助的地方——禅意花园中有数百个不同的设计，他所遇到的问题极有可能已经被别人解决了。禅意花园允许并鼓励人们学习它的CSS，并将其使用在其他站点上。
2. 类似地，禅意花园中也不断出现新的页面布局技术及CSS效果。我们都有机会在数百个作品中找到一些新奇的东西。
3. 禅意花园还是一个绝佳的浏览器兼容性测试网站。其中所有的设计都使用有效的、基于标准的代码编写，所以理论上这些设计应该能够在所有浏览器中以一致的方式呈现出来。（当然实际上并非如此完美。由于某些浏览器的缺陷或对某些元素缺乏支持，大多数设计师都不得不考虑浏览器之间显而易见的呈现差别，并使用多种CSS过滤器和hack来解决。）
4. 当你正尝试说服你的雇主或客户使用Web标准设计页面时，禅意花园就是一个极其令人信服的证明。
5. 当你灵感枯竭的时候，禅意花园中的设计或许能够给你一些启发。感觉江郎才尽了？来禅意花园逛逛吧，说不定灵感就在不经意之间出现了呢！
6. 禅意花园为经验丰富的专家和积极努力的设计师提供了一个良好的展示自我的平台。雇主和潜在的客户很愿意主动联系它们中意作品的设计师，提供工作或者合作机会。这些优秀的作品也经常出现在国际性的图书和杂志中。

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

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

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

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

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

在图7中我们可以看到，这几个汉字为“完”、“全”、“技”等。隐约可以感到Shca似乎要表达出类似“最高水平”的意思。