Pop-up Navigation Menus with Dreamweaver and Fireworks

In order to create pop-up menu navigation buttons, you must have access to both Dreamweaver and its companion program, Fireworks. This tutorial assumes that you have both programs. If you need additional information about Fireworks and its usage, visit http://education.calumet.purdue.edu/Tutorials and investigate the tutorials available. In fact, when you look at the Tutorials website, you might notice that the navigation structure is using the exact pop-up menus that we are going to create in this tutorial!

Step By Step -
Creating the Button, Adding the pop-up Menu, and Bringing the Navigation into Dreamweaver

1. First, in Fireworks you'll need to create your button graphic. When you have a graphic ready to become a button, use the Pointer (black arrow) tool to select the graphic. Hold the Shift key while you click to select each piece of the graphic, if you have more than one element that will be part of this button.

Note that we are working with a single button graphic in our example. It is possible to create a large number of button graphics in a single Fireworks file and perform the following steps for each button instance to create a navigation bar that can be edited all at once.

2. Click the Modify menu, drag down to Symbol, and choose Convert to Symbol. Tell Fireworks that you want this graphic to be a button, and give it a descriptive name, if you like.

3. Once you click OK, the graphic will have a green overlay and a "target" symbol in the center. Click the target icon and you can select to Add a Pop-up Menu.

4. Click the + to add new items to the pop-up menu. The text is what appears in the menu when the user views your page; the link is the link to your URL or page within your website; and the target, of course, is necessary if you are using frames or if you want links to open in a new window (please see the section on Frames for more information on targets).

CS3 Bug Note: You may find that Fireworks will not let you use the Delete or Backspace key to correct an error in your typing while editing your popup menu. To work around this bug, double-click on a word you wish to change to select it, and then type in your correction.

5. The Pop-up Menu Editor window also has three other tabs which allow you to change aspects of the look and feel of the pop-up menu. You may wish to explore these options or leave them alone. In many cases, the Advanced and Positions tabs in particular will not need editing.

6. When you are finished, you will see the outline of your pop-up menu on your graphic. You may click and drag the outline around anywhere you wish to have the menu "pop up" in the location/direction you choose. The example below shows that the pop-up menu will open to the right.

7. This is one last thing you should do before you are ready to export the button to Dreamweaver. Double-click anywhere on your graphic (except for on the target icon, of course) and a new window will appear. This is where you can select how the button looks at all points during use - Up (how the button looks normally), Over (how it looks when the mouse cursor is floated over the button), Down (how the button looks when "pressed"), and Over While Down (how the button looks when down and when the mouse is floating over it). More often than not, web designers simply Copy the Up graphic to each of the other three states to keep the graphic static, but different graphics can be assigned to each state to add interest and fun to the image.

To copy the up graphic, just click on each of the tabs in sequence and choose the "Copy __ Graphic" button at the bottom of the window. When finished, click Done. If you do not have some graphic for each button state, when floated over or clicked, the button will "disappear" onscreen, so it is important to remember to complete this last step before exporting.

8. When you have your button the way you want it, you are ready to Export. Click the File Menu and choose Export. Make sure that you are exporting "HTML and Images" before you name your file and click Save. Fireworks will generate a number of files, including an HTML document and several graphic files for each state of the button. If you have a large navigation bar you may wish to create a new folder for the export to go into, otherwise you may have a several dozen files to gather up from your Desktop later on.

Like any other graphic, you should Save the graphic as a simple PNG as well, in case you want to change something later, and the whole process - the PNG file and the exported HTML and images - should be placed in your website folder.

9. Once you have exported, you can close Fireworks and open your Dreamweaver file, then click the Insert menu, drag down to Image Objects, and choose Fireworks HTML. Find the HTML file Fireworks exported for you and you will see your graphic in your document. And, just like the one below, when you preview the web page in your browser, you will be able to "work" your brand new pop-up menu!

If you wish to edit the pop-up menu or other options related to your button, click on the graphic in Dreamweaver and choose the yellow Fireworks icon (Edit) from the Properties window.