Using Fireworks with Dreamweaver

Search

Using Fireworks with Dreamweaver

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.

Place Fireworks images in Dreamweaver files

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.

Insert Fireworks images into Dreamweaver using the Files panel

  1. Export your image from Fireworks to the local site folder as defined in Dreamweaver.

  2. Open the Dreamweaver document and make sure you are in Design view.

  3. Drag the image from the Files panel into the Dreamweaver document.

Insert Fireworks images into Dreamweaver using the Insert menu

  1. Place the insertion point where you want the image to appear in the Dreamweaver document window.

  2. Do one of the following:

    • Select Insert > Image.

    • Click the Images: Image button in the Common category of the Insert bar.

  3. Navigate to the image you exported from Fireworks, and click OK.

Create new Fireworks files from Dreamweaver placeholders

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.

  1. In Dreamweaver, save the desired HTML document to a location inside your Dreamweaver site folder.

  2. Position the insertion point in the desired position in your document, and do one of the following:

    • Select Insert > Image Objects > Image Placeholder.

    • Click the Images: Image pop-up menu in the Common category of the Insert bar and choose Image Placeholder.

  3. Enter the name, dimensions, color, and alternate text for the image placeholder.

    An image placeholder is inserted into the Dreamweaver document.

    Image placeholder
    Image placeholder

    Image placeholder on DW
    Image placeholder on DW

    Note:

    Image placeholder menu entry is available only in Dreamweaver versions prior to 13.0

  4. Do one of the following:

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

  5. Create an image in Fireworks and click Done.

  6. Specify a name and location for the source PNG file.

  7. Specify a name for the exported image files.

    These are the image files that are displayed in Dreamweaver.

  8. Specify a location within your Dreamweaver site folder for the exported image file or files, and then click Save.

    When you return to Dreamweaver, the image placeholder you originally selected is replaced with the new Fireworks image or table.

    Image placeholder replaced by the new Fireworks image
    Image placeholder replaced by the new Fireworks image

Place Fireworks HTML code in 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.

  1. Export the Fireworks HTML document to HTML format.

  2. In Dreamweaver, save your document in a defined site.

  3. Place the insertion point in the document where you want the inserted HTML code to begin.

  4. Do one of the following:

    • Select Insert > Image Objects > Fireworks HTML.

    • Click the Images: Image pop-up menu in the Common category of the Insert bar and choose Fireworks HTML.

  5. In the dialog box that appears, click Browse to choose the desired Fireworks HTML file.

  6. (Optional) Select Delete File After Insertion to move the HTML file to the Recycle Bin (Windows) or to permanently delete it (Mac OS) when the operation is complete.

    This option does not affect the source PNG file associated with the HTML file.

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

Copy Fireworks HTML code for use in Dreamweaver

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.

  1. Copy the HTML to the clipboard in Fireworks, and then paste it into a Dreamweaver document.

Note:

You can also open an exported Fireworks HTML file in Dreamweaver and then copy and paste the desired sections into another Dreamweaver document.

Update Fireworks HTML exported to Dreamweaver

Note:

Roundtrip HTML provides many benefits when working with HTML exported to Dreamweaver. (See About Roundtrip HTML.)

  1. Make changes to the PNG document in Fireworks.

  2. Select File > Update HTML.

  3. Navigate to the Dreamweaver file containing the HTML you want to update, and click Open.

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

Export Fireworks files to Dreamweaver libraries

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.

  1. Select File > Export.

  2. Select Dreamweaver Library from the Export pop-up menu.

    Select or create a folder named Library in your Dreamweaver site as the location for the files. The name is case-sensitive.

    Note:

    Dreamweaver does not recognize the exported file as a library item unless it is saved into the Library folder.

  3. Type a filename.

  4. (Optional) If your image contains slices, choose slicing options.

  5. Select Put Images In Subfolder to choose a separate folder for saving images.

  6. Click Save.

Edit Fireworks files from Dreamweaver

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.

About Roundtrip HTML

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.

Edit a Fireworks image placed in Dreamweaver

Note:

Before editing Fireworks graphics from Dreamweaver, perform some preliminary tasks. For more information, see Set launch-and-edit options.

  1. In Dreamweaver, choose Window > Properties to open the Property inspector.

  2. Do one of the following:

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

  3. If prompted, specify whether to locate a source Fireworks file for the placed image.

  4. In Fireworks, edit the image.

    The edits you apply are preserved in Dreamweaver.

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

Edit a Fireworks table placed in Dreamweaver

Note:

Before editing Fireworks tables from Dreamweaver, perform some preliminary launch-and-edit tasks. For more information, see Set launch-and-edit options.

  1. In Dreamweaver, choose Window > Properties to open the Property inspector.

  2. Do one of the following to open the source PNG file in the document window:

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

  3. In Fireworks, make the edits.

    Dreamweaver recognizes and preserves all edits applied to the table in Fireworks.

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

About supported and non-supported Dreamweaver behaviors

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.

Fireworks supports the following Dreamweaver behaviors during a launch-and-edit session:

  • Simple Rollover

  • Swap Image

  • Swap Image Restore

  • Set Text of Status Bar

  • Set Nav Bar Image

  • Pop-up Menu

Note:

Fireworks does not support nonnative behaviors, including server-side behaviors.

Optimize Fireworks images and animations placed in Dreamweaver

Change optimization settings for a Fireworks image placed in Dreamweaver

  1. In Dreamweaver, select the image and do one of the following:

    • Select Commands > Optimize Image.

    • Click the Optimize button in the Property inspector.

    • Right-click (Windows) or Control-click (Mac OS) and choose Optimize In Fireworks from the pop-up menu.

  2. If prompted, specify whether to open a Fireworks source file for the placed image.

  3. Make edits in the Export 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. 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.

  4. When you have finished editing the image, click OK to export the image, update the image in Dreamweaver, and save the PNG.

    If you changed the format of the image, the Dreamweaver link checker prompts you to update references to the image.

Change animation settings

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.

Set launch-and-edit options

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.

Set Fireworks as the primary external image editor for 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.

  1. In Dreamweaver, choose Edit > Preferences and then choose File Types/Editors.

  2. In the Extensions list, select a web image filename extension (.gif, .jpg, or .png).

  3. In the Editors list, select Fireworks. If Fireworks is not in the list, click the Plus (+) button, locate the Fireworks application on your hard disk, and click Open.

    Dreamweaver preferences
    Dreamweaver preferences

  4. Click Make Primary.

  5. Repeat steps 2 through 4 to set Fireworks as the primary editor for other web image file types.

Set launch-and-edit preferences for Fireworks source files

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.

  1. In Fireworks, choose Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS).

  2. Click the Launch And Edit category, and set options as desired.

    For more information, see Launch and Edit preferences.

About Design Notes and source files

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.

Transferring site files with the File Management button

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.

Check Out

Checks the file out, 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.

Check In

Checks the local file in, 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.

Adobe logo

Sign in to your account

Quick links

View all your plans Manage your plans

Legal Notices    |    Online Privacy Policy