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 id="css-zen-garden">

<div id="container">

  <div id="intro">

    <div id="pageHeader">

      <h1><span>css Zen Garden</span></h1>

      <h2><span>The Beauty of <acronym

       title="Cascading Style Sheets">CSS</acronym> Design</span></h2>

    </div>

    <div id="quickSummary">

      [...content...]

    </div>

    <div id="preamble">

      <h3><span>The Road to Enlightenment</span></h3>

      [...content...]

    </div>

  </div>

  <div id="supportingText">

    <div id="explanation">

      <h3><span>So What is This About?</span></h3>

      [...content...]

    </div>

    <div id="participation">

      <h3><span>Participation</span></h3>

      [...content...]

    </div>

    <div id="benefits">

      <h3><span>Benefits</span></h3>

      [...content...]

    </div>

    <div id="requirements">

      <h3><span>Requirements</span></h3>

      [...content...]

    </div>

    <div id="footer">

      [...content...]

    </div>

  </div>

  <div id="linkList">

    <div id="linkList2">

      <div id="lselect">

        <h3 class="select"><span>Select a Design:</span></h3>

        [...list of links...]

      </div>

      <div id="larchives">

        <h3 class="archives"><span>Archives:</span></h3>

        [...list of links...]

      </div>

      <div id="lresources">

        <h3 class="resources"><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).

graphics/10fig01.jpg

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!

< Day Day Up >