Add color to the page

1. Now you’ll add color to the page by setting background colors for some of the layers, and for the background of the entire page.Select the navigation layer by clicking its name in the Layers panel (Window > Layers).

   

2. In the Property inspector, click once inside the Background Color text box.

   The text box is located directly next to the Background Color (Bg) color box.

3. In the Background Color text box, enter the hexadecimal value #993300 and press Enter (Windows) or Return (Macintosh).

   

   The background color of the navigation layer turns to reddish-brown.

4. Select the flash_video layer by clicking its name in the Layers panel.
5. In the Property inspector, click once inside the Background Color text box, enter the hexadecimal value #F7EEDF, and press Enter (Windows) or Return (Macintosh).

   The color of the flash_video layer turns to light tan.

6. Repeat the previous steps to change the color of the text layer to light tan as well.

1. Once you’ve set the background colors for all three layers, click once to the right of all of your layers to make sure nothing is selected.

   Next you’ll change the background color for the entire page by modifying page properties. The Page Properties dialog box lets you set a number of page properties, including the size and color of page fonts, the colors of visited links, page margins, and much more.

2. Select Modify > Page Properties.
3. In the Appearance category of the Page Properties dialog box, click the Background Color color box and select black (#000000) from the color picker.

   

4. Click OK.

   Your page background turns to black.

5. Save your page.

Your CSS page layout is now complete. The layout contains a number of layers that can hold assets such as images, text, and Flash Video files. Your next step is to add the content.

If you completed Tutorial: Adding Content to Pages you know that you can use Dreamweaver to easily insert assets in your page. If you didn’t complete that tutorial, you can use the illustrations as a reference while adding content to the CSS-based page layout you just completed.

You can find the completed version of this tutorial in the cafe_townsend/completed_files/dreamweaver folder.