Fireworks Article

Export CSS painlessly from website comps in Fireworks

This article discusses a new export extension for producing HTML files with CSS in Adobe Fireworks CS3. With this extension, you will be able to generate usable, production-ready HTML and CSS files with ease.

I will discuss the SmartCSS Exporter in depth to allow you to get the best results. Be prepared for increased productivity levels, as web page production now shifts into high gear.

Current website development process

The current development cycle for designing production-ready web pages goes something like this:

1. Design the page using Fireworks.
2. Take image slices from the design using Fireworks.
3. Use Adobe Dreamweaver (or even do hand-coding with a text editor) to recreate the design using CSS and HTML.

Oh my, this does sound like a duplication of work. Why is it done this way?

Delivering a page that is just one big bitmap is perfectly acceptable for a mockup, but if this were delivered as a finished web page, it would be both slow to download and likely to be considered unprofessional. Your clients would probably not be too impressed if you delivered six bitmaps as a finalized six-page website!

It is also likely that your design will need dynamic content (either edited by a tool such as Adobe Contribute, or generated by the server and database). As a result, you need the page to have the ability to expand vertically if more text or other content is added to it, without disrupting the page design.

The process of slimming down a design and making it less graphically oriented, while allowing the content to expand, is done using CSS and HTML. CSS is a standard way of declaring visual properties to HTML. It was designed with the aim of separating the design markup from the content, which is a good thing, as having everything all mixed up in the HTML code was both messy and troublesome. So, in recent years, producing a CSS version of a design has become a necessity in the workflow of commercial web design.

The ideal objective of CSS was total separation, but in many cases web designers do not get away completely from including some strategically placed <div> elements in the HTML code in order to get the page behavior they need and also match the design. Some may enjoy the extra work involved in converting a page design into something ready to upload to the live site. Personally, I don't have the time to do many CSS reconstructions, even though I have a solid understanding of CSS.

Wouldn't it be nice if you could simply create your designs in Fireworks and then, with a click of a button, your page would be converted into production-ready HTML and CSS?

Introducing SmartCSS

SmartCSS analyzes the structure of a Fireworks document and produces the necessary CSS and HTML source code. It has a few nice tricks up its sleeve, too. Here are some of its basic features:

• Less image-centric document output
• Text output with size, font, color, line spacing, alignment and justified text
• Rectangles converted to HTML <div> blocks, and maintain border and fill styles
• Support for image slices
• No absolute positioning, allowing resizable pages that can handle dynamic content
• Support for design patterns (tricks) used in modern web design
• Cross-browser–friendly code

The motivation for creating SmartCSS was simple: it is something I would really like to use myself.

To use SmartCSS:

1. Install the extension, SmartCss.mxp.
2. Select Export from the File menu.
3. In the Export dialog box, ensure that CSS Layers (.htm) is selected in the Export field, and Fireworks Slices is selected in the Source field (see Figure 1).
4. Click Export.

Read on to learn more about how to use this extension.

Figure 1. Choosing Export and Source options in the Export dialog box.

Requirements

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

Fireworks CS3

• Try
• Buy

SmartCSS

• Learn more

Note: Windows Vista users will need to run Extension Manager in administrator mode in order to install the extension properly.

Sample files:

• smartcss_demo.zip (ZIP, 455K)

Prerequisite knowledge

A basic understanding of using Fireworks and HTML.

Page 1 of 3

Next Page

About the author