• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 11. Integrating with Dreamweaver ... > Editing in Fireworks from Dreamweave...

Editing in Fireworks from Dreamweaver

When you create a page in Fireworks and then export it as HTML, Fireworks builds an HTML table the size of your canvas and creates cells within that table based on the slices or the slice guides. Once you are in Dreamweaver, you may want to return to Fireworks to make a change on the page. You could switch back to Fireworks, open the PNG file, export the file, and then return to Dreamweaver and open the new HTML page. Because of the integration of the two programs, however, the process is even easier. Just select the table on the HTML page and click once, and you are editing in Fireworks. Click once more, and the file is re-exported and you are returned to Dreamweaver. What could be easier?

Open the template.htm file by double-clicking it on the Site panel. Change the title to Sweet Creations.

This file contains the header, logo, and buttons that you've used at the top of all of the pages; there is also a large white image on the page. You will add a text slice in Fireworks to replace the image.

Click the white area in the middle of the page.

Look in the Property inspector to see the size of the image. It is a large image because you didn't draw any slices in this area. You could just delete this image in Dreamweaver and leave a large cell for inserting text or other images. Instead, you will edit this file in Fireworks and draw a smaller slice in this area, adding more white space around the cell.

The trick to editing the table that Fireworks created is to select that table in Dreamweaver. Look at the tag selector in the bottom left of the Document window. There you will see some HTML tags defining the page.


If you see only the body tag, then click one of the images on the page. The other tags should appear.

Click the <table> tag in the tag selector.

The table is selected, and the Property inspector changes to reflect the selection of a Fireworks table. You should see your Fireworks file listed in the Src text box.

Click the Edit button.

The template.png file opens in Fireworks. At the top of the Document window, you'll see text indicating that you are editing from Dreamweaver; you'll also see a Done button.

Select the Slice tool and draw a slice within the white area of the canvas and then change the slice to an HTML slice.

Leave some space between the slice and the buttons and the slice of the stick. Extend the slice to the bottom of the canvas.

Click Done.

Your file is saved, and you are returned to Dreamweaver. The page is updated with an empty cell where you drew the HTML slice. The title you added to the page is retained when you return to Dreamweaver.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint