The World Wide Web Consortium (W3C), along with other groups and standards bodies, has established technologies for creating and interpreting web-based content. These technologies, which we call "web standards," are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the web.
— The Web Standards Project

For years, Fireworks has played a huge role in my workflow from design to finished page. However, there was an obvious gap where I had to manually write the markup and CSS after slicing and exporting the relevant images. The Fireworks CS4 team realized this obstacle and set out to address the issue with its CSS Export feature.

When it was announced that Fireworks CS4 would be capable of exporting designs as XHTML and CSS, I was excited but also a little sceptical. Although using CSS is a huge leap forward—and it is a very powerful buzzword in the industry today—it is not the answer to creating the perfect website. Many bad CSS websites exist today. The real answer is in web standards.

Web standards are the future. If you're not using web standards already, now is the time to start. Here are a few of the benefits from using web standards:

• Simplified and lower cost of development and maintenance
• Continued compatibility with current and future web browsers
• Improved accessibility to more people and more Internet devices
• Opportunity for increased search engine rankings

Unfortunately, my initial scepticism regarding the CSS Export was well-founded. Although an effort had been made to export CSS-based web pages, the semantics, accessibility, and simplified development had been overlooked slightly.

As a Fireworks and web standards evangelist, I decided to work with the Fireworks team to help produce an enhanced version of the CSS Export feature, which empowers you create better, standards-compliant web pages. Here is a list of the main things that have changed in this enhanced version:

• Creating semantic markup is made easier by tagging text objects
• All font sizes are created using percentages, to allow for user text resizing in all devices and browsers
• Div elements with heights now also have a min-height equivalent to allow for varying amounts of content and user text resizing
• Multiple paragraph elements are now created from a single text object where appropriate, as opposed to using breaks
• There is an improved, more flexible library of HTML component symbols, including a List Item symbol to create unordered lists
• Divs with all border placements and sizes now output at the correct size and positioned more correctly

There are many more bug fixes and enhancements too.

This article demonstrates how to use the enhancements to the CSS Export feature so you can create standards-compliant designs.

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 file:

• smolder_sample_fwcs4.zip (ZIP, 1 MB)

Prerequisite knowledge

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

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 4

Next Page

About the author