New user interface and export options

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).

Figure 1. A multi-layer logo that incorporates various Fireworks shapes and effects

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).

Figure 2. Draw an image slice over the design to specify the area of the single image

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).

Figure 3. A simple design with some text and an embedded image

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).

Figure 4. The HTML page exported from Fireworks (without a slice over the image)

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).

Figure 5. The slice defines the image area that will be exported by Fireworks

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).

Figure 6. Select all of the page elements to see where the text block overlaps

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).

Figure 7. Use the handles on the bounding rectangles to resize the text block and avoid overlapping elements

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.

Figure 8. A web page design that incorporates a header, footer and three main columns

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).

Figure 9. Red dashed lines hightlight the logical vertical and horizontal areas of expansion

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)?

Figure 10. A variation on the three-column layout with a header and footer

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

Figure 11. The export process begins by identifying the logical rows in the layout

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).

Figure 12. Add a container rectangle to make the Exporter identify the middle section as a single column

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).

Figure 13. The ruler guides can help you keep the content in the rows and columns from overlapping

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.

Figure 14. The layout engine defines the nesting of parent–child objects

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.

Page 2 of 3

Previous Page

Next Page