Your button should now look like this.

To export your button, click on File - Export. The Export window below will pop up.

If all of the options that are displayed above are not selected, select them. Save the file to a place you will remember. (Your H: drive is generally a good idea.) When you are finished, select Save.

Now, open up Macromedia Dreamweaver and select File - New. The default options are fine, so click on Create in the bottom-right corner.

A new, blank html page will open. Click on
Insert -> Image Objects -> Fireworks HTML

When the Insert Fireworks HTML window pops up, click Browse. In the browser, find the file that you exported from Fireworks and select the HTML file. Since there are a number of files created when you export a button from Fireworks, the image below will show you which one to select.

After double-clicking the .htm file to import, click on OK. You will be prompted to save your .html page. Save it.

You should now have a completed .html file with your pop-up menu included. Push F12 to preview your file in Internet Explorer. The finished product is shown below.

Please note that when you import a button into Dreamweaver by the method above (importing the .htm file), Dreamweaver does the following for you:

-Displays the image in the correct position
-Adds javascript coding in to the beginning of your .html page to tell the file information about the pop-up menu.

So, if you make an error, and have to delete a menu that you have previously imported, simply deleting the images and importing a new version will not work! If you need to erase an old menu, and import a new one, follow these instructions:

-Highlight the entire menu that you have imported

-Delete it
-If the html coding is not being displayed between the editing field where the .html page is displayed and the toolbars, display it by clicking View - Code and Design. Then you have to locate the javascript coding yourself and remove it manually. Locate it by looking for the following things:

• The javascript is right underneath the heading in the coding of your file, so you should usually be able to find the following line in the first 10 lines (the lines are numbered in Dreamweaver).
  
  



• Shown above is the first line. From there, you need to highlight down, past a number of lines starting with "function" to the final line, shown below.
  
  



• Highlight from the first line to the last line, and then delete all of them. You are now able to import a new .htm file from Fireworks. If you did not clean this coding out, your drop-down menus would a) not be displayed correctly, or b) not be displayed at all.

Tutorial by: Andrew Snyder
Project Manager: Johanna Brams