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.

Requirements

In order to make the most of this article, you need the following software and files:

Fireworks CS4

• Try
• Buy

Sample files:

fwcs4_css_export.zip (ZIP, 1.3 MB)

Prerequisite knowledge

This tutorial requires some basic knowledge of Fireworks CS4, web design concepts in general, and XHTML/CSS 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.

Figure 1. The Replace Fonts dialog box

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 7

Next Page

About the author