Working with Fireworks and Dreamweaver
- Dreamweaver User Guide
- Dreamweaver and Creative Cloud
- Dreamweaver workspaces and views
- Set up sites
- About Dreamweaver sites
- Set up a local version of your site
- Connect to a publishing server
- Set up a testing server
- Import and export Dreamweaver site settings
- Bring existing websites from a remote server to your local site root
- Accessibility features in Dreamweaver
- Advanced settings
- Set site preferences for transferring files
- Specify proxy server settings in Dreamweaver
- Synchronize Dreamweaver settings with Creative Cloud
- Using Git in Dreamweaver
- Manage files
- Create and open files
- Manage files and folders
- Getting and putting files to and from your server
- Check in and check out files
- Synchronize files
- Compare files for differences
- Cloak files and folders in your Dreamweaver site
- Enable Design Notes for Dreamweaver sites
- Preventing potential Gatekeeper exploit
- Layout and design
- Understand Cascading Style Sheets
- Laying out pages using CSS Designer
- Using CSS preprocessors in Dreamweaver
- How to set CSS Style preferences in Dreamweaver
- Move CSS rules in Dreamweaver
- Convert inline CSS to a CSS rule in Dreamweaver
- Work with div tags
- Apply gradients to background
- Create and edit CSS3 transition effects in Dreamweaver
- Format code
- Page content and assets
- Set page properties
- Set CSS heading properties and CSS link properties
- Work with text
- Find and replace text, tags, and attributes
- DOM panel
- Edit in Live View
- Encoding documents in Dreamweaver
- Select and view elements in the Document window
- Set text properties in the Property inspector
- Spell check a web page
- Using horizontal rules in Dreamweaver
- Add and modify font combinations in Dreamweaver
- Work with assets
- Insert and update dates in Dreamweaver
- Create and manage favorite assets in Dreamweaver
- Insert and edit images in Dreamweaver
- Add media objects
- Adding videos in Dreamweaver
- Insert HTML5 video
- Insert SWF files
- Add audio effects
- Insert HTML5 audio in Dreamweaver
- Work with library items
- Using Arabic and Hebrew text in Dreamweaver
- Linking and navigation
- jQuery widgets and effects
- Coding websites
- About coding in Dreamweaver
- Coding environment in Dreamweaver
- Set coding preferences
- Customize code coloring
- Write and edit code
- Code hinting and code completion
- Collapse and expand code
- Reuse code with snippets
- Lint code
- Optimize code
- Edit code in Design view
- Work with head content for pages
- Insert server-side includes in Dreamweaver
- Using tag libraries in Dreamweaver
- Importing custom tags into Dreamweaver
- About XML and XSLT
- Perform server-side XSL transformations in Dreamweaver
- Performing client-side XSL transformations in Dreamweaver
- Add character entities for XSLT in Dreamweaver
- Format code
- Cross-product workflows
- Installing and using extensions to Dreamweaver
- In-App updates in Dreamweaver
- Insert Microsoft Office documents in Dreamweaver (Windows only)
- Working with Fireworks and Dreamweaver
- Edit content in Dreamweaver sites using Contribute
- Dreamweaver-Business Catalyst integration
- Create personalized email campaigns
- About Dreamweaver templates
- Recognizing templates and template-based documents
- Create a Dreamweaver template
- Create editable regions in templates
- Create repeating regions and tables in Dreamweaver
- Use optional regions in templates
- Define editable tag attributes in Dreamweaver
- How to create nested templates in Dreamweaver
- Edit, update, and delete templates
- Export and import xml content in Dreamweaver
- Apply or remove a template from an existing document
- Edit content in Dreamweaver templates
- Syntax rules for template tags in Dreamweaver
- Set highlighting preferences for template regions
- Benefits of using templates in Dreamweaver
- Mobile and multiscreen
- Dynamic sites, pages and web forms
- Understand web applications
- Set up your computer for application development
- Troubleshoot database connections
- Removing connection scripts in Dreamweaver
- Design dynamic pages
- Dynamic content sources overview
- Define sources of dynamic content
- Add dynamic content to pages
- Changing dynamic content in Dreamweaver
- Display database records
- Provide and troubleshoot live data in Dreamweaver
- Add custom server behaviors in Dreamweaver
- Building forms using Dreamweaver
- Use forms to collect information from users
- Create and enable ColdFusion forms in Dreamweaver
- Create web forms
- Enhanced HTML5 support for form elements
- Develop a form using Dreamweaver
- Building applications visually
- Build master and detail pages in Dreamweaver
- Build search and results pages
- Build a record insert page
- Build an update record page in Dreamweaver
- Building record delete pages in Dreamweaver
- Use ASP commands to modify database in Dreamweaver
- Build a registration page
- Build a login page
- Build a page that only authorized users can access
- Securing folders in Coldfusion using Dreamweaver
- Using ColdFusion components in Dreamweaver
- Test, preview, and publish websites
Use Fireworks and Dreamweaver for a streamlined workflow for editing, optimizing, and placing web graphics in HTML pages.
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.
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.
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.
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.
In Dreamweaver, open the Property inspector (Window > Properties) if it isn’t already open.
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.
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.
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.
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.
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.
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.
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.
Make sure you’ve already set Fireworks as the image editor for PNG files.
In the Document window, click the image placeholder to select it.
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.
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.
When you finish, click Done to display the save prompt.
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.
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.
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.
For Save As Type, select the type of file or files you want to export; for example, Images Only or HTML And Images.
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.
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.
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
In Dreamweaver, select the hotspot or image that triggers the pop‑up menu.
In the Behaviors panel (Shift+F3), double-click Show Pop‑Up Menu in the Actions list.
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.
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.
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).
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
In Dreamweaver document, place the insertion point where you want to insert the Fireworks HTML code.
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.
Click Browse to select a Fireworks HTML file.
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.
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
In Fireworks, select Edit > Copy HTML Code.
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.
In Dreamweaver document, place the insertion point where you want to paste the HTML code, and select Edit > Paste Fireworks HTML.
Export and paste Fireworks HTML code into Dreamweaver
In Fireworks, select File > Export.
Specify your Dreamweaver site folder as the destination for the exported images.
In the Export pop‑up menu, select HTML And Images.
In the HTML pop‑up menu, select Copy To Clipboard, and then click Export.
In the Dreamweaver document, place the insertion point where you want to paste the exported HTML code, and select Edit > Paste Fireworks HTML.
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.
In Fireworks, open the source PNG file and make your edits.
Select File > Save.
In Fireworks, select File > Update HTML.
Navigate to the Dreamweaver file containing the HTML you want to update, and click Open.
Navigate to the folder destination where you want to place the updated image files, and click Select (Windows) or Choose (Macintosh).
Create a web photo album
The Create Web Photo Album feature has been deprecated as of Dreamweaver CS5.