Use Fireworks and Dreamweaver for a streamlined workflow for editing, optimizing, and placing web graphics in HTML pages.

This feature is not supported in Adobe Dreamweaver CC versions.

Insert a Fireworks image

Dreamweaver and Fireworks recognize and share many of the same file-editing procedures, including changes to links, image maps, table slices, and more. Together, the two applications provide a streamlined workflow for editing, optimizing, and placing web graphics files in HTML pages.

You can place a Fireworks exported graphic directly in a Dreamweaver document using the Insert Image command, or you can create a new Fireworks graphic from a Dreamweaver image placeholder.

  1. In the Dreamweaver document, place the insertion point where you want the image to appear, then do one of the following:
    • Select Insert > Image.

    • In the Common category of the Insert panel, click the Image button or drag it to the document.

  2. Navigate to the desired Fireworks exported file, and click OK (Windows) or Open (Macintosh).

    Note:

    If the Fireworks file is not in the current Dreamweaver site, a message appears asking whether you want to copy the file to the root folder. Click Yes.

Edit a Fireworks image or table from Dreamweaver

When you open and edit an image or an image slice that is part of a Fireworks table, Dreamweaver starts Fireworks, which opens the PNG file from which the image or table was exported.

Note:

This assumes that Fireworks is set as the primary external image editor for PNG files. Fireworks is often also set as the default editor for JPEG and GIF files, although you may wish to set Photoshop as the default editor for these file types.

When the image is part of a Fireworks table, you can open the entire Fireworks table for edits, as long as the <!--fw table--> comment exists in the HTML code. If the source PNG file was exported from Fireworks to a Dreamweaver site using the Dreamweaver Style HTML And Images setting, the Fireworks table comment is automatically inserted in the HTML code.

  1. In Dreamweaver, open the Property inspector (Window > Properties) if it isn’t already open.
  2. Click the image or image slice to select it.

    When you select an image that was exported from Fireworks, the Property inspector identifies the selection as a Fireworks image or table and displays the name of the PNG source file.

  3. To start Fireworks for editing, do one of the following:
    • In the Property inspector, click Edit.

    • Hold down Control (Windows) or Command (Macintosh) and double-click the selected image.

    • Right-click (Windows) or Control-click (Macintosh) the selected image and select Edit With Fireworks from the context menu.

    Note:

    If Fireworks cannot locate the source file, you are prompted to locate the PNG source file. When you work with the Fireworks source file, changes are saved to both the source file and the exported file; otherwise, only the exported file is updated.  

  4. In Fireworks, edit the source PNG file and click Done.

    Fireworks saves the changes in the PNG file, exports the updated image (or HTML and images), and returns focus to Dreamweaver. In Dreamweaver, the updated image or table appears.

    For a tutorial about Dreamweaver and Fireworks integration, see www.adobe.com/go/vid0188.

Optimize a Fireworks image from Dreamweaver

You can use Dreamweaver to make quick changes to Fireworks images and animations. From within Dreamweaver, you can change optimization settings, animation settings, and the size and area of the exported image.

  1. In Dreamweaver, select the desired image and do one of the following:
    • Select Command > Optimize Image

    • Click the Edit Image Settings button in the Property inspector.

  2. Make your edits in the Image Preview dialog box:
    • To edit optimization settings, click the Options tab.

    • To edit the size and area of the exported image, click the File tab.

  3. When you finish, click OK.

