Exporting CSS and images in Fireworks CS4

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.

In order to use the layout engine effectively, it is important to understand four simple rules about positioning and sizing your design objects:

• Only text, rectangles, and image slices are exported
• Text, rectangles, and image slices are all treated as rectangular blocks
• The Exporter must be able to interpret where the columns and rows of objects exist
• The document layout is treated as two-dimensional

The following sections explain each of these rules in more detail.

Rule 1: Only text, rectangles, and image slices are exported

Although this may sound like a limiting factor, especially considering the wealth of shapes and effects that Fireworks can produce, these are the only objects that can be represented in HTML. This limitation is due to HTML markup and the way that browsers display elements, but it doesn't really have an impact on your creativity or design decisions. You can use Fireworks to create non-rectangular, multi-layered artwork (see Figure1).

After you've finished designing the page, simply draw an image slice over the area you wish to export as a single image (see Figure 2).

For this example, I named the slice CorpLogo; the name I assign the slice is the name Fireworks will use as the filename of the exported image.

Note: Only images with slices are exported. Any other images in the document are ignored, unless they have a slice drawn over them.

The next example displays a simple document with an embedded image object (see Figure 3).

Unless you draw a slice over the image, the Exporter cannot see the image. Therefore, if you do not draw the slice over the image, Fireworks will ignore it as it performs the export process. Here's an example of the exported HTML page that is generated (see Figure 4).

To ensure that the images in your design are exported as expected, draw a slice over the image to make the element visible to the Exporter's layout engine (see Figure 5).

Rule 2: Text, rectangles, and slices are all treated as rectangular blocks

The Exporter must examine the size of text blocks, rectangles, and slices in order to produce the correct spacing between the elements. It also evaluates the location of the objects in order to determine the logical placement of columns and rows. It is very important to pay attention to these object boundaries to help the Exporter make the right choices to generate the desired end result.

Text blocks can sometimes be a bit deceiving because the rectangle area that defines the text block may actually be much larger than the text, causing two objects to overlap (see Figure 6).

In Figure 6 you can see that the text block extends into the region defined by the slice covering the image. This overlap confuses the Exporter because it is not clear that these two objects (text and image) should be rendered as HTML block elements that are placed next to each other.

Note: Use the option to Select All Objects in Fireworks to see all of the objects' bounding rectangles.

It is a best practice to adjust or reposition all exportable objects (text, rectangles, slices) to avoid overlapping them with each other. By making a minor adjustment to the text object's width, you can keep them from overlapping and make it easy for the Exporter to understand the page layout (see Figure 7).

Rule 3: The Exporter must be able to interpret where the columns and rows of objects exist

You should strive to make it easy for the Exporter to identify where to partition the page into rows and columns. If you help the Exporter see the places to put a row or column, then the Export engine will make the better choices and the generated code will more closely match your desired outcome. Figure 8 depicts a typical web page layout that includes a header area, three columns, and a footer area for the copyright notice and other related information.

If you are familiar with HTML, you'll recognize that the middle blocks clearly require a three-column layout, where each column should be able to expand vertically if more content is added to it. Additionally, the footer block should move down if the columns grow in height and need more space. This is fairly obvious to the eye of a web designer or web developer because it is possible to see where the logical vertical and horizontal partitions should go (see Figure 9).

The layout engine in Fireworks works much the same way. The Exporter looks for these logical partitions, determining where a clear line of sight can be placed between objects or groups of objects.

First, the Exporter looks for logical row splits that intersect from left to right. Every row that it identifies is divided into columns. In the example shown in Figure 9, three rows were identified and then three columns were found in the middle row.

Fortunately, the design shown in Figure 9 makes it easy for the Exporter to clearly define the columns and rows, which will generate the perfect exported HTML/CSS pages. But what happens if the design you are working on is less clearly defined (see Figure 10)?

If we step through the process, the Exporter first scans the page and identifies four rows (see Figure 11).

The Exporter identifies the four rows because there is a clear line of sight across the middle between the objects. Although this layout should export and render as expected, any dynamic content added to the upper middle section could push everything in the lower middle row down, which is not the desired behavior.

