Accessibility

Dreamweaver Article

 

Working with Background Images and CSS – Part 4: Using Images to Mimic the Appearance of Columns


Table of Contents

  1. Introduction
  2. Creating the Background Image in Fireworks 8
  3. Laying Out the Design
  4. Coding the Layout

Creating the Background Image in Fireworks 8

As always you begin by creating your background image in Fireworks 8. Before you can create your background image, you need to plan a little ahead. I already mentioned that this will be a fixed-width design, and you really need to know how the final design is going to look.

In this instance you are going to create a design that is 770 pixels in width and contains two columns—a left column for the navigation and a right column for the content. In addition, you need to decide on the widths of your columns, especially the widht width of the left column.

The background behind the content div is white, but behind the navigation div you show a colored background with a border down the right edge. It is the color you set behind the navigation div that gives your layout its two-column appearance. Obviously, you need this section of the background image to be wider than the navigation div. With this in mind you are going to create a background image that suits your needs for a navigation column that is 200 pixels wide. Time to open Fireworks.

Open Fireworks and use the steps shown in the following Captivate demo to create the background image.

Follow these steps:

  1. Select File > New to create a blank canvas.
  2. Set the width to 770 pixels.
  3. Set the height to 20 pixels.
  4. Set the resolution to 72 pixels/inch.
  5. Set the canvas color to White.
  6. Click the OK button. The blank canvas opens.
  7. Select the Rectangle tool.
  8. Draw a rectangle over the left side.

  9. Go to the Property inspector and set the following properties for the rectangle:

    Set the Width to 200.
    Set the Height to 20.
    Set the X and Y positions to 0
    Set the color to gray: #999999.

  10. Select the Line tool and give it a black stroke color.
  11. Draw a vertical line along the right edge of the rectangle. Hold down the Shift key while drawing the line to ensure that it is a straight line.
  12. Click the Save button and save the PNG file as bg_image in your pngs folder.
  13. Select File > Image Preview.
  14. Set the Format type to GIF.
  15. Set the colors select list to 8.
  16. Click the Export button.
  17. Name the image bg_image.gif.
  18. Save the image within your local site definition.
Page 2 of 4
Previous Page
Next Page