Use 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.

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

  1. Make sure you’ve already set Fireworks as the image editor for PNG files.
  2. In the Document window, click the image placeholder to select it.
  3. Start Fireworks in Editing From Dreamweaver mode by doing one of the following:
    • 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.

  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 Fireworks canvas size), image ID (which Fireworks uses as the default document name for the source file and export file you create), and text alignment. Fireworks also recognizes links and certain behaviors (such as swap image, pop‑up menu, and set text) you attached to the image placeholder while working in Dreamweaver.

    Note:

    Although Fireworks doesn’t show links you’ve added to an image placeholder, 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, Fireworks will delete the link in the Dreamweaver document when you replace the image placeholder.

    Fireworks doesn’t recognize the following image placeholder settings: image alignment, color, Vspace and Hspace, and maps. They are disabled in the image placeholder Property inspector.

  5. When you finish, click Done to display the save prompt.
  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 box with that name. You can change the name.

  7. Click Save to save the PNG file.

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

  8. For Save In, select the Dreamweaver local site folder.

    The Name box automatically displays the name you used for the PNG file. You can change the name.

  9. For Save As Type, select the type of file or files you want to export; for example, Images Only or HTML And Images.
  10. 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.

About Fireworks pop‑up menus

Fireworks lets you quickly and easily create CSS-based pop‑up menus.

In addition to being extensible and fast to download, the pop‑up menus you create with Fireworks give you the following advantages:

  • The menu items can be indexed by search engines.

  • The menu items can be read by screen readers, making your pages more accessible.

  • The code generated by Fireworks complies to standards and can be validated.

    You can edit Fireworks pop‑up menus with Dreamweaver or with Fireworks, but not both. Changes made in Dreamweaver are not preserved in Fireworks.

Edit Fireworks pop‑up menus in Dreamweaver

You can create a pop‑up menu in Fireworks 8 or later and then edit it with Dreamweaver or with Fireworks (using roundtrip editing), but not with both. If you edit your menus in Dreamweaver and then edit them in Fireworks, you will lose all your previous edits except for the text content.

If you prefer to edit your menus with Dreamweaver, you can use Fireworks to create the pop‑up menu and then use Dreamweaver exclusively to edit and customize the menu.

If you prefer to edit the menus in Fireworks, you can use the roundtrip editing feature in Dreamweaver, but you should not edit the menus directly in Dreamweaver.

  1. In Dreamweaver, select the Fireworks table that contains the pop‑up menu, and then click Edit in the Property inspector.

    The source PNG file opens in Fireworks.

  2. In Fireworks, edit the menu with the Pop‑up Menu Editor, and then click Done on the Fireworks toolbar.

    Fireworks sends the edited pop‑up menu back to Dreamweaver.

    If you created a pop‑up menu in Fireworks MX 2004 or earlier, you can edit it in Dreamweaver using the Show Pop‑Up Menu dialog box, available from the Behaviors panel.

Edit a pop‑up menu created in Fireworks MX 2004 or earlier

  1. In Dreamweaver, select the hotspot or image that triggers the pop‑up menu.
  2. In the Behaviors panel (Shift+F3), double-click Show Pop‑Up Menu in the Actions list.
  3. Make your changes in the Pop‑Up Menu dialog box and click OK.

Specify launch-and-edit preferences for Fireworks source files

When you use Fireworks to edit images, the images in your web pages are normally exported by Fireworks from a source PNG file. When you open an image file in Dreamweaver to edit it, Fireworks automatically opens the source PNG file, prompting you to locate the PNG file if it cannot be found. If you prefer, you can set preferences in Fireworks to have Dreamweaver open the inserted image, or you can have Fireworks give you the option of using the inserted image file or the Fireworks source file every time you open an image in Dreamweaver.

Note:

Dreamweaver recognizes the Fireworks launch-and-edit preferences only in certain cases. Specifically, you must be opening and optimizing an image that is not part of a Fireworks table and contains a correct Design Notes path to a source PNG file.

  1. In Fireworks, select Edit > Preferences (Windows) or Fireworks > Preferences (Macintosh) and then click the Launch And Edit tab (Windows) or select Launch And Edit from the pop‑up menu (Macintosh).
  2. Specify the preference options to use when editing or optimizing Fireworks images placed in an external application:

    Always Use Source PNG

    Automatically opens the Fireworks PNG file that is defined in the Design Note as the source of the placed image. Updates are made to the source PNG file and its corresponding placed image.

    Never Use Source PNG

    Automatically opens the placed Fireworks image, whether or not a source PNG file exists. Updates are made to the placed image only.

    Ask When Launching

    Displays a message asking whether to open the source PNG file. You can also specify global launch-and-edit preferences from this message.