The solution is to block the line of sight across the middle section by placing a rectangle around one of the columns (the middle column in this case). You can make this rectangle invisible (the same color as the background color) if adding it changes your design. Simply add a container rectangle (marked in blue) to clearly identify the top and bottom elements as one column (see Figure 12).

Note: It is not necessary to create large gaps between the rows and columns, like the examples shown here. As long as a straight line of sight can be followed between objects, there can be a zero pixel gap. Just watch out for and eliminate any overlap between your rows and columns!

It is helpful to use the ruler guides in Fireworks to mark the columns and rows for your design. This will help you keep the objects lined up (see Figure 13).

Rule 4: The document layout is treated as two-dimensional

This item isn't really a rule—you can think of it as a timesaver. One of the strategies I originally considered for creating nested HTML elements was to use layers and sublayers to define a parent–child relationship hierarchy. After rethinking it, I thought that process seemed a bit time-consuming, so I decided on another approach that requires less effort.

Note: Treat the designs you create in Fireworks as flat, two-dimensional documents. Let the layout engine figure out how to organize the parent–child nesting for you.

To better explain what this means, look at the following layout (see Figure 14). As you can see, both the text block and the image slice are located inside the rectangle. The layout engine detects this automatically and makes the text and image children of the rectangle, thus saving you the effort of manually reorganizing your Fireworks layers.

It is important to remember that children elements of a rectangle are scanned for logical rows and columns in the same way as the page (described previously in Rule 3)—that is, the Exporter first scans for rows, and then scans for logical columns in each row.

This section provides specific examples of working with the new export feature to create different types of page elements.

Generating HTML forms

The Common Library panel includes a subgroup called HTML. The symbols within this subgroup work with the "CSS and Images" export feature.

The HTML subgroup includes a number of form elements, such as button, drop-down list, and text field that can be dragged onto your design. The form element symbols have HTML properties that can be changed via the Symbol properties window.

You can drag and drop these form element symbols wherever desired on your design. When you drag any of the form elements to the page, a <form> tag is automatically added at export time.

There are also some additional symbols for placing links and header tags.

Gradient backgrounds

For advanced users, there are a number of tricks that have been implemented to create effects, such as gradient backgrounds and expandable stylized boxes. You can find more information about how to create these by reading the "magical features" section of my Fireworks CS3 article, Export CSS painlessly from website comps in Fireworks. Since this article was written, Fireworks CS4 now includes an additional technique to set background image patterns and hyperlinks. Links can also be created using the Link symbol in the Common Library. You can create background patterns and gradients by setting a slice as a "background slice."

Background slices

You can set a specific slice to be a background slice. By doing so, you are indicating that the area covered by the slice is to become the background pattern for the nearest surrounding rectangle. In essence, you are defining the background for a div element. The pattern can repeat in certain ways and the options can be set on the slice using the Property inspector.

Remember that there must always be a surrounding rectangle whenever you define a slice as the background pattern.

Using the Export feature: Tips

This section includes helpful tips to prepare your documents for exporting.

Naming objects

Name the objects in the layers panel to influence the class names of generated HTML/CSS elements and also the image filenames of exported slices.

Export options

If you need specific output settings, check out the various export options in the Export window. For example, you can specify that you want the CSS saved into a separate file. You can also center the page, set a background image, and more.

Troubleshooting layout issues

If you have followed all the tips and rules in this article and your design is not being generated correctly, then try isolating part of the design with a rectangle. The rectangle can be invisible, with no fill or outline if you prefer. Adding the rectangle makes it easier for the Exporter to see the rows and columns. Rectangle objects enforce the page's structure, so you can ensure that rows or columns or blocks are exported as expected.

Where to go from here

Fireworks is an excellent application for designing and preparing web pages. Find out more about Fireworks CS4 and CSS by reading these articles by Matt Stow:

• Creating standards-compliant web designs with Fireworks CS4
• Getting started with CSS using prebuilt templates in Fireworks CS4

To find out more generally how you can design and deploy your clients' (or your own) websites in a fraction of the time, read the following CSS-related articles:

• CSS page layout basics
• Taking a Fireworks comp to a CSS-based layout in Dreamweaver

Don't forget to explore the CSS topic center to find even more articles and tutorials related to CSS.