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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
- 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.
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.
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.
- Navigate to the folder destination where you want to place the updated image files, and click Select (Windows) or Choose (Macintosh).