Golden Oldies: Fireworks MX as a Wireframer

One of the best, and most often overlooked, uses of Fireworks is to create whole page designs with it. Its always editable vector graphics make the trial and error so important to the creative process painless. You can move things around, resize them, or change their color if you don’t like them. You can create a design and multiple variations by simply copying and pasting objects. Because Fireworks designs don’t rest on HTML like Dreamweaver designs do, you can redo entire structures using drag and drop, rather than fussing with tables, merged areas, and cellpadding.

The wall that many users run up against, though, is how to get their designs out of Fireworks and into Dreamweaver seamlessly. Sooner or later, you have to deal with HTML tables (or another HTML positioning strategy, such as CSS or layers). There are many ways to make the transition, each with their own advantages and disadvantages. For simplicity, the ways can be divided into two main categories.

• Exporting Fireworks page designs using Fireworks HTML.
• Reconstructing a Fireworks design manually in Dreamweaver, and exporting individual pieces from Fireworks and placing them in the Dreamweaver design.

A common variation is to use a little bit of both, building a whole page design in Fireworks, reconstructing that design in Dreamweaver, but exporting multiple Fireworks slices at once and inserting them as nested tables in Dreamweaver.