Prebuilt CSS templates in Fireworks CS4

Adobe Fireworks CS4 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 CS4.

Requirements

In order to make the most of this article, you need the following software and files:

Fireworks CS4

• Try
• Buy

Dreamweaver CS4 (or favorite HTML editor)

• Try
• Buy

Updated CSS Export Script and HTML components

• css_export_fwcs4_v2.zip (ZIP, 660K)

Sample files:

• css_templates_fwcs4.zip (ZIP, 4.8 MB)

Prerequisite knowledge

Read John Wylie's article, Exporting CSS and images in Fireworks CS4, to understand the basic principles of how to design for and use the CSS Export feature.

Using the templates

To complement the CSS Export feature in Fireworks CS4 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.

Figure 1. Prebuilt templates showing valid CSS designs in Fireworks CS4

Exporting the templates

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.

Modifying the exported templates

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

About the "standard versions"

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 CS4, and note the differences that their respective exports produce.

Where to go from here

Read my companion article, Creating standards-compliant web designs with Fireworks CS4, 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.

About the author