Coding the Layout

Open Dreamweaver in Design view and follow the steps in the Captivate demonstration to apply the CSS to your demo.html page:

• View the movie: Building the design structure

Follow these steps:

1. Select the Layout tab from the Insert bar.
2. Click the Insert Div button. This opens the Insert Div dialog box.
3. Select At insertion point from the Insert pop-up menu.
4. Select wrapper from the ID pop-up menu.
5. Click OK.
6. Delete the default text inserted into the wrapper div.
7. Click the Insert Div button. This opens the Insert Div dialog box.
8. Select the Insert pop-up menu.
9. Select the After start of tag.
10. Select <div id="wrapper"> from the selection pop-up menu.
11. Select content from the ID pop-up menu.
12. Click OK.
13. Click the Insert Div button. This opens the Insert Div dialog box.
14. Select the Insert pop-up menu.
15. Select the After start of tag.
16. Select <div id="wrapper"> from the selection pop-up menu.
17. Select left from the ID pop-up menu.
18. Click OK.
19. Press Ctrl+F12 to open the CSS panel. You will now add a height value to this rule. This enables you to see with greater clarity.
20. Select the #wrapper rule.
21. Click Add property.
22. Select height.
23. Type 400 and select pixels as the unit. You can now see more of your background image.
24. Delete the height property.
25. Save your work.

Figure 1 shows the completed demo.htm file.

Figure 1. The completed demo.htm file

That completes this tutorial.

You have seen in this tutorial how you can overlay a background image with divs to fake the appearance of columns that will always be of equal length.

Where to Go from Here

Now that you have an understanding of how background images can help create a layout with more than one column, why not work your way through the "Introduction to Designing with CSS" series to build on the knowledge you have gained here?

Page 4 of 4

Previous Page