Editing Images with Fireworks


You can use Macromedia Fireworks to edit images on your Dreamweaver pages, and the two programs work together to make it easier. When you start editing an image in Dreamweaver, Dreamweaver hands the image off to Fireworks. It's in Fireworks that you'll make the changes you want. Then you tell Fireworks that you're done editing the image and you want to go back to Dreamweaver. Fireworks saves the image and sends it back to Dreamweaver, which then updates the Web page with the modified image.

You can also have Fireworks objects on your Web pages, and Dreamweaver opens Fireworks when you need to make any changes to those objects. For example, in Fireworks you can create navigation bars, complete with links and rollover effects. Fireworks saves these navigation bars as HTML tables, with associated images. Fireworks makes it easy to export its navigation bars to Dreamweaver, and Dreamweaver recognizes that the navigation bar was created in Fireworks, so that when you attempt to edit the navigation bar in Dreamweaver, Fireworks automatically launches.

In this chapter, we only have room to barely touch on the cool things you can do with Fireworks. For lots more information, we recommend Macromedia Fireworks MX 2004 for Windows & Macintosh: Visual QuickStart Guide , by Sandee Cohen.

To edit images with Fireworks:

1.
Select the image on the Dreamweaver page.

2.
Click the Edit button in the Property Inspector ( Figure 14.4 ).

Figure 14.4. Use the Edit button in the Property Inspector to begin modifying an image with Fireworks.


Fireworks launches and displays the Find Source dialog. This gives you the choice to edit a PNG file that could be the original Fireworks file ( Figure 14.5 ). That's because PNG is Fireworks' native format, and files that you create in Fireworks are saved as PNGs, then, if necessary exported to JPEG or GIF for use on your Web site. Fireworks provides more editing options for PNG files than it does for other formats. So if you create images in Fireworks, you can often have two copies of the image: the PNG source and the exported JPEG or GIF.

Figure 14.5. Fireworks gives you the choice to edit the file in the Dreamweaver page, or edit a Fireworks PNG source file.


3.
If you originally created the image in Fireworks and want to edit the PNG, click Use a PNG.

The Open dialog appears. Navigate to the PNG file, select it, and click OK (Choose).

or

If you want to edit the file itself, click Use This File.

The image opens in Fireworks ( Figure 14.6 ).

Figure 14.6. When you are editing an image from Dreamweaver, Fireworks lets you know in a status bar at the top of the Fireworks document window and includes a Done button.


Note that a status bar appears in the Fireworks document window and includes a Done button and the notation "Editing from Dreamweaver."

4.
Make your changes in Fireworks.

5.
Click Done in the Fireworks window.

Fireworks saves and closes the image. Behind the scenes, it has told Dreamweaver to update the image on the Dreamweaver document page.

6.
Switch back to Dreamweaver to continue your work.

The updated image will be on the page.

Tip

  • If the image you updated appears on more than one page on your site, it will be updated on all of those pages, not just the one you are working on.


To export Fireworks HTML to Dreamweaver:

1.
In Fireworks, prepare and save the document (such as a navigation bar) that you want to export to Dreamweaver ( Figure 14.7 ).

Figure 14.7. This navigation bar in Fireworks is destined for Dreamweaver.


2.
From the Fireworks Quick Export pop-up menu at the upper right of the document window, choose Dreamweaver > Export HTML ( Figure 14.8 ).

Figure 14.8. Use the Quick Export pop-up menu to begin sending the navigation bar to Dreamweaver.


The Export dialog appears ( Figure 14.9 ).

Figure 14.9. Select your local site folder as the destination for the navigation bar.


3.
Navigate to the place in your local site folder where you want to save the Fireworks HTML file.

4.
(Optional, but recommended) Click Put images in subfolder, then click Browse and select the images directory, so the different images that make up the Fireworks table don't clutter up the root directory of your site.

5.
Click Export.

Fireworks saves the HTML and associated images in your site folder.

To edit a Fireworks image or table:

1.
In Dreamweaver, select the image or table that was originally created in Fireworks.

Dreamweaver shows you in the Property Inspector that the object came from Fireworks, and shows you in the Src field the name of the original Fireworks PNG file ( Figure 14.10 ).

Figure 14.10. The Dreamweaver Property Inspector recognizes objects from Fireworks, and shows you the name of the original Fireworks source file in the Src field.


2.
Click the Edit button in the Property Inspector.

or

Right-click and choose Edit in Fireworks from the resulting shortcut menu.

Fireworks launches and displays the PNG file for the object for editing ( Figure 14.11 ). A status bar appears in the Fireworks document window, with a Done button and the notation "Editing from Dreamweaver."

Figure 14.11. When you click the Edit in Fireworks button, the original PNG file opens for editing in Fireworks.


3.
Make the changes you want in Fireworks.

In this case, I changed the name of the second button in the navigation bar by typing it into the Text field in the Fireworks Property Inspector.

4.
Click Done in the Fireworks window.

Fireworks saves and closes the object or table. Behind the scenes, it has told Dreamweaver to update the object on the Dreamweaver document page.

5.
Switch back to Dreamweaver to continue your work.

The updated object will be on the page.

Tips

  • When Fireworks creates a navigation bar (or any complex image that uses scripts), it slices the PNG file into many different pieces, some of which are buttons and some are spacers. Some of these pieces also have JavaScript associated with them, for functionality such as rollovers. When Fireworks exports the navigation bar to Dreamweaver, Fireworks converts the format of the slices to many different JPEG files and creates a borderless table to contain all the slices ( Figure 14.12 ).

    Figure 14.12. We've selected the borderless table that contains the navigation bar's components to show the slices that Fireworks creates.

  • Fireworks exports its images to JPEG or GIF formats, which are less flexible to edit than PNG files. For example, once you have exported an image from Fireworks' native PNG format, you can't easily go back and edit text, effects settings, or paths in the artwork. That is why it's important to keep the original PNG files, so that you can easily go back and edit your work. We recommend that you save your original Fireworks PNG files in the same folder with the exported files, which usually means your site's images folder.





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net