Central and highly important in any web site is the site’s navigation. It can consist of anything from simple text links to full blown flash navigation bars. The most important part of navigation is that it be easy to follow, that it makes sense to the site’s visitor and that it’s more than flashy buttons that just “show off”. In this article, I will show you how to use the Dreamweaver native navigation bar.
The Dreamweaver 8 Navigation Bar
The built-in Dreamweaver Navigation Bar hadn’t changed much since Version 4 until this newest version although admittedly I haven’t paid it much attention. However, in Dreamweaver 8, the interface has taken a giant leap forward, including options whether you want to use tables or not in the creation of the Navigation Bar. You are, however, limited to using images for the buttons in your navigation bar, a practice I don’t often use any longer because file size is increased with two (and sometimes three) images for every link. If your Navigation is lengthy, this option is probably not the one you will wish to choose because of all those images.
Because the Navigation Bar requires images, the first thing to do is make the images. I have included sample images in this tutorial because this lesson is not about making buttons, it’s about using the Navigation Bar. As an aside, I created the button images in Fireworks in a panel in which I had three layers for the three background colors (which is what I changed for the states) and a second layer with the text. Then I sliced the images and exported the slices as .gif images for use as the buttons. The zip will make an images folder when it is unzipped.
You access the Navigation Bar from the Insert menu (or Insert Images/Navigation Bar dropdown in the Insert/Common toolbar) under Image Objects/Navigation Bar. The interface that appears when you select that option allows you to type in information for the first link. You add more links by clicking the + button at the top of the interface. Let’s have a look at the interface and discuss what the various options mean.