Producing a standards-compliant layout

When combining the techniques covered in this article, you can produce professional, standards-compliant results, such as the sample project, called Smolder, which is a generic blog post template design. Download the archive containing the sample file:

• smolder_sample_fwcs4.zip (ZIP, 1 MB)

and then open the file smolder.fw.png in Fireworks CS4 (see Figure 14).

Figure 14. Standards-compliant blog template design, Smolder

The following describes how I planned this design, and what else you can do in Dreamweaver after exporting it to produce the perfect result:

• Notice that there are 15 slices. Some are foreground images, most are background images, and a few utilize the 3-slice technique.
• The layers and objects in the document are organized and named. This not only makes it much easier to work with the file, but also produces meaning names for your elements after export.
• The navigation consists of a background-sliced rectangle, three List Item symbols to form an unordered list of links, and a TextField and Button HTML symbol.
• The Content layer has been divided in to columns: Content Col and Sub Col.
• Both Content Col and Sub Col contain a transparent-filled rectangle, which encompasses both columns, in order to logically group the elements for export.
• The post's content consists of tagged heading and paragraph text objects.
• The post's footer consists of a background-sliced rectangle, four HTML Link components, and two foreground-sliced symbols.
• The comments area consists of another background-slice rectangle, some tagged headings, foreground slices, an HTML Link symbol, and some text objects.
• The comments form consists of a foreground-slice, a tagged heading, multiple text objects tagged as labels, and TextField, TextArea, and Button HTML symbols.
• The sub column consists of two 3-sliced rounded rectangles, which contain tagged headings, HTML Link symbols, and 1px-high rectangle dividers.

Some of the objects, especially the Link symbols, are not aligned correctly. They mostly appear too high. This is because the export process does not take into account the elements' default line-height; their margin-top is too big. The workaround is simply to nudge the elements prior to export, as I did, or to adjust their styles manually in the CSS after exporting.

If you export the file as CSS and Images, you will see that it has been replicated almost perfectly (see Figure 15). I'm sure you'll agree that this is quite an accomplishment for Fireworks. Not only does it look the same, but it also passes as perfectly valid XHTML and CSS, when validated using the W3C validation tools.

Figure 15. Exported version previewed in Firefox; look familiar?

To see how Fireworks performs in producing semantic markup, you can remove the style sheet (either manually or temporarily in your browser). The markup is almost perfectly semantic, nicely structured, and suitable to be used and restyled for any number of different browser devices (see Figure 16).

Figure 16. Unstyled, mostly semantically correct markup

Making design improvements

Now that you have exported it, how could you manually improve it in Dreamweaver? Here are some ideas I have, starting from the top of the document to the bottom:

• Re-export the header logo and background, and image replace the logo as a heading tag.
• Change the navigation to make the anchor styles more generic and cater to current-page styles as well.
• Place the Search elements in a fieldset, float it right, and float the text box and button left. To produce the two elements floated side-by-side to the right means that the order of the elements in the markup is reversed.
• Create a label for the search text box, but hide it for normal screen users.
• Remove the height/min-height combo on the Content Col and Sub Col divs to allow for any size content.
• Remove the floats on the tagged content headings, and remove the clearFloats that follow.
• Change the post's footer links to an unordered list also, and set the icons as background images of the anchors.
• Change the posted comments section to use classes instead of IDs, as it will need to accommodate more than one comment.
• Wrap the comments form in a fieldset, and give each label an appropriate attribute for their corresponding form controls.
• Turn the Sub panels into classes so that only one style is needed, and replace the list of links with an unordered list.
• Simplify the CSS rules by removing the majority of font-family and color references. Assign them to the body instead.

To me, that's not really that much of an effort, knowing that Fireworks has already saved me several hours of good work.

Where to go from here

The CSS Export feature does have some notable omissions. It is not yet a one-click web design and build solution for every web designer. However, there's no denying the amount of effort that was put into this feature, and its ability to increase the professional designer's efficiency with the initial design-to-HTML phase. No other product exists that can match Fireworks in this area.

As a professional web and user interface designer, I would say that my list of top issues to address with the CSS Export feature as it exists today are as follows:

• All elements are floated, which produces the need for the regular use of a clearing mechanism. This feature currently opts for a clearing div, which is foolproof but not semantically correct.
• There is currently no method of creating block-level anchors.
• You cannot assign a background to anything other than a div.
• Unordered lists cannot have dividers, or be arranged vertically without producing invalid marlup.
• Image replacement of elements is currently not possible.

Notice how I say "currently." Because the CSS Export feature is easily customizable, I would urge anyone who is interested to help improve it and share their updates with the community. Feel free to offer suggestions for improvements by contacting me directly or posting on the Fireworks support forum or Fireworks Guru Forum site. The Fireworks team, John Wylie, and myself could help assist you. We would definitely appreciate the effort!

For more information on web standards, visit the World Wide Web Consortium (W3C) and the Web Standards Project.

Page 4 of 4

Previous Page