Inserting Fireworks HTML into Dreamweaver

Got Adobe Fireworks and Dreamweaver?  Did you know there is a way to integrate the two, but just don't know how?  This Dreamweaver and Fireworks tutorial will tell you exactly what to do.

1.  In this tutorial we are going to insert a table that was created in Fireworks (be sure to check out the Fireworks tutorial on Creating a Navigation Bar). Once we have inserted the Fireworks HTML into our Dreamweaver document, we will add the corresponding links using the Point-to-File method we learned about in an earlier tutorial.

Let's get started!

2.  In this example, I have created a page with a couple of tables. The top table is 760 x 86 pixels and contains the header graphics. The second table, which we will use for the navigation and body text, is 760 pixels wide and has 2 cells, 150 pixels (navigation) and 610 pixels (body).

Note: In the below graphic, the second table appears as a single row. We will insert the Fireworks navigation bar that we created into the first cell.

Hint: In both cells, set the Vertical Alignment to Top. This will ensure proper placement when the body text is long.

3.  Place your cursor in the column where you want to insert the table, and on the Objects Toolbar click the Insert Fireworks HTML button.

In the Insert Fireworks dialog box, browse to the location of the html file we created in Fireworks. I saved my file as navigation.htm in the images folder. Click OK.

Remember, we are not just inserting a Fireworks graphic, we are inserting all of the html that Fireworks has created for the graphic we have sliced and diced so it will render perfectly.

4.  Now we're cookin with gas. Let's go ahead position our current Document and Site window as shown so we can start creating our links.

Select the Home button, then, from the Properties window, drag the Point-to-File icon from the Property Inspector to the page you wish to link to. Home button to index.htm, Company button to company.htm, you get the picture.

Now we're rockin. Check out the next tutorial, where we find out how to edit our graphics with Roundtrip Graphic Editing between Dreamweaver and Fireworks.