Home / Articles / Adobe Photoshop / Page Design in Dreamweaver CS4 with apDiv Tags

Page Design in Dreamweaver CS4 with apDiv Tags


  1. Drawing apDiv Objects
  2. Editing the CSS Code
  3. More Layout Techniques

Article Description

Short of coding your own CSS, the apDiv feature in Dreamweaver CS4 gives you as much flexibility and convenience in page design as you'll find in any environment. David Karlins provides a tour of this handy tag and its features for speedy web page creation.

Editing the CSS Code

As we've seen, some elements of the apDiv can be changed interactively right on the page—you can grab the upper-left corner and move an apDiv, or you can use one of the eight corner handles to resize a selected apDiv. Other attributes, including background colors or images, can be assigned and edited in the Properties inspector.

An extensive set of additional layout and formatting attributes are available in the CSS Styles panel (choose Window > CSS Styles). Expand the set of styles for your page by clicking the expand triangle (down arrow) in the CSS Styles panel. A separate CSS style is displayed for each of your apDiv tags.

With an apDiv selected in the CSS Styles panel, Dreamweaver displays a list of attributes in the bottom part of the panel, as shown in Figure 9.

Figure 9

Figure 9 Examining CSS attributes for an apDiv tag.

At the bottom of the properties list is a link to add a new property (see Figure 10). When you click the Add Property link in the CSS Styles panel, a new row appears in the panel, and a Click to Add New Property to Rule pop-up menu becomes active. When you open that pop-up, a long list of attributes appears. Most of these properties are named fairly intuitively: Background color changes the background color, Border changes border attributes, and so on. One feature you're likely to use is the Padding attribute, which defines space on the top, bottom, left, right, or all sides of an apDiv. In Figure 11, I'm adding 12 pixels of padding to create some space between my text and the edge of the apDiv.

Figure 10

Figure 10 Locating the link to add a new property.

Figure 11

Figure 11 Defining padding attributes for an apDiv.

3. More Layout Techniques | Next Section Previous Section