Navigation Bars

A navigation bar is a collection of buttons that work together to make a navigation system for your website.

	In this activity, we are going to make a navigation bar to use on a web page. Open your button from the buttons activity. Select the button and text, and from the menus choose: Modify > Symbol > Convert to Symbol
	In the symbol properties, give your symbol a name, and choose Button as the type.
	The button you created is now a symbol. The one you see on the screen is one instance of the symbol. You can tell that it is an instance of the symbol by the arrow at the bottom left of the image.
	Symbols all appear in the library, which you can find in the assets panel. If you can't see the assets panel, from the menus choose WIndow > Library (or press F11) You can see your button in the library.
	To make your single button into a navigation bar, hold your Alt key as you click and drag to make a clone of your first button. You can nudge your button into position by using the arrow keys on the keyboard.
	Now you can set individual properties for each button. Click on the first button, and in its text property, type the text you want on it. If you can't type in the text box, it means that you have set the text property as part of the symbol.
	The label on your button changes.
	To create the hyperlink in the properties panel at the bottom of the window, type in the address that the button will link to, and some alt text to display if the button doesn't.

Repeat this process for each button.

From the menus choose Modify > Canvas > Trim Canvas to fit the canvas to the size of the navigation bar.

Save the navigation bar as a PNG file in Fireworks, in case you want to edit it later.

Now we will export it to Dreamweaver or FrontPage.

Click the quick export button at the top right of the document window.

Complete the export dialogue box.

Choose the location for the html file that Fireworks will make. Put the images in a subfolder (call it something like navbar, so that your site doesn't get clogged with lots of images.)

Now you can open your HTML file in Dreamweaver or Fireworks and continue on with your website.

To make pop-up menus

Click on the centre spot on the button

Choose Add Pop up Menu

Type the text and links you want for each menu item.

Repeat until you have added all the menu items you need.

Click the Next button at the bottom of the box. Choose options for fonts, colours etc.

Export your navigation bar in the same way as previously.