Adobe Dreamweaver CS5 : Working with Divs and AP Elements - Divs and AP Elements 101

When the World Wide Web first made its debut in 1989, few people were concerned about the aesthetic layout of a page. In fact, because the Web was a descendant of Standard Generalized Markup Language (SGML) — a multiplatform text document and information markup specification — layout was trivialized. Content and the capability to use hypertext to jump from one page to another were emphasized. After the first graphical Web-browser software (Mosaic) was released, it quickly became clear that a page's graphics and layout could enhance a Web site's accessibility and marketability. Content was still king, but design was moving up quickly.

To relieve the woes of Web designers everywhere, the W3C included a feature within the new Cascading Style Sheets specifications that allowed for absolute positioning of an element upon a page. Absolute positioning enables an element, such as an image or block of text, to be placed anywhere on the Web page. Browser support for Cascading Style Sheets-Positioning specification began with fourth-generation browsers and has grown steadily ever since.

The addition of the third dimension, depth, truly turned the positioning specs into AP elements. Now objects can be positioned side by side, and they have a z-index property as well. The z-index gets its name from the practice in geometry of describing three-dimensional space with x, y, and z coordinates; the z-index is also called the stacking order because objects can be stacked upon one another.

All these attributes, and others such as background color, can be assigned to a CSS style, as shown in the following code:

#header {
   position: absolute;
   z-index: 1;
   height: 115px;
   width: 400px;
   left: 100px;
   top: 50px;
   background: #FFCC33;
}

The CSS style is then applied to a <div> tag to represent an area on the page, like this:

<div id="header">Header content goes here.</div>

Dreamweaver calls <div> tags that are drawn with your mouse AP elements; the CSS style is automatically created and embedded in the page for you. Drawing out the same AP element results in the same CSS code, except the selector name is automatically created for you (apDiv1, apDiv2, and so on) and the code is embedded in the page, like this:

<style type="text/css">
<!--
#apDiv11 {

position: absolute;
   z-index: 1;
   height: 115px;
   width: 400px;
   left: 100px;
   top: 50px;
   background: #FFCC33;
}
-->
</style>

The <div> code is also added for you, sans content, like this:

<div id="apDiv11"></div>

Although both approaches are valid, many designers prefer to keep the CSS information in the style sheet rather than embedded.

If you don't define a unit of measurement for AP element positioning, Dreamweaver defaults to pixels. If you edit out the unit of measurement, the Web browser defaults to pixels.

Positioning Measurement

The positioning of AP elements is determined by aligning elements on an x-axis and a y-axis. In CSS, the x-axis (defined as Left in CSS syntax) begins at the left side of the page, and the y-axis (defined as Top in CSS syntax) is measured from the top of the page down. As with many of the other CSS features, you have your choice of measurement systems for Left and Top positioning. All measurements are given in Dreamweaver as a number followed by the abbreviation of the measurement system (without any intervening spaces). The measurement system options are as follows: