AP Divs Modification in Adobe CS5 Dreamweaver - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

In Adobe Creative Suite 5 (Adobe CS5) Dreamweaver you make changes to an AP Div in the AP Elements panel. The panel is often grouped with the CSS Styles panel, just in case you’re looking for it.

  1. Choose Window→AP Elements to open the AP Elements panel.

  2. In the panel, locate and select apDiv2 to highlight it on the page.

    The Property inspector displays its size and position in addition to other properties.

  3. Using the text boxes in the Property inspector, change the box width by entering a number into the W field and change the box height by entering a number in the H field.

  4. Click the swatch next to Bg Color and choose a color from the pop-up Swatches panel to set a background color for the box.

    For additional properties, such as border or padding, add them in the CSS Styles panel.

  5. If the CSS Styles panel isn’t already visible, open it by choosing Window→CSS Styles.

  6. Double-click the #apDiv2 ID style that controls the box.

    The CSS Rule Definition dialog box appears.

    Add CSS properties across a variety of categories to build rules.
    Add CSS properties across a variety of categories to build rules.
  7. Select the Border category from the left to change the border.

  8. In the Style column, use the Top drop-down list to set a border style (such as Solid) to all four sides.

    Use the Top drop-down list under the Width category to select a border thickness (for example, medium) for all four sides. Use the topmost Color Picker under the Color column to assign a border color to all four sides.

    To assign different values to any or all sides for style, width, or color, deselect the Same for All check box under their respective columns.

  9. In the Box category on the left, under Padding, set the padding for all four sides of the box to the thickness you want (for example, enter 5 px in the text boxes).

  10. Click OK to exit the panel and apply the changes.

    You see how the CSS properties you applied affect the apDiv2 box on the page.

To hide a box shown under the AP Elements panel, click the column to the left of its name (under the Eye icon) until a closed Eye icon appears. To make the box reappear, click the Eye icon until the box opens again.

You may notice the Prevent Overlaps check box, deselected by default, at the top of the AP Elements panel. Because AP Divs can easily overlap each other, selecting this check box overrides that behavior by forcing boxes next to each other and preventing the creation of new boxes on top of each other.