Creating a nav bar in Fireworks

Build a complete Navigation Bar from one design.

Navigation bars (nav bar), a set of buttons with links to pages throughout the site, are a common feature on web sites. The purpose of the nav bar is to make navigating your site intuitive and attractive.

The different buttons represent different states of navigation: Up, Down, Over, Over While Down, and link to pages throughout the site.

Fireworks streamlines the creation of a nav bar including all graphics, HTML links and JavaScript to control the rollovers. All that is required of you is: one graphic, edit the differences and supply the links.

Tip: There are as many variations of a nav bar as there are web developers. Following these steps will give you the tools to implement your design.

Click here to see an example of the finished nav bar.

Make the original button

Start with the button with the longest word or text string.

Use the Shape tool to make a shape.

Use the Text tool to put text on the shape.

Use the longest text string to create the first button.

Center align the text in the text editor. The difference won't be apparent with one button but it will keep the rest centered.

Edit it to appear in the Up state.

Hold down the Shift Key and click both the text and the shape beneath it to select both.

Tip: There should be a blue line around each element to indicate they are both selected.

Insert > Convert to Symbol, select the Button Radio button (naming it is optional).

Create a button and use the button editor

1	Double-click on the button to open the Button Editor The button will open in the Button Editor Up state
2	Click the Over tab.

3	Click Copy Up Graphic. The Up state will appear, to be edited to its Over state.
4	Edit the graphic to its Over state. Make the changes that will appear when the cursor rolls over the button.
5	Click the Down tab
6	Click Copy Over Graphic The Over state will appear, to be edited to its Down state.
7	Edit the graphic to its Down state. Make the changes that will appear when the button is in the Down state, that is, when the user is on the this button's page. Tip: If the nav bar will be used without a frameset, check the Show the Down State on Load box to show the state when the page loads. To make practicle use of this there should be a nav bar for each button.

Set the Button links

1	Click the Link Wizard bar.

3	Click the Link tab.
4	Type or paste the URL in the field. Tip: Create a space holder page in Dreamweaver in the folder of the page from which this nav bar will be used... To eliminate potential errors.
5	Click the Target tab.
6	Set the target – either choose from the drop-down menu or type or paste your frame name in the field.
7	Click OK. Close the Button Editor.

Test the button

1	Choose Window > Tools > View > Hide Slices (left icon).

2	Click the Preview tab of the document window.
3	Roll and click your cursor to test the button.

Set the canvas size to accommodate all the buttons.

This nav bar will have three buttons total and it will be vertical.

1
Find the height of the button.

a
Choose Modify > Trim Canvas.

The canvas is now exactly the size of the button.

b
Choose Window > Info.

Note the height of the button. This button is 31 pixels high.

2
Multiply the height of the button by three to know how big a canvas you need.

a
Choose Modify > Canvas Size.

Change the height of the canvas to accommodate three buttons.

b
Mark the Anchor point, to keep the button created where it belongs on the canvas.

The largest label is the third button so it will be anchored to the bottom of the canvas.

c
Click OK.

Create the rest of the buttons in the nav bar.

Choose Window > Tools > View > Show Slices (right icon) to make the button slice visible.

Hold down the ALT (Macintosh, Option) key + Click and Drag to duplicate the button.

Repeat to create three buttons.

a	Select the first button, choose Window > Object.
b	Select and edit the text that represents the button label.
c	Press Enter (Macintosh, Return). An alert box will open asking you if you want to edit all instances of this button or just the current button – Click Current.
d	Click the Link Wizard bar. Edit the link for this button.
e	Repeat to change text and link on the second button.

Save the file.

Choose the document preview tab to test all the buttons.

Tip: The links must be tested after the nav bar is in palace in the site folder.

Export HTML and image to the site folder.

Resources

	Using the Button Editor in Fireworks 3
	Building a Nav Bar with a Single Symbol in Fireworks 3
	How to make Fireworks 4 buttons work in Fireworks 3

Hosted by www.Geocities.ws