Prebuilt CSS templates in Fireworks

Adobe Fireworks CS4 (and later) ships with an essential new feature: the ability to export XHTML and CSS web documents directly from your existing designs. Since its release, however, this feature has had significant updates and fixes made to it (see the following link to the updated CSS export script).

This article explains how you can use the supplied sample PNG templates to ensure that you make the most of the CSS Export feature in Fireworks.

To complement the CSS Export feature in Fireworks and assist designers and developers as they venture into the world of semantic XHTML and CSS, I created a series of prebuilt templates that are ready for export, and a perfect tool to help get to grips with designing with CSS in mind.

Within the css_templates_fwcs4.zip file, there are five template variations in two flavors—one suitable for exporting from the shipping version of the CSS Export feature and the other for the enhanced version of the export feature.

Note: Attempting to export templates which are not suited for a particular version of the CSS Export may result in errors or other irregularities.

Here are the templates we have included:

• 960-wide-2-col-with-side-nav.png: Two-column with header (using background images), side navigation (using three-slice technique), footer, content area, and three foreground images
• 960-wide-2-col-with-top-nav-and-side-nav.png: Two-column with header (using background images), top navigation, side navigation (using three-slice technique), footer, content area, and three foreground images
• 960-wide-2-col-with-top-nav-and-sub-col.png: Two-column with header (using background images), top navigation, sub-column (using three-slice technique and form components), footer, content area, and three foreground images
• 960-wide-3-col-with-side-nav-and-sub-col.png: Three-column with header (using background images), side navigation (using three-slice technique), sub-column (using three-slice technique and form components), footer, content area, and two foreground images
• 960-wide-3-col-with-top-nav-side-nav-and-sub-col.png: Three-column with header (using background images), top navigation, side navigation (using three-slice technique), sub-column (using three-slice technique and form components), footer, content area, and two foreground images

As you can see, the templates cover a variety of the most common web layouts, adhering to standard design patterns ready for you to experiment with and learn from for your own projects (see Figure 1). These templates are designed to be 960 pixels wide, which is the optimal width for users with a monitor resolution of 1024 × 768—the most common used at the time of this writing.

First ensure that you have downloaded the Updated CSS Export Script and HTML Components ZIP file, and followed the instructions to put its contents in place.

Open one of the "enhanced" templates from the prebuilt CSS templates file (css_templates_fwcs4.zip) and export as CSS and Images by selecting File > Export. This will output a corresponding XHTML and CSS file, and various images to the directory of your choice.

Upon exporting one of these templates, you will be required to make a few manual modifications to ensure that standards compliance is met, and that the template built is as flexible as possible. I hope you'll agree that making these minor changes involves very little effort indeed, especially when you consider how much time the CSS Export feature already saves you.

To modify the XHTML and CSS that Fireworks exports, I recommend using Adobe Dreamweaver CS4 and later. However, it is important to note that if you open the XHTML page in Design view, the design may not appear as intended. Instead, use the Live View feature in Dreamweaver or use a standards-compliant browser such as Firefox or Safari to preview the markup as you make edits.

The following are just the bare minimum modifications that are required to create valid documents. When you feel capable enough with modifying XHTML and CSS, you can go even further and simplify the style sheet rules and markup to produce an even higher quality result. Just remember that Fireworks did most of the hard work for you!

Changes to templates using side navigation

Remove the <div class="clearFloat"></div> tags from between the side navigation <li> tags and apply a class="clearFloat" attribute to each <li> tag to ensure proper validation and your intended layout.

In the style sheet, remove the height and min-height rules applied to the #sub_nav_col div so that the layout can accommodate any amount of content.

Give each side navigation <li> tag (#Side_Nav_Item_X) a width of 171 pixels (190-pixel side nav width, 19-pixel left margin on <li> tags) so that Microsoft Internet Explorer renders them correctly.

Create faux columns by adding a background-image on #content_wrapper that is the same color and width as the side-navigation, and repeats on the y-axis.

Changes to template using the subcolumn

Give the two field <label> tags an appropriate for attribute to associate them with their relevant text inputs.

The original CSS Export script in the shipping version of Fireworks CS4 lacked certain functionality in various areas. The extra effort required to produce valid, flexible XHTML and CSS is far greater than desired. I therefore do not recommend that you use the "standard versions" of these templates; they are supplied purely for legacy reasons.

Even so, you may find it an interesting exercise to compare how the various templates were created in Fireworks, and note the differences that their respective exports produce.

Read my companion article, Creating standards-compliant web designs with Fireworks, to learn how to use the enhancements to the CSS Export feature for your web design work.

Also be sure to visit the CSS Topic Center to learn how to work with CSS.