Insert Fireworks HTML code in a Dreamweaver document

From Fireworks, you can use the Export command to export and save optimized images and HTML files to a location inside a Dreamweaver site folder. You can then insert the file in Dreamweaver. Dreamweaver lets you insert Fireworks-generated HTML code, complete with associated images, slices, and JavaScript, into a document.

  1. In Dreamweaver document, place the insertion point where you want to insert the Fireworks HTML code.
  2. Do one of the following:
    • Select Insert > Image Objects > Fireworks HTML.

    • In the Common category of the Insert panel, click the Images button and choose Insert Fireworks HTML from the popup menu.

  3. Click Browse to select a Fireworks HTML file.
  4. If you will have no further use for the file, select Delete File After Insertion. Selecting this option has no effect on the source PNG file associated with the HTML file.

    Note:

    If the HTML file is on a network drive, it is permanently deleted—not moved to the Recycle Bin or Trash.

  5. Click OK to insert the HTML code, along with its associated images, slices, and JavaScript, into the Dreamweaver document.

Paste Fireworks HTML code into Dreamweaver

A fast way to place Fireworks-generated images and tables in Dreamweaver is to copy and paste Fireworks HTML code directly into a Dreamweaver document.

Copy and paste Fireworks HTML code into Dreamweaver

  1. In Fireworks, select Edit > Copy HTML Code.
  2. Follow the wizard as it guides you through the settings for exporting your HTML and images. When prompted, specify your Dreamweaver site folder as the destination for the exported images.

    The wizard exports the images to the specified destination and copies the HTML code to the Clipboard.

  3. In Dreamweaver document, place the insertion point where you want to paste the HTML code, and select Edit > Paste Fireworks HTML.

    All HTML and JavaScript code associated with the Fireworks files you exported is copied into the Dreamweaver document, and all links to images are updated.

Export and paste Fireworks HTML code into Dreamweaver

  1. In Fireworks, select File > Export.
  2. Specify your Dreamweaver site folder as the destination for the exported images.
  3. In the Export pop‑up menu, select HTML And Images.
  4. In the HTML pop‑up menu, select Copy To Clipboard, and then click Export.
  5. In the Dreamweaver document, place the insertion point where you want to paste the exported HTML code, and select Edit > Paste Fireworks HTML.

    All HTML and JavaScript code associated with the Fireworks files you exported is copied into the Dreamweaver document, and all links to images are updated.

Update Fireworks HTML code placed in Dreamweaver

In Fireworks, the File > Update HTML command provides an alternative to the launch-and-edit technique for updating Fireworks files placed in Dreamweaver. With Update HTML, you can edit a source PNG image in Fireworks and then automatically update any exported HTML code and image files placed in a Dreamweaver document. This command lets you update Dreamweaver files even when Dreamweaver is not running.

  1. In Fireworks, open the source PNG file and make your edits.
  2. Select File > Save.
  3. In Fireworks, select File > Update HTML.
  4. Navigate to the Dreamweaver file containing the HTML you want to update, and click Open.
  5. Navigate to the folder destination where you want to place the updated image files, and click Select (Windows) or Choose (Macintosh).

    Fireworks updates the HTML and JavaScript code in the Dreamweaver document. Fireworks also exports updated images associated with the HTML and places the images in the specified destination folder.

    If Fireworks cannot find matching HTML code to update, it gives you the option of inserting new HTML code into the Dreamweaver document. Fireworks places the JavaScript section of the new code at the beginning of the document and places the HTML table or link to the image at the end.

Create a web photo album

The Create Web Photo Album feature has been deprecated as of Dreamweaver CS5.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy