User Guide Cancel

Working with Fireworks and Dreamweaver

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Use Fireworks and Dreamweaver for a streamlined workflow for editing, optimizing, and placing web graphics in HTML pages.

Note:

The feature is not supported in Adobe Dreamweaver versions.

Insert a Fireworks image

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.

  1. In the Dreamweaver document, place the insertion point where you want the image to appear, then do one of the following:

    • Select Insert > Image.

    • In the Common category of the Insert panel, click the Image button or drag it to the document.

  2. Navigate to the desired Fireworks exported file, and click OK (Windows) or Open (Macintosh).
    Note:

    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.

Edit a Fireworks image or table from Dreamweaver

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.

Note:

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.

  1. In Dreamweaver, open the Property inspector (Window > Properties) if it isn’t already open.
  2. Click the image or image slice to select it.

    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.

  3. To start Fireworks for editing, do one of the following:

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

    Note:

    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.  

  4. In Fireworks, edit the source PNG file and click Done.

    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.

Optimize a Fireworks image from Dreamweaver

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.

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

    • Select Command > Optimize Image

    • Click the Edit Image Settings button in the Property inspector.

  2. Make your edits in the Image 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.

  3. When you finish, click OK.

Use Fireworks to modify Dreamweaver image placeholders

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.

  1. Make sure you’ve already set Fireworks as the image editor for PNG files.
  2. In the Document window, click the image placeholder to select it.
  3. Start Fireworks in Editing From Dreamweaver mode by doing one of the following:

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

  4. Use Fireworks options to design the image.

    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.

    Note:

    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.

  5. When you finish, click Done to display the save prompt.
  6. In the Save In text box, select the folder you defined as your Dreamweaver local site folder.

    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.

  7. Click Save to save the PNG file.

    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.

  8. For Save In, select the Dreamweaver local site folder.

    The Name box automatically displays the name you used for the PNG file. You can change the name.

  9. For Save As Type, select the type of file or files you want to export; for example, Images Only or HTML And Images.
  10. Click Save to save the exported file.

    The file is saved, and focus returns to Dreamweaver. In the Dreamweaver document, the exported file or Fireworks table replaces the image placeholder.

About Fireworks pop‑up menus

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.

Edit Fireworks pop‑up menus in Dreamweaver

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.

  1. In Dreamweaver, select the Fireworks table that contains the pop‑up menu, and then click Edit in the Property inspector.

    The source PNG file opens in Fireworks.

  2. In Fireworks, edit the menu with the Pop‑up Menu Editor, and then click Done on the Fireworks toolbar.

    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.

Edit a pop‑up menu created in Fireworks MX 2004 or earlier

  1. In Dreamweaver, select the hotspot or image that triggers the pop‑up menu.
  2. In the Behaviors panel (Shift+F3), double-click Show Pop‑Up Menu in the Actions list.
  3. Make your changes in the Pop‑Up Menu dialog box and click OK.

Specify launch-and-edit preferences for Fireworks source files

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.

Note:

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.

  1. In Fireworks, select Edit > Preferences (Windows) or Fireworks > Preferences (Macintosh) and then click the Launch And Edit tab (Windows) or select Launch And Edit from the pop‑up menu (Macintosh).
  2. 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.

    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.

Insert Fireworks HTML code in a Dreamweaver document

From Fireworks, you can use the Export command to export and save optimized images and HTML files to a location inside a Dreamweaver site folder. You can then insert the file in Dreamweaver. Dreamweaver lets you insert Fireworks-generated HTML code, complete with associated images, slices, and JavaScript, into a document.

  1. In Dreamweaver document, place the insertion point where you want to insert the Fireworks HTML code.
  2. Do one of the following:

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

  3. Click Browse to select a Fireworks HTML file.
  4. If you will have no further use for the file, select Delete File After Insertion. Selecting this option has no effect on the source PNG file associated with the HTML file.
    Note:

    If the HTML file is on a network drive, it is permanently deleted—not moved to the Recycle Bin or Trash.

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

Paste Fireworks HTML code into Dreamweaver

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.

Copy and paste Fireworks HTML code into Dreamweaver

  1. In Fireworks, select Edit > Copy HTML Code.
  2. Follow the wizard as it guides you through the settings for exporting your HTML and images. When prompted, specify your Dreamweaver site folder as the destination for the exported images.

    The wizard exports the images to the specified destination and copies the HTML code to the Clipboard.

  3. In Dreamweaver document, place the insertion point where you want to paste the HTML code, and select Edit > Paste Fireworks HTML.

    All HTML and JavaScript code associated with the Fireworks files you exported is copied into the Dreamweaver document, and all links to images are updated.

Export and paste Fireworks HTML code into Dreamweaver

  1. In Fireworks, select File > Export.
  2. Specify your Dreamweaver site folder as the destination for the exported images.
  3. In the Export pop‑up menu, select HTML And Images.
  4. In the HTML pop‑up menu, select Copy To Clipboard, and then click Export.
  5. In the Dreamweaver document, place the insertion point where you want to paste the exported HTML code, and select Edit > Paste Fireworks HTML.

    All HTML and JavaScript code associated with the Fireworks files you exported is copied into the Dreamweaver document, and all links to images are updated.

Update Fireworks HTML code placed in Dreamweaver

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.

  1. In Fireworks, open the source PNG file and make your edits.
  2. Select File > Save.
  3. In Fireworks, select File > Update HTML.
  4. Navigate to the Dreamweaver file containing the HTML you want to update, and click Open.
  5. Navigate to the folder destination where you want to place the updated image files, and click Select (Windows) or Choose (Macintosh).

    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.

    If Fireworks cannot find matching HTML code to update, it gives you 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.

Create a web photo album

The Create Web Photo Album feature has been deprecated as of Dreamweaver CS5.

More like this

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy