Eric Meyer on CSS: Mastering the Language of Web Design
July 19, 2002
|
Eric Meyer provides a hands-on approach and practical examples
to teach readers how to solve the problems they face in designing
with CSS. The Chapter 4 excerpt explores ways to creatively
style hyperlinks and see how to base their styles on various
link states.
|
There are several other books on the market that serve as in-depth technical guides or reference books for CSS. None, however, take a more hands-on approach and use practical examples to teach readers how to solve the problems they face in designing with CSS - until now. Eric Meyer provides a variety of carefully crafted projects that teach how to use CSS and why particular methods were chosen. The web site includes all of the files needed to complete the tutorials in the book. In addition, bonus information is be posted.
Chapter 4: Bringing
Hyperlinks to Life
We are strangers to each other Each one's life a novel no one else
has read Even joined in bonds of love We're linked to one another by such
slender threads...
—Neil Peart
Hyperlinks are what make the Web a web at all. Without them, we'd be
forced to manually type in the address of every page we wanted to visit. We
probably spend more of our time on the Web searching out the right links and
interacting with them than we do anything else. But hyperlinks can be much more
than simple text or graphics with the borders removed.
In the course of this project, we'll explore ways to creatively style
hyperlinks and see how to base their styles on various link states.
Project Goals
As part of site design for a cutting-edge energy-supply company, we need to
create a compact interface to convey information about the three main types of
energy sources used by the client: natural gas, nuclear power, and solar power.
The name for this interface is "Energy Informant," a name supplied by
the client. The client also insists that some links should look different than a
normal text link. "The help-system and press-release links need to really
stand out compared to other links," the client said, and the boss
agreed.
Preparation
Download the files for Project 4 from this book's Web site. If
you're planning to play along at home, load the file
ch04proj.html into the editing program of your choice. This is the
file you'll be editing, saving, and reloading as the project
progresses.
Note See the Introduction for instructions on how to download the files
from the Web site.
Laying the Groundwork
First let's take a peek at the basic file the design department produced
for the client's preapproval (see
Figure 4.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 4.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
4.2).
Figure 4.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.
Eric Meyer on CSS: Mastering the Language of Web Design
Styling the Document - Page 2
|
