CHAPTER 9

Tutorial: Creating a CSS based 

Page Layout

9

In 

Chapter 4,  Tutorial: Creating a Table based Page Layout, 

 you learned 

how to use Dreamweaver's table design features to create a page layout. In 

this tutorial, you'll learn how to use Cascading Style Sheets (CSS) to create 

a similar layout. Many designers prefer CSS based layouts because CSS 

gives you greater control over the positioning of elements, reduces the 

amount of code you need, and lets you format layout blocks with margins, 

borders, colors, and so on.

If you haven't defined a Dreamweaver site and created the cafe_townsend 

local root folder, you must do so before you proceed. For instructions, see 

Chapter 3,  Tutorial: Setting Up Your Site and Project Files. 

In this tutorial you will complete the following tasks:

Learn about CSS based page layout  . . . . . . . . . . . . . . . . . . . . . . . 153

Examine the design comp  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Create and save a new page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Insert layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  157

Add color to the page  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Learn about CSS based page 

layout

Many websites use table based layouts to display information on their 

pages. Tables are useful for presenting tabular data (such as rows and 

columns of repeating elements) and are extremely easy to create on a page. 

But tables also tend to generate a great deal of code that is difficult to read 

and maintain. Additionally, because of the amount of tags required, and 

the potential for  nesting,  tables can cause problems for disabled people 

who are using screen readers to view web pages.

153