AP Divs Creation in Adobe CS5 Dreamweaver - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver uses CSS-positioned 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. 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. The AP Div tool enables you to draw boxes freely on the page and place content inside.

AP Div is short for absolute-positioned DIV; an item with an absolute position is fixed at a specific location on the page. When you draw an AP Div, its position is commonly set using the top and left CSS properties, with the top-left corner of the page as its reference point.

CSS treats every element on a page as a box that holds content; referred to as the CSS Box model. Although CSS can consider a box to be most any containing element on a page (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 other 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 CSS rules.

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

  2. Select the Draw AP Div tool.

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

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

    Click and drag the page with the Draw AP Div tool to create a box.
    Click and drag the page with the Draw AP Div tool to create a box.
  4. Move the mouse pointer over the edge of the box until it changes to a hand; click once and handles appear on all sides.

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

  6. 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.

  7. 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.

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

When you draw an AP Div on the page, Dreamweaver inserts a tag to create the box and creates an 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.

Each AP Div you draw is listed automatically in the AP Elements panel (choose Window→AP Elements to display it. The AP Elements panel can help you select, hide, and show any AP Divs on the page.

Use the AP Elements panel to select, hide, and rearrange AP Divs in your page.
Use the AP Elements panel to select, hide, and rearrange AP Divs in your page.