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

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.

#31. Formatting AP Divs in the Property Inspector

You can move and resize AP Divs using the Property inspector. Defining location and size in the Property inspector is more precise than clicking and dragging with a mouse because you can define exact location, height, and width to the pixel.

To define a location on a page in the Property inspector for a selected AP Div, enter a distance from the left edge of the page (in pixels) in the L (for Left) field, and enter a distance from the top of the page in the T (for Top) field. An AP Div with L and T values of zero will be placed in the upper-left corner of the page (Figure 31a).

Figure 31a. Placing an AP Div in the upper-left corner of a page.

Technically, you can create overlapping AP Divs. You might be able to produce some cutting-edge page designs this way and come close to simulating the freedom you have in programs like Illustrator, Photoshop, or InDesign to stack objects on top of each other.

If you do overlap AP Divs, you assign Z-index values to selected AP Divs in the Property inspector to define the AP Divs’ “front-to-back” properties. AP Divs with higher Z-index values display on top of AP Divs with lower Z-index values.

Overlapping AP Divs are not universally supported in different browsing environments. They are less reliable than AP Divs in general. And, unless you are pretty expert at CSS, there are a number of pitfalls in designing with overlapping AP Divs that can sink your Web page. For instance, AP Divs often expand in size in different browsing environments in a way that can turn your page into gibberish if overlapping AP Divs are used.

The other definable elements of AP Divs are the following (Figure 31b):

Figure 31b. Defining AP Div properties in the Property inspector.

• CSS-P Element: Defines a name for the AP Div for use in scripts or CSS attributes. The name must contain only alphanumeric characters—no spaces—and start with a letter.

• Overflow: Defines how content that is larger than the AP Div will appear in a browser. By default, AP Divs stretch to fit content.

• Clip: Allows a specified amount of content in an AP Div to be “covered up” on the Left (L), Top (T), Right (R), or Bottom (B).

• Z-index: A numerical value for the bottom-to-top order of an AP Div that overlaps others. Higher-value AP Divs appear on top of lower-value AP Divs.

• Vis: Defines visibility. Normally AP Div content is visible, but AP Divs used in scripts are sometimes hidden, to be made visible later by actions of a visitor.

• Bg image: Defines the image that appears as a background in the AP Div.

• Bg color: Defines the background color for an AP Div. If you defined a Bg image, the image will override a background color.

• Class: Applies style using a CSS class. See Chapter 7, “Formatting Page Elements with CSS,” for an explanation of how to define CSS classes.

#32. Managing AP Divs in the AP Elements Panel

The AP Elements panel is valuable when you are designing a page with AP Divs. You can easily select AP Divs in the AP Elements panel (even if you have set the AP Divs’ visibility to hidden) and make them visible in the Document window.

The AP Elements panel also provides a different and sometimes easier way to define AP Div visibility and Z-index values than using the Property inspector. For one thing, you can see the properties of many AP Divs at a time in the AP Elements panel, which comes in handy when you are designing complex interactive pages with AP Divs that are either hidden or visible, depending on the state of a script that governs their properties.

You can also rename AP Divs in the AP Elements panel, but AP Div names must be alphanumeric and cannot start with a number.

View the AP Elements panel by choosing Window > AP Elements. The panel appears with all existing AP Divs listed (Figure 32a).

Figure 32a. Selecting an AP Div in the AP Elements panel.

You select an AP Div in the Document window by clicking it in the AP Elements panel. To rename an AP Div in the AP Elements panel, double-click the AP Div name and enter a new name. You can also switch among the three visibility states in the AP Elements panel by clicking in the visibility column on the left. The closed-eye icon means the AP Div is hidden. The open-eye icon means the AP Div is visible. No icon signifies default status, which generally means the AP Div is visible unless a browser setting conflicts with it (Figure 32b).

Figure 32b. Defining visibility for AP Divs.

#33. Defining Div Tags

