Setting up a Fireworks web design mock-up for CSS and images export

Adobe Fireworks CS4 is a powerful graphic design tool to be used mostly for web design. Its excellent combination of vector/bitmap tools and live effects is unique in the web design world. But Fireworks is much more than that; it can also export a graphic design as images and (almost) valid CSS code—thus helping graphic designers or web designers create a working web page in a very short time. The output from Fireworks can be used then as a working demo, which could be presented to a client for approval (before the actual XHTML/CSS coding of the page will start) or as a good basis for the final web design code. In either case, the ability for Fireworks to create the CSS and slice the images automatically can be very useful.

So what will you learn in this tutorial?

First, I will list the key tools that can help you when preparing a Fireworks web design mock-up to go to the web. I'll review each tool in detail and will provide some examples. I will illustrate my work with graphic samples and screenshots. Second, I'll continue with a simple website design mock-up example (you will be able to open and deconstruct the PNG file, which is provided with this tutorial). Finally, I will review and help you optimize quickly the exported CSS/HTML code.

Background information

As a basis for my work, I have used my working experience with Fireworks CS4 and a variety of external resources, including one excellent Fireworks Developer Center article, Creating standards-compliant web designs with Fireworks CS4, by Matt Stow. You may want to check the article first, but don't worry—this is not obligatory at all, as I will guide you step by step in this tutorial.

The screenshots throughout the tutorial are made on Windows XP Professional. They should be very similar on Windows Vista and Mac OS X.The keyboard shortcuts are noted as in Windows, but if you are working on a Mac, simply substitute the Control key with the Command key, and Alt key with the Option key.

In case you are familiar with certain operations that I show in detail, you can safely skip some parts of the tutorial.Some sections in the tutorial have related sample PNG files, which you can study and deconstruct. To find them, unzip the ZIP file supplied with the tutorial. Inside, you will find two folders:

• Fw CS4 Updated Components
• Fw CS4 Tutorial Demo Files

Note: When you open the sample files, Fireworks may show you the Replace Fonts dialog box (see Figure 1). This is normal if Verdana is not installed on your system. (I used Verdana in all Fw PNG examples.) Verdana is one of the most widespread fonts, both on the Windows and Mac platforms, but if it's missing on your system, you can install it manually; or you could simply ignore the dialog box, as the examples will work even if the font is missing. Just select the option "Maintain Appearance"—this will keep the elements' position in the examples unchanged.

Before beginning this tutorial, you need to update two important components in Fireworks CS4: the CSS Export Script itself and the HTML library. You should also upgrade to the latest version of Fireworks CS4.

Updating two components in Fireworks CS4

Both the CSS Export Script and the HTML library in Fireworks CS4 have updated versions (created by Matt Stow). You should use the contents of the Fw CS4 Updated Components folder in the ZIP archive provided with this tutorial.

First, update the CSS Export script in Fireworks. Navigate to Fireworks' HTML Code folder and rename the file CssLayers.htt to Old_CssLayers.htt.

Windows:

C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\HTML Code\CssLayers.htt

Mac OS:

[User account]/Library/Applications/Adobe/Adobe Fireworks CS4/Configuration/HTML Code/CssLayers.htt

Copy and paste the new CssLayers.htt to the same location (the new file is in Fw CS4 Updated Components\CSS Export Script\CssLayers.htt). Your CSS Export script is now updated.

Next, update the HTML Symbols. Navigate to Fireworks' Common Library folder.

Windows:

C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\Common Library

Mac OS:

[User account]/Applications/Adobe Fireworks CS4/Configuration/Common Library

Create a new folder here called HTML Enhanced, then copy all PNG and JSF files from Fw CS4 Updated Components\HTML Symbols\HTML in the ZIP archive for this tutorial and paste them into the new folder you just created. You can now use the HTML enhanced component symbols and the Export to CSS and Images.

Updating to the latest Fireworks CS4

In May 2009, Adobe released a very important update to Fireworks CS4, version 10.0.3. I strongly recommend updating your copy of Fireworks. This update addresses several critical issues present in Fireworks CS4 (including the text-shifting bug). You can read more at the Fireworks Support Center.

The 10.0.3 update can be downloaded from the Support Center (both Windows and Mac versions are available) or you can use the Adobe Auto Updater. Here's how:

1. Open Fireworks CS4 and choose Help > Updates. Adobe Updater will open and, after a minute or so, it will present you with a list of available updates for your CS4 products. If you select Show Details (see Figure 2), you will see if the 10.0.3 update for Fireworks CS4 is included. (It will be, most probably.)

2. Close Fireworks CS4 (but leave the Adobe Updater open) and then click Download and Install Updates in the Adobe Updater. Wait for the update(s) to be installed. Adobe Updater will notify you when the updating process is finished.
3. Start Fireworks CS4 again and verify that the update was successfully installed. Choose Help > About Fireworks, and you will see the current Fireworks CS4 version—it should show now 10.0.3 (see Figure 3).

That's all, your copy of Fireworks was updated successfully!

