Operation Manual

ManualsBrandsAdobe ManualsSoftwareDREAMWEAVER CS5.5

161

162

163

164

165

166

167

168

169

170

154

USING DREAMWEAVER

Creating pages with CSS

Last updated 3/28/2012

AP elements will usually be absolutely positioned div tags. (These are the kinds of AP elements Dreamweaver inserts

by default.) But remember, you can classify any HTML element (for example, an image) as an AP element by assigning

an absolute position to it. All AP elements (not just absolutely positioned div tags) appear in the AP elements panel.

HTML code for AP Div elements

Dreamweaver creates AP elements using the div tag. When you draw an AP element using the Draw AP Div tool,

Dreamweaver inserts a

div tag in the document and assigns the div an id value (by default apDiv1 for the first div you

draw, apDiv2 for the second div you draw, and so on). Later, you can rename the AP Div to anything you want using

the AP elements panel or the Property inspector. Dreamweaver also uses embedded CSS in the head of the document

to position the AP Div, and to assign the AP Div its exact dimensions.

The following is sample HTML code for an AP Div:

<head>

<title>Sample AP Div Page</title>

<!--

#apDiv1 {

position:absolute;

left:62px;

top:67px;

width:421px;

height:188px;

z-index:1;

}

-->

</style>

</head>

<body>

</div>

</body>

</html>

You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, z-index (also

called the stacking order), and visibility.

Insert an AP Div

Dreamweaver lets you easily create and position AP Divs on your page. You can also create nested AP Divs.

When you insert an AP Div, Dreamweaver displays an outline of the AP Div in Design view by default, and highlights

the block when you move the pointer over it. You can disable the visual aid that shows AP Div (or any AP element)

outlines by disabling both AP Element Outlines and CSS Layout Outlines in the View

> Visual Aids menu. You can

also enable backgrounds and the box model for AP elements as a visual aid while you design.

After you create an AP Div, you can add content to it by simply placing your insertion point in the AP Div, and then

adding content just as you would add content to a page.