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

Laying Out the Design

Now that you have created your background image you are ready to begin laying out your design. In previous tutorials you have seen how you can create a two-column design by either floating or absolutely positioning the navigation column. If you are not familiar with these techniques or feel you need a refresher, I would strongly suggest that you read the "Introduction to Designing with CSS" series; You can access this article series the CSS topic page on the Adobe Developer Center.

Note: If you haven't already defined a site in Dreamweaver, do so now. If you need help defining a site, see "How to Define a Site in Dreamweaver" (TechNote 14028).

The next step in the process is to create your CSS file. Open Dreamweaver and complete the following steps:

1. Select File > New.
2. From the General tab select CSS Style Sheets in the Category column.
3. Select any of the style sheets in right column.
4. Click the Create button.
5. Delete all the information in the style sheet so it is blank.
6. Save your blank style sheet in a folder called CssFiles within your site definition as columns.css.

Note: I keep all my style sheets for any given site in a folder called CssFiles. This is a good practice. It pays in the long run to have a place for everything and have everything in its place. Always try and avoid saving files other than HTML documents in the root of your site. This prevents everything becoming unnecessarily cluttered. A tidy site is a happy site.

Open Dreamweaver if you have closed it and create a new HTML page called demo.htm. You can do this by completing the following steps:

1. Select File > New.
2. Select the General tab.
3. Select Basic Page from the category list.
4. Select HTML from the Basic page column.
5. Click the Create button.
6. Save your page as demo.htm.

• View the movie: Attaching your style sheet

Follow these steps:

1. Select File > New.
2. Select Basic Page from the Category list.
3. Select CSS from the Basic Page list.
4. Click Create.
5. Save your CSS file as columns.css within the CssFiles folder.
6. Select demo.htm.
7. Press Ctrl+F12 to open the CSS panel.
8. Select the Attach Style Sheet button.
9. Click Browse.
10. Navigate to your CSS file and select it.
11. Click OK.
12. Select screen from the media pop-up menu.
13. Your style sheet is now attached to demo.htm.
14. Click the New CSS Rule button.
15. Select the Tag option.
16. Select body from the Tag pop-up menu.
17. Click OK.
18. Select the Background option from the Category list.
19. Click the color cube.
20. For the color, choose #FFCC99.
21. Click the Box option from the Category list.
22. Leave the Same for all options selected.
23. Type 0 into the margin top pop-up menu.
24. Type 0 into the padding top pop-up menu.
25. Click OK.

Your style sheet should now be linked to your page. Open the demo.htm page in Code view. On line 7 (or just before or after) you should see the following code:

<link href="CssFiles/columns.css" rel="stylesheet" type="text/css" />

If you don't see this code, you need to retrace your steps and see where you have gone wrong.

You have now attached your style sheet and zeroed the body default padding and margin values. All that remains to be done is to create the rules that will form the structure of your layout.

To structure the layout of your page you will use three divs:

• #wrapper, to contain your design
• #content, the main content area
• #left, your left column

Your left column will be positioned by floating it to the left.

• View the movie: Building the CSS rules for your structure

Follow these steps:

1. Click the New CSS Rule button.
2. Select the Advanced option.
3. Type #wrapper into the Tag pop-up menu.
4. Select Box from the Category list.
5. Clear the Same for all check box for margin.
6. Type 0 in the top pop-up menu.
7. Select auto from the right pop-up menu.
8. Type 0 in the bottom pop-up menu.
9. Select auto from the left pop-up menu.
10. Select Background from the Category list.
11. Click Browse, navigate to your bg_image, and select it.
12. Select repeat-y from the Repeat pop-up menu.
13. Click OK.
14. Click the New CSS Rule button.
15. Select the Advanced option.
16. Type #left into the Tag pop-up menu.
17. Select Box from the Category list.
18. Select the Float pop-up menu and select left.
19. Type 195 into the width pop-up menu.
20. Click the New CSS Rule button
21. Select the Advanced option.
22. Type #content into the Tag pop-up menu.
23. Click OK.
24. Clear the margin Same for all check box.
25. Set the Top, Right, and Bottom pop-up menues to 0.
26. Type 205 into the Left text box.
27. Type 550 into the Width text box.
28. Click OK.

You have now created the CSS rules for your design's structure. Next you will add the divs to your page.

Page 3 of 4

Previous Page

Next Page