Let's say you have created your amazing website design in Fireworks. It's still just an image of a website, a simple PNG file, and it's not yet close to the actual real-life website you would like to show to your client, even as a draft or mock-up, before the design goes into production phase. Or say you are a graphic designer and web designer at the same time, but your experience with CSS is rather limited and you'd like to get some external help to speed up things with code creation. In either case, Fireworks CS4 can help.

Here I will present to you a very simple web design mock-up, made in Fireworks. (You can find the PNG file in the folder: Fw CS4 Tutorial Demo Files\ex-12-design-mockup-demo.fw.png.) Figure 4 shows the website mock-up, made in Fireworks, with the main page elements—header, navigation, main_content, sidebar, footer—labeled in green.

The layout is very basic, but once you master the technique in such a simple example, it'll be very easy for you to prepare more complex website mock-ups in Fireworks, which you will export later as CSS code and images (see Figure 4).

Here are the key tools that you'll be using throughout this tutorial:

• Tagging of text elements: The optional tagging of text elements now enables you to output XHTML code with much more ease. Instead of using HTML symbols in certain cases, now you can simply tag a text block when you create it, and the XHTML code will be automatically created on output. There are 12 possible XHTML tags introduced with this feature.
• HTML (enhanced) symbols: With the new improved HTML symbols, you can now easily create links and unordered lists, and thus speed up your workflow.
• Background image slices: Now you can not only easily slice out images in Fireworks, but you can also define them as background images, with a variety of options, and this will greatly improve your XHTML/CSS code. The images are created/sliced automatically in Fireworks.

I'll review all these three features in great detail in the next sections. Once you master all of the tools to export a web design mock-up as CSS and Images, you'll be able to open, test and understand better the demo file provided at the end of the tutorial (ex-12-design-mockup-demo.fw.png).

This feature will enable you to tag text objects (by following a very simple naming convention) in such a manner that they will match the corresponding XHTML tags on output.The XHTML elements that can be automatically created from a text object are as follows: <div>, <span>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <a>, <blockquote>, and <label>. If you do not specify a tag, or if you specify a tag different from one of these 12 elements, Fireworks will simply produce a paragraph (<p>) and place it inside a <div> element—for better CSS layout compatibility.

When you want to specify that a text object should use a specific tag, name its beginning with the tag name, like this:

or like this:

Now you'll see how to put this knowledge into practice, by creating your first, very-easy-to-do example:

1. Create a new Fireworks CS4 document (File > New) and specify any size you wish—for example, make it 600 × 600 px in size (see Figure 5). Then save the document as Fireworks PNG file (use hello-world.fw.png as the filename).

2. Choose the Text Tool (see Figure 6) and click anywhere on the canvas.

3. Type Hello World (or any other short sentence).
4. You can now see that the text object you have just created is automatically named in Fireworks as "Hello World" in the corresponding layer in the Layers panel. Now you can rename it so that, on export, it will automatically create the tag <h1>.

   To change the name of the text object, first select it and then either double-click its name in the Layers panel (if the Layers panel is not open, press F2 to open it) or change its name in the Property inspector (see Figure 7).

5. To produce the desired XHTML tag from this text object, use the following name in your example (Figure 8 shows the result).

6. Now you have one text object on the canvas, which you have renamed to <h1>title, and you want to export the file to see the results. Use the Export dialog box (File > Export or Control+Shift+R) to export your document. Select CSS and images from the pop-up menu (see Figure 9 for more details).

7. After you have exported the file, locate and open the file hello-world.html in your browser and view the source code. It will be similar to this example:

