Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design

  • Print
  • + Share This
From the author of

One real snag in previous versions of Fireworks was its lackluster CSS export options. Fireworks still seemed trapped within the confines of table-based HTML design. The Fireworks public beta has significantly enhanced CSS and HTML export features via a new export option: CSS and Images. Choosing this export option outputs standards-compliant CSS and HTML based on your design.

Bear in mind, though, that this isn't a completely wizard-driven, magical solution to all your CSS woes. The designers of the Fireworks public beta assume that you have a decent grasp of CSS. And you'll need it, because you have to tell Fireworks which graphical elements are to be inline images or background images, and whether those background images will repeat in the web page design. You designate these differences by applying slices to the images and setting the type of image in the Property inspector.

You can even employ a three-slice technique to create an expandable container, as shown on the left side of Figure 19.

Here's the lowdown on how the Fireworks public beta handles CSS and images export. CSS export detects overlapping elements (slices or objects) and exports the design as absolutely positioned divs, so try to avoid overlapping slices or objects if possible, unless you prefer an AP-based layout. If elements don't overlap, the layout is exported using proper CSS floats, padding, and margins, based on user input and designation of slice types.

Text is also styled and exported as text. (At this point in the beta, each paragraph is given a div ID; I hope to see that changed to classes eventually.) Notice the selected text in Figure 20, captured from my Firefox browser.

You also can designate divs manually by drawing a rectangle around elements in the design. Be sure to name the rectangle so it's easy to locate the specific divs in the external style sheet and HTML. Figure 20 shows the Fireworks design exported and displayed as a relatively positioned CSS-based layout, within Firefox.

  • + Share This
  • 🔖 Save To Your Account