Dreamweaver AP Divs allow designers to lay out pages using familiar tools, and Dreamweaver generates CSS code to match. A somewhat less-intuitive method of generating page layout with CSS in Dreamweaver CS3 is to define Div tags. The terminology is confusing: AP Div? Div tag? The difference is that AP Divs are easier to define, but do not permit as many formatting options as Div tags. Both are generated in the Dreamweaver Document window. Neither AP Divs nor Div tags require that you learn CSS coding—in both cases Dreamweaver CS3 generates code for you. But while AP Divs can be mainly defined and formatted using the Property inspector, more complex and powerful Div tags are managed in the CSS panel.

With Divs you can define many more attributes than with AP Divs. Like AP Divs, Divs can be positioned at absolute locations on a page, but they can also be positioned relative to other locations on a page, or they can float—position themselves in relation to other objects on the page. Like AP Divs, Divs can be sized, but you can also define spacing between them or padding within them, as you can with table cells.

In fact, you can apply an almost unlimited number of attribute combinations to Divs, including border color, thickness, and type. And these Div attributes are more predictable in different browsing environments.

In Dreamweaver, there are almost as many ways to generate and define a Div as there are possible attributes. The following set of steps provides a digestible approach that I use to teach students how to create Divs.

To create a Div and specify its position:

1. In a new document, select Insert > Layout Objects > Div Tag. The Insert Div Tag dialog appears.
   

   The Insert Div Tag dialog itself does not help much with defining the positioning, size, or other attributes of the Div you want to create. But it does allow you to name it.

2. In the ID field of the Insert Div Tag dialog (Figure 33a), enter an alphanumeric name (start with a letter; spaces are not allowed). Pick a name that will help you remember what this object is in case you create many Divs.
   

   Figure 33a. Naming a Div tag.

   

3. Do not click OK yet. All you’ve done so far is establish an invisible, sizeless section on your page. Instead, click the New CSS Style button in the Insert Div Tag dialog. The New CSS Rule dialog opens. In the next set of steps, you will define CSS rules that apply to the Div you created.
4. In the New CSS Rule dialog, leave the Selector Type radio button selection at Class, which is the default. Classes are highly flexible and can be applied to any element (including your Div). Select the This document only radio button. Then, in the Name field, enter a name (alphanumeric only) for the style. Then click OK (Figure 33b).
   

   Figure 33b. Naming a class with style attributes that will apply to a Div.

   

   The CSS Rule Definition dialog opens when you click OK in the New CSS Rule dialog. Here is where you set up the class attributes that will be applied to your new Div.

   Note

   If you select the top Define in radio button instead of the This document only button, you must create a new, external style sheet file. External style sheets are explained in Chapter 7, “Formatting Page Elements with CSS.”

5. In the CSS Rule Definition dialog, click the Positioning category. Here, you will choose which type of positioning to use when specifying the location of your Div, define the Div’s size, and then define its location on or relative to other parts of the page (Figure 33c).
   

   Figure 33c. Defining the rules for the .Sidebar1 class, which will determine the positioning of a Div.

   

6. From the Type pop-up menu, first choose a positioning type.
   

   • Choosing “absolute” places the object at specific values from the upper-left corner of the page.

   • Choosing “fixed” freezes the object on a page so that when a visitor scrolls up or down, the object stays in the same place.

   • Choosing “relative” places the object relative to its position in the text flow of the page. If your cursor is at the top of a Web page, absolute and relative positioning have the same effect, but if your cursor is in the middle of some text, relative positioning places the object a defined distance to the left of and below the current cursor point.

   Tip

   Choosing relative positioning without any offsets is often a way to give a Div a needed “hasLayout” property that Internet Explorer versions earlier than version 7 require to display some layouts properly.

   • Choosing “static” places the Div container at its location in the text flow.

