How to Create a Navigation Bar for Fireworks CS3 to Import Into Dreamweaver CS3

Create a custom navigation bar using Fireworks.

Fireworks and Dreamweaver are Adobe products that are integrated to enable you to create your Web graphics and pages more efficiently. Fireworks provides tools for building a graphical navigation bar and generates the necessary code upon export for Web page inclusion. Import the resulting HTML and JavaScript code into your Dreamweaver pages to insert your navigation bar.

Instructions

1. Launch Fireworks, and open a new project.

2. Click “Edit,” “Insert” and “New Button.” Click “Import a Button,” and choose a button. For this example, select a two-state rectangular button displaying text. Click “Import.” The two-button states are “Up” and “Over” and refer to the image shown when the mouse is off or over the button. Click “Done” to close the button editor.

3. Right-click the button on the stage, and choose “Edit” and “Clone” from the menu. Move the resulting copy into place next to the first button. Repeat this until you have three buttons lined up side by side.

4. Press “Ctrl” and “F3” to display the “Properties” panel if it is not visible. Click the first button and type the label for your button into the “Text” field. Type the target Web page for the button in the “Link” field. Repeat this for buttons two and three.

5. Click “File” and “Export.” Set “Export” to “HTML and Images,” the “HTML” field to “Export HTML File,” and the “Slices” field to “Export Slices.” Choose a location within your website folder path. Name the file “nav.htm” for this example, and click “Save.” Firework generates the images and the HTML that includes JavaScript coding and image references for the navigation bar.

6. Launch Dreamweaver, and open your Web page. Place your insertion point where you want the navigation bar to appear. Click “Insert,” “Image Objects” and “Fireworks HTML.” Click the “Browse” button, and double-click the “nav.htm” file you created. Click “OK” to insert the navigation bar.

7. Press “F12” to preview the page and test the navigation bar.

References

• Adobe Systems: Using Fireworks

Resources

• Adobe Systems: Creating a Graphical Bar in Fireworks
• Adobe Systems: Adobe Creative Suite 3 Workflow Guides