Adobe Fireworks CS4 is a great tool for website design. The basic HTML export functionality has always been a huge timesaver because you can export your design as an HTML page with the image files inserted in a table layout in seconds. These days, many web designers prefer to use CSS layouts instead of table-based layouts. This article reviews the process of exporting a Fireworks design using the new CSS export feature, and shows you a clever method of directly controlling the final layout.

In the past, you may have used Fireworks to generate site files; but to implement a CSS style sheet that controls the site layout, you had to export the site files from Fireworks and then manually edit the HTML file in Adobe Dreamweaver to add the CSS styles. This workflow had some disadvantages: the final version of the Dreamweaver site no longer reflected the original PNG file created in Fireworks, and you had to manually insert subsequent design changes into the page using Dreamweaver, instead of referring back to the master Fireworks document.

Fireworks CS4 includes a new CSS export feature that enables you to export page designs using CSS positioning. Fireworks generates all the HTML and CSS code with minimal effort, and you can now make changes directly to the PNG file so that both the site and the master graphics remain in sync.

It's easy to use the new CSS export feature. Just choose File > Export and then select CSS and Images (.htm) from the Export pull-down menu. It's amazingly simple. The export engine reviews the page and identifies naturally occurring rows and columns in the design. These implied rows and columns are used to create the div tags that Fireworks adds to the CSS file. It works right out of the box, although there are some considerations and best practices you can follow to help Fireworks generate the CSS layout so that the page appears exactly the way you want.

If you've exported Fireworks pages as table-based HTML files, then you already know how to add slices. This article discusses another important element that is helpful for defining the regions of a page: rectangles. This strategy is extremely helpful if you have a complicated page design and you want to directly control the div layout instead of letting the CSS export engine define it for you.

Requirements

In order to make the most of this article, you'll need the following software:

Fireworks CS4 (including Fireworks CS4 10.0.3 updater)

• Try
• Buy
• Get the updater

Note: The Adobe Fireworks CS4 10.0.3 updater greatly improves stability for users running Fireworks CS4 on both Mac OS and Windows. A number of issues have been addressed in this release, including bugs that caused text to shift.

Dreamweaver CS4

• Try
• Buy

Sample files:

• sample_file_fw.zip (ZIP, 500K)

Prerequisite knowledge

This article assumes that you have basic knowledge of working with text in Fireworks and general experience working in the Fireworks workspace.

Note: This article appeared originally in the Edge newsletter.

Page 1 of 3

Next Page

About the authors