So, the text block was exported correctly as <h1> and also received automatically the class of "h1_title". (The corresponding CSS styles can be found in the file hello-world.css, which was automatically created together with the file hello-world.html. You may check it, if you like, but I'll be reviewing the CSS code in more detail later.)

Similarly, you can tag a text object as <h2>, <h3>, or <div>—take your pick and experiment! You can choose from the 12 elements I have mentioned earlier (<div>, <span>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <a>, <blockquote>, and <label>).

Some limitations and special features related to tagging

In this example, I used <h1>title as the name for the text object, which generated the following piece of code:

If I had named the text object simply <h1>, then the output would be (a bit surprisingly):

and not just:

This is how the CSS export in Fireworks works. It will always assign a class to the object, when you export it as CSS.

Also note that the CSS Export positions the text according to its bounding box and not to its actual position on the canvas. So, when you prepare your design/mock-up to be exported as CSS and Images, it is important to position the text so that the bounding box is positioned exactly where you want the text to be positioned on export. The text then can appear slightly unaligned in your design in Fireworks (because you'll use the bounding box as a guide)—but when it's exported, it'll position exactly where you want it.

Before I move to the other components in Fireworks, you may check the sample file ex-01-text-tagging.fw.png, related to tagging of text blocks (it's in the Fw CS4 Tutorial Demo Files folder). Open it in Fireworks CS4 and check its contents. It contains just three text blocks, each on a separate layer, each text block having a specific name, which will output a correct HTML tag on CSS export. Then export it as CSS and Images and check the output HTML and CSS. The example will help you better understand the text tagging options.

To access the new HTML component symbols (rich symbols), open the Common Library panel (Window > Common Library, or press F7), shown in Figure 13.

Rich symbols were first introduced in Fireworks CS3. In Fireworks CS4 they were improved, which includes the new HTML Enhanced symbols by Matt Stow.

Note: In Fireworks CS4, Rich Symbols were renamed to "Component Symbols," which is now a more exact term. However, you can find both Component Symbols and Rich Symbols used in the Fireworks CS4 Help files. They mean one and the same thing, actually, so this should not confuse you.

Together with the tagging of text elements, the HTML symbols can help you a lot in preparing your website design to be exported as XHTML, CSS and images. In the HTML Enhanced folder in the Common Library panel, the following symbols can be found: Button, Checkbox, ComboBox, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6, Link, List Item, RadioButton, TextArea and TextField. All of the form elements have both Windows Vista and Mac OS X default theme variants.

Note: To learn more about how to create new rich symbols, you may read the following two articles:

• Using rich symbols in Fireworks (Aaron Beall)
• Enhancing rich symbols in Fireworks (Sarthak Singhal)

Inserting an HTML symbol

Follow these easy steps:

1. Create a new file in Fireworks CS4 (any size).
2. Open the Common Library panel (Window > Common Library, or press F7).
3. To insert and use an HTML symbol, select the symbol from the Common Library panel > HTML Enhanced folder, and then drag and drop it to the canvas (see Figure 11).

Editing an HTML symbol

An HTML symbol's properties can be changed through the Symbol Properties panel while the symbol is selected on the canvas. Select the symbol and open the Symbol Properties panel (see Figure 12) to view or edit the symbol's properties:

1. To open the Symbol Properties panel, choose Window > Symbol Properties.
2. To edit a symbol, select it and then you can freely modify its properties in the Symbol Properties panel. The Symbol Properties panel is usually docked with the Property inspector (the panel can be shown using the Control+F3 shortcut, if it's hidden). You can undock and resize the Symbol Properties panel, because it will allow you easier editing of the properties of the symbols.
3. To change a value of a certain property in the symbol, simply select the value in the Symbol Properties panel. For example, for a Link symbol, you can change the link color, the font weight (bold, normal), the link decoration (underline, normal), the link-decoration on :hover (when you mouseover the link), or any other available property.

I will review some of the available properties of HTML symbols, as well as their possible uses in your designs.

Using the Heading symbols

The Heading 1 to Heading 6 symbols (they will produce the heading tags <h1> to <h6> on export) have the following editable properties:

• Text (this is the text of the heading)
• Color
• Font (Family) — select from various standard font presets, like Arial, Georgia, Tahoma, and others
• (Font) Size
• (Font) Style
• (Font) Weight
• Line height

So, should you use a symbol when you want to produce a heading in the HTML code, or should you use a regular text block with the correct name (for example, "<h1>title" or "<h1>another_title")?

It depends. While HTML symbols—including the ones used for headings—can be useful, you should know their limitations. For example, they cannot have multiple lines of text (a regular text block is much more flexible in this aspect), symbols cannot have a specified width (they always size themselves to their text content), and changes in the Line height value in a symbol won't be represented in Fireworks visually (they will be seen in the output code, though).

Note: There are also some other subtle differences: for example, a text element marked as "<h1>title" will produce an <h1> tag in the HTML with the class of "h1_title". And a Heading 1 symbol with the default name of "Heading1" will produce an <h1> tag in the HTML, with the ID of "Heading1". HTML Symbols produce IDs, and tagged text elements produce classes in the HTML.

While in most of the cases the use of an HTML heading symbol (instead of a regular text block, named appropriately) can't be that much recommended, the link and form element symbols can be very useful in preparing your design (I'll review them next).

I have included an example PNG file that will help illustrate better the difference between tagging a text element as <h1> and using a Heading 1 HTML symbol. Open the file ex-02-heading-symbols-and-tagging.fw.png from the Fw CS4 Tutorial Demo Files folder. Export it as heading-symbols-and-tagging.html (choose the Export as CSS and Images option), and then open the HTML file in your browser and view its source. It will be similar to this code:

You will see that the Heading 1 symbol received an ID and the text block, tagged as <h1>, received a class, when exported. Experiment and study the example to understand the differences more clearly.

The Link symbol

The Link symbol has the following editable properties:

• Text (this is the text of the link)
• Font (Family) — select from various standard font presets, like Arial, Georgia, Tahoma, and others
• (Font) Size
• Href (the actual URL)
• Link color
• Link (font) weight
• Link (text) decoration

You can also edit the color, font weight and text decoration properties for the :visited, :hover, and :active CSS pseudo-classes.

Let me show you a quick example of using a Link symbol:

1. Create a new document in Fireworks CS4.
2. Open the Common Library panel, if it is not already opened.
3. Open the HTML Enhanced folder, select the Link symbol, and drag and drop it to the canvas.
4. Open the symbol properties panel (if it is not already opened).
5. Change any of the properties of the Link symbol—for example, the Link color, the Font family, the text decoration of the link (in normal and :hover states), or any other available property (see Figure 13).
6. Export the PNG file as link-test.html, using the Export CSS and Images option as before.

Locate the exported HTML file and open it in your browser. Notice that the link is keeping all of the edited properties of the symbol that you changed. The link will also have an ID, which will be created based on the object's name in Fireworks. For example, if the Link symbol you inserted in the PNG file has the default name of "Link," the ID of the link will be "Link". See the sample HTML code:

The relevant CSS styles (which style the link and the whole HTML document) are automatically generated by Fireworks, too, and can be found in the linked file link-test.css.

Finally, you may open and review the example PNG file for this illustration: ex-03-link-symbol.fw.png. You can export the file as link-symbol.html and review the symbol's properties in Fireworks, as well as the exported HTML and CSS code.

The List Item symbol

The improved HTML symbols include the List Item symbol. You'll be using it a lot in your designs, because HTML unordered lists (<ul>/<li>) play a very important role in today's web design process. For example, they are extensively used for navigation, which is semantically logical and correct—most of the time, a navigation block is just an (unordered) list of links.

The List Item symbol has the following editable properties:

• Text of the List Item
• Color
• Font (Family) — select from various standard font presets, like Arial, Georgia, Tahoma, and others
• Font (Size)
• Font (Weight)
• Node type — normal, first, last or both (I'll explain these later)
• Is link? — true or false (if the List Item is also a link or not)
• Plus all standard Link symbol properties (they will apply only if Is Link is set to true)

The Node type and Is link? properties of the List Item symbol are very important:

• Node type will define how each list item will be represented in the HTML markup.
• Is link? will define whether the symbol will also create a link (or anchor, <a href="#">) inside the list item (<li>), and thus allow you to style it similarly to the Link symbol.

The options for the Node type property are as follows:

1. Normal: creates this markup on export <li>text</li>
2. First: creates this markup: <ul><li>text</li>
3. Last: creates this markup: <li>text</li></ul>
4. Both: creates this markup: <ul><li>text</li></ul>

By combining a few List Item symbols, and setting their Node type correctly, you can export a nicely structured unordered list—for example, to create a navigation block.

Horizontal lists

To better understand the Link Item symbol and how it works, I'll show you a simple example now. You'll create a short horizontal navigation list like the one in Figure 14.

Then you'll export it as valid CSS and HTML code. Here's how to proceed:

1. Create a new Fireworks document (440 × 80 px or similar is all right as size).
2. Open the Common Library panel.
3. Open the HTML Enhanced folder and then click and drag the List Item symbol to the canvas.
4. Click the newly created List Item symbol and open the Symbol Properties panel.
5. Change the Text property to Nav Link 1.
6. Edit some other of the Symbol's properties; compare with Figure 15.

7. Clone the symbol by using the menu Edit > Clone (or Control+Shift+D).
8. Move the cloned symbol to the right by 100 pixels or so—you can use the mouse, or you can press Shift+right arrow 10 times, which will move the symbol to the right by exactly 100 pixels. (Holding Shift while using the arrows on the keyboard moves the selected object 10 pixels at a time, not one.) Then change the Text property of the second symbol to Nav Link 2.
9. Clone and move 100 pixels to the right the second symbol, just as you did with the first one, and change the Text property of the third symbol to Nav Link 3.
10. Similarly, clone and move 100 pixels to the right the third symbol, as well, and change the Text property of the fourth symbol to Nav Link 4. Now on the canvas you have four List Item symbols, lined up as shown in Figure 16.

11. The symbols are named Nav Link 1, Nav Link 2, Nav Link 3 and Nav Link 4. If you wish to have specific IDs for each link (after the file is exported as HTML and CSS), you can rename each symbol in the Layers panel (see Figure 17).

(If the Layers panel is not open, use Window > Layers, or press F2.)

12. Select the first symbol (Nav Link 1) and set its Node type property to first. Then select the last symbol (Nav Link 4) and set its Node type to last. Leave the other two symbols (Nav Link 2 and Nav Link 3) with the default Node type: normal.
13. Export the document as nav-list.html, using the Export as CSS and Images option.
14. Open the file nav-list.html in your browser and check the source code.

If you followed the instructions closely, the HTML source will be very similar to this one:

Fireworks CS4 has created automatically an unordered list (<ul>), and has assigned to each list item (<li>) an ID, based on the each symbol's name, which you have assigned in the Layers panel.

For your reference, I have provided a ready-to-use Fireworks PNG file ex-04-nav-list.fw.png. Open this file and export it using the Export as CSS and Images option, then view its source to compare with your results.

Vertical lists

Using the List Item symbol in Fireworks, you can also easily create vertical unordered lists. But when you attempt to create a vertical unordered list, the float—clearing mechanism in Fireworks CS4 will generate invalid HTML code upon export. To avoid that, when you create a vertical navigation, simply remove the float—clearing <div> elements and assigning the class of "clearFloat" to each of the list items (<li>). I will better explain this with an example.

The list shown in Figure 18 is very simple, and looks much like the list in the previous (horizontal) example, with the difference that the four list items are arranged vertically.

The file for this example is ex-05-nav-list-vertical.fw.png. Open the PNG sample file and export it using the Export as CSS and Images option. The HTML for the vertical list, automatically created by Fireworks, will be as follows:

You will notice that Fireworks has added the following block of code between each list item:

This block of code between the list items will invalidate the HTML document.

Note: I recommend you to edit the HTML/CSS code in Adobe Dreamweaver CS4 because of its easy integration with Fireworks CS4, but you can use any other text/code editor as well.

To fix this, simply assign the class of "clearFloat" to each list item instead, and delete the clearing divs. Here's the correct, revised code for the example above:

Also note that if you try to visually divide the List Items in Fireworks CS4 with an object (rectangle, line, or other construct), it will also produce invalid HTML markup in both horizontal and vertical lists. You can later add these dividers in the HTML/CSS, so that you obtain the desired output.

Form element symbols

Form element symbols in Fireworks CS4 are similar to the other HTML symbols we have already reviewed—they have various editable properties, and their new, enhanced versions (both Windows and Mac visual variants are available), are improved, too.

The editable properties for form element symbols are as follows:

• Text or Label
• Color
• Font (Family) — select from various standard font presets, like Arial, Georgia, Tahoma, and others
• (Font) Size
• (Font) Style
• (Font) Weight
• Type (various choices for Button and TextField only)
• State (various choices for all, except TextArea)

Here's the list of all the available form element symbols:

• Button (Win/Mac)
• Checkbox (Win/Mac)
• Combobox (Win/Mac)
• Radiobutton (Win/Mac)
• Textarea (Win/Mac)
• Textfield (Win/Mac)

For Buttons, the Type property allows you to display and export buttons of the type Submit, Reset, or Button. For TextFields, you can choose to export standard Text or Password inputs. The State property varies among the form symbols, but generally it allows you to represent the element in the following states: Normal, Over, Press, Disabled. Figure 19 illustrates all of the form symbols in one place.

Working with Form element symbols

Here are some considerations when working with Form element symbols:

• When an HTML form element symbol is used in the design (for example, Textarea or Button) and the Fireworks PNG document is exported as CSS and Images, a single <form> element will be automatically created and it will wrap the whole contents on the page. In some cases this is OK, but in some other cases you will have to manually modify the document's form structure (for example, when multiple, separate forms exist in the page, like a search form and a message/comment posting form). Then you will have to create one <form> element for every separate form on the page.
• No <fieldset> or <legend> elements will be created or exported. You will need to manually add them after the export process and style them appropriately with CSS (for example, to make them invisible, when this is needed) because Fireworks cannot create them automatically for you. (This topic is related to the creation of semantic and accessible HTML code, but it is outside of the scope of this tutorial.)
• Only radio buttons and check boxes export a relevant <label> element. If you require a visible <label> in your design for other form elements, create a text object and then tag it as <label>. You will still need to associate the label to the relevant form control manually by adding a for attribute with the value of the form control's specific id. If you do not require visible <label> tags, you can omit them in your design, but then add them in the HTML (after the PNG has been exported as CSS and Images) and hide them using CSS, when appropriate.

Figure 20 shows a simple example to better explain Form HTML element symbols in Fireworks.

This represents a very simple online form. Open the sample file, ex-06-form-elements.fw.png, and then export it as form-example.html (selecting the Export as CSS and Images option). Study the PNG file in Fireworks and compare it to the source code in the automatically exported HTML document. It will be similar to this:

There are also a few other things to mention about forms, when exporting the CSS from Fireworks automatically, but they are outside of the direct goal of this tutorial.

In the next section, I will move on to image slicing, the third important tool when preparing a web design to be exported as CSS and Images.

I've shown you so far two important Fireworks CS4 features when preparing a graphic design to be exported as CSS and HTML: the HTML tagging of text objects and the HTML enhanced symbols. Here, I will explain to you the basics of the third main feature that you will need to learn: image slicing (and optimization).

What is slicing? When creating and editing your website mock-up in Fireworks, you can specify how certain areas of the PNG image file will be exported, in what graphics format, and so on. Fireworks then slices your PNG into separate images according to the guidelines you've specified.

Slicing of images in Fireworks CS4 was improved a lot by adding background image slicing, which complements the new CSS Export feature extremely well. This feature enables you to specify different sections of a design and then automatically export them as background images (in <div> containers). You can also specify the background-repeat and background-position properties of the background image; thus, you can easily create tiled horizontally or vertically backgrounds.

Your options when creating a slice area are as follows—you can specify the slice as follows:

• Foreground image: This will produce a standard <img src...> image tag in the HTML code and will export the image automatically.
• Background image: This is the most important option. It will automatically create a background image and will position it via CSS; you'll have a variety of options for it—position of the background image, background—repeat, and so on.
• HTML: This will produce HTML code, instead of creating a background/foreground image, based on the area covered by the slice; but it'll work only with rectangular shapes.

I'll review all three options separately, but will explain in most detail the option to export a slice as background image, as this is the most important one for exporting a website design/mock-up correctly as CSS, HTML and images.

Inserting the slice as "foreground image" type

When you select this option, it will produce a standard <img src="" ...> image tag in the HTML code and will export the corresponding image. When you need to have images in your design that are part of the website's content (and not part of the design), then this is the correct option to choose.

Here's a basic example for this slice type:

1. Create a new document in Fireworks, 500 × 200 px.
2. Draw a rectangle with the Rectangle tool, 200 × 50 px.
3. Change the rectangle's fill color to #FF0000 (red), then change its texture to Line-Diag 1 and set the amount to 50%, as shown in Figure 21. (These properties are all optional, and you can set them to anything you like. Still, to be consistent with the explanatory screenshots, I mention the exact values I have used.)

4. Click the rectangle to select it (use the Pointer tool), if it's not selected.
5. Choose Edit > Insert > Rectangular Slice (or Alt+Shift+U).
6. Change the properties of the slice in the Properties panel:
   • Name of the slice: my_image
   • Type: Foreground Image
   • Slice Export Settings: JPEG–Better Quality (Note: If you open the Optimize panel (Window > Optimize, or F6), you can further change export quality settings for the selected slice.)
7. Leave Link, Alt, and Target empty. Currently, you'll have something like Figure 22.

You can see the slice selected in the Web Layer in the Layers panel, and its properties in the Property inspector. The slice rectangle covers the object below it and controls how it will be exported.

8. Export the file as slice-foreground-image.html, using the option Export as CSS and Images.
9. Locate the HTML file and open it in your browser. View its source:

Fireworks CS4 has automatically created the HTML/CSS and sliced the image (you'll find the image in the same location where you saved the HTML file, and it will be correctly named my_image.jpg and exported as a JPG file, with the selected quality settings).

If you're curious to compare your example with the one provided with this tutorial, open ex-07-slice-foreground-image.fw.png and then export it as CSS and Images.

A word about image quality when exporting slices

When you select a slice from the Property inspector, you can choose from several basic image export settings for it: GIF (including animated GIF) and JPEG (two options: Better Quality or Smaller File), as shown in Figure 23.

Of course, you are not limited to JPG or GIF only. But to select from a wider variety of image export formats, and any additional image—related settings, you should open the Optimize panel (Window > Optimize, or press F6). From there, you can select any kind of image export format, including the most popular ones on the web (GIF, JPG, PNG), and customize their quality, number of colors, and other settings.

To use the Optimize the panel, simply open it, select the slice, and then edit its image export settings in the panel. (See Figure 24 for more details.)

Only the basic slice image export options are available through the Property inspector, so you'll probably need to open also the Optimize panel, and explore its options as well.

Inserting the slice as "background image" type

This is the most useful option when exporting a graphic design as CSS and Images, and you'll be using it a lot in your designs. I'll first show you how to export a slice as a background image. You'll create a similar document to the one in the previous example, with just one small difference.

Example with simple background image (1)

Here's how to proceed:

1. Create a new document in Fireworks, 500 × 200 px.
2. Draw a rectangle with the Rectangle tool, 200 × 50 px.
3. Change the rectangle's fill color to #339933 (green), the Fill Category to Linear, and the colors to #FFFFFF > #339933. Your results should look like Figure 25.

4. Click the rectangle to select it (use the Pointer tool) if it's not selected.
5. Choose Edit > Insert > Rectangular Slice (or Alt+Shift+U).
6. Change the properties of the slice in the Properties panel:
   • Name of the slice: my_background
   • Type: Background Image
   • Slice export settings: JPEG–Better Quality (Note: Open the Optimize panel [Window > Optimize, or F6] to further change export quality settings for the selected slice.)
   • Repeat: repeat-x
   • Attachment: scroll
   • Horizontal position: left
   • Vertical position: top
7. Change the width of the slice to 1px (see Figure 26).

8. Export the file as slice-background-image1.html (using the CSS and Images option, of course).

You'll notice that in the browser, the rectangle looks the same; but Fireworks magically used just a one-pixel-wide image as background, based on your settings (background-repeat set to repeat-x, which means "repeat horizontally").

You can compare your work to the sample file for this section, ex-08-slice-background-image1.fw.png. Here's the source code for this exported file:

Fireworks CS4 created a <div> element with the class my_background, exported the slice image automatically, and created the CSS, which positioned the <div> and the background image. Lots of time saved!

The option to create background images (including tiled ones, like in this example), and position them automatically can be useful to you in a lot of ways. For example, you can create the background of a <div> element, which will include other content (navigation, or a heading, or an unordered list, and so on), and the image will be very small in size.

Example with background image and text (2)

Let's review a bit more complex example now:

1. Start as before: create a new document in Fireworks, 500 × 200 px.
2. Draw a rectangle with the Rectangle tool, 200 × 50 px.
3. Change the rectangle's fill color to #339933 (green), the Fill Category to Linear, and the colors to #FFFFFF > #339933.
4. Add a small block of text inside the rectangle—use Verdana, 16 px size, white (optionally, you can also rename the block of text in the Layers panel to my_text).
5. Again, click the rectangle to select it, then choose Edit > Insert > Rectangular Slice (Alt+Shift+U).
6. Change the properties of the slice in the Property inspector, as in the previous example:
   • Name of the slice: my_background
   • Type: Background Image
   • Slice export settings: JPEG–Better Quality
   • Repeat: repeat-x
   • Attachment: scroll
   • Horizontal position: left
   • Vertical position: top
7. Change the width of the slice from 200 px to 1 px. Figure 27 shows the results.

8. Export the file as slice-background-image2.html (using the CSS and Images option).

Preview the HTML file in your browser. Try to resize the text—for example, make it bigger. (In Internet Explorer 7, choose View > Text size > Largest; in Firefox 3.0/3.5, choose View > Zoom > [check Zoom Text Only] and then click Zoom In a couple of times.) Notice that the <div> with the green linear background expands in a fluid manner, along with the text! Fireworks CS4 specifies in the CSS all the fonts as percentages, and this allows them to be scaled in every browser (including Internet Explorer, which otherwise has problems scaling fonts specified in pixels), and this improves the accessibility.

Here's the HTML from the CSS export (you can compare it with the results from exporting the sample file for this section: ex-09-slice-background-image2.fw.png):

Another interesting thing to notice is that when the font is increased and the <div> element grows in size, where the background image ends, it still blends with the rest of the container. This is because you have first set the solid background color of the rectangle, before applying a linear fill to it. Thus, it is important to remember that even if an object has a gradient fill, its original solid color is remembered by Fireworks. This can help create containers which can expand later (if the text size is changed, or the amount of text varies inside), and still have gradient fills applied to them, which will blend well.

In exactly the same manner, you can create slices that work with a horizontal gradient, and repeat on the y axis (background-repeat: repeat-y).

Example using the three-slice technique (3)

Now here's the most interesting use of the background image slices: the so-called three-slice technique. In web design, you often encounter designs that have a static top, a middle section for any amount of content (text, images, or other content), and a static bottom. Using the background image slice type and the Fireworks three-slice technique, you can easily achieve this effect in Fireworks CS4 (see Figure 28).

In this case, you should specify three slices for this element: one for the top (25 px high); one for the middle content, which will be vertically fluid in size (small, 1 pixel height background image, repeating around the y axis will be OK); and one for the bottom (25 px high).

Note: You can use this technique, for example, when you need rounded corners on a container because the current CSS standard (CSS 2.1) does not support this feature. I should mention, though, that a new specification (CSS 3) is on the way and it will include the possibility to use rounded corners, gradients, and even drop shadows—without any need for images. Firefox 3.5 or later, Safari 4 or later, and other modern browsers already have limited support for some CSS 3 features. However, we will need more time before CSS 3 becomes widely supported by the browser market. In the meantime, the Fireworks three-slice technique remains very useful.

Open the sample file ex-10-slice-background-image3.fw.png, with which I will illustrate the three-slice technique. Inside, you will find the following objects (inside Layer 1):

• Rectangle with rounded corners and a small linear fill at the top
• Block of text, which almost entirely fills the middle section

And the three slices are specified as follows (see the Web Layer, Figure 29):

• bg_top: Covers the top of the rectangle, which has a small gradient fill applied to it (300 × 25 px)
• bg_mid: For the middle section of the rectangle (300 × 1 px), with background-repeat set to repeat-y.
• bg_bot: Covers the bottom of the rectangle (300 × 25 px)

All three slices will export as PNG images, 32 bit (PNG32), with settings set in the Optimize panel.

When you create the three background slices (one for the top, one repeating for the middle section, and one for the bottom) over the top of an object—a rectangle, a rounded rectangle, or other element—the CSS Export in Fireworks automatically switches to the three-slice method. Now export our sample file, ex-10-slice-background-image3.fw.png (export it as slice-background-image3.html) and view the source code:

Fireworks CS4 has created an element with id="Box3SliceContainer" and inside, you can see the three divs, corresponding to the three slices that you have created. All CSS, HTML and image export was done automatically!

Note: If you would like to add text (like a heading, for example) to the top of the image, the top slice would need to be exported again separately, without the text visible. Otherwise, Fireworks will export the text as part of the top background image.

Inserting the slice as "HTML" type

When you select this option, it will produce HTML code instead of an image. The use of this option is rather limited, as it will work well only with rectangles of solid color, with or without borders applied to them. Here's a very basic example:

1. Create a new document in Fireworks, 500 × 200 px.
2. Draw a rectangle with the Rectangle tool, 200 × 50 px.
3. Change the rectangle's fill color to #FF9933 and add a 1 px black border. Your document should look like Figure 30.

4. Click the rectangle to select it and choose Edit > Insert > Rectangular Slice (or Alt+Shift+U).
5. Change the properties of the slice in the Property inspector:
   • Name of the slice: html_rect
   • Type: HTML

   You'll have something like Figure 31.

6. Export the file as slice-html.html, using the Export as CSS and Images option.

Locate the HTML file and open it in your browser. View its source:

You can see that Fireworks created a <div> element with id="html_rectangle", applied the correct background color to it, and a 1 px black border. The relevant styles are in the CSS file (slice-html.css):

Interestingly enough, you can create an HTML slice even for a circular shape, or select a linear fill background color, but Fireworks will always produce a rectangular shape with solid color on CSS export. CSS currently doesn't support round shapes, or rounded rectangles, and the color of objects can be only solid. But in case you need to create a rectangle with solid color (with or without border), you can use this option for creating the slice.

You can open the sample file ex-11-slice-html.fw.png and then export it as CSS and Images to compare with your results.

Now you have at your fingertips all the tools you need to produce XHTML and CSS code automatically from within Fireworks CS4. I have reviewed and provided examples to the main three options you'll be using extensively: tagging of text elements, HTML symbols, and background image slicing.

I have provided you with a ready demo design mock-up, and in it I have used most of the techniques I have reviewed in detail in this tutorial. Open ex-12-design-mockup-demo.fw.png in Fireworks CS4 and study its structure (check how layers are organized, check the slices in the Web Layer and their settings, and so on). Then try to export the file as design-mockup-demo.html and open the file in the browser. Check its source code; also check the CSS code (design-mockup-demo.css). You will see that it looks almost identical in the browser.

If you try to validate the HTML file using the W3C Validator, it will even validate as a Valid XHTML 1.0 Transitional document.

This doesn't mean, though, that the code cannot be further improved. I would suggest using Dreamweaver or some other good code editor for this purpose.

Some final notes before concluding:

• In my mock-up design (ex-12-design-mockup-demo.fw.png), there are seven slices in total (the Web Layer is hidden; you'll have to unhide it when you want to study how all slices are organized). I have used six background image slices and one HTML slice. The header is one background image, the navigation bar is another background image (with background-repeat set to repeat-x), the sidebar consists of three background images (three-slice technique used), the main column is a simple HTML slice, and the footer is another small background image, with background-repeat set to repeat-x.
• The only HTML slice used is there just to better organize the content on the page (a transparent element with the dimensions of the main column is used for this purpose).
• Text objects are tagged, when appropriate, to produce relevant XHTML on export (for example, text in the main column and in the sidebar).
• All layers are well organized and named, so that they produce relevant markup on export. You can study the layer structure of the PNG, too.
• For the navigation, I have used four HTML Enhanced symbols, which will produce an unordered list. By the way, you'll notice that the navigation links are a bit misaligned vertically. This is because the CSS export does not take into account the elements' default line-height. So you can either place the elements a bit higher in the export, or fix the CSS styles manually afterwards.
• To simplify the design, I did not insert a <form> element into it. But you can try to insert a few <form> elements yourself and export the file after that.
• An important thing to remember: When performing a CSS and Images export, Fireworks CS4 always wraps all HTML content in a <div> with the ID of "main", so make sure not to name any element in your design as "main"! Otherwise, you may end up with two elements having the same ID in the HTML, which will invalidate the page and most probably lead to problems with the XHTML/CSS design, as well.

Now that you have exported the mock-up design, how could you manually improve it, in Dreamweaver, or some other code editor? Well, you could do a lot of things. But most importantly, I would suggest to you to simplify the CSS rules by removing most of the font-family and color references. Assign them to the body instead, or to specific containers.

How?

Here's a very simple example taken from the exported design mock-up CSS. See the styling of the nav links:

You will notice that although all fonts in the Fireworks design mock-up are Verdana, Fireworks still assigns the font-family attribute to most of the separate elements on the page—in this case, to the links in the navigation.You can safely delete the line

from the nav links (#home, #about, #publications, and the rest) and put it in the body, like this:

You can perform similar optimizations for most of the CSS rules created by Fireworks. Some rules, like this one, you can safely assign to the body; in some other cases, you can simply organize the CSS better by assigning rules to specific containers.

Here's another example. This is the HTML code for the nav bar:

You can see that all list items (<li>) in the navigation list are contained within a <div> element with id="nav". If you take another look at the CSS for the list items in the navigation, you will see that some of the rules are repeating:

For example, color, font-weight, font-family, and font-size are all the same for all links in the navigation. You can safely delete them from the individual rules and assign them to the <div> with id="nav":

This code reads like this: "All links (anchors) that are inside a <div> element with id="nav" should have the following styles applied to them." You can simplify and optimize most of the CSS code generated by Fireworks in a similar manner.

But even if you don't perform this final step, the code from Fireworks is still usable in a lot of ways. And it also validates (or almost validates, in which case you can easily fix it yourself by editing it slightly) as XHTML 1.0 Transitional, the most widespread standard for HTML documents currently.

To go from design mock-up to CSS, XHTML, and (automatically) sliced images, you just need to name your text elements properly, insert HTML symbols, and create and optimize the background image slices. Everything else will be done by Fireworks.

I hope you enjoyed this tutorial!

Where to go from here

Check out the following resources (doing so in order wouldn't be a bad idea) to learn more about CSS methodology and using CSS with Fireworks CS4:

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