Understanding SmartCSS

To use SmartCSS effectively, it is important to understand four simple rules for positioning and sizing your design objects:

1. Only text, rectangles, and image slices are exported.
2. Text, rectangles, and image slices are treated as rectangular blocks.
3. The Exporter must be able to see where columns and rows of objects exist.
4. The document is treated as two-dimensional.

I'll explain each of these rules in depth.

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

Although this may seem to be 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. Rather than let this limitation restrict your creativity or toolset, you can simply use an image slice, as demonstrated in Figure 2.

Figure 2. Image slice in a multilayer logo that uses some Fireworks shapes and effects

Simply place an image slice over the area to export just a single image (see Figure 3).

Figure 3. Using an image slice to export a single image

I have named the slice CorpLogo; this will be used as the filename of the exported image.

Note: The only images that are exported are slices. Any other image in the document is ignored, unless it has a slice over it. Figure 4 shows a simple document with an embedded image object.

Figure 4. Embedded image object

The Exporter cannot "see" the image without a slice. Figure 5 shows what you might see this in the exported HTML.

Figure 5. How an exported file may display without an image slice

Solution: A slice to tell the Exporter where the image is (see Figure 6).

Figure 6. Using a slice to identify the location of the image.

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

The Exporter needs to examine the size of text, rectangles, and slices in order to produce correct spacing between elements, and to decide where logical columns and rows should go. It's very important to pay attention to these object boundaries to ensure that you help the Exporter make the right choices for your desired end result.

Text blocks can sometimes be a bit deceiving, in that the rectangle area may be much larger that the text, so that two objects may overlap (see Figure 7).

Figure 7. Example of the hidden overlap of two objects

As you can see, the text block overlaps the slice. So, from the Exporter's perspective, it is not clear that these two objects should be HTML block elements that are placed next to each other.

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

In general, you should adjust or reposition your exportable objects (text, rectangle, slice) to avoid overlap with each other. Figure 8 shows you how to do this with a small adjustment to the text object's width.

Figure 8. Adjusting the width of the text object to avoid overlap

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

It should be clear to the Exporter where logical rows and columns exist. This simply means that if the Exporter can "see" a place for a row or column, then this helps the Export engine make the right choices. Figure 9 shows a typical web page layout with a header area, three columns, and a footer area for the copyright notice and related information.

Figure 9. Sample web page layout with three columns, a header, and a footer

If you are familiar with HTML, you should recognize that the middle blocks clearly require a three-column layout, where each column should expand vertically if more content is added to it, and that 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/developer because it is possible to see where vertical or horizontal logical partitions should go (see Figure 10).

Figure 10. Logical vertical and horizontal partitions

SmartCSS works much the same way. It looks for these logical partitions, where a clear line of sight can be placed between objects or groups of objects.

First, the Exporter will look for logical row splits that can intersect from left to right. For each row that it identifies, that row is divided into columns. In Figure 10, three rows could be identified, and then three columns were found in the middle row.

Fortunately, the design in Figure 10 allows you to get the perfect result from that process, but it helps to know something else. Say, by coincidence, your design looks like the one in Figure 11.

Figure 11. Variation of the three-column layout with a header and footer

As the Exporter first scans for rows, it could identify four rows (see Figure 12).

Figure 12. Explorer identifies four logical rows in the variation of the layout

This is because there is a clear line of sight across the middle. Although this should export fine, any dynamic content added to the upper middle section could push everything in the lower middle row down, which is not what you want.

The solution is to block the line of sight across the middle section by placing a rectangle around one of the columns (use the middle column here). Make this rectangle invisible (the same color as the background color) if it infringes on your design. Figure 13 shows how you can add a container rectangle (marked in blue) to clearly identify this as one column.

Figure 13. Adding a container rectangle to identify the middle section as a single column

Note: You do not need to have big gaps between rows and columns, like I have used in my examples 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 any overlap between your rows and columns!

Figure 14 shows how using the ruler guides in Fireworks to mark columns and rows for your design will help keep things in line.

Figure 14. Using ruler guides in Fireworks to identify rows and columns

Rule 4: The document is treated as two-dimensional

This isn't so much a rule as a timesaver. One of the approaches I considered for creating nested HTML elements was to use layers and sub-layers to define a parent–child relationship hierarchy, but that process seemed a bit time-consuming to me, so I decided on another approach that requires less effort.

Tip: Treat the design as a flat two-dimensional document, for which the SmartCSS Exporter figures out parent–child nesting for you.

To explain what this means, look at the layout in Figure 15.

Figure 15. SmartCSS takes care of parent–child nesting of objects

As you can see, the text block and the image slice are both visually inside the rectangle. SmartCSS detects this and makes them children of the rectangle, thus saving you the effort of manually reorganizing your Fireworks layers.

It is worth remembering that children elements of a rectangle are scanned for logical rows and columns in the same way as the page (Rule 3)—that is, scanned for rows, then scanned for logical columns in each row.

Well, that's all you really need to know to have your designs correctly convert to HTML in such a way that it behaves the way you want it to.

Page 2 of 3

Previous Page

Next Page