Using Fireworks Navigation in Dreamweaver

In this tutorial we will be using the navigation that was exported from the Navigation Symbol tutorial. If you haven't done it you can download the files needed. To prepare for this tutorial you'll need to get some files.

Download the Dreamweaver Page

Unzip this file and save the folder onto your hard drive.

Download the Exported symbols

Unzip this folder and put it inside the DW_sample folder you copied to your hard drive. This is the folder that was exported from the Navigation Symbol tutorial.

Believe it or not, that's the hardest part to this tutorial. It is so simple to use Fireworks exported documents in Dreamweaver.

1. Open Dreamweaver

2. Choose File|Open and navigate to the DW-sample folder you saved to your hard drive. Locate the dw_sample.htm page and open it.

3. This document has two tables in it. The top one is for the logo and banner area. Just below it is the second table for the left hand navigation and the content in the right column. The right column is a stretchy table that will expand with the browser.

4. Click at the top of the second table. You'll see in this image that there is a transparent spacer image that is used to hold the cell open for now. We will leave it in though so that our navigation won't butt up against the logo.

5. Press the right arrow key on your keyboard and press the return key.

6. To add the navigation choose Insert|Interactive Images|Fireworks HTML.

7. Navigate to the nav_symbol folder, open it and double-click on the goldbutton.htm file. Notice the table that is inserted? There aren't any extra cells around the buttons because we exported very carefully out of Fireworks.

8. That's it! Now preview in a browser and notice that all the rollover effects work.

If you'd like to write the email is:Joyce@JoyceJEvans.com