Working with CSS sprites in Fireworks CS6

In this article, you'll learn how to work with Adobe Fireworks CS6 to generate CSS Sprites. A sprite image consists of multiple graphics that are combined together to form a single image. Each one of the graphics in the sprite image can be rendered separately in an HTML web page using the data provided in the CSS style sheet.

One of the techniques used to render images in the web page is web slices. In this technique, user has to create slices for the required graphic in the web page design and use these slices as individual images in the web page. This method adversely affects the response time of the page since loading all the images in a web page requires multiple HTTP requests. This affects the load-time performance of the website.

One of the widely used techniques to render images in the web page without hampering the load time of the website is the CSS sprites technique. In this technique, individual images to be rendered in the web page can be stitched together as a single sprite image. Individual parts of the sprite image can be rendered as required using CSS. This would reduce the network latency by fetching a single image instead of multiple images. Using the CSS sprites technique, we can improve the load-time performance significantly. This is particularly helpful on handheld devices that have limited bandwidth.

CSS Sprites can be generated from the design prototype created in Fireworks. Slices can be created on objects that need to be used as images. On CSS sprite export, a sprite image, where the slices in the Fireworks page are stitched together as a single image, is generated. A CSS file that contains the information regarding the displacement values to render individual graphic of the sprite image is also generated.

Look at the following design prototype created using Fireworks.

The Fireworks page displayed above consists of multiple images. This article explains how to export the images highlighted in the header section as CSS sprites and then use it in a web page. The process involves the following:

• Creating slices
• Generating CSS sprites
• Using CSS sprites in a web page

Creating slices

The CSS Sprites Export feature in Fireworks CS6 makes use of a familiar technique -- creating slices. The CSS sprites are generated from the slices.

1. Select the Slice tool from the Tools panel.

2. Create slices in the Fireworks object.
   Alternatively, you can create slices using the context menu.

Note: The slice name is the name of the selector. It is used in the HTML page to render the image beneath the slice in Fireworks source file.

After creating the necessary slices, generate CSS sprites for selected slices or all the slices.

1. Select the slices from the Fireworks source file from which you want to generate the sprite image.
   You can also select slices from multiple pages.
2. Right-click and select Export CSS Sprite from the context menu.

Alternatively, to export CSS sprites, select File > Export. Then, select CSS Sprites.

The Export dialog box appears. You can customize the sprite image settings and the CSS style sheet in the "Export" dialog box.

3. Change the sprite image settings and CSS style sheet settings in the Export dialog box.

The Export dialog box options

• Pages: Allows you to export slices from the selected pages, all pages, or current page.
  Note: Slices in the Master page and shared layers are included only once in the sprite image.
• Selected Slices Only: If selected, exports slices that are selected in single or multiple pages.
• Current State Only: If selected, exports the slices in the current state in case the pages have multiple states. For example, if a button symbol has multiple states, only the "Up" state graphic of the button is exported.
• Save As: Allows you to provide the filename of the sprite image that is being exported.
• Options: Provides the CSS Sprites Export Options dialog box.

4. Click Options in the Export dialog box. In the CSS Sprites Export option, specify the CSS selector, CSS selector name prefix and suffix, orientation of the exported sprites, and the file type of the exported sprites.

The CSS sprites export options

• CSS Selector: For each one of the slices, a class or ID is generated.
  Note: Selector consists of the displacement values. The selector name is the name of the slice along with prefix and suffix. To reference a particular graphic of the sprite image in the HTML page, use the slice name. A base class with the class name as the filename is generated. It contains the global property - CSS background. Use this property with the selector while referencing the graphic inside the sprite image in an HTML page.
• Prefix: Provide the prefix of the CSS selector name.
• Suffix: Provide the suffix of the CSS selector name.
  A preview of the class or id along with the prefix and suffix is provided.

• Padding: Provides the spacing between individual graphics in the sprite image.
• Layout: Specifies the orientation of the exported sprite image graphics. It can be horizontal, vertical, or grid.

• Optimization Preset: Specifies the exported sprite image file type. You can also create a customized optimization preset. For more details, see Creating custom optimization preset.

At this point, we have exported CSS sprites from Fireworks. Exporting as CSS Sprites from Fireworks generates a sprite image and a CSS file. The sprite image that is exported is provided below:

Exporting CSS sprites from Fireworks also generates a CSS file. The exported CSS file consists of the following:

• The base class as shown below. It consists of the background property pointing to the sprite image location. The URL has to be modified if the image file is moved to a different location. See the URL provided in the code.
• .pluralist_homepage{ background:url("pluralist_homepage.jpg") top left no-repeat; }
• Classes/IDs are generated for each of the slices based on user preference. It consists of the displacement values to be used to render the graphic inside the sprite image. The base class name along with the respective class names generated for Fireworks slices should be used to render the slice graphic in the HTML web page. Pseudo classes such as hover, active and visited are generated for button symbols with multiple states.

To use the CSS sprites in a web page, do the following:

1. Launch Dreamweaver.
2. Open an existing web page or create a blank HTML page.
   The basic layout of the web page for the design prototype in Fireworks is created in Dreamweaver. We'll see how to render the graphics of the sprite image in this webpage.

In the above screen, let us include the sprites in the header section highlighted in the Design view. The corresponding code for the header is highlighted in the Code view.

3. In the Code view, add the link to point to the CSS style sheet exported from Fireworks, as shown below:

4. To include individual graphic of the sprites, include the base class name and the respective class or ID names in the tag. The selectors and selector names are the preferences selected during the export in Fireworks. The selector names include slice name and prefix or suffix if you have provided while generating.

For example, to include the "shop" icon in the header, provide the class names in the tag as shown below:

The HTML page with icons for the four elements in the header is provided below:

Fireworks provides a default set of optimization presets. You can also create an optimization preset of your own.

1. Click File > Image Preview.
2. In the Image Preview dialog box, select the optimization settings.
3. Click Add and provide the name for the optimization settings.

For more about CSS in Fireworks, see Extracting CSS properties from Fireworks design objects. For more Fireworks learning resources, visit the Fireworks Developer Center.