Fireworks and Dreamweaver

Generally, you will use Fireworks to create your Web graphics, and you will use Dreamweaver to build the Web pages. However, on pages with extensive graphics, you may prefer to use Fireworks as the design tool, exporting the HTML table structure as you did in the previous lessons. Rollovers created in Fireworks appear as native Dreamweaver behaviors when the resulting file is opened in Dreamweaver, ensuring a seamless workflow between the two applications. You can modify the Fireworks-generated table in Dreamweaver to add text or images. If a graphic needs updating, you can edit the image from within Dreamweaver. Dreamweaver launches Fireworks automatically so you can make the changes. Fireworks replaces only the HTML and image slice files needed to update the Dreamweaver file. Any changes you make in Dreamweaver are preserved.

When you launch Dreamweaver, you'll see some familiar interface features. Fireworks and Dreamweaver share a common Macromedia user interface that makes using these two programs together even easier. The common interface reduces the learning curve and increases your productivity. Icons and panels, where appropriate, have the same look and feel. For example, the Behaviors panels in Fireworks and Dreamweaver have the same icons and appearance.

Customizable keyboard shortcuts enable designers to configure both products to fit their personal design workflow. If you are accustomed to shortcuts from another graphics program Macromedia FreeHand, for example you can change Fireworks to use the same shortcuts. Again, the learning curve is reduced, giving you more time to design and produce your Web pages.

The communication between Fireworks and Dreamweaver occurs as comments in the HTML code and in Design Notes. Design Notes are like sticky notes that accompany your HTML files when you export your files. The information in the notes appears only within the Dreamweaver application it is not in the HTML or placed on the server. If you are working with a team on a site, you can share information about the status of a file with Design Notes.

Fireworks saves the filename and path name of the original PNG source file in a Design Note when you have Design Notes enabled in Dreamweaver. When you save and export a Fireworks file within a Dreamweaver site, Fireworks creates a _notes folder and Design Note (a file ending with .mno) describing the file. Save your Fireworks original graphics (the PNG files) in a folder within a Dreamweaver site to maximize the integration between the two applications.