为何我们使用标准？
W3C组织包含了大量关于背景与特性的细节，这一行为已经具有足够的远见，一般的网页设计者们已经没有必要再为这些问题担心。W3C组织的目标是通过一系列的简单而严格的规范，使得网页设计者于互联网内容提供商们能够确保他们的站点不仅可见，而且能够为最多数的“用户代理”所使用。
显然，这里的“用户代理”指的就是web浏览器；但是如今，桌面系统使用的web浏览器只在“用户代理”中占了很小的一部分。随着便携设备的兴起（例如移动电话），越来越多的用户浏览web的方式已经摆脱了桌面的桎梏。不是所有的用户都会使用你所选择的浏览器的。使用特殊设备的人群（例如盲人）将会使用特殊的设备或者软件来浏览页面。
由于W3C所创造的这些规范，其设计目标是为了清理90年代以来形成的这一混乱局面。如今，去满足各种不同的浏览器已经不再有意义，因此，催化了HTML 4.01,XHTML,CSS,DOM的产生。
这一系列技术的产生，是网页标准化组织里面的设计师与代码编写者共同努力的结果。合理的结果应该是这样的：在不同的浏览器上，在保证所有的内容可用的同时，并保证精确的视觉效果。CSS作为一种全新的页面设计方式，完全满足了这一需求。但是，说服其他的页面设计师们使用这一标准并不是那么容易的，而且，在21世纪的前几年里，并没有几个人能够完全准确地说出该如何使用它。
这正是Zen Garden of CSS 创立的初衷。当使用CSS的人们，在不知不觉中变成了代码编写者时，他们已经可以很熟练的解决使用CSS的各种技术问题，却往往忽视了页面的布局。由于无例可循，页面美工设计者们很难真正把握使用CSS的真谛。
播种
在2002年末期，Zen Garden 的创建者Dave Shea 考虑到了这个问题。为何设计出美丽的网页的设计者们能够从那些不那么美丽的例子中获得灵感？那是因为他们同时拥有程序语言与视觉设计方面的修养，在这里，Shea把CSS视为一种“设计语言”。他认识到了很多使用“设计语言”的人，缺乏这方面的修养。
想法的萌芽：应该有一个存放CSS设计作品的仓库。这一想法不仅仅是为了简单地存放那些常用规则，更鼓励设计者们创建新的，美观的作品。正是这一想法的播种，成长出了Zen of CSS Garden。
Note：
很有必要说明的一点是，web标准并不是传统意义上的标准；这只是一种建议，而不是强制施行的，W3C组织也把自己的规范标志为一种“推荐”。无论如何，如今越来越多的人们已经以web标准为设计的标尺，更多信息参见www.webstandards.org/buzz/archive/ 2004_10.html#a000463
影响
Web标准项目的发起人之一Jeffrey Zeldman在2002年发表的一篇文章中，呼吁那些已经认识到web标准带来的好处的人们，不要在把时间花在宣扬web标准的好处，而是应该使用它。这才是证明web标准的优势的最好途径，”show , don’t sell”也成为了web标准项目的一个口号。Zeldman 后来又写了web标准项目的一个权威指导：Designing with Web Standards (New Riders, 2003)。
Note：
你可以在 Daily Report (www.zeldman.com/daily/0802c.html#Evangeline) 上找到Zeldman 的原文。
Web开发者 Chris Casciano 在2002年创立了一个称为“Daily CSS Fun”的项目。（如图）
这一想法的来源：由于Casciano在一个月前，每天都创建一个新的样式表，这些样式表在各个方面显示出了对HTML有更大的优势。他没有对网页美术设计者们提出任何要求，但是他的作品具有如此大的吸引力，促使每个人都跃跃欲试，以CSS作为唯一的规划工具。
由于Netscape Navigator 4的普及风暴，而它又是一个对CSS支持不足的浏览器，Casciano的这些课程，在理论上是完美的，在日常应用中，却障碍重重。值得庆幸的是，在随后的日子里，Navigator 4 的市场份额直线下跌，到2003年，这个浏览器已经几近绝迹，Casciano的时代才真正到来。
Note
See Daily CSS Fun 链接
www.placenamehere.com/neuralustmirror/200202
超前的想法
让我们回到Zen Garden上来吧！2003年5月Shea在他的个人主页（www.mezzoblue.com）上开始了一个项目，这个项目很快就移植到了它现今的地方,www.csszengarden.com.
2002年年底，Shea 开始建立Zen Garden 的初步原型，这个原型有四种样式表（主题）每个样式都对应着一种自然元素：木、水、火、风。这一思想在那时候还没有完全形成，图像也不是重要因素。如图，那时候的Zen Garden 远没有现今那样令人鼓舞。
由于缺少图片，这些设计很单调。背景图像通过background-image属性添加，另一方面，前景图像的添加是不可能的，由于如果img标签被使用过了，那么就无法被再次使用，你将被限制在只能使用一张图片的禁锢中。然而，我们的背景图片不能满足设计的需求，由于设计工作往往强调图片与文字的并排，而不是使图像在文字后面，显然，背景图片并不是一个完整的解决方案。
这一问题得到进展，是在Douglas Bowman发表的一篇如今备受指摘的文章”Using Background-Image to Replace Text” 之后。这一方案的推崇者认为这是一个完美的解决方案：前景图片能够很方便地通过与文字元素摆在同一个页面上，然后通过CSS以图案的方式表现在网页上，然后让文字元素替换掉背景图片上相同的文字元素，类似于为img元素设置alt(图像的文字替换属性：参见html语言，译者注)行为。
Note
如果你读过Bowman在Stopdesign上发表的原文(www.stopdesign.com/articles/rePlace
_text),你会注意到文章中这一方案的提出者本身存在着基本且很容易解决的问题。在很多Zen Garden 的设计中就使用了这样的技术，我们在第四章将会有更详细的描述。
2003年4月，我们开始了详细的Zen Garden的计划。我们设计了一个简单的HTML页面作为主页，在站点中另有其他5个最早的设计（如图）。
Note
Zen Garden的HTML 文件一旦被提交将不再改变，我们把更多精力花在确保写进Zen Garden 的标签与文字都是可用的，并保证有足够且唯一的 class 与 id 元素用于样式及样式的修改。显然，传统的标签也不可能完全满足未来的要求，在章节的稍后部分我们将就这一问题再作探讨。
原文
Why these Standards?
The W3C working groups involve individuals from a wide variety of backgrounds and specialties who meet to address ahead of time the issues an average Web designer should never need to worry about. The goal is to provide a series of recommendations so well thought-out that simply by following the specification properly, developers of authoring software and browsers have a clear guideline to follow, and content authors and designers can be assured that their sites are viewable and usable by the widest variety of user agents.
By "user agents" we mean Web browsers, of course; but the average desktop browser is only the tip of the iceberg. As portable devices like mobile phones take off, more and more users will browse the Web free of the shackles of the desktop. Not every user will come in using your browser of choice; not every user can. For example, those with special accessibility requirements may use assistive devices called screen readers, or special Braille displays or magnification software.
Because the design goal of these W3C-created specifications was to clear up the incompatible mess of the Web of the 1990s, it would hardly make sense to serve different versions of the same site to all these different user agents. So the recommendationswhich include HTML 4.01, XHTML, Cascading Style Sheets (CSS), and the DOMwere designed with all this in mind.
These were the technologies that designers and coders within the Web Standards Project embraced. It was logical to support specifications that would guarantee the widest content accessibility, while allowing for precise visual control. CSS fit the bill, but it was a completely new way of building Web sites. Convincing other designers that it was in their best interest to learn CSS proved to be the challenge, and the first few years of the new millennium were spent figuring out exactly how to use it.
This was the climate of the Web when the idea for the Zen Garden was planted. The people who were working with CSS at the time tended to be coders and programmers; they were highly adept at figuring out the technical issues when implementing CSS, but the layouts they produced were often considered minimal, bland, and uninspiring. Graphic designers hadn't latched on to the idea of using CSS, because there weren't any exceptional examples of CSS design.
Planting the Seed
In late 2002, Zen Garden creator Dave Shea started thinking about this problem. How could those who were capable of producing real beauty with CSS be inspired by examples that were less than beautiful? Because he had a background in both coding and visual arts, Shea recognized the potential of CSS as a design language. And he realized that the people who should be using it weren't.
An idea began germinating: If only there were a central repository of great CSS design work. Simply aggregating what existed clearly wasn't going to work; not much did exist. Encouraging designers to create new, great-looking CSS work was going to be the key to growing this idea. The seed was planted for a new project.
Note
It's important to note that Web standards aren't standards in the traditional sense of the word; compliance is not mandatory, and the W3C itself merely labels them as "Recommendations." However, many people recognize them as standards in practice, if not in name. For more on the naming convention, see What is a Web Standard at (www.webstandards.org/buzz/archive/2004_10.html#a000463).
Influences
In an article written in 2002, Web Standards Project cofounder Jeffrey Zeldman implored those who understood the benefits of designing with Web standards to quit spending their time selling others on the benefits, and instead to just start using them. This was the best way to demonstrate the advantages, and "Show, don't sell" became the mantra of the project. Zeldman went on to write the definitive guide on the subject, Designing with Web Standards (New Riders, 2003).
Note
You can find Zeldman's original article at The Daily Report (www.zeldman.com/daily/0802c.html#Evangeline).
A project called Daily CSS Fun was created by Web developer Chris Casciano in 2002 (FIGURE 2). The idea was that over the course of a month, Casciano would release a new style sheet every day that would modify the underlying HTML in wildly different ways. He made no claim of being a graphic designer, but the results were compelling for their unique insight into what was possible by relying on CSS alone for layout purposes.
Figure 2. Example style sheets from Daily CSS Fun.
Due to the continued popularity of Netscape Navigator 4, a browser with insufficient CSS support, these lessons were nice in theory but far from practical for everyday Web use. All that started going away as the market share of Netscape Navigator 4 plummeted, and by 2003 that browser barely registered on the radar anymore. It was time to move on.
Note
See Daily CSS Fun at www.placenamehere.com/neuralustmirror/200202.
Early Thinking
The ideas for the Zen Garden coalesced, and in May 2003 Shea launched the result on his personal site, www.mezzoblue.com, and then quickly moved it to the domain where it now lives, www.csszengarden.com.
In late 2002, Shea had already begun creating preliminary prototypes for the Zen Garden that switched between four style sheets, each themed for one of the four ancient elementswood, water, fire, and wind. The idea hadn't been fully developed at the time, and images weren't a large part of the equation. As pictured in FIGURES 36, the first Zen Garden drafts were far from inspiring.
Figure 3. Pre-Zen Garden prototype, Earth.
Figure 4. Pre-Zen Garden prototype, Fire.
Figure 5. Pre-Zen Garden prototype, Wind.
Figure 6. Pre-Zen Garden prototype, Water.
The designs were boring because they lacked much imagery. Background images were added by making use of the background-image property. Foreground images, on the other hand, were not possible. If the img tag were used, there wouldn't be any flexibility; you'd be confined to a single set of images and continuously have to work around those. And background images alone wouldn't cut it, because design work often relies on imagery that is emphasized alongside text, rather than behind it within a piece. Clearly, background images were only a half-solution.
The workaround for the imagery problem clicked when Douglas Bowman published his now-infamous article "Using Background-Image to Replace Text". After this method was publicized, the final key had clicked into place: Foreground images could easily be placed by hooking into the many text elements within a page and swapping them with graphical equivalents. CSS and a little bit of extra, customizable markup allowed the replacement of inline textual items with background imagessimilarly to how an img tag with proper alt text behaves.
Note
If you read Bowman's original article at Stopdesign (www.stopdesign.com/articles/replace_text), you'll notice it mentions that the technique it advocates has some basic accessibility problems. This is the same technique used for many Zen Garden designs. We'll cover this technique in more detail in Chapter 4.
In April 2003, planning for the Zen Garden began in earnest. A single HTML file was built that would serve as a master, and five initial designs were created to launch with the site (FIGURES 711).
Figure 7. #001, Tranquille.
Figure 8. #002, Salmon Cream Cheese.
Figure 9. #003, Stormweather.
Figure 10. #004, arch4.20.
Figure 11. #005, Blood Lust.
Note
Since the Zen Garden's HTML file would be impossible to change once submissions started coming in, extra time was spent ensuring that the markup and wording of the written text was acceptable, and that there were enough unique class and id elements for the style to modify. After the launch, additional markup considerations became evident that would have been impossible to predict in advancewe'll cover this a bit later in the chapter.
50
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
