IDCC 370: Web Design I Fall 2009

Check this out:

Next, we will be working with our site templates to visually set the signature and the bottom navigation bar. The three views of the nav bar and signature (at right; click to enlarge) show the progression from unstyled to completely styled (note: the "Site Map" link is in the hover state, bottom graphic).

To create this set of "faux buttons" in css, you will be working with the four css pseudo classes:

1. a:link
2. a:visited
3. a:hover
4. a:active

Placing these pseudoclasses in the correct order in your css file is critically important. An easy way to remember them is this acronym: LoVeHAte (LinkVistedHoverActive).

To make these buttons work, you will create a style class .botnavbar and attach it to your bottom navigation paragraph tag. I think you will find this whole styling activity to be fun and an instructive introduction to your next challenge: the top navigation button bar:

Garrick Chow, from Lynda.com, has a nice review on Creating pseudo class selectors with Dreamweaver. Feel free to watch this tutorial to reinforce what we will learn in class about css pseudoclasses and design.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.