| Consider the Zen Garden HTML structure as permanent as a book. It won't change, even though there are countless ways it could improve. The content itself may undergo some tweaking, but the basic HTML elements are effectively set in stone. The next few pages are a complete listing of the Zen Garden source HTML for the sake of reference later on in the book. You can also get a copy of this by visiting the sitewww.csszengarden.comand viewing the page source in your browser. This is accomplished the same way in most major browsers: You choose View > View Source or the nearest equivalent. Or even just find the link to the sample HTML file on the Zen Garden site itself for an easy download. Comments that remain in the original source on the site have been removed from this listing, in favor of notes in the sidebar to further explain some sections and offer reasoning for various items. Again, you can always view the comments by visiting the site. [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <-- 1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; <-- 2 charset=iso-8859-1" /> <meta name="author" content="Dave Shea" /> <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display" /> <meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design." /> <meta name="robots" content="all" /> <title>css Zen Garden: The Beauty in CSS Design</title> <script type="text/javascript"></script> <-- 3 <style type="text/css" media="all"> @import "sample.css"; <-- 4 </style> </head> <body > <-- 5 <div > <div > <div > <-- 6 <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2> </div> <div > <p ><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p> <p ><span>Download the sample <a href="zengarden-sample.html" <-- 7 title="This page's source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></span></p> </div> <div > <-- 8 <h3><span>The Road to Enlightenment</span></h3> <p ><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span></p> <p ><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym <-- 9 title="Web Standards Project">WaSP</acronym> and the major browser creators. </span></p> <p ><span>The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.</span></p> </div> </div> <div > <div > <h3><span>So What is This About?</span></h3> <p ><span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</span></p> <p ><span><acronym title="Cascading Style Sheets">CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers <-- 10 have yet to make their mark. This needs to change.</span></p> </div> <div > <h3><span>Participation</span></h3> <p ><span>Graphic artists only please. You are modifying this page, so strong <acronym title="Cascading Style Sheets">CSS</acronym> skills are necessary, but the example files are commented well enough that even <acronym title="Cascading Style Sheets">CSS</acronym> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><acronym title="Cascading Style Sheets">CSS</acronym> Resource Guide</a> for advanced tutorials and tips on working with <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p> <p ><span>You may modify the style sheet in any way you wish, but not the <acronym title="HyperText Markup Language">HTML</acronym>. This may seem daunting at first if you’ve never worked this way before, but <-- 11 follow the listed links to learn more, and use the sample files as a guide. </span></p> <p ><span>Download the sample <a href="zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your .css file to a web server under your control. <a href="http://www. mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if we choose to use it, we <-- 12 will spider the associated images. Final submissions will be placed on our server.</span></p> </div> <div > <h3><span>Benefits</span></h3> <p ><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.</span></p> </div> <div > <h3><span>Requirements</span></h3> <p ><span>We would like to see as much <acronym title="Cascading Style Sheets, version 1">CSS1</acronym> as possible. <acronym title="Cascading Style Sheets, version 2">CSS2</acronym> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <acronym <-- 13 title="Cascading Style Sheets">CSS</acronym> and not the latest bleeding- edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <acronym title="Cascading Style Sheets">CSS</acronym> validates.</span></p> <p ><span>Unfortunately, designing this way highlights the flaws in the various implementations of <acronym title="Cascading Style Sheets">CSS</ acronym>. Different browsers display differently, even completely valid <acronym title="Cascading Style Sheets">CSS</acronym> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a> page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at <-- 14 least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.</span></p> <p ><span>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.</span></p> <p ><span>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <acronym title="Cascading Style Sheets">CSS</acronym> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/sa/1.0/" title="View the Zen Garden's license information.">one on this site</a> so that others may learn from your work.</span></p> <p ><span>Bandwidth graciously donated by <a href="http://www. dreamfirestudios.com/">DreamFire Studios</a>. Get the <a href="/book/">Book </a>!</span></p> </div> <div > <a href="http://validator.w3.org/check/referer" title="Check the validity of <-- 15 this site’s XHTML">xhtml</a> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS">css</a> <a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View details of the license of this site, courtesy of Creative Commons.">cc</a> <a href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww. mezzoblue.com%2Fzengarden%2F&output=Submit&gl=sec508&test=" title="Check the accessibility of this site according to U.S. Section 508">508</a> <a href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww. mezzoblue.com%2Fzengarden%2F&output=Submit&gl=wcag1-aaa&test=" title="Check the accessibility of this site according to WAI Content Accessibility Guidelines 1">aaa</a> </div> </div> <div > <div > <div > <h3 ><span>Select a Design:</span></h3> <ul> <li><a href="/" title="AccessKey: a" accesskey="a">Sample #1</a> by <a href="http://www.mezzoblue.com/" >Dave Shea</a> </li> <-- 16 <li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzoblue.com/" >Dave Shea</a> </li> <li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzoblue.com/" >Dave Shea</a> </li> <li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzoblue.com/" >Dave Shea</a> </li> <li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http://www.mezzoblue.com/" >Dave Shea</a> </li> <li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http://www.mezzoblue.com/" >Dave Shea</a> </li> <li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http://www.mezzoblue.com/" >Dave Shea</a> </li> <li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a <-- 17 href="http://www.mezzoblue.com/" >Dave Shea</a> </li> </ul> </div> <div > <h3 ><span>Archives:</span></h3> <ul> <li><a href="/" title="View next set of designs. AccessKey: n" <-- 18 accesskey="n"><span >n</span>ext designs »</ a> </li> <li><a href="/" title="View previous set of designs. AccessKey: p" accesskey="p">« <span >p</span>revious designs</ a></li> <li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span >w</span> All Designs</a></li> </ul> </div> <div > <h3 ><span>Resources:</span></h3> <ul> <li><a href="http://www.csszengarden.com/001/001.css" title="View <-- 19 the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"><span >V</span>iew This Design’s <acronym title="Cascading Style Sheets">CSS</acronym></a></li> <li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r" accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span >R</span>esources</a></li> <li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q" accesskey="q"><acronym title="Frequently Asked Questions">FA<span >Q</span></acronym></a></li> <li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span >S</span>ubmit a Design</a></li> <li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t" accesskey="t"><span >T</span>ranslations</a></li> </ul> </div> </div> </div> </div> <div ><span></span></div> <-- 20 <div ><span></span></div> <div ><span></span></div> <div ><span></span></div> <div ><span></span></div> <div ><span></span></div> </body> </html>
(1)A DOCTYPE is essential for identifying the type of document you've written. See "Use a DOCTYPE," earlier in this chapter. (2)Specifying the character encoding of the document you are writing is incredibly important in a global environment like the Web. See "Character Encoding," later in this chapter, for more; and for a broader overview of character-encoding issues see Joel Spolsky's article "The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)" at Joel on Software (www.joelonsoftware.com/articles/Unicode.html). (3)This empty script element is for the sake of avoiding a styling glitch in Microsoft Internet Explorer for Windows. See "Flash of Unstyled Content" at Blue Robot (www.bluerobot.com/web/css/fouc.asp). (4)Though not as necessary anymore, this method of importing CSS ensures that Netscape Navigator 4 doesn't try to apply the external CSS file, instead displaying simple, unstyled markup. See "Tricking Browsers and Hiding Styles," from Eric Meyer on CSS (www.ericmeyeroncss.com/bonus/trick-hide.html). (5)An id applied to the body element is called a CSS Signature. A user style sheet may override any or all style on a page by tapping into the CSS Signature. See "[css-d] CSS signatures" (http://archivist.incutio.com/viewlist/css-discuss/13291). (6)By separating logical groups of elements into their own div elements, layout styling is easier and more flexible. (7)Always make things easier than they need to be. Even though those with an interest in contributing to the Zen Garden should know how to download the sample files from these links (right-click the link and choose Save As), not everyone with an interest in studying the code does. Email still comes in asking how to save the files, which just goes to show that your target audience will always have unexpected members. (8)In hindsight, it would have made more sense to end the #intro div here and place #preamble within #supportingText. The length of #preamble means that it more logically fits with the larger block of text that makes up the bulk of the page than within the introduction. For positioning and stylistic considerations, it might have been more flexible that way, too. (9)Grammar and markup pedants will tell you that W3C is technically an abbreviation, not an acronym. This is true, and there is an abbr element defined in HTML for abbreviations of this type; it's unsupported in Internet Explorer, though, so many use acronym instead, which is supported. (10)No, we don't know what a "structurist" is. At the time of writing there seemed to be a terribly pressing need to differentiate between those who code and those who are concerned with HTML structure. What that need was, though, we really can't remember. (11)What is ’? It's the character code for a proper typographical curly quote ('), used instead of the single prime marks ('), which usually serve as replacement characters. The Web supports a wide range of typographical characters and conventions, which should be used wherever possible. See "The Trouble with EM 'n EN (and Other Shady Characters) at A List Apart (www.alistapart.com/articles/emen). (12)The requirements for submission have changed in response to the overwhelming volume. See "Submission Guidelines" at mezzoblue.com (www.mezzoblue.com/zengarden/submit/guidelines) for the latest information before submitting your work. (13)As you'll see in the Chapter 7, there are now ways to experiment with advanced CSS effects while providing a slightly downscaled version of the style for older browsers. Some designs have explored this idea, so the requirements about browser support might be changed to instead read "Use your best judgment". (14)While submissions are often checked across a few browsers before adding them to the Zen Garden, testing remains the responsibility of the original designer. If you notice occasional layout glitches, keep in mind that submissions come in from all over the world. Sometimes the submitter won't have access to the same browsers and operating systems as you do. (15)The list of links within #footer is a list ... why wasn't a ul used to structure this group of links? That's a rhetorical questionthey should have been contained within a list element of some sort. (16)As the Zen Garden markup was originally written, the li elements surrounding each link were actually spans, which triggered an error when checking accessibility through automated services like Bobby (http://bobby.watchfire.com). The extra at the end of each link was a misguided attempt to circumvent the problem; a list quickly replaced the spans before it was too late, but the legacy entities never quite disappeared. (17)Accesskeys are an assistive technology for easier navigation of a Web site, but they are not without their flaws. See "Using AccesskeysIs it worth it?" at WATS.ca (www.wats.ca/articles/accesskeys/19). (18)This method of browsing through the designs is laughably inadequate, now that there are more than 100 of them. The link to an external list of all the designs is much more useful (www.mezzoblue.com/zengarden/alldesigns). Still, it's often overlooked. Many people assume the Zen Garden only has eight designs, and they never find the archives. Don't make the same mistake! (19)Though the "view source" method is a given among those who have been working with the Web for any length of time, enough newcomers emailed asking for a way to view each design's CSS file that a link was added shortly after launch. (20)As you'll see in some designs, these completely empty divs and spans are for the sake of adding imagery where it wasn't practical within the regular set of elements. Think of them as reusable img elements.
| 