Fireworks Article

Export CSS painlessly from website comps in Fireworks

Exploring the extension's magical features

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.

Figure 16. Web page with a basic left-navigation menu

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

Figure 17. Bounding areas of individual menu items

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

Figure 18. Placing a slice over each menu item

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

Figure 19. Including _csslink in the name of each slice

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

Figure 20. Using the Properties dialog box to set the link for each slice

That's it!

Gradient and pattern fills

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

Figure 21. Gradient fill that can be included in an export

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

Figure 22. Using a slice image of the gradient fill as a repeating background

In SmartCSS, you can easily reproduce this trick:

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

   

   Figure 23. Placing a slice across the gradient to get a repeating background

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

   

   Figure 24. Including _csspattern in the name of the slice

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

Figure 25. Placing the slice in the direction of the gradient to retain the fill direction (x or y axis)

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

Figure 26. Exporting a pattern that repeats across the x and y axes

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.

   

   Figure 27. The rectangular gradient fill to be stylized

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

   

   Figure 28. Stylizing the rectangular edge

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

   

   Figure 29. Completing the stylization by placing a slice over the end

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

Figure 30. Completed stylization of the rectangular gradient fill

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.

Figure 31. Horizontal menu bar using vertical lines as separators

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

Figure 32. Keeping the text objects separate from the line objects, and both within the gradient fill of the navigation bar

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

   

   Figure 33. Selecting the vertical lines that will be given a dotted effect

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

   

   Figure 34. Using the Properties dialog box to apply the dotted line effect

   Figure 35 shows you what they look like now.

   

   Figure 35. Vertical lines given a dotted effect

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.

Figure 36. Rounded rectangle with drop shadow as a design alternative

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

Figure 37. Isolating an image from the top of the rectangle

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

Figure 38. Isolating an image from the bottom of the rectangle

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

Figure 39. Isolating an image from the middle of the rectangle

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.

Figure 40. Placing the three slices to have SmartCSS create the round-edged rectangle with a drop shadow

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

   

   Figure 41. The top corners of the rectangular object must be inside the top slice

   

   Figure 42. The bottom corners of the rectangular object must be inside the bottom slice

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

Figure 43. Stylized rectangle and navigation bar

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.

Figure 44. Example of text wrapping when exporting to HTML

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

   

   Figure 45. Identifying the widest gap in the rectangle

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.

Page 3 of 3

Previous Page