Exporting CSS with Fireworks CS4

Additional Requirements

Fireworks CS4 (including Fireworks CS4 10.0.3 updater)

• Try
• Buy
• Get the updater

Note: The Adobe Fireworks CS4 10.0.3 updater greatly improves stability for users running Fireworks CS4 on both Mac OS and Windows. A number of issues have been addressed in this release, including bugs that caused text to shift.

Note: This article appeared originally in the Edge newsletter.

Adobe Fireworks CS4 is a great tool for website design. The basic HTML export functionality has always been a huge timesaver because you can export your design as an HTML page with the image files inserted in a table layout in seconds. These days, many web designers prefer to use CSS layouts instead of table-based layouts. This article reviews the process of exporting a Fireworks design using the new CSS export feature, and shows you a clever method of directly controlling the final layout.

In the past, you may have used Fireworks to generate site files; but to implement a CSS style sheet that controls the site layout, you had to export the site files from Fireworks and then manually edit the HTML file in Adobe Dreamweaver to add the CSS styles. This workflow had some disadvantages: the final version of the Dreamweaver site no longer reflected the original PNG file created in Fireworks, and you had to manually insert subsequent design changes into the page using Dreamweaver, instead of referring back to the master Fireworks document.

Fireworks CS4 includes a new CSS export feature that enables you to export page designs using CSS positioning. Fireworks generates all the HTML and CSS code with minimal effort, and you can now make changes directly to the PNG file so that both the site and the master graphics remain in sync.

It's easy to use the new CSS export feature. Just choose File > Export and then select CSS and Images (.htm) from the Export pull-down menu. It's amazingly simple. The export engine reviews the page and identifies naturally occurring rows and columns in the design. These implied rows and columns are used to create the div tags that Fireworks adds to the CSS file. It works right out of the box, although there are some considerations and best practices you can follow to help Fireworks generate the CSS layout so that the page appears exactly the way you want.

If you've exported Fireworks pages as table-based HTML files, then you already know how to add slices. This article discusses another important element that is helpful for defining the regions of a page: rectangles. This strategy is extremely helpful if you have a complicated page design and you want to directly control the div layout instead of letting the CSS export engine define it for you.

CSS code uses a box model to define div tags, so it's only natural to use rectangles to define the areas that will create div tags in a Fireworks document. Let's use a culinary website to illustrate how the new CSS export feature works (see Figure 1). To follow along, download the sample file at the beginning of this tutorial.

Open the good_food.png file in Fireworks CS4 and review the design and slice elements. There are three slices: one above the top banner and two inserted over images. These three slices are named and configured to export the images as JPEG files.

Without turning on the visibility of the bottom Background layer, try exporting the PNG file to see how the CSS export engine interprets it. Choose File > Export and select CSS and Images (.htm) from the Export pull-down menu. Also enable the Put Images in Subfolder option (see Figure 2).

Click the Options button to access the HTML Setup settings. Select the General tab, make sure that the Page Alignment option is set to Center and click OK (see Figure 3). Click the Export button to complete the export process.

Open the good_food.htm page in Dreamweaver. In Design view, the dotted lines represent the div tags generated by Fireworks (see Figure 4).

Click Select the Best in the left column of text. Directly below the document window on the left side, you'll see the tag selector. The paragraph is wrapped in a div tag with the ID "colwrap1" which is nested inside a div with the ID "main" (see Figure 5).

Click the <div#main> tag in the tag selector to highlight the region. The #main div tag encompasses the entire top portion of the page (see Figure 6).

Now click the Green Pea Soup header in the center section. Use the tag selector to select the div tag with the ID "colwrap2" which defines the center section (see Figure 7). This example illustrates a typical three-column layout.

During the export process, the export engine scanned the Fireworks design looking for rows and columns of information. Based on the layout structure of the design elements, Fireworks mapped out the layout and created div tags to contain the different regions of the page. Fireworks CS4 did a really good job, especially considering that you haven't done anything except add three slices to export the image files.

Fireworks CS4 makes exporting CSS even easier than exporting a table layout because the export engine can successfully interpret the layout and generate the CSS style sheet without additional slicing. This is also a flexible structure because adding more content to the left or center column expands the height of the page. The design is working exactly as expected.

On your desktop, open the folder containing the exported image files. Notice that the banner graphic was exported with the filename top_banner.jpg, which matches the name of the slice that covers the banner in the Fireworks document. Using the slice properties to set the filenames and file formats makes it easy to convert a Fireworks design to a website with minimal effort (see Figure 8).

