Image placeholders combine the power of Fireworks and Dreamweaver by allowing you to experiment with various web page layouts before creating the final artwork for your page. Image placeholders allow you to specify the size and position of future Fireworks images to be placed in Dreamweaver.

When you create a Fireworks image from a Dreamweaver image placeholder, a new Fireworks document is created with a canvas of the same dimensions as the selected placeholder. Inside Fireworks, you can use any Fireworks tools to create your graphic. You can even slice your document and add interactivity using buttons, rollovers, and other behaviors.

NOTE

All behaviors applied within Fireworks are preserved upon export back to Dreamweaver. Likewise, most Dreamweaver behaviors applied to image placeholders are also preserved during launch-and-edit with Fireworks. There is one exception, however: disjoint rollovers applied to image placeholders in Dreamweaver are not preserved when opened and edited in Fireworks.

Once the Fireworks session has ended and you've returned to Dreamweaver, the new Fireworks graphic you created takes the place of the image placeholder originally selected.

To create a Fireworks image from an image placeholder in Dreamweaver:

  1. In Dreamweaver, save the desired HTML document to a location inside your Dreamweaver site folder.
  2. Position the insertion point in the desired position in your document, and do one of the following:
    • Select Insert > Image Objects > Image Placeholder.
    • Click the Images: Image pop-up menu in the Common category of the Insert bar and choose Image Placeholder.

    The Image Placeholder dialog box appears.

    This is a picture of the feature being described.

  3. Enter the name, dimensions, color, and alternate text for the image placeholder, and click OK.

    An image placeholder is inserted into the Dreamweaver document.

    This is a picture of the feature being described.

  4. Do one of the following:
    • Select the image placeholder and click Create in the Property inspector.
    • Control-double-click (Windows) or Command-double-click (Macintosh) the image placeholder.
    • Right-click (Windows) or Control-click (Macintosh) and choose Create Image in Fireworks.

    Fireworks is opened with an empty canvas that is exactly the same size as the placeholder image. The Document window indicates that you are editing an image from Dreamweaver.

    This is a picture of the feature being described.

  5. Create an image in Fireworks and click Done when you are finished.
  6. Specify a name and location for the source PNG file in the Save As dialog box, and click Save.

    NOTE

    If you entered a name for the image placeholder from the Property inspector in Dreamweaver, that name is used as the default filename in Fireworks.

    For more information on saving Fireworks PNG files, see Fireworks Help.

  7. Specify a name for the exported image file or files in the Export dialog box.

    These are the image files that are displayed in Dreamweaver.

  8. Specify a location for the exported image file or files. The location you choose should be within your Dreamweaver site folder.

    For more information on exporting, see Fireworks Help.

  9. Click Save.

    When you return to Dreamweaver, the image placeholder you originally selected is replaced with the new Fireworks image or table you created.

    This is a picture of the feature being described.