In this tutorial, we're going to examine some aspects of creating a navigation bar in Fireworks MX. We will create three buttons for our small navigation bar, and then we will instruct Fireworks to write the JavaScript code necessary to create rollover effects for the buttons. In the end, we will have Fireworks generate a separate page for each button with all the required behaviors.

Create the Navigation Bar's Background
In most instances, my normal workflow would be to define the site using Dreamweaver MX. Then, through Dreamweaver, I access Fireworks MX to create the graphical interfaces necessary for my design (navigation bars, images, etc.). Once all that is completed, I return to Dreamweaver to add any coding or, should it be necessary, server-side behaviors such as connections to a database. I also use Dreamweaver to serve as the final assembly point for all my various assets (Flash or Shockwave movies, sound files, etc.).

For purposes of this tutorial, we will restrict ourselves to working in Fireworks MX. However, I'm sure you'll have no problems applying the concepts to larger projects. I ‘m going to assume you have some familiarity with Fireworks MX.

Let's begin by creating a new Fireworks MX document. Make it 500 x 500 pixels with a resolution of 72 dpi. Also, use a white background.

Using the vector Rectangle tool, draw a rectangle along the top of the canvas. You can use the Property inspector to ensure that the rectangle is 500 pixels wide and 50 pixels high.

Set the background color to #AFAFAF.

To make it a bit more interesting than a simple gray rectangle, select Sand from the Texture field in the Property inspector A texture amount of 40% will create a subtle effect.

It is always a good idea to name each component, or object, of your work. We do this for two reasons:

• It makes it easier to locate and edit the component.
• If you use it in a JavaScript environment, the names are needed for proper identification.

You can use either the Layers panel or the Property inspector to do the naming. Name the rectangle navBackground.

Creating the Button Symbols
There are two approaches you can take to creating the buttons. You could draw the buttons on the rectangle. However, using this technique, you lose some of the functionality of Fireworks MX. If you use this technique, you will need to draw each button separately, define the behaviors for each button separately, and write the text for each button separately. In other words, you will be giving yourself a lot of extra work.

As you will see, a far better technique is to create the button, with all of its properties, once as a symbol. Then, once the symbol is created, we can use as many copies (or instances) of it as we need. Further, if you need to change any of the properties, you need only to change them in one place and all the instances will reflect those changes.

Let's begin by selecting Edit -> Insert -> New Button. Draw a rectangle that is 150 pixels wide and 45 pixels high. Leave the Sand texture set as before but set the color to #0000FF.

To make your button more interesting, use the Distort tool and convert your rectangle into a parallelogram (see Image I).

Nothing gives a button as much pizzazz as a shadow. On the Property inspector, click on the + for effects. Select Drop Shadow and set the Distance to 15, Opacity to 65%, Softness to 4, and Angle to 315. Make the Color black.

Using the Text tool, put the text Button 1 inside the button (of course, in reality you could use whatever text you need). Set the Font to Arial, the Size to 20, and the Color to black.

If your text looks off-center, we can easily fix that. Either use Select -> Select All or Shift + Click on the text and the Rectangle. Once you have done that, select Modify -> Align -> Center Vertical then Modify -> Align- > Center Horizontally.

Your finished button for this stage should look like Image II.

It is important that your navigation bar is capable of giving your site's visitors a lot of visual cues. We are going to look at several of them.

The first one will let your visitor know which button is selected. We do this with the Over stage. Click on the Over tab at the top of your button symbol canvas. Don't be surprised that the new canvas is empty. Just select the Copy Up Graphic. That brings the graphic over from the previous stage.

We are going to give the button the effect of lighting up when the visitor rolls his or her mouse pointer over it. Using the Pointer tool, select the parallelogram and change the color to #FFFF00. That's all there is to it.

We now want to give the visitor a cue that the button has been depressed. Let's go to the Down tab and, once again, Copy Up Graphic. Select the parallelogram and set the color to #FF0000.

You'll notice that there is an option box at the top of the canvas called Include Nav Bar Down State. A lot of new designers don't understand this process. Let's assume our Web site will have three Web pages. The image of the navigation bar, with the buttons, will need to be included on each page. However, using this feature Fireworks MX will show the Down state properties of the button associated with that page. That way, your visitor now has a visual cue as to what page he or she is on. The rest of the buttons will be in their normal Up state. We will see this in action when we generate the Web pages at the end of this tutorial.

Make sure this feature is checked.

Even though the button stays in its Down state when on the page associated with it, many designers still like to give it the rollover effect for the sake of consistency. Select the Over While Down tab and Copy Down the Graphic.

Select the parallelogram and change the color to the rollover we used before: #FFFF00. Again, leave the Include Nav Bar Down State checked.

There is one other tab called Active Area. This gives us the ability to change the size of the slice. Basically, it will allow you to change the amount of space around the button where the button will recognize the mouse pointer. Most of the time, there is no reason to change this quality.

Select Done.

