Dreamweaver CS5: The Missing Manual

CSS Layout Tutorial

In this tutorial, you’ll create a page using one of Dreamweaver’s CSS Layouts. You’ll then add content to the page, apply styles, and modify the design to meet the exacting standards of Chia-Vet (see Figure 9-36).

Note

You need to download the tutorial files from www.sawmac.com/dwcs5/ to complete this tutorial. See the note on Note for more details.

Once you download the tutorial files and open Dreamweaver, set up a new site as described on Setting Up a Site. Name the site CSS Layout, and select the Chapter09 folder (inside the MM_DWCS5 folder). (In a nutshell: choose Site→New Site. In the Site Setup window, type CSS Layout into the Site Name field, click the folder icon next to the Local Site Folder field, navigate to and select the Chapter09 folder, and then click Choose or Select. Finally, click Save.)

1. Choose File→New.

   The New Document Window opens (see Figure 9-26).

2. Select the “Blank Page” category in the left column; select HTML from the Page Type column, and select “2 column fixed, right sidebar, header and footer” from the Layout column. Select XHTML 1.0 Transitional from the DocType menu.

   You selected a page design with two columns, a right-hand sidebar and a main content area on the left, with areas at the top and bottom to hold a banner and copyright notice.

   Next you need to tell Dreamweaver where to store the CSS required to make this design work.

3. Make sure you select Create New File in the Layout CSS drop-down menu.

   This tells Dreamweaver to create a new external ...