Adobe Dreamweaver® and Fireworks recognize and share many of the same file edits, including changes to links, image maps, and table slices. And, Dreamweaver and Fireworks provide a streamlined workflow for editing, optimizing, and placing web graphics files in HTML pages.
When you insert Fireworks JPEG files in Dreamweaver, the quality of the file is automatically calculated. The value can be 79 for some of the files.
Note:
Before using any of these procedures, be sure that Dreamweaver is selected as the HTML type in the HTML Setup dialog box.
Image placeholders let you experiment with various web page layouts before creating the final artwork for your page. Use image placeholders to specify the size and position of Fireworks images to be placed in Dreamweaver in the future.
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.
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.
-
Select the image placeholder and click Create in the Property inspector.
Control-double-click (Windows) or Command-double-click (Mac OS) the image placeholder.
Right-click (Windows) or Control-click (Mac OS) and choose Create Image in Fireworks.
Fireworks opens with an empty canvas that is exactly the same size as the placeholder image. The top of the Document window indicates that you are editing an image from Dreamweaver.
Exporting Fireworks files to Dreamweaver is a two-step process. From Fireworks, export files directly to a Dreamweaver site folder. This generates an HTML file and the associated image files in the location you specify. Then place the HTML code into Dreamweaver, using the Insert Fireworks HTML feature.
When you copy Fireworks HTML code to the clipboard, all HTML and JavaScript code associated with the Fireworks document is copied into the Dreamweaver document, images are exported to a location you specify, and Dreamweaver updates the HTML with document-relative links to those images.
Note:
This method works only with Dreamweaver. It does not work with other HTML editors.
Note:
You can also open an exported Fireworks HTML file in Dreamweaver and then copy and paste the desired sections into another Dreamweaver document.
Note:
Roundtrip HTML provides many benefits when working with HTML exported to Dreamweaver. (See About Roundtrip HTML.)
-
Navigate to the folder where you want to place the updated image files, and click Open.
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.
Note:
If Fireworks cannot find matching HTML code to update, you have 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.
A library item is a portion of an HTML file located in a folder named Library in your site root folder. Library items appear as a category in the Dreamweaver Assets panel. In Dreamweaver, library items simplify editing and updating frequently used website components. You can drag a library item (a file with the .lbi extension) from the Assets panel to any page in your website.
You can't edit a library item directly in the Dreamweaver document; you can edit only the master library item. Then, you can have Dreamweaver update every copy of that item as it is placed throughout your website. Dreamweaver library items are much like Fireworks symbols; changes to the master library (LBI) document are reflected in all library instances across your site.
Note:
Dreamweaver library items do not support pop-up menus.
The Roundtrip HTML feature tightly integrates Fireworks and Dreamweaver. It allows you to make changes in one application and have those changes seamlessly reflected in the other.
Fireworks recognizes and preserves most types of edits made to a document in Dreamweaver, including changed links, edited image maps, edited text and HTML in HTML slices, and behaviors shared between Fireworks and Dreamweaver. The Property inspector in Dreamweaver helps you identify Fireworks-generated images, table slices, and tables in a document.
Fireworks supports most types of Dreamweaver edits. However, major changes to a table's structure in Dreamweaver can create irreconcilable differences between the two applications. When making considerable changes to a table layout, use the Dreamweaver launch-and-edit feature to edit the table in Fireworks.
Note:
Using Fireworks technology, Dreamweaver provides basic image-editing features for modifying images without an external image-editing application. Dreamweaver image-editing features apply only to JPEG and GIF image file formats.
Note:
Before editing Fireworks graphics from Dreamweaver, perform some preliminary tasks. For more information, see Set launch-and-edit options.
-
Select the desired image. (The Property inspector identifies the selection as a Fireworks image and displays the name of the known PNG source file for the image.) Then click Edit in the Property inspector.
Control-double-click (Windows) or Command-double-click (Mac OS) the image you want to edit.
Right-click (Windows) or Control-click (Mac OS) the desired image, and choose Edit With Fireworks from the context menu.
-
Click Done to export the image using the current optimization settings, update the GIF or JPEG file used by Dreamweaver, and save the PNG source file if a source file was selected.
Note:
When you open an image from the Dreamweaver Site panel, the default editor for that image type, which is set in Dreamweaver Preferences, opens the file. When images are opened from this location, Fireworks does not open the original PNG file. To use the Fireworks integration features, open images from within the Dreamweaver Document window.
Note:
Before editing Fireworks tables from Dreamweaver, perform some preliminary launch-and-edit tasks. For more information, see Set launch-and-edit options.
-
Click inside the table, and click the TABLE tag in the status bar to select the entire table. (The Property inspector identifies the selection as a Fireworks table and displays the name of the known PNG source file for the table.) Then click Edit in the Property inspector.
Select an image in the table, and click Edit in the Property inspector.
Right-click (Windows) or Control-click (Mac OS) the image, and then choose Edit With Fireworks from the context menu.
-
When you have finished editing the table, click Done in the document window.
The HTML and image slice files for the table are exported using the current optimization settings, the table placed in Dreamweaver is updated, and the PNG source file is saved.
Note:
You can get a Dreamweaver error if you nest another table inside the original Fireworks-generated table and then try to edit the table using Roundtrip editing in Dreamweaver. For more information, see TechNote 19231 on the Adobe website.
If a single, unsliced Fireworks graphic is inserted into a Dreamweaver document and a Dreamweaver behavior is applied, that graphic will have a slice on top of it when it is opened and edited in Fireworks. The slice is not visible initially, because slices are automatically turned off when you open and edit single, unsliced graphics to which Dreamweaver behaviors are applied. You can view the slice by turning on its visibility from the Web Layer of the Layers panel.
When you view properties for a slice in Fireworks that has a Dreamweaver behavior attached, the Link text box in the Property inspector might display javascript:;. Deleting this text is harmless. You can type over it to enter a URL if desired, and the behavior will still be intact when you return to Dreamweaver.
When you work with Roundtrip HTML from Dreamweaver, Fireworks supports server-side file formats such as CFM and PHP.
Dreamweaver supports all behaviors applied in Fireworks, including those required for rollovers and buttons.
Note:
Dreamweaver library items do not support pop-up menus.
Note:
Fireworks does not support nonnative behaviors, including server-side behaviors.
-
To edit optimization settings, click the Options tab.
To edit the size and area of the exported image, click the File tab. If you change image dimensions in Fireworks, you must reset the size of the image in the Property inspector when you return to Dreamweaver.
To edit animation settings for the image, click the Animation tab.
If you are opening and optimizing an Animated GIF file, you can also edit the animation settings. The animation options in the Export Preview dialog box are similar to those available in the Fireworks States panel.
Note:
To edit individual graphic elements within a Fireworks animation, you must open and edit the Fireworks animation.
To use Roundtrip HTML effectively, you should perform some preliminary tasks, such as setting Fireworks as your primary image editor in Dreamweaver, specifying launch-and-edit preferences in Fireworks, and defining a local site in Dreamweaver.
Dreamweaver provides preferences for automatically starting specific applications to edit specific file types. To use the Fireworks launch-and-edit features, make sure that Fireworks is set as the primary editor for GIF, JPEG, and PNG files in Dreamweaver.
Note:
Setting this preference is necessary only if you're having trouble starting Fireworks from within Dreamweaver.
The Fireworks launch-and-edit preferences let you specify how to handle source PNG files when opening Fireworks files from another application.
Dreamweaver recognizes the Fireworks launch-and-edit preferences only when you are opening and optimizing an image that is not part of a Fireworks table and that does not contain a correct Design Note path to a source PNG file. In all other cases, including all launch-and-edit cases of Fireworks images, Dreamweaver automatically opens the source PNG file and prompts you to locate the source file if it cannot be found.
-
Click the Launch And Edit category, and set options as desired.
For more information, see Launch and Edit preferences.
Whenever you export a Fireworks file from a saved source PNG file to a Dreamweaver site, Fireworks writes a Design Note that contains information about the PNG file. When you open and edit a Fireworks image from within Dreamweaver, Dreamweaver uses the Design Note to locate the source PNG for that file. For best results, always save your Fireworks source PNG file and exported files in a Dreamweaver site. This ensures that any user sharing the site can locate the source PNG when starting Fireworks from within Dreamweaver.
The File Management button 
, located
at the top of the document window provides easy access to file-transfer
commands. Use this button if your document resides in a Dreamweaver
site folder and the site has access to a remote server. For Fireworks
to recognize the folder as a site, use the Manage Site dialog box
in Dreamweaver to define the target folder (or a containing folder)
as a site's local root folder.
Note:
Before using check-in and check-out options in Fireworks, select the Enable File Check In And Check Out option for the Dreamweaver site in which the document resides.
Get
Copies the remote version of the file to the local site, overwriting the local file with the remote copy.
Put
Copies the local version of the file to the remote site, overwriting the remote file with the local copy.
Undo Check Out
Undoes Check Out of the local file and checks it in, overwriting the local file with the remote copy.
Note:
File Management commands are enabled in Fireworks only if your document resides in a Dreamweaver site folder with a remote server defined. Fireworks File Management commands can be used only for files that reside in sites that use the Local/Network and FTP transport methods. Files in sites that use SFTP or third-party transport methods such as SourceSafe, WebDAV, and RDS cannot be transported to and from the remote server from within Fireworks.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.