Assembling the Navigation Bar and Buttons
Of course, the button is placed nowhere near the navigation bar. This is easily fixed by using the Pointer tool and dragging it to the left side of the navigation bar (in this tutorial, we will be putting three buttons on our bar: left, center, and right).

This next step is very important. Since this button is associated with the home page, name it index using the Property inspector. In the Property inspector's Link field, type index.htm. You will notice that we gave the object the same name as the link (minus the htm extension). This point is critical. We are going to have Fireworks MX generate a separate Web page for each button on the navigation bar. In order for it to work properly, the names should match.

One last thing: you'll notice the width now includes the slice area. Using the Property inspector, change the width back to 150. You may need to reposition the button slightly so that it is sitting on the left side of the bar. I am purposely letting the button be about 25 pixels higher than the navigation bar background. This accentuates the shadow effect.

That takes care of the first button. Do we need to go through this whole process for each button? Here is where the power of Fireworks MX really gets fired up.

If it isn't already, open the Library panel by selecting it from the Panels area, pressing the F11 key, or using the Window -> Library menu selection. You should see the button symbol located in it. Just drag the button to the navigation bar and place it about the center of the bar.

There is a slight problem here. We now have two buttons that say Button 1. Notice that there is a Text field in the Property inspector. For our purposes, type Button 2 here and press enter. The text on your button should have changed. Thanks to Fireworks, we can create one button and change the text as needed. This will give all of your buttons a consistent look and behavior.

Call this button page2 and the Link will be page2.htm. As before, change the width to 150 and reposition as necessary so that it is in the center of the bar.

Finally, drag one more instance of the button to the navigation bar, change the text to Button 3, name it page3, and link it to page3.htm. Change the width to 150 and position it at the right side of the bar. Your canvas should now look like Image III.

This may be a good time to save your work to the folder of your choice with a name of your choice. You can preview your work by using the Quick Export button, located on the upper right side of your canvas, or by pressing the F12 key. You should see the rollover and Down state behaviors in action. Of course, we have not generated the Web pages yet, so the links won't work.

Exporting
In reality, we would put a lot more content and design work on our page. But for this tutorial the only content will be the navigation bar.

Select File -> Export. Simply exporting the document will not do the trick. You must also select Options and then the Document Specific tab.

Once you're in that tab, you see an option for Multiple Nav Bar HTML Pages. Make sure that's checked. This will force Fireworks to create a separate HTML page, with a navigation bar, based on the name of each button. In our case, three pages will be produced: index.htm, page2.htm, and page3.htm.

While we're on this page, I also find it convenient to change the naming convention. By default, Fireworks names the images by their position in the table that will be created automatically. In my opinion, this can be confusing for a beginner. Under the Slices section, with the three dropdown lists, drop menu one should say doc name, the second should say underscore, and the third should be changed to slice.

One last thing before we do our Export. If you're going to export to a specific HTML editor, you can click on the General tab and select the HTML style. Most of the time, I use Dreamweaver HTML. This setting is not overly critical. It just puts it in a format style that makes it easier for the editor to handle.

Select OK to come out of the Options window. We ‘ll call our export nav_bar and export HTML and Images. We'll export an HTML file and Export Slices. Make sure that you have the option Include Areas without Slices checked.

Remember, when you have a rollover image such as we created here, all that is happening is that JavaScript is swapping one image for another, so each state of each button must have a separate image. That being the case, each button will create four images. In addition, additional images will be created to help spacing and such.

You may find it a bit confusing to put your HTML pages and images in the same folder, especially in larger projects. Go ahead and create a new folder, if you don't have one, called images. Then select the Put Images in a Subfolder option and click the Browse... button, double click on the images folder, and select the Select Images button located in the lower part of the screen.

When you return to the Export screen, you should see images/ next to the Browse… button. Select the Save button. Fireworks will generate three HTML pages, each with all the required HTML and JavaScript code necessary to create the navigation bar and the rollover effects. In addition, it generates all the necessary images in the images subfolder.

Using Windows Explorer, or navigating from your Web browser, open the index.htm file you just created. You will see button 1 in its Down state and the other two buttons in their Up state. If you click on Button 2, you will be taken to page2.htm with that button in its Down state.

Just to show you what was down, view the source code, using your Web browser, for each page (usually this feature is located under the View menu item). When you do this, you'll see a fair amount of code which, without Fireworks, would have taken hours to create and debug.

In the images subfolder, we can easily see the names of the pages and the slices they are associated with. I always tell my seminar students that it is a good learning experience to open each of the four images created for each button so you can see what behavior is associated with each name.

At this point, you can open the files in Dreamweaver MX to do whatever additional doctoring you might want to do (for instance, adding titles or dynamic technology).

Summary
Fireworks just took a job that could have taken hours and turned it into minutes.

As an interesting follow-up exercise, look at some of your favorite Web sites and try to re-create their navigation bars in Fireworks. Pretty soon you'll be able to turn out eye-catching work in minutes.