MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH..., Getting Started

Page: 153 / 326

153
9
CHAPTER 9
Tutorial: Creating a CSS-based
Page Layout
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.