In Design view in Dreamweaver, place the cursor over the top banner. The Code Navigator (an icon of a ship's wheel) appears. Click the wheel icon. If you don't see the wheel icon, you can Control-Alt-click or Command-Option-click to access the Code Navigator (see Figure 9).

The Code Navigator displays the hierarchy of code elements that compose the top banner. Fireworks generated the div with the ID "top_banner" (to match the name of the slice) as well as a matching CSS style that contains information about the JPEG file's size and positioning.

Next, click the Home button in the navigation bar, and look at the tag selector. Fireworks created an individual div container for each of the menu buttons. Again, Fireworks matched the name of the elements within the design to create intuitive div tag ID names.

Access the Code Navigator again. Select the CSS style #bHome. It contains the div tag's background color, border, size, and margins. Fireworks gathered all the information from the rectangle shape that defined the Home button in the Fireworks document (see Figure 10).

The Fireworks CSS export engine interprets any rectangles that exist in the Fireworks design as div tags in the CSS code. Fireworks not only converts the graphic positioning to CSS code but also gathers relevant data (such as the text elements that exist above the rectangle shape). Even better, Fireworks names the div tags to match the rectangle's sublayer name, which means you do not have to add slices to specify the names of the CSS elements.

To better understand how Fireworks interprets graphic elements, switch back to Fireworks and click the featured button in the Fireworks design. The Property inspector displays the attributes for the rectangle—including a custom ID name that was automatically assigned to the rectangle object (see Figure 11).

Now that you've exported the generic Fireworks layout, let's explore how adding rectangles to your design in Fireworks enables you to control the CSS layout directly.

In the Fireworks Layers panel, click the empty box next to the bottom background layer, so that the eye icon appears. The three rectangles inside the background layer become visible.

Note: The rectangle shapes in the background layer were not previously exported because the layer was hidden. This is a good strategy for testing your layouts.

Choose File > Export to export the document again. Select CSS and Images (.htm) from the Export pull-down menu. In the dialog box, click Yes to overwrite the files.

In Dreamweaver, a dialog box now appears asking if you want to reload the file and view it in Design view. Click Yes.

In this new version (see Figure 12), the rectangles are displayed. Click Select the Best in the left column and see how the size, background, and border of the left column match the rectangle's settings.

The left column div tag also uses the ID "leftCol" which matches the rectangle's layer name (see Figure 13).

The paragraph in the right column is now contained in a div tag instead of a floating tag. The footer is also inside a div tag now. This example illustrates that by simply drawing a few rectangles you can control exactly where div tags are placed on the page. This strategy is extremely helpful if you have a complicated page design and you want to directly control the div layout instead of letting the CSS export engine define it for you.

The beauty of this approach is that you don't even have to create visible rectangles. To see how this works, return to Fireworks. Select the rectangle on the right side (underneath the recipe) and set its fill color to none. Re-export the files and return to Dreamweaver. Click the recipe and see that the div is still there—and its name matches the name of the rectangle—except now the border and background color controls have been removed from the CSS rules. In this case, the rectangle is only added to map out the area of the div in the CSS style sheet.

More tips and tricks

Use the Slice tool to define all the images that will be exported as separate image files. Right-click (or Control-click) each image, and choose Insert Rectangular Slice from the context menu that appears.

Select a slice to see its attributes displayed in the Property inspector. In the Type pull-down menu, you can choose between Foreground Image and Background Image. When you use the default setting (Foreground Image), Fireworks exports the image based on the dimensions of the slice and inserts the image in the HTML page normally. If you choose Background Image, Fireworks exports the image and generates the CSS rule to set the image as a background image of the containing div tag.

You can also set a slice to be HTML rather than a Foreground or Background Image. By setting an HTML slice, you are designating an area where ordinary HTML text appears in the browser. Fireworks exports the HTML text that exists in the area defined by the slice. HTML slices are useful for quickly updating website text without creating new graphics.

Note: You can choose either to type text in the Edit HTML Slice window and then format the text by adding HTML text-formatting tags, or you can export the slice as HTML and then apply text formatting tags to the text using Dreamweaver after you export the HTML page in Fireworks.

Avoid overlapping the rectangular shapes in your Fireworks document unless it is required for your design. The Fireworks CSS export functionality still works with overlapping elements, but it displays an alert during the export process and generates the CSS style sheet using div tags with absolute positioning.

Conversely, be sure to overlap the rectangular shapes of your design if you want to generate absolutely positioned div tag containers. This principle also applies to text elements; don't overlap them unless you want the CSS rules to use AP divs. Sometimes it can be difficult to see whether the text is overlapping. To make it easier to detect overlaps, choose Select > Select All while working in Fireworks to see the bounding boxes for all the text elements on the page.

Any visible elements of the rectangle shapes (such as the stroke and fill) will be included in the CSS rules for the corresponding div tag in the style sheet.

Remember that the names you enter in the Layers panel will automatically be used to assign the div tag ID names.

Where to go from here

Experiment with the new CSS export functionality by testing it with one of your own Fireworks documents. Try adding some rectangles and see what happens.

Check out the following resources to learn more about CSS methodology and using CSS with Fireworks CS4:

• Prebuilt CSS templates in Fireworks
• Creating standards-compliant web designs with Fireworks
• Exporting CSS and images in Fireworks
• Design Learning Guide for Fireworks
• Learn to work with CSS