Export CSS painlessly from website comps in Fireworks

Additional Requirements

SmartCSS

• Learn more

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

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.

To use SmartCSS effectively, it is important to understand four simple rules for positioning and sizing your design objects:

1. Only text, rectangles, and image slices are exported.
2. Text, rectangles, and image slices are treated as rectangular blocks.
3. The Exporter must be able to see where columns and rows of objects exist.
4. The document is treated as two-dimensional.

I'll explain each of these rules in depth.

Rule 1: Only text, rectangles, and image slices are exported

Although this may seem to be a limiting factor, especially considering the wealth of shapes and effects that Fireworks can produce, these are the only objects that can be represented in HTML. Rather than let this limitation restrict your creativity or toolset, you can simply use an image slice, as demonstrated in Figure 2.

Simply place an image slice over the area to export just a single image (see Figure 3).

I have named the slice CorpLogo; this will be used as the filename of the exported image.

Note: The only images that are exported are slices. Any other image in the document is ignored, unless it has a slice over it. Figure 4 shows a simple document with an embedded image object.

The Exporter cannot "see" the image without a slice. Figure 5 shows what you might see this in the exported HTML.

Solution: A slice to tell the Exporter where the image is (see Figure 6).

Rule 2: Text, rectangles, and slices are treated as rectangular blocks

The Exporter needs to examine the size of text, rectangles, and slices in order to produce correct spacing between elements, and to decide where logical columns and rows should go. It's very important to pay attention to these object boundaries to ensure that you help the Exporter make the right choices for your desired end result.

Text blocks can sometimes be a bit deceiving, in that the rectangle area may be much larger that the text, so that two objects may overlap (see Figure 7).

As you can see, the text block overlaps the slice. So, from the Exporter's perspective, it is not clear that these two objects should be HTML block elements that are placed next to each other.

Tip: Use Select All Objects in Fireworks to see all the objects' bounding rectangles.

In general, you should adjust or reposition your exportable objects (text, rectangle, slice) to avoid overlap with each other. Figure 8 shows you how to do this with a small adjustment to the text object's width.

Rule 3: The Exporter must be able to see where columns and rows of objects exist

It should be clear to the Exporter where logical rows and columns exist. This simply means that if the Exporter can "see" a place for a row or column, then this helps the Export engine make the right choices. Figure 9 shows a typical web page layout with a header area, three columns, and a footer area for the copyright notice and related information.

If you are familiar with HTML, you should recognize that the middle blocks clearly require a three-column layout, where each column should expand vertically if more content is added to it, and that the footer block should move down if the columns grow in height and need more space. This is fairly obvious to the eye of a web designer/developer because it is possible to see where vertical or horizontal logical partitions should go (see Figure 10).

SmartCSS works much the same way. It looks for these logical partitions, where a clear line of sight can be placed between objects or groups of objects.

First, the Exporter will look for logical row splits that can intersect from left to right. For each row that it identifies, that row is divided into columns. In Figure 10, three rows could be identified, and then three columns were found in the middle row.

Fortunately, the design in Figure 10 allows you to get the perfect result from that process, but it helps to know something else. Say, by coincidence, your design looks like the one in Figure 11.

As the Exporter first scans for rows, it could identify four rows (see Figure 12).

This is because there is a clear line of sight across the middle. Although this should export fine, any dynamic content added to the upper middle section could push everything in the lower middle row down, which is not what you want.

The solution is to block the line of sight across the middle section by placing a rectangle around one of the columns (use the middle column here). Make this rectangle invisible (the same color as the background color) if it infringes on your design. Figure 13 shows how you can add a container rectangle (marked in blue) to clearly identify this as one column.

Note: You do not need to have big gaps between rows and columns, like I have used in my examples here. As long as a straight line of sight can be followed between objects, there can be a zero pixel gap. Just watch out for any overlap between your rows and columns!

Figure 14 shows how using the ruler guides in Fireworks to mark columns and rows for your design will help keep things in line.

Rule 4: The document is treated as two-dimensional

This isn't so much a rule as a timesaver. One of the approaches I considered for creating nested HTML elements was to use layers and sub-layers to define a parent–child relationship hierarchy, but that process seemed a bit time-consuming to me, so I decided on another approach that requires less effort.

Tip: Treat the design as a flat two-dimensional document, for which the SmartCSS Exporter figures out parent–child nesting for you.

To explain what this means, look at the layout in Figure 15.

As you can see, the text block and the image slice are both visually inside the rectangle. SmartCSS detects this and makes them children of the rectangle, thus saving you the effort of manually reorganizing your Fireworks layers.

It is worth remembering that children elements of a rectangle are scanned for logical rows and columns in the same way as the page (Rule 3)—that is, scanned for rows, then scanned for logical columns in each row.

Well, that's all you really need to know to have your designs correctly convert to HTML in such a way that it behaves the way you want it to.

As mentioned earlier, this Exporter has some nice tricks up its sleeve:

• Creating text hyperlinks
• Gradient and pattern fills
• Curved or shaped rectangles
• Lines
• Dot-dash
• 3-slice
• Float left, float right

Text hyperlinks

Previously, it was possible only to export image slices as HTML hyperlinks in Fireworks. This is great for mockups but at a production level, you often prefer text links. SmartCSS export gives you a facility to export text links, and here is how you do it.

Figure 16 shows a simple left-navigation menu.

If you select each of the text objects, you can see the bounding areas (see Figure 17).

Next, you need to place a slice over each of them (see Figure 18).

Note: The slice must cover at least 75% of the text object.

