How to Create Rollovers in Adobe Dreamweaver CS6
How to Create a New Document from CSS Starter Pages in Dreamweaver CS6
How to Start a New Site in Adobe Dreamweaver CS6

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

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.

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

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

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create Relatively Positioned DIVs in Adobe Dreamweaver CS6
How to Run Site Reports on Your Adobe Dreamweaver CS6 Website
How to Use an Image as a Background in Adobe Dreamweaver CS6
How to Create a New Tag Style in Adobe Dreamweaver CS6
How to Place Photoshop Smart Objects in Adobe Dreamweaver CS6
Advertisement

Inside Dummies.com