Navigation bars in Dreamweaver

• Goal for today
• What's a Nav Bar?
• The previously-created buttons
• Activity

Goal for today

Create a navigation bar for a small web site, using previously-created button images.

Back to the top.

What's a nav(igation) bar

• In this section, we'll create a navigation bar similar to the one used in the WIT 2000 website.
• Dreamweaver includes a tool to make it easy to create a nav bar.
• I will make mine as a template, which I can then "apply" to my curriculum web.
• Before using Dreamweaver to create a nav bar, you need to create the images that will be used in the Nav Bar. Good tools for creating these are Photoshop and Fireworks. (You can download a trial version of Fireworks from Macromedia.)
• I've created a set of buttons.To use them, save all of them into a folder called "img" in your local root folder. (Simply right-click, or control-click on the Mac, and choose Save Image As...).

Back to the top.

The previously-created buttons

UP	Over	DOWN

• Okay, let's begin
• First, I'll open a new file and save it as a template.
• I'll make my nav bar along the LEFT edge of the page, with room for content on the right.
• SO I'll make a 100% wide table with two columns. The left column will be 130 pixels (10 more than the buttons). The right column will be split into two cells, with the top one for the page title and the bottom one for the content. Thus:

	Page Title will go here (editable region, the Title)
	content will go here (this will be an "editable region," the BODY)

• Then, in the cell on the left, I will begin to build my nav bar. Use Insert|Interative Elements|Navigation Bar.
• Name each element (for example "Home," "Demo1"). Then put the specific images into the right places in this dialog box. (NOTE: after taking this screen shot I changed my bar to "vertically" at the bottom of the dialog box.):

NOTE: subsequent to creating this navbar, I "optimized" the button images with Fireworks, and it created GIF files (not PNG). The files, by the way, decreased from 28K apiece to 1K apiece. Quite impressive!

Back to the top.

This is the nav bar I get as a result.

I have applied this to a second copy of my curriculum web here.

Activity:

Download all the button images above. Use them to create a navigation bar like the one just above. (Create some dummy pages to serve as the "web site" for the button bar. Or, you can use the structure we developed in the lesson on templates..) Create a library item from this navigation bar. Place that library item onto another page in your site. Upload both pages (including dependent files) and check to see if the nav bar works.

Back to the top.