Dreamweaver - Fireworks Integration
In Fireworks
Exporting HTML (and JavaScript) Code
Fireworks generates HTML and JavaScript code if Fireworks is used to create slices, hotspots, or behaviors. You can export the HTML and JavaScript to a new file and then use open this file in Notepad or an HTML editor to paste it into another HTML file. However, a more direct route is to export the HTML and JavaScript to the System Clipboard, where it can be pasted into another file directly. To do this, launch the Copy HTML Code wizard either by Edit>Copy HTML Code or by clicking the Quick Export button at the top right of the document window and then selecting Copy HTML Code. After completing the wizard, in Dreamweaver you can simply choose Edit>Paste HTML to insert the HTML and JavaScript generated by Fireworks.
In Dreamweaver
Working with an Existing Web Page with Images
You can double-click any image or Flash file in the Assets panel, or, with the image selected, click the Edit button on the Property Inspector and edit that object. You can set which program you want to use to edit particular types of files by Edit>Preferences>File Types/Editors.
If you created the image file yourself, the image file in the web page is probably not the source file since the file in the web page has been optimized to keep the file size and loading time down. When editing the image file, it will generally make more sense to edit the original source file for several reasons:
- if the source file had layers, the layers were removed (the file was flattened) when it was optimized for the web
- if the file in the web page is a .jpg, then editing the .jpg rather than the original loses image quality since .jpg is a lossy compression format. Each saving of the .jpg loses image quality.
In Fireworks, selecting Edit>Preferences>Launch and Edit tab allows you to set how you want Fireworks to behave when launched from an external program such as Dreamweaver. There are three choices:
- Always Use Source PNG
- Never Use Source PNG
- Ask Before Launching
When Fireworks is launched, in some cases, it will automatically load the png source file of the image you selected. In other cases, a dialog box will come up and ask you whether you want to search for it. While you are editing in Fireworks, you will see the Dreamweaver and Fireworks icons and the text "Editing from Dreamweaver". If you click Done, you will be returned to Dreamweaver and any changes you made will be reflected.
Creating New Images for an Existing Page or a New Page
In Dreamweaver, you can insert an image placeholder by Insert>Image Placeholder. You can select dimensions for the image. When you are ready to create the image, select the image and click the Create button on the Dreamweaver Property Inspector, which will launch Fireworks
Making Change to Popup Menu Created in Fireworks
In Fireworks, you create the popup menu and then you can export and paste the HTML and JavaScript as described in the section above called Exporting HTML and JavaScript code. In Dreamweaver, then select the image, bring up the behaviors Window and double click the popup menu behavior to bring up the popup menu wizard and you can edit the behavior. However it does not appear that your edits are reflected back in Fireworks.
Inserting Fireworks HTML into Dreamweaver
After you generate HTML and JavaScript in Fireworks, you can export it to an HTML file. To bring this into another HTML file, in the latter, you select Insert>Interactive Images>Fireworks HTML and then select the HTML file name you created in Fireworks.
Revised: August 5, 2003. Comments to William Pegram, wpegram@nvcc.edu