- Goals
- Laying the Groundwork
- Styling the Document
- About This Article
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Laying the Groundwork
First let's take a peek at the basic file the design department produced for the client's preapproval (see Figure 1). This file uses some HTML-based presentation attributes such as valign and bgcolor, and we'll remove them as we create the overall design.
)
Figure 1 The basic design template, not yet styled with CSS.
In addition to this general design template, a few comments from the design people came along with it:
The icon corresponding to the current page should be highlighted in some fashion that fits in with the overall look of the page.
The title needs to be much closer to the table containing the icons and general information and needs to fit in better with the overall design. Suggestions include changing the color and font and eliminating the space between the text and the table.
The help and press-release links (the ones with the icons) need to be improved dramatically but still make use of the icons. One suggestion is to draw a box around the link whose color matches the icon background.
Overall, the goals are fairly straightforward. The links are going to require the most work, especially because we have two very different kinds of links to worry about: the icons on the left side of the page and the icon links in the main text.
Let's get the markup more to our liking before we proceed. First let's strip out the HTML styling and throw in some IDs and classes. The table gets an id of inform so that we can style it specifically if we need to. We'll identify the left-side cell as navbuttons and the content area as main. We also need to identify each of the left-side icons according to their type.
<td id="navbuttons"> <a href="sun.html"><img src="sun.gif" id="sun"></a> <a href="gas.html"><img src="gas.gif" id="gas"></a> <a href="atom.html"><img src="atom.gif" id="atom"></a> </td> <td id="main">
Finally, we'll add classes of help and pr (for "press release") to the appropriate links. Having done all this, we can see that the document is now laid bare and ready for our styling (see Figure 2).
)
Figure 2 Having stripped out the HTML-based presentation and dropped in
some ids, we're ready to begin styling.
There's something worth noting for later on: The icons are partially transparent. The nonicon parts of the images are transparent pixels, allowing the background to show through. That will be very useful.