Inserting Fireworks HTML | Macromedia Studio MX Bible

< Day Day Up >

To finish the Habitat Alert homepage layout, you make use of another integration feature between Dreamweaver and Fireworks. The Insert Fireworks HTML option enables you to take an exported Fireworks page and insert its table structure into an existing page. To use this feature wisely, crop Fireworks files down to a specific structure, save the file as a component of the design, and export the page and images as you would any other file, saving them into the defined Dreamweaver site.

Fireworks MX The steps described previously were covered in Chapter 23, where you exported the rollover navigation buttons for the Habitat Alert layout.

You can even edit the Fireworks HTML page in Macromedia Dreamweaver prior to using the Insert Fireworks HTML button!

Tip

Because Macromedia Fireworks creates a separate cell for each image, the button table for the Habitat Alert layout is overly complex — separate table cells are not needed to have buttons sit side by side. In fact, no table is needed at all. In this example, inserting the Macromedia Fireworks HTML creates a nested table, not necessary and again, overly complex. Remember, your goal should be to build the simplest structures possible for your layout.

Open the page navigation_buttons_fw.htm from the site folder. This is the page exported from the cropped button file in Chapter 23. Code in the head of the page tells Dreamweaver that this is a page created in Fireworks:
```
<html> <head> <title>navigation_buttons.gif</title> <meta http-equiv="Content-Type" content="text/html;">  </head>
```
To remove the table in this page, drag each button from its cell and drop it below the table. Now delete the empty table. Another fast way is to use the Clean Up HTML command to remove specific tags: table, tr, td. However you do it, you'll also have to remove spaces between the buttons. You can do so quickly using the arrow keys to move to the correct location and deleting the extra spaces.
Save the page as navigation_buttons.htm and close it.
Now, select the second, smaller spacer image located in the last cell of the top table in the homepage. Press left arrow to move the insertion point to in front of that image.
From the Common toolset in the Insert bar, click the Insert Fireworks HTML button, or choose Insert ® Interactive Images ® Fireworks HTML.
In the Insert dialog box, navigate to the navigation_buttons.htm page you edited just a few steps ago. Click OK. Save and test your page. Figure 34-17 shows the buttons in place. These buttons don't contain any rollover code, but if they did the code would also have been inserted into the Macromedia Dreamweaver page.

Figure 34-17: The buttons from the exported Fireworks HTML page are inserted into the layout.

Cross-Reference

You'll add interactivity to these buttons in Chapter 41.

This is an extremely useful way to work with Macromedia Fireworks and Macromedia Dreamweaver. A cropped component file is easier to edit, and you just saw how easy it was to modify and insert.

< Day Day Up >