7. Define the width and height of your Div container in the Width and Height fields. For example, a left navigation element might have a width of 100 pixels. Choose a unit of measurement from the pop-up menu next to each box (pixels are normally used for defining dimensions in Web design, and using pixels is the most reliable way to size objects).
8. Define the position of your box in the Placement area. You can define location in pixels (or other units) either from the top or bottom of the page and either from the left or right edge of the page. For instance, a left-side navigation element might be defined as 0 (zero) pixels from the top of the page, and 0 pixels from the left edge of the page.
9. The four Clip boxes work like masking in illustration programs. Clipping hides part of the outside of the content of a CSS positioning object. Usually you will not want to clip content.
10. Visibility defines whether or not the Div is visible. By default, Divs are visible.
11. The Z-index box defines how the Div will move in front of or behind other objects. Positioning objects with higher Z-index values appear on top of objects with lower Z-index values. If your positioning objects do not overlap, Z-index values are irrelevant.
12. The Overflow pop-up menu defines how text that does not fit in the positioning object will appear in a browser. The Visible option displays all content, even if it doesn’t fit in the Div. The Hidden option hides all content that does not fit in the Div. The Scroll option displays a scrollbar, so the Div looks like a miniature browser window, with its own scrollbar(s). And the Auto option leaves Div display up to the browsing environment of the user.
13. Once you have defined the options in the Positioning category, you have defined the basic location and size of your object (Div). Use the Border category to apply borders to your object. Use the Box category to define buffer spacing between content and the box (Padding) or spacing between objects (Margin). Spacing is usually unnecessary with Divs, but allowing 6 pixels of padding is often a good way to keep the content of different Divs from bumping into each other.
14. When you are finished defining options for your Div, click OK. You can enter content in your positioned Div by clicking inside it and typing, or inserting images (Figure 33d).
    

    Figure 33d. Inserting content into a positioned Div.

    

#34. Using Rulers, Guides, and Grids

Since AP Divs and Div tags allow you to design pages in an intuitive, interactive, graphical environment, wouldn’t it be nice if you could use design features like rulers, guides, and gridlines to make it easy to align and place layout objects? Good news—you can!

Dreamweaver’s rulers, guides, and gridlines display much like those in Illustrator, InDesign, and Photoshop. Combined with AP Divs and definable Div tags, they allow Dreamweaver’s Document window to function as a graphical design workspace.

To display rulers in an open document, choose View > Rulers > Show. The View > Rulers submenu also allows you to choose between pixels, centimeters, and inches (Figure 34a).

Figure 34a. Choosing a unit of measurement for rulers.

You can even redefine the horizontal and/or vertical zero points for the rulers. Do this by dragging the icon at the intersection of the horizontal and vertical rulers into the Document window. The point at which you release your mouse becomes the new zero point for the horizontal and vertical rulers (Figure 34b). To reset the ruler zero points, choose View > Rulers > Reset Origin.

Figure 34b. Setting a customized horizontal and vertical zero point for rulers.

To place a horizontal or vertical guide on the page, click and drag a ruler, and then drag it into the Document window (Figure 34c).

Figure 34c. Placing a horizontal guide.

To edit the location of a guide, click and drag it. You can also double-click to edit the guide location or unit of measurement.

Guides can be locked to prevent accidental editing; choose View > Guides > Lock Guides. Guides can also be made “magnetic” so that they either snap to objects on the page, or objects on the page snap to them. To make a guide snap to elements on the page, choose View > Guides > Guides Snap to Elements. To make elements snap to guides, choose View > Guides > Snap to Guides. Clear guides by choosing View > Guides > Clear Guides.

Grids can be displayed by choosing View > Grid > Show Grid. Make grids magnetic by choosing View > Grid > Snap to Grid.

Define grid properties by choosing View > Grid > Grid settings. The Grid Settings dialog allows you to change the color of gridlines, spacing between grids, grid display and snap properties, and display (dots or lines). Click Apply to preview changes to the grid, or click OK to close the dialog and change grid settings in the Document window (Figure 34d).

Figure 34d. Editing grid display settings.