| Given that Macromedia developed both Dreamweaver and Fireworks, you might expect some nifty integration features between the two applications, and you'd be correct. You can set Dreamweaver to use Fireworks as the default external image editor, insert an exported Fireworks image in such a way that Dreamweaver " knows " about the original Fireworks file or files, and launch the full Fireworks program for serious image editing. Perhaps most usefully, you can now perform a number of common image editing functions without having to load Fireworks in its entirety. Let's look at each of these capabilities. Setting Fireworks as the Default Image Editor Dreamweaver MX 2004 lets you specify that you want Fireworks to be the default (in Macromedia parlance, "primary") image editor for edit-and-launch capability. You can also tell Dreamweaver that you want Fireworks available, but not as the default, for example, if you're more used to working with another tool such as Photoshop or ImageReady. Change or confirm these settings by choosing Edit, Preferences. Click File Types/Editors in the left column, and add Fireworks (and any other editors you'd like to have available from the context menu) in the right part of the dialog box by using the + button, for PNG, GIF, and JPG file types (see Figure 12.4). Your primary image editor will launch whenever you double-click an image in the Document window; you can launch a secondary image editor from the image's context menu (via a right-click on the PC or a control-click on the Mac). Figure 12.4. For maximum integration within Studio MX 2004, choose Fireworks as your primary image editor in the Preferences dialog box. 
TIP You should also enable Design Notes for your Dreamweaver sites, and in Fireworks, export images to the site folder. Studio MX 2004 uses Design Notes for program-to-program communication; for example, Dreamweaver can find the original PNG file for a given exported image because Fireworks creates a Design Note containing that information during export. Exporting into a Dreamweaver site folder ensures that you and other collaborators have access to the image files for editing from the Dreamweaver user interface.
Inserting or Creating a Fireworks Image You can insert a Fireworks image into a Dreamweaver document in two basic ways: via the normal Insert, Image command (or its Insert bar equivalent), and by updating a Dreamweaver placeholder . Dreamweaver lets you use placeholders when you're laying out a page and you know the size of the image you want, but you don't yet have the image file ready to insert. In the first case, you would normally first use Fireworks to create the image and export it in a Web-friendly format such as GIF or JPG, then point Dreamweaver to the exported image. In the second case, you can simply right-click (control-click on the Mac) the placeholder and choose Create Image In Fireworks. Fireworks then launches in "Editing from Dreamweaver" mode. When creating an image that began life as a placeholder, Fireworks honors the preset image size, image ID, attached behaviors (some, anyway), and attached links. After working your artistry in Fireworks, click the Done button and Fireworks prompts you to save the original image in PNG format and then export the image to GIF or JPG. Launching Fireworks to Edit or Optimize an Image When working in Dreamweaver MX 2004 with an image that you'd like to edit in Fireworks, do one of the following: -
Right-click (PC) or Control-click (Mac) the image and choose Edit with Fireworks. -
Click the image and choose the Edit button on the Property inspector's new image toolbar. -
Control-double-click (PC) or Command-double-click (Mac) the image. Whichever method you prefer, Fireworks opens in "Editing from Dreamweaver" mode (see Figure 12.5). If you've chosen an image slice that is part of a Fireworks table, assuming you've enabled Design Notes, Dreamweaver will find the original PNG file and open that in Fireworks for editing. Figure 12.5. When you've launched Fireworks from within Dreamweaver, you can see the "Editing from Dreamweaver" notation in the Fireworks window. 
If you'd like to edit the image specifically to optimize its size-versus-quality tradeoff , you can save some time by selecting the image and choosing Commands, Optimize Image in Fireworks. (There's also a new button for this on the Property inspector's new image toolbar, and a right-click command is available as well.) Fireworks opens in the Options panel, where you can fine-tune the compression settings and preview the results. When you're finished editing or optimizing the image in Fireworks, simply click Done or Update (if you are editing or optimizing, respectively). Fireworks makes the appropriate changes to the original image file or files; exports the image, along with any accompanying HTML, for Dreamweaver's use; and returns the focus to Dreamweaver. Macromedia calls the facility for maintaining the edits to the original file, as well as updating the Dreamweaver content, roundtrip editing . It's a major timesaving workflow feature. Using the New Image Editing Toolbar Many Web designers need a few quick-and-dirty image editing capabilities but rarely need the power of a full-fledged graphics editor such as Fireworks. One of our favorite improvements in Dreamweaver MX 2004 is the addition of the image editing toolbar in the Property inspector (Figure 12.6), which lets you perform common operations on JPG and GIF files. Figure 12.6. The new image editing toolbar appears on the Property inspector when you select an image. 
We put discussion of this toolbar here, in the integration section, because it does provide a convenient way for you to launch Fireworks for editing or optimization; however, you don't have to install Fireworks to use the toolbar's other features (crop, resample, brightness/contrast, and sharpen). Here's a concise explanation of what these toolbar buttons do for you: -
Edit ” Opens the image in Fireworks for editing. You must have Fireworks installed to use this button. -
Optimize in Fireworks ” Identical to using Commands, Optimize Image in Fireworks: Opens Fireworks to the Options panel, where you can tweak compression settings. You must have Fireworks installed. -
Crop ” Draws a bounding box around the image with resize handles that you can click and drag to crop the image to exclude areas you don't want. -
Resample ” Performs a high-quality readjustment of pixels after you have resized an image (the button is grayed out until you perform the resize); dramatically improves quality and reduces file size. You don't need Fireworks installed to use this button. -
Brightness and Contrast ” Opens a dialog box with two slider controls so you can make an image look more clearly as you want it. Fireworks need not be installed. -
Sharpen ” Presents a slider control with which you can increase edge contrast to make bitmap images appear more detailed and focused; used mostly with JPG images. Fireworks need not be installed. If you find that you made a change that you don't like, the Edit, Undo command can reverse the change. | 