Home / Developer Center / Dreamweaver Developer Center /

Dreamweaver Article

Mark Fletcher
www.vtc.com
mark-fletcher.co.uk

Using Macromedia Dreamweaver MX 2004 and Macromedia Fireworks MX 2004 together gives you the tools you need to edit, optimize and place web graphic files into HTML pages in a streamlined fashion. Eliminating the complexity inherent in working with two separate programs in your workflow, Macromedia's integrated tools allow easy "roundtripping"—the process of making edits to a file in, say, Fireworks and preserving those changes seamlessly in Dreamweaver—which saves you huge amounts of time.

Below I explore some of the integration features and other highlights you'll find in Dreamweaver MX 2004 and Fireworks MX 2004.

Requirements

Dreamweaver MX 2004 (Note: This tutorial also works with Dreamweaver MX)

Fireworks MX

Exploring the Consistent MX 2004 Workspace
To make it easier for you to jump between Dreamweaver MX 2004 and Fireworks MX 2004, both products support many common features and interface elements. The Properties inspector is one such example; it displays information and settings about a given text, symbol, slice, graphic, movie and so on.

Below are two Properties inspectors of some selected text. If I didn't identify them, you probably wouldn't know which one comes from Fireworks or Dreamweaver.

This one belongs to Fireworks MX 2004:

You'll find this one in Dreamweaver MX 2004:

Easy Exporting with the Quick Export Button
Fireworks MX 2004 gives you a convenient way to export graphics and slices to external programs such as Dreamweaver MX 2004. In case this term is new to you, slicing is the process of cutting a web document into small pieces. Web designers do this for a variety of reasons. Because smaller graphics download quicker, slicing enables various parts of a document to be optimized differently. Also, a web document must be sliced if you wish to include some sort of interactivity in it, such as image rollovers.

To export such elements, Fireworks MX 2004 includes the Quick Export button in the top-right corner of the document window. Clicking it reveals a drop-down menu showing export options for such programs as FreeHand, Flash, Director and, of course, Dreamweaver:

Selecting Dreamweaver from the menu gives you the following choices:
•	Export HTML exports your layout as an HTML file and opens the file later using an HTML editor. This is ideal if you're working in a team environment where the page may be shared among many people.
•	Update HTML updates an existing HTML document.
•	Copy HTML to the Clipboard copies your graphics or slices to the Clipboard and pastes them into an existing HTML document.
•	Launch Dreamweaver fires up Dreamweaver while you're still in Fireworks.
You can determine the export settings for your graphics and slices via the Properties inspector or the Optimize Panel.

About the author
Mark Fletcher is one of the most experienced authors at the Virtual Training Company, where he specializes in creating training CDs and online tutorials on Macromedia products such as Dreamweaver, Fireworks, and HomeSite. Mark also develops online tutorials for WebAssist.com, a Dreamweaver and UltraDev extension development company.