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.

A CSS-based layout--that is, a layout that uses block elements instead of table rows and columns--contains much less code than a table-based layout of the same nature. CSS-based layouts generally use <div> tags instead of <table> tags to create CSS layout blocks used for layout. You can position these CSS layout blocks anywhere on the page, and assign properties to them such as borders, margins, background colors, and so on. Additionally, people using screen readers to view web pages have a much easier time browsing pages built with CSS because the code is simpler and shorter.

Dreamweaver lets you create layers. A Dreamweaver layer is an HTML page element that you can position anywhere on your page. More specifically, it is a <div> tag (or any other tag) with an absolute position. You use Dreamweaver to drag layers on your page and then position the layers where you want them. The layers act as content blocks that hold assets like images, Flash files, text, and so on.

Dreamweaver layers are absolutely positioned elements. That is, they have a specific position that is set relative to the top and left margins of the page. You cannot create a CSS-based layout with layers and then center the contents of the page. Thus, the layout in this tutorial is slightly different than the one you created in Tutorial: Creating a Table-based Page Layout.

For more information about Dreamweaver layers, see Laying Out Pages with CSS in Using Dreamweaver.