Dreamweaver CS6: The Missing Manual

CSS Layout Tutorial

In this tutorial, you’ll create a two-column web page using CSS floats. You’ll also use absolute positioning to control the placement of navigation elements (skip ahead to Figure 9-33 to see the end result). You can achieve a design like this many ways. You could, for example, use Dreamweaver’s CSS Layouts (Dreamweaver’s CSS Layouts), start with a blank web page, add divs, position them using CSS, and then add content. In this exercise, you’ll start with an already created web page: It contains basic HTML, but no divs to organize that content or style sheets to format the page.

Note

You need to download the tutorial files from www.sawmac.com/dwcs6 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_DWCS6 folder). (In a nutshell: choose Site→New Site. In the Site Setup window, type CSS Layout in 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. In the Files panel, double-click the file about.html.

   Alternatively, choose File→Open and double-click the file about.html. Dreamweaver opens a web page with content and basic HTML formatting. You’ll start by grouping the banner content—the logo, nav bar, and “Make a reservation” link.

2. Click to the right ...