Using Fireworks to modify Dreamweaver image placeholders

You can create a placeholder image in a Dreamweaver document and then start Fireworks to design a graphic image or Fireworks table to replace it. For information about inserting an image placeholder, see Inserting an image placeholder.

To create a new image from an image placeholder, you must have both Dreamweaver and Fireworks installed on your system.

To edit a Dreamweaver placeholder image in Fireworks:

1. Make sure you’ve already set Fireworks as the image editor for .png files. For information, see Setting external image editor preferences.
2. In the Document window, click the image placeholder to select it.
3. Do one of the following to start Fireworks for editing:
   • In the Property inspector, click Create.
   • Press Control (Windows) or Command (Macintosh) then double-click the image placeholder.
   • Right-click (Windows) or Control-click (Macintosh) the image placeholder, then select Create Image in Fireworks.

   Fireworks starts in Editing from Dreamweaver mode.

4. Use Fireworks options to design the image.

   Fireworks recognizes the following image placeholder settings you may have set while working with the image placeholder in Dreamweaver: image size (which correlates to the Fireworks canvas size), image ID (which Fireworks uses as the default document name for the source file and export file you create), text alignment, and behaviors that are recognized by Fireworks (such as swap image, pop-up menu, navigation bar, and set text). Fireworks also recognizes links you attached to the image placeholder while working in Dreamweaver.

   NOTE

   Although links you’ve added to an image placeholder can’t be seen in Fireworks, they are preserved. If you draw a hotspot and add a link in Fireworks, it will not delete the link you added to the image placeholder in Dreamweaver; however, if you cut out a slice in Fireworks in the new image, it will delete the link in the Dreamweaver document when you replace the image placeholder.

   The following image placeholder settings are disabled in the image placeholder Property inspector since they are not recognized by Fireworks: image alignment, color, Vspace and Hspace, and maps.

5. When you are finished, click Done.

   The Save As dialog box appears. Fireworks prompts you to save the PNG file.

6. In the Save In text box, select the folder you defined as your Dreamweaver local site folder.

   If you named the image placeholder when you inserted it in the Dreamweaver document, Fireworks populates the File Name text box with that name. You can change the name if you want to.

7. Click Save to save the PNG file.

   The Export dialog box appears. Use this dialog box to export the image as a GIF, JPEG, or, in the case of sliced images, as HTML and images.

8. In the Export dialog box, for Save In, select the Dreamweaver local site folder.
9. The Name text box automatically updates to the same name you used for the PNG file. Enter text to change the name if you want to.
10. For Save As Type, select the type of file or files you want to export; for example, Images Only or HTML and Images.
11. Click Save to save the exported file.

    The file is saved, and focus returns to Dreamweaver. In the Dreamweaver document, the exported file or Fireworks table replaces the image placeholder.