Dreamweaver Workbook
AP Div Layout

An AP Div is an HTML page element--specifically, a div tag that has an absolute position assigned to it. AP Divs can contain text, images, or any other content that you can place in the body of an HTMLdocument. With Dreamweaver, you can use AP elements to layout your page. You can place AP Divs in front of and behind each other, hide some AP elements while showing others, and move an AP Div across the screen. You can place a background image in an AP div, then place a second one, containing text with a transparent background, in front of that. AP Divs provide a great deal of flexibility in placing content. You can easily add a CSS rule to any 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.

Insert an AP Div at a particular place in the document:
Place the insertion point in the Document window, and then select Insert > Layout Objects > AP Div.

Place the insertion point in an AP Div:
Click anywhere inside the AP Div’s borders. The AP Div’s borders are highlighted, and the selection handle appears, but the AP Div itself is not selected.

Show AP Div borders:
Select View > Visual Aids and select either AP Div Outlines or CSS Layout Outlines.
Selecting both options simultaneously has the same effect.

Hide AP Div borders:
Select View > Visual Aids and deselect both AP Div Outlines and CSS Layout Outlines.

 

Div Tag

The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

What is the difference between
a standard Div and an AP Div?

  • An AP Div is just what Dreamweaver calls a div with "absolute positioning", which means you can speciy exactly where you want it to appear on the page.
  • A standard div will just appear in the normal flow of the page, but is useful because you can apply whatever styling you want to it.