You also need to modify the name of each slice to include _csslink, just to let the Exporter know that this must be exported as text (see Figure 19).

Finally, set the link URL for each slice using the Properties dialog box (see Figure 20).

That's it!

Gradient and pattern fills

A nice effect is the gradient fill, like the one in Figure 21.

One way to include this effect in an export would be to place a slice completely over the area and export it as a bitmap. However, a professional CSS designer would probably spot a better way of doing this (an optimization) by taking a thin slice from the image and using it as a repeating pattern background of the rectangle.

If you take a thin slice from the above gradient fill, you notice that the pattern can repeat horizontally and still look the same (see Figure 22).

In SmartCSS, you can easily reproduce this trick:

1. Place a slice across your gradient (see Figure 23).

2. Modify the name of the slice to include _csspattern (see Figure 24)

That's all you have to do. The pattern will become a repeating background image for the rectangle.

Note: The pattern is actually repeated in both x and y directions in the CSS output, so if your gradient is horizontal, place the slice horizontally (see Figure 25).

If you have a pattern that repeats in both axes, just grab a section you wish to repeat (see Figure 26).

Curved or shaped rectangles

Sometimes you want something a little different than sharp-cornered rectangles all the time, so here's how to do this in Fireworks with SmartCSS:

1. Start with a rectangle object (see Figure 27). Here you want the gradient-fill rectangle to have a different edge.

2. Using the path object (with a fill color), stylize the end (see Figure 28).

3. Place a slice over the end (see Figure 29).

That's it! Figure 30 shows you the stylized image.

In the HTML and CSS output, a rectangle will be produced with a small image placed in the corner.

Lines

OK, time to confess: To keep things simple, I told a little white lie when I said that only text, rectangles, and slices are supported. SmartCSS supports the exporting of lines, too. Horizontal and vertical lines are handy design elements. In Figure 31, vertical lines have been used to separate items in a menu navigation bar.

So long as the line is horizontal or vertical, it will be converted into a rectangle, where just one side of the rectangle is visible. The same rules apply here. Make sure that the text objects don't overlap the line objects. Also, keep them within the rectangle of the gradient-filled navigation bar (see Figure 32).

Tip: Select all the elements to see their bounding rectangles.

Dot-dash

You want SmartCSS to use the facilities that both CSS and Fireworks can support. Fortunately, both dotted and dash lines are supported.

To make your vertical lines have a dotted effect:

1. Select the lines (see Figure 33).

2. Use the Properties dialog box to change the lines to dotted (see Figure 34).

Figure 35 shows you what they look like now.

That's it! The lines will now export as dotted lines in the HTML. Dashed lines are supported as well, and can also be used on rectangles.

3-slice

What if basic rectangles are not enough? Say, you want a rounded rectangle with a drop shadow like the one in Figure 36.

You can't simply take slices from the edges because you want the box to expand vertically should more text or other content be added to it, so you want the sides to stretch for you.

A trick that designers often use to achieve this effect—which works properly across different browsers—is using three images inside a border-less rectangle. The designer first isolates one image from the top (see Figure 37).

Next, the designer isolates an image from the bottom (see Figure 38).

Finally, the designer isolates one additional thin slice from the middle (see Figure 39).

This middle slice is used to create a repeating pattern for the background of a HTML rectangle, which allows the height of the rectangle to expand if more content is added.

The designer then takes these images and creates an HTML element (<div>) of exact width, inserts the top and bottom images, then modifies the properties of the <div> to repeat the middle-slice image as its background.

How can you do this in Fireworks with SmartCSS? Simple. Just place your three slices (see Figure 40), and that's it. SmartCSS knows what you are trying to do here.

Just ensure you have done the following:

1. Make sure the top and bottom corners of your rectangle object are inside the top and bottom slices (see Figures 41 and 42).

2. Make sure that all three slices are the same width.
3. Place the center slice where it can take a clean snapshot of the repeating background.

Float left, float right

Earlier I described a navigation bar and showed you how to modify the rectangle. With this, you have some styling on the left, plus some text and line objects on the right (see Figure 43).

One problem with exporting to HTML is that different browsers and operating systems have differently sized fonts, which could result in the combined width of the text blocks on the right exceeding the width of the design, which would look wrong. Even worse, text blocks could wrap around outside the navigation bar completely and push other elements on the page downwards, and look something like the example in Figure 44.

Rather than have this happen, what you need here is some way of accounting for variable-width text blocks. In this example, you would rather have the Home | About | Products | elements shift to the left if Contact were a few pixels wider than you anticipated.

This is achieved in HTML by using the CSS float property. By floating the elements right, they stack up on the right hand side, and this keeps the design looking OK, without wrapping. But you also want that little image in the left corner to stick to the left corner, so you need to float it left.

The good news is that SmartCSS automatically floats elements left or right. so you don't have to worry about this. Everything has been taken care of, so this design will export just fine. But it could be handy for advanced users to know how SmartCSS decides what to float left and what to float right. Let me explain how it works:

1. The widest gap in the navigation bar rectangle is identified (see Figure 45).

2. Everything to the left of the widest gap is floated left.
3. Everything to the right of the widest gap is floated right.

Where to go from here

SmartCSS is a revolutionary new way to get your website from design to live in record time without having to code your CSS by hand. I hope this is as exciting and useful to you as it is to me. All you need to know to get the best from SmartCSS is in this article.

Need more features? SmartCSS-Plus is an upgrade pack to SmartCSS that offers even more features and enhancements, such as support for HTML forms. You can purchase this add-on from my website when it becomes available.

If you have any comments or suggestions for features or improvements, you may also contact me via the contact form on my website.