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.
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.
Select Insert > Image.
In the Common category of the Insert panel, click the Image button or drag it to the document.
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.
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.
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.
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.
Select Command > Optimize Image
Click the Edit Image Settings button in the Property inspector.
To edit optimization settings, click the Options tab.
To edit the size and area of the exported image, click the File tab.
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.
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 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 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.
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.
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.
The Name box automatically displays the name you used for the PNG file. You can change the name.
The file is saved, and focus returns to Dreamweaver. In the Dreamweaver document, the exported file or Fireworks table replaces 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.
The source PNG file opens in Fireworks.
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.
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.
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.
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.
If the HTML file is on a network drive, it is permanently deleted—not moved to the Recycle Bin or Trash.
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.
The wizard exports the images to the specified destination and copies the HTML code to the Clipboard.
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.
The Create Web Photo Album feature has been deprecated as of Dreamweaver CS5.