In my last article, I took you through the creation of a Dreamweaver 8 Navigation Bar and how to use it to create a usable navigation bar with this built in feature of Dreamweaver. The Navigation Bar has greatly improved in the current version of Dreamweaver; nevertheless, it is not my tool of choice for navigation for a couple of reasons. First, it requires images for the buttons; therefore, those images all have to preload or the navigation bar will be slower than molasses. There was a time when 99% of all rollovers involved images and that is fine. However, today, there is a much better way to create navigation that loads quickly and still looks professional and that involves the use of CSS for navigation and rollovers.
Because all states of every button are just text, there is nothing out there that can load more smoothly or faster. Once you get a handle on CSS, you can create a navigation bar quickly that is flexible and can serve more than one purpose. If you read my previous article, you saw how I created images for the buttons in a panel and then sliced it in Fireworks. It worked great on the vertical navigation, but if you tried to apply those buttons to the horizontal view, it looked awful. I will admit that was partly due to the way that I quickly created and sliced the Fireworks PNG .. had I made the buttons all even height-wise, it would have looked much better. My bad!
HOWEVER. When you create your navigation in text and use CSS to style it, you can create a vertical navigation bar that can quickly be converted to a horizontal one with the click of a style rule. There is no guesswork involved; no need to worry about uniform size. Since the font is uniform, the style rules put everything in place for you .. just like that!
Our first example of CSS navigation is going to be a simple single level navigation bar, which we will create in vertical mode, then we’ll show the CSS necessary to convert it to a horizontal navigation bar (which, in my opinion, is really where the “bar” part comes in). Start with a new HTML page in Dreamweaver 8 and put some sample Lorem Ipsum text on it for filler. Save it as “cssnav.html”.
In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.
Nancy is the co-author of Dreamweaver MX: Instant Trouble-Shooter and technical editor for several Dreamweaver and Contribute related books, including the well-known Dreamweaver MX 2004: A Complete Reference. She also penned the first ever Contribute article for Macromedia's Own Devnet "Getting Up to Speed with Contribute in 10 Minutes".
Nancy has three children, two in college and one in high school. Offline, she enjoys various sporting activities, is a wild NFL football fan and sings in the church choir.