How to Create Absolute-Positioned (AP) Divs in Adobe Dreamweaver CS6 - dummies

How to Create Absolute-Positioned (AP) Divs in Adobe Dreamweaver CS6

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Dreamweaver CS6 uses CSS-controlled virtual containers, or boxes, created by the DIV tag to freely position content on a page. The DIV tag is a basic tag used to create areas for content on your page.

You can create DIV tags from several places in Dreamweaver, including the Layout section of the Insert panel. Each DIV tag can have a unique ID style assigned to it to control its position, appearance, and size. The process of placing content often requires two steps: creating the DIV tag and then creating its corresponding style.

Dreamweaver makes this task easy with the AP Div tool, which enables you to draw boxes freely on the page and place content inside.

CSS treats most container elements on a page as boxes; this approach, referred to as the CSS Box model, enables these elements to share uniform properties such as padding, margins, width, height, and borders.

Although CSS can regard most any containing element on a page as a box (such as a table or a list), DIV tags are most commonly used to create virtual boxes that you can use to position text, images, and even nested boxes.

Each box can have its own width, height, position (via the top and left properties), border, margins, and padding; each one is set using the appropriate CSS properties.

To create AP (Absolute-Positioned) Divs, follow these steps:

  1. Create a new page or open an existing page from your site.

  2. On the Insert panel, select the Layout category.

  3. Select the Draw AP Div tool.

    The cursor appears as a cross hair when you move it back over the page.

  4. Click anywhere on the page and drag to draw a new AP Div; release the mouse button.

    Drawing a new AP Div in Dreamweaver.

  5. Move the mouse pointer over the edge of the box until it changes to a 4-way arrow; click once and handles appear on all sides.

  6. Click and drag any of these handles to resize the box vertically or horizontally.

  7. To move the box, click and drag it by the tab that sits on its top-left edge and place the box where you want it on the page.

    Take a look at the Property inspector, and you see the name as well as many DIV properties listed.

  8. If the CSS Styles panel isn’t open, choose Window→CSS Styles to open it; under the All panel, click to the left of the style sheet (<style>) to expand it.

    You see a new #apDiv1 ID style that’s attached to the new AP Div you created. For each new DIV created, Dreamweaver assigns apDiv with a corresponding number in order of creation.

    CSS Styles panel on Dreamweaver.

  9. Click inside the new box to type, paste, or insert new content.

When you draw an AP Div on the page, two things occur: Dreamweaver inserts a tag to create the box and creates a CSS ID selector that stores the DIV’s position, width, height, and other properties.

After you create an AP Div, you can type, paste, or insert content directly inside it. You can also assign a class rule to any DIV from the Property inspector — most often for handling content formatting, leaving the ID selector to control positioning and dimensions.