Laying the Groundwork

As always, we need to understand the document skeleton before we try to clothe it in CSS. The basic document skeleton is given in Listing 10.1.

Listing 10.1. The Document Skeleton
 <body > <div >   <div >     <div >       <h1><span>css Zen Garden</span></h1>       <h2><span>The Beauty of <acronym        title="Cascading Style Sheets">CSS</acronym> Design</span></h2>     </div>     <div >       [...content...]     </div>     <div >       <h3><span>The Road to Enlightenment</span></h3>       [...content...]     </div>   </div>   <div >     <div >       <h3><span>So What is This About?</span></h3>       [...content...]     </div>     <div >       <h3><span>Participation</span></h3>       [...content...]     </div>     <div >       <h3><span>Benefits</span></h3>       [...content...]     </div>     <div >       <h3><span>Requirements</span></h3>       [...content...]     </div>     <div >       [...content...]     </div>   </div>   <div >     <div >       <div >         <h3 ><span>Select a Design:</span></h3>         [...list of links...]       </div>       <div >         <h3 ><span>Archives:</span></h3>         [...list of links...]       </div>       <div >         <h3 ><span>Resources:</span></h3>         [...list of links...]       </div>     </div>   </div> </div> [...extra divs...] </body> 

Extra divs?


The "[...extra divs...]" mentioned at the end of Listing 10.1 are content-free divs that were included to provide designers with extra elements to style if needed. We won't need them, so they won't be mentioned again.

There's a lot more to the document's structure, but Listing 10.1 covers the parts we'll actually need for this project. Listing 10.1 shows just the bare minimum needed to understand the rest of the project because a full listing of the document source would go on for pages and pages, and these fancy color books get more expensive the more pages you have.

Now let's take a look at the design we're going to re-create. It's the Photoshop file shown in Figure 10.1.

Figure 10.1. The visual design reference file (shown at 50% of normal size).


So that's what we're going to do with CSS. To make this work, we're going to need to pull out a number of images that will come in handy later. These are the backgrounds and design elements that we'll need to get the same visual appearance as that shown in Figure 10.1. These images are as follows:

  • The page header containing the script-font "Zen Garden"

  • The flower on the right side of the page header

  • The blurry light green background of the "quick summary" portion

  • The faded flowers at the bottom of the main content column

  • The sidebar's background and the gradient fade along the right side of the main content column

  • The footer's background

  • The three sidebar headings ("Design List" and so on)

Legal Note


The photographs used in this design are Copyright © 2003 Eric A. Meyer and are used with his permission. The other images in this design are Copyright © 2004 Dave Shea and are used with his permission.

We'll take a closer look at each of these as we come to need them. Now, let's get styling!

More Eric Meyer on CSS
More Eric Meyer on CSS (Voices That Matter)
ISBN: 0735714258
EAN: 2147483647
Year: 2006
Pages: 109
Authors: Eric Meyer

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: