Accessibility

Dreamweaver Article

 

Working with Background Images and CSS – Part 3: Altering the Appearance of Your Pages with Drop Shadows


Table of Contents

  1. Introduction
  2. Creating the Design in Fireworks 8
  3. Naming, Slicing, and Dicing in Fireworks 8
  4. Laying Out the Design with CSS

Naming, Slicing, and Dicing in Fireworks 8

With your image completed, you now have the task of slicing the image and preparing it for export to your local site. The movie below will guide you through the slicing, optimizing, and naming of your slices before you finally export the images to your local site. The steps to accomplish this are also listed below the demo link.

Note: When you draw your wrapper_bg slice, make its height 10 pixels. In the demo, I make mine larger than this to keep it visible as my canvas was reduced to 50% of its normal size for demonstration purposes. See step three below if you are unsure what I am talking about.

  1. Open your drawing.png file in Fireworks.
  2. Select the Slice tool.
  3. Draw a slice across the width of your canvas and set its height to 10 pixels.
  4. Press F2 to open the Layers panel.
  5. Double-click your slice in the Web Layer section.
  6. Name the slice wrapper_bg.
  7. Press Enter.
  8. Hide the slice layer.
  9. Hide the base_page rectangle.
  10. Select the slice tool.
  11. Draw a 50 pixel square over your background layer.
  12. Start drawing the layer at 0,0.
  13. Double-click your new slice in the Web Layer section.
  14. Name the slice body_bg.
  15. Select File > Image Preview. The Export dialog box opens.
  16. Select 8 from the Maximum Number of Colors list.
  17. Click OK (Not Export; clicking OK sets the export properties without exporting, you can then export individual slices without revisiting the export dialog box for each one.)
  18. Right-click the body_bg slice.
  19. Select the Export Selected Slice option.
  20. Save the image to your local site in a folder called images. Note that the slice name is retained for the image name.
  21. Click the Save button.
  22. Make your wrapper_bg slice visible.
  23. Make your base_page rectangle visible.
  24. Select File > Image Preview. The Image Preview dialog box opens.
  25. Select 128 from the Maximum Number of Colors list.
  26. Click OK (Not Export).
  27. Unhide the wrapper_bg slice in the Layers panel.
  28. Right-click the wrapper_bg slice, and select the Export Selected Slice option.
  29. Save your image to your local site in a folder called images. Note that the slice name is retained for the image name.
  30. Save your work.

During the steps and the demo above, you may have noticed that you selected 128 from the Maximum Number of Colors list when you exported the wrapper_bg slice. Fireworks indicated that 18 colors were required, but I prefer to export gradients with the maximum number of colors to ensure I get a smooth transition through the shadow effect. The file is small and these extra colors you have allowed will not have an impact on the image size to any degree worth worrying about.

You have now created two images—one for the background of the body (body_bg.gif) and one for the background of your wrapper div (wrapper_bg.gif). You will see how these two images work together in the next section.

Page 3 of 4
Previous Page
Next Page