Wouldn't it be nice to simply draw a website design in Fireworks and then instantly export the HTML, CSS code, and all associated files required to display the page, so that all the files are ready to upload to your web server? It's not just a dream. The new "CSS and Images" export option in Adobe Fireworks CS4 makes this possible now. This new functionality can be a big time saver when you don't have the need or desire to hand-code the CSS.

This article describes the new "CSS and Images" export option available in Fireworks CS4 and gives tips for getting the best results out of it. But first, here's a brief summary of the initial planning and thought process that led to its design:

• Our first observation was that web pages are essentially built from three types of elements: images, text, and rectangles (known as div elements in HTML). We realized that Fireworks had the capability to generate all of these elements.
• Our second observation was that a majority of HTML-based websites use a similar layout, created with common building blocks, such as the header, footer, sidebars, and navigation links.
• Our third observation was that web pages should have the ability to expand vertically to support the display of dynamic content. Building expandable pages added a new level of complexity to the process of automatically converting a flat 2D image into standards-compliant markup that displays the page correctly, but we love a good challenge.

The project started out as an extension for Fireworks CS3 called SmartCSS. It proved to be so successful that it will be included as a standard feature in Fireworks CS4.

Using the "CSS and Images" export option requires a little understanding because there are two different modes for the export process. One mode uses a layout engine to analyze the placement of the objects in the Fireworks design and generate the expanding pages. The other mode uses absolute positioning to place the objects in the design.

If you are planning to incorporate dynamic content to your website, you'll find it best to use the layout engine to generate the CSS code. However, the layout engine requires you to be fairly careful about the placement of the elements in your design, particularly in regards to overlapping objects. If your design includes overlapping objects that do not facilitate the export of expanding page content, the layout engine will be disabled, a warning will be displayed, and the CSS export option will use the absolute position mode to generate the CSS code.

When you use absolute position mode, Fireworks simply places each design object at a precise location on the browser window. The downside to this approach is that the elements in the page are fixed in place—if you add text or other dynamic content using a content management system or server-side scripting language, the page elements won't move to accommodate the extra content.

Requirements

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

Fireworks CS4

• Try
• Buy

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 3

Next Page

About the author