Appendix A. Using Dreamweaver and Fireworks Together

CONTENTS

Appendix A. Using Dreamweaver and Fireworks Together

 

•  Placing Fireworks Files in Dreamweaver Documents
•  Launching Fireworks from Within Dreamweaver
•  Optimizing Fireworks Images or Animations in Dreamweaver
•  Placeholders

Macromedia Fireworks is a graphics application designed specifically for the web developer. It works beautifully side-by-side with Dreamweaver. The two programs share many of the same file edits and provide ways to establish a streamlined workflow for editing, optimizing, and inserting image files in HTML pages.

This appendix takes a quick look at some of the ways you can use the two programs together.

Placing Fireworks Files in Dreamweaver Documents

You can insert Fireworks files into Dreamweaver documents in several ways:

• Insert a single image file using Dreamweaver normal image-insertion methods; see Chapter 5, "Working with Images," for details.

• Insert Fireworks-generated HTML code, including associated images, slices, and JavaScript, into an HTML document using the Menu command Insert > Interactive Images > Fireworks HTML or the Fireworks HTML object in the Insert > Common bar (see Figure A.1).

  Figure A.1. The Fireworks HTML object in the Insert bar.

  

• Copy and paste Fireworks HTML into Dreamweaver. In Fireworks, choose Edit > Copy HTML Code and follow the wizard; then in Dreamweaver, place the cursor at the desired insertion point and choose Edit > Paste. Alternatively, in Fireworks, choose File > Export, and in the Export dialog box specify the desired Dreamweaver site folder as the destination, choose Save As HTML and Images, choose Copy to Clipboard, and click Save. In Dreamweaver, place the cursor at the desired insertion point and choose Edit > Paste.

• Export a Fireworks file as a library item. In Fireworks, choose File > Export. When the Export dialog box opens, choose Dreamweaver Library. Name the file, specify a destination folder named Library located at the root level of the Dreamweaver local root folder, and click Save. (See Chapter 25, "Templates and Libraries," for a discussion of Dreamweaver library items.)

Launching Fireworks from Within Dreamweaver

Fireworks can be launched from within Dreamweaver; but to use this feature, Fireworks must be designated as the primary external editor in Dreamweaver for the common graphics file types.

To do this, choose Edit > Preferences and go to the File Types/Editors category. One at a time, select the file extensions.gif,.jpg, and.png from the list, and from the Editors list, select Fireworks (Primary) and click Make Primary (see Figure A.2).

Figure A.2. Making Fireworks the primary editor for image files.

You can edit both individual Fireworks images and Fireworks tables by launching Fireworks from within Dreamweaver. This is called launch and edit. Dreamweaver uses Design Notes to make this integration possible, creating and maintaining a _notes folder containing a Design Note (MNO) file for each Fireworks object placed in a Dreamweaver document. Successful integration requires that neither the _notes folder nor its contents be moved or deleted. If anything happens to the _notes folder, Dreamweaver won't be able to find the PNG source file that corresponds to the element. (See Chapter 24, "Workplace Collaboration," for a full discussion of Design Notes.)

Note

Fireworks tables are used to construct sliced images. Each Fireworks table consists of the individual GIF or JPEG image files that make up the sliced image and the HTML table code used to assemble the slices into one big graphic. See Chapter 8, "Design Issues," for more on sliced image tables.

To launch and edit a single image, select the image in the Document window, and in the Property inspector click Edit (see Figure A.3). If necessary, specify the image source file (the Fireworks PNG that was originally used to generate it); this will open the file in Fireworks in Editing from Dreamweaver mode (see Figure A.4). Edit the image and click Done in the toolbar; the image is exported using the current optimization settings.

Figure A.3. Launching Fireworks from within Dreamweaver to edit a single image.

Figure A.4. Opening a Fireworks image in Editing from Dreamweaver mode.

To launch and edit a Fireworks table placed in Dreamweaver, select the table in the Document window and in the Property inspector click Edit. If necessary, specify the table's PNG source file. Dreamweaver launches Fireworks and displays the source PNG file for the table. Edit the source file and click Done; this exports the HTML and image slice files using the current optimization settings and updates the table in Dreamweaver. It also resaves the source PNG file.

Optimizing Fireworks Images or Animations in Dreamweaver

When it is necessary to make quick export changes, such as changing the compression (quality) of a JPEG, changing the file type, or even the size and area of the exported image or animation, you can launch Fireworks from within Dreamweaver and quickly make these changes.

To do this, select the desired image in the Document window and choose Commands > Optimize Image in Fireworks (see Figure A.5). If prompted, determine whether to launch a source PNG file. Make the desired edits in the Export Preview dialog box, using the Options, File, or Animation tabs as necessary. When finished, click Update; this exports the image or animation using the new optimization settings and saves the PNG source file, if one was used. If the file type was changed (for instance, from GIF to JPEG), the Dreamweaver link checker will prompt you to update references to the image filename.

Figure A.5. Using the Optimize Image in Fireworks command.

Placeholders

You can insert a placeholder image in a Dreamweaver document, and then launch Fireworks to create the actual graphic image.

This feature requires that you have Dreamweaver MX and Fireworks MX both installed. In the Dreamweaver Document window, insert an image placeholder (Insert > Image Placeholder), using the dialog box that appears to set the placeholder's dimensions. When you're ready to replace the placeholder with an actual image, select the image placeholder object, and in the Property inspector click Create (see Figure A.6). This launches Fireworks in Editing from Dreamweaver mode and creates a new blank image document with its canvas size automatically determined by the dimensions of the placeholder image.

Figure A.6. Launching Fireworks to replace a placeholder image with an actual image.

In Fireworks, design the image, then click Done. You are prompted to save the file as a PNG file (source document), and to export the file in a web-ready format such as a GIF or JPEG. When you have completed the saving process, the new image automatically replaces the placeholder in the original Dreamweaver document.

CONTENTS