Building the Content Area

The original design is a three-column layout, which you will keep. In my previous series, Designing with CSS – Part 6, I discussed the pluses and minuses of both floating and positioning columns in your design; in this instance, you are going to float them.

You will also use a background image to give the appearance that each column stretches from the bottom border of your #header div down to your #footer div.

To achieve this effect, you will need to return to Fireworks and create two images:

• innerwrapperBG.gif
• body_bg.gif

You will use innerwrapperBG.gif to give the appearance of stretchable columns (see Figure 6) and body_bg.gif to provide your body some texture. This also adds a nicer finish to the design than the white background color.

Figure 6. innerwrapperBG.gif

To create the innerwrapperBG.gif file, follow these steps:

1. Create a blank canvas, 770 px wide and 10 px high.
2. Select the rectangle tool.
3. Draw two rectangles, 140 px wide and 10 px high.
4. Give each rectangle a different color (select a color from the header image).
5. Select the Line tool.
6. Draw a dark line on the inner edge of each rectangle.
7. Export the image in the GIF format with no transparency.
8. Save the image as innerwrapperBG.gif.

Note: If you want to save yourself these steps, I've included the Fireworks file as a PNG among the sample files that accompany this tutorial.

Now you can create the body_bg.gif file (see Figure 7), which is also included as a Fireworks PNG file among the sample files.

Figure 7. body_bg.gif

To create body_bg.gif, use the following steps:

1. Create a blank canvas 30 px in width and height.
2. Select the Rectangle tool.
3. Draw a rectangle over the canvas.
4. Give the rectangle the color #CC9900.
5. Select the image.
6. In the Property inspector, select the Texture list.
7. Choose Line-Diag1.
8. Set the value to 50%.
9. Export the image without transparency.
10. Save the image as body_bg.gif.

You now have the two images that are required for the next part of the tutorial.

Open the CSS panel and complete the following steps to link the body_bg.gif file:

1. Select the body rule.
2. Select the Add Property option.
3. Select background-image from the select list.
4. Click the folder icon.
5. Navigate to your body_bg.gif file.
6. Select it and click OK.
7. Save your work.

Your body image should now be applied as a background image to the body element (see Figure 8).

Figure 8. body_bg.gif in place

Your next job is to add the #innerwrapper div to your CSS file and then to add it to your code.

Page 3 of 4

Previous Page

Next Page