A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements. When you create a CSS layout, you place div tags on the page, add content to them, and position them in various places. Unlike table cells, which are restricted to existing somewhere within the rows and columns of a table, div tags can appear anywhere on a web page. You can position div tags absolutely (by specifying x and y coordinates), or relatively (by specifying their distance from other page elements). You can also position div tags by specifying floats, paddings, and margins—the preferred method by today’s web standards.
Creating CSS layouts from scratch can be difficult because there are so many ways to do it. You can create a simple two-column CSS layout by setting floats, margins, paddings, and other CSS properties in a nearly infinite number of combinations. Additionally, the problem of cross-browser rendering causes certain CSS layouts to display properly in some browsers and improperly in others. Dreamweaver makes it easy for you to build pages with CSS layouts by providing 16 pre-designed layouts that work across different browsers.
Using the pre-designed CSS layouts is the easiest way to create a page with a CSS layout, but you can also create CSS layouts by using absolutely-positioned elements (AP elements). An AP element in Dreamweaver is an HTML page element—specifically, a div tag or any other tag—that has an absolute position assigned to it. The limitation of Dreamweaver AP elements, however, is that since they are absolutely positioned, their positions never adjust on the page in relation to the size of the browser window.
Once you become more experienced you will be able to create page layouts by inserting div tags manually and applying CSS positioning styles to them.
Inserting an AP div tag
Start this activity by creating a new, blank page and inserting an AP div tag. AP elements can contain text, images, or any other content that you can place in the body of an HTML document.
You can resize an individual div or simultaneously resize multiple divs to make them the same width and height.
You can move divs in Design view in much the same way you move objects in most basic graphics applications. You can add images, text, and other content (such as Flash movies) to your divs just as you would elsewhere in a web page.
