Adobe Dreamweaver CS3 How-Tos: Designing Pages with Absolute Placement Objects
Cascading Style Sheets (CSS) have evolved as the most flexible and powerful tool for page layout. Page layout with CSS involves writing CSS code that defines placement objects—think of them as "boxes"—that contain content like text, images, or media. The definition of these placement objects includes their location, their background color, padding within them, spacing around them, and other attributes.
Dreamweaver CS3 provides accessible designer-oriented tools for creating and editing CSS page layout in the form of what Dreamweaver calls Absolute Placement (AP) objects.
In this chapter, we will use only local CSS formatting. External style sheets, which can be used to set up styles for any or all pages in your site, are addressed in Chapter 7, "Formatting Page Elements with CSS."
Should you use tables or CSS for page design? Tables are simpler to learn, and you can feel more confident that your pages will look the way you intend in most desktop browsers.
CSS, AP, and Compatibility
While CSS is widely supported in different browsers and devices, AP objects are less predictable because when someone viewing your site changes text size or other variables (such as screen resolution), the result sometimes is that AP objects overlap with each other, causing a big mess on the screen. One option for creating Web pages with CSS layout that do not rely on AP objects is to take advantage of a wide range of well-prepared and richly commented CSS page designs. To access those page designs, choose File > New. In the New Document dialog, select the Blank Page category, and in the Page Type column choose HTML. You will see a long list of pages that use CSS (but not AP objects) to define page layout.
On the other hand, current thought on Web site construction is that using CSS makes your content easier to distribute on different platforms and can help you make it accessible to users with disabilities. Reader software, which reads page content out loud to visitors with impaired vision, can interpret CSS layout and present page content in a more coherent way than if blocks of content are laid out in table cells. In Dreamweaver, working with Absolute Placement objects is more like designing in Adobe Illustrator, Adobe Photoshop, or Adobe InDesign; however, it is somewhat less predictable in its display in a wide range of browsing devices.
Dreamweaver provides two approaches to page design with CSS: Absolute Placement Divs (basically the elements referred to as Layers in previous versions of Dreamweaver), and Divs. AP Divs are a feature of Dreamweaver, not a part of XHTML or CSS, but they are easy to use, particularly if you've worked in a program like Photoshop. Divs are part of the XHTML spec; in Dreamweaver they are less intuitive than AP Divs to work with, but they provide more control over page design.
#30 Defining Absolute Placement Objects
Absolute Placement (AP) Divs are containers on a Web page that hold content such as type, images, or other objects like media. AP Divs are defined both by their location on a page and their size (measured in pixels). Dreamweaver allows you to simply draw AP Divs on the page, just as if you were designing a page layout in a program like Illustrator or InDesign. As you draw, resize, or move an AP Div, Dreamweaver generates CSS code that defines or redefines the location and size of that AP Div.
To draw an AP Div in an open document, choose Insert > Layout Object > AP Div. An AP Div appears in the document. By default, this AP Div is 200 pixels by 115 pixels and is located at the top-left edge of your page (Figure 30a).
Figure 30a A default AP Div in the Document window.
When you generate an AP Div, it is selected, and you can edit it. If you deselect the AP Div by clicking elsewhere on the page, you can reselect it by clicking on the AP Div border.
You can move or relocate an AP Div in the Document window. To move an AP Div, click the AP Div handle (the icon in the upper-left corner of the selected AP Div), and simply drag it to another part of the page (Figure 30b).
Figure 30b Moving an AP Div.
You can also draw an AP Div interactively using the Draw AP Div tool in the Layout tab of the Insert bar.
To draw an AP Div, click the Draw AP Div tool. The cursor displays as a crosshair icon. Click and draw anywhere on the page to generate an AP Div. When you release your mouse cursor, the AP Div container is generated (Figure 30c).
Figure 30c Drawing an AP Div interactively.
You can, of course, generate as many AP Divs on a page as you wish. For example, you might create one AP Div on the left side of your page as a placeholder for navigation elements, another AP Div on the top of your page for a banner, and a third AP Div to hold the body of your page content (Figure 30d).
Figure 30d A typical page design with three AP Divs — one for the banner, another for a left navigation region, and the third for page content.
Dreamweaver offers tools to resize or align multiple AP Divs. This is useful, for example, if you wanted to display several thumbnail images aligned vertically (their tops aligned) on a page. To do this, first, Shift-click to select all the AP Divs you want to resize or align. Then, choose Modify > Arrange. From the submenu, you can select an alignment option (Align Left, Align Right, Align Top, or Align Bottom), or you can select Make Same Width or Make Same Height (Figure 30e).
Figure 30e Aligning several AP Divs on their top edges to hold thumbnail images.
Display support for AP Divs in the Dreamweaver Document window can only be described as unpredictable. Some AP Div features can be previewed in the Document window, while others cannot. To reliably see how AP Divs will look in a particular browser, preview the page in that browser. To do this from Dreamweaver, choose File > Preview in Browser. If you have more than one installed browser, select the desired browser from the submenu. Then you will see the page (and your AP Divs) as viewers with that browser will see it (Figure 30f).
Figure 30f Previewing AP Divs in a browser.
You can also embed an AP Div within another AP Div. This is somewhat similar to embedding a table inside a table.
The embedded AP Div is positioned within the AP Div in which it is placed. To embed an AP Div within an AP Div, click inside one AP Div and then insert another AP Div. Placing an AP Div within another AP Div is technically possible, and one reason to be aware of this is that it often happens by accident. When you place an AP Div inside another AP Div, you create unnecessarily complex pages that are difficult to edit. If your CSS page designs are too complex for AP Divs, consider invoking definable Div tags.