When using a <div> object, the typical workflow is to first create the required CSS rules. In most cases, the CSS rule uses the ID selector because it is applied to only one <div> tag. It's a good idea to give your CSS rules descriptive names, such as #header, #footer, #mainContent, and #navigation.

To create a CSS rule for use with <div> tags, follow these steps:

After you have defined your CSS rule, follow these steps to add a <div> tag to the page:

If the <div> tag was not wrapped around previously selected content, Dreamweaver adds placeholder text to help identify the tag and its class or ID. As another helpful aid to identification, a red outline appears when your cursor crosses the outer boundary of the <div>. This highlight is controlled by the Mouse-Over option found in the Highlighting category of Preferences. The red outline is replaced by a thick blue one when the <div> tag is selected, as shown in Figure 11-3.

Figure 11-3. A thick, blue outline appears around the div when selected.

Select the <div> in Design view and the Property inspector displays all the current attributes. If you make any changes in the Property inspector, such as adding or altering the background color, the change is written into the associated CSS style rule. If the <div> tag's position property is set to absolute, the outline is supplemented with positioning and sizing handles. The interaction among object, Property inspector, and style sheet holds true if you drag the selected <div> around the page or resize it using the sizing handles; see the following section, "Modifying an AP Element," for more details. You can also modify <div> tag properties by editing the style rule directly or by altering its properties on the Tag Inspector panel.

The <div> tag is a structural element, not intended to be apparent when viewed through the browser at run-time. Design-time, however, is another matter. Designers often need to be able to see the underlying structure to craft their layouts; they also need to be able to hide the structure at any point so they can see a browser-like view while designing.

Dreamweaver provides a full slate of visualization options for CSS layouts. Each of the options, found under the Visual Aids menu button on the Document toolbar or the View

CSS Layout Backgrounds

In the early stages of laying out a page, it's often helpful to see your basic building blocks clearly depicted. When you invoke the CSS Layout Background options from the Visual Aids menu, Dreamweaver clears any background image or color previously defined in the CSS styles and replaces them with a different solid color for each <div> tag. The resulting patchwork shows at a glance how the page is structured (see Figure 11-4). This option is also useful when debugging layouts because it clearly shows which <div> tags—if any—overlap.

Figure 11-4. Turn on CSS Layout Backgrounds when first creating your CSS layout or debugging it.

Tip

The colors assigned to each of the <div> backgrounds are random and can't be predefined. A new set of colors is used every time you toggle CSS Layout Backgrounds into view.

CSS Layout Box Model

All CSS block elements are rendered in the browser according to the CSS box model. The box model, established by the W3C CSS standards body, determines how much room a block element actually takes up on the page. The amount of space required for a block element, such as a <div> tag, is a combination of the declared width, plus the padding, border, and margin settings. For example, say a div tag has the following style declared:

#myBox {
  width:200px;
  padding:10px;

border:5px;
  margin:10px;
}

Although nominally, the myBox style appears to be 200 pixels wide, CSS specifications indicate that it will actually take up 250 pixels of space. Here's how the space requirement is figured:

200 pixels content area width
       10 pixels padding-left
       10 pixels padding-right
        5 pixels border-left
        5 pixels border-right
       10 pixels margin-left
       10 pixels margin-right
      250 pixels width total

To make it easy for you to design with the box model in mind, Dreamweaver provides the CSS Layout Box Model visual aid. When enabled, any selected <div> tag or otherwise affected block element, depicts all the contributing elements: content area (the width), padding, borders, and margins. Both the padding and margins are shown with colored diagonal lines, although in opposing directions, as shown in Figure 11-5.

Figure 11-5. The CSS Layout Box Model visual aid reveals the unseen reserved space around layout elements.

Dreamweaver not only reveals how the layout element is constructed visually, you'll also receive a wealth of information from tooltips that appear as you move your cursor around the element. The information in the tooltip varies according to cursor's position:

• Hover over the content area to see all the CSS properties, including those related to the box model.

• Move your cursor over the padding or margin areas to see their respective values; for example, Margin: 10px.

• With the cursor over the border, the tooltip reveals the current values for the margin, border, and padding properties.

I recommend turning on the CSS Layout Box Model feature in the fine-tuning and debugging stages of your Web page development; it's a great tool for understanding exactly why elements on your page are positioned the way they are.

CSS Layout Outlines

CSS Layout Outlines, when enabled, place a border around <div> tags and other block layout elements (see Figure 11-6). The outline is a dashed style for inserted <div> tags and a solid border for drawn Dreamweaver AP elements.

Figure 11-6. Highlight your <div> tags at design-time with CSS Layout Outlines.

I tend to keep CSS Layout Outlines enabled during most of my design process; I find having the outlines visible quickly allows me to insert content in just the right places and, more importantly, select the <div> tags for quick refinement.

Applying a CSS Layout

In this Technique, you apply previously defined CSS styles to a variety of <div> tags to create a basic layout.

1. From the Techniques site, expand the 11_Divs folder and open div_start.htm.

   The first style to apply acts as a container for the entire page; to apply this properly, you'll need to position the cursor properly.

2. Place your cursor in the series of links on the page and click the <p> tag in the Tag Selector.

3. From the Insert bar's Layout category, click Insert Div Tag.

4. When the Insert Div Tag dialog box opens, make sure the Insert list is set to Wrap Around Selection.

5. From the ID list, choose Wrapper and click OK.

Next, add the first of three <div> tags, the header so that it appears with the wrapper <div> tag:

1. From the Insert bar's Layout category, click Insert Div Tag.

2. From the Insert list, choose After Start Of Tag and then, when the adjacent list appears, select <div id="wrapper">.

3. From the ID list, choose Header and click OK.

   

4. Click Delete to remove the selected placeholder text.

Now you're ready to insert the middle <div> tag after the header <div> tag:

1. From the Insert bar's Layout category, click Insert Div Tag.

2. From the Insert list, choose After Tag and then, when the adjacent list appears, select <div id="header">.

3. From the ID list, choose Middle and click OK.

The final <div> wraps around navigation links and forms the bottom area, the footer:

1. Place your cursor in the series of links on the page and click the <p> tag in the Tag Selector.

2. From the Insert bar's Layout category, click Insert Div Tag.

3. When the Insert Div Tag dialog box opens, make sure the Insert list is set to Wrap Around Selection and, from the ID list, choose Footer; click OK when you're done.

   

4. Save your page.

Your new CSS-based layout is now ready to be filled out with content.

When you want to draw out your AP element quickly, use the object approach. If you come from a traditional page-designer background and are accustomed to using a program such as QuarkXPress or PageMaker, you're already familiar with drawing out frames or text boxes with the click-and-drag technique. Dreamweaver uses the same method for placing and sizing new AP element objects. To draw out an AP element as an object, follow these steps:

After you've dragged out your AP element, notice several changes to the screen. First, the AP element now has a small box on the outside of the upper-left corner. This box, shown in Figure 11-8, is the Selection handle, which you can use to move an existing AP element around the Web page. When you click the selection handle, eight resize handles appear around the perimeter of the AP element.

Figure 11-8. After an AP element is created, you can move it by dragging the selection handle and size it with the resize handles.

Another subtle but important addition to the screen is the AP element icon. Like the other Invisible Element icons, the AP element icon can be cut, copied, pasted, and repositioned. When you move the AP element icon, however, its corresponding AP element does not move—you are actually only moving the code for the AP element to a different place in the HTML source. Generally, the location of the actual AP element code in the HTML is immaterial—however, you may want to locate your AP element source in a specific area to be appropriately placed for accessibility purposes. Dragging and positioning AP element icons one after another is a quick way to achieve this task.

The second method for creating an AP element is to use the menus. Instead of selecting an object from the Insert bar, choose Insert

Although the AP element is by default positioned in the upper-left corner of the Document window, it does not have any coordinates listed in the Property inspector. The position coordinates are added when you drag the AP element into a new position. If you repeatedly add new AP elements through the menus without moving them to new positions, each AP element stacks directly on top of the previous one, with no offset.

You can designate the default size—as well as other features—of the inserted AP element with Insert

Figure 11-9. If you're building AP elements to a certain specification, use the AP Elements Preferences category to designate your options.

In many cases, absolute positioning uses the top-left corner of the Web page—the position at which the <body> tag begins—as the point of origin for positioning the AP elements. You can also specify measurements relative to other objects, such as <divs>. Dreamweaver offers several methods to accomplish relative positioning.

Using the Relative attribute

In the first method for handling relative positioning, you select Relative as the Type attribute in the Style Sheet Positioning category. Relative positioning does not force a fixed position; instead, the positioning is guided by the HTML tags around it. For example, you may place a list of some items within a table and set the positioning relative to the table. You can see the effect of this sequence in Figure 11-10. Notice that Dreamweaver does not display sizing handles or a selection handle for relative AP elements.

Figure 11-10. The selected AP element is positioned relative to the bottom of the table.

Relative attributes can be useful, particularly if you want to place the positioned objects within free-flowing HTML. Free-flowing HTML repositions itself based on the size of the browser. When you're using this technique, remember to place your relative AP elements within absolutely positioned AP elements. Otherwise, when the end user resizes the browser, the relative AP elements position themselves relative to the browser and not to the absolutely positioned AP elements. This situation can produce messy results—use relative positioning with caution when mixed with absolute AP elements.

You can choose from several methods to select an AP element for alteration (see Figure 11-11). The selection method you choose generally depends on the complexity of your page layout:

Figure 11-11. There are a number of different methods for selecting an AP element to modify.

To resize an AP element, position the pointer over one of the eight resize handles surrounding the selected AP element. When over the handles, the pointer changes shape to a two- or four-headed arrow. Now click and drag the AP element to a new size and shape.

You can also use the arrow keys to resize your AP element with more precision. The following keyboard shortcuts change the width and height dimensions while the AP element remains anchored by the upper-left corner:

Tip

You can quickly preview the position of an AP element on a Web page without leaving Dreamweaver. Deselecting the View

The easiest way to reposition an AP element is to drag the selection handle. If you don't see the handle on an AP element, click anywhere in the AP element. You can drag the AP element anywhere on the screen—or off the bottom or right side of the screen. To move the AP element off the left side or top of the screen, enter a negative value in the left and top (L and T) text boxes of the CSS-P Property inspector; whenever an AP element is selected, the CSS-P Property inspector is available.

As with resizing AP elements, you can also use the arrow keys to move the AP element more precisely:

You can modify almost all the CSS-P attributes for your AP element right from the CSS-P Property inspector, shown in Figure 11-12. Certain attributes, such as width, height, and background image and color are self-explanatory or recognizable from other objects. Other AP elements-only attributes such as visibility and inheritance require further explanation. Table 11-2 describes all the CSS-P properties, and the following sections discuss the features unique to AP elements.

Figure 11-12. The CSS-P Property inspector makes it easy to move, resize, hide, and manipulate all the visual elements of an AP element.

Overflow

Normally, an AP element expands to fit the text or graphics inserted into it. You can, however, restrict the size of an AP element by changing the height and width values in the Property inspector. What happens when you define an AP element to be too small for an image, or when an amount of text depends on the setting of the AP element's overflow attribute? AP elements (the <div> and <span> tags) support four different overflow settings:

• Visible (Default): All the overflowing text or image is displayed, and the height and width settings established for the AP element are ignored.

• Hidden: The portion of the text or graphic that overflows the dimensions is not visible.

• Scroll: Horizontal and vertical scroll bars are added to the AP element regardless of the content size or amount, and regardless of the AP element's measurements.

• Auto: When the content of the AP element exceeds the width and/or height values, horizontal and vertical scroll bars appear.

Currently, support for the overflow attribute is spotty at best. Dreamweaver doesn't display the result in the Document window; it must be previewed in a browser to be seen. Navigator offers limited support: Only the attribute's hidden value works correctly, and just for text. Only Internet Explorer 4.0 or later and Netscape 6 render the overflow attribute correctly, as shown in Figure 11-13.

Figure 11-13. When your contents are larger than the dimensions of your AP element, you can regulate the results with the overflow attribute.

Clipping

If you're familiar with the process of cropping an image, you'll quickly grasp the concept of clipping AP elements. Just as desktop publishing software hides but doesn't delete the portion of the picture outside the crop marks, AP elements can mask the area outside the clipping region defined by the Left, Top, Right, and Bottom values in the Clip section of the CSS-P Property inspector.

All clipping values are measured from the upper-left corner of the AP element. You can use any CSS standard measurement system: pixels (the default), inches, centimeters, millimeters, ems, or picas.

The current implementation of CSS supports only rectangular clipping. When you look at the code for a clipped AP element, you see the values you inserted in the CSS-P Property inspector in parentheses following the clip attribute, with the rect (for rectangular) keyword, as follows:

<div id="apDiv1" style="position:absolute; left:54px; top:24px;

width:400px; height:115px; z-index:1; visibility:inherit;

clip:rect(10px 100px 100px 10px)">

A Visual Clipping Technique

In Dreamweaver, you cannot draw the clipping region visually—the values have to be explicitly input in the Clip section of the CSS-P Property inspector. That said, a trick using a second temporary AP element can make it easier to position your clipping. Follow these steps to get accurate clipping values:

1. Insert your original AP element and image.

2. Nest a second, temporary AP element inside the first, original AP element (click the Draw AP Div button in the Insert bar and draw out the second AP element inside the first).

   If you have your AP Element Preferences set so that an AP element does not automatically nest when created inside another AP element, press the Alt (Option) key while you draw your AP element to override the preference.

3. Position the second AP element over the area you want to clip. Use the AP element's sizing handles to alter the size and shape, if necessary.

4. Note the position and dimensions of the second AP element (the Left, Top, Width, and Height values).

5. Delete the second AP element.

6. In the Property inspector for the original AP element, enter the Clip values as follows:

   • L: Enter the Left value for the second AP element.

   • T: Enter the Top value for the second AP element.

   • R: Add the second AP element's Left value to its Width value.

   • B: Add the second AP element's Top value to its Height value.

Dreamweaver displays the clipped AP element after you enter the final value. The following figure shows the original AP element and the temporary AP element on the left, and the final clipped version of the original AP element on the right.

Generally, you specify values for all four criteria: Left, Top, Right, and Bottom. You can also leave the Left and Top values empty or use the keyword auto—which causes the Left and Top values to be set at the origin point: 0,0. If you leave any of the clipping values blank, the blank attributes are set to auto.

Dreamweaver offers another tool to help manage the AP elements in your Web page: the AP Elements panel. Although this tool doesn't display as many properties about each element as the Property inspector, the AP Elements panel gives you a good overview of all the AP elements on your page. It also provides a quick method of selecting an AP element—even when it's offscreen—and enables you to change the z-index and the nesting order.

The AP Elements panel, shown in Figure 11-14, can be opened either through the Window menu (Window

Figure 11-14. Use the AP Elements panel to quickly select—or alter the visibility or relationships of—all the AP elements on your page.

With the capability to position AP elements anywhere on a page comes additional responsibility and potential problems. In anything that involves animation, correct alignment of moving parts is crucial. As you begin to set up your AP elements, their exact placement and alignment become critical. Dreamweaver includes two tools to simplify layered Web page design: the ruler and the grid.

Rulers and grids are familiar concepts in traditional desktop publishing. Dreamweaver's ruler shows the x-axis and y-axis in pixels, inches, or centimeters along the outer edge of the Document window. The grid crisscrosses the page with lines to support a visual guideline when you're placing objects. You can even enable a snap-to-grid feature to ensure easy, absolute alignment.

Using the ruler

With traditional Web design, "eyeballing it" was the only option available for Web page layout. The absolute positioning capability of AP elements remedied this deficiency. Now online designers have a more precise and familiar system of alignment: the ruler. Dreamweaver's ruler can be displayed in several different measurement units and with your choice of origin point.

To toggle the ruler in Dreamweaver, choose View

Figure 11-15. Use the horizontal and vertical rulers to assist your AP element placement and overall Web page layout.

By default, the ruler uses pixels as its measurement system. You can change the default by choosing View

Dreamweaver also enables you to move the ruler origin to a new position. Normally, the upper-left corner of the page acts as the origin point for the ruler. On some occasions, it's helpful to start the measurement at a different location—at the bottom-right edge of an advertisement, for example. To move the origin point, select the intersection of the horizontal and vertical rulers and drag the crosshairs to a new location. When you release the mouse button, both rulers are adjusted to show negative values above and to the right of the new origin point. To return the origin point to its default setting, choose View

Tip

You can access a ruler context menu by right-clicking (Control+clicking) the ruler itself. The context menu enables you to change the system of measurement, reset the origin point, or hide the rulers.

Working with guides

With the advent of CSS layouts, Web designers found themselves needing a toolset more traditionally associated with graphic programs: guides. A guide is a single, thin, positionable line used at design-time to align elements on a page. Guides are either horizontal or vertical and stretch from one edge of the browser window to the other.

Dreamweaver guides are wonderfully powerful and incorporate standard features found in graphic programs like Photoshop and Fireworks as well as some unique Web-centric options. Guides can be shown or hidden, set precisely, varied in color, snap-to-the-grid and/or objects. You can even have objects snap to guides. Dreamweaver designers will find guides a welcome addition to their working toolbox.

Before you can display a guide, you have to meet two conditions: the View

Figure 11-16. Guides work well in a CSS-P layout design environment.

Positioning and removing guides

To place a guide on the page, follow these steps:

1. Choose View

   

2. Select View

   

3. To place a horizontal guide on the page, drag a guide from the ruler at the top of the page.

4. To place a vertical guide on the page, drag a guide from the ruler at the left of the page.

Once positioned, guides can be moved at any time. You can visually position guides by dragging them to a new location on the page; when your cursor is over the guide, you'll see a tooltip with the precise horizontal or vertical coordinate of the guide in pixels from the top or left of the page, respectively.

To remove a single guide, drag it back into the horizontal or vertical ruler. You can remove all guides on the page by selecting View

Displaying guide measurements

One of the slicker guide features implemented in Dreamweaver is the display of distance measurement. If you have a single horizontal or vertical guide onscreen and press Ctrl (Command), Dreamweaver will show you the distance from the guide to the window's edge in your cursor area. Place your cursor between two guides of the same type (either horizontal or vertical), press Ctrl (Command), and you'll see the distance that separates them, as shown in Figure 11-17.

Figure 11-17. Bring up the distance between two guides in pixels by pressing Ctrl on Windows and Command on the Macintosh.

Locking and snapping guides

Dreamweaver gives you complete control over guides and positionable page elements. You can lock your guides so that they are not accidentally moved when repositioning elements. You can also snap your elements to your guides or guides to your elements—or both. Here's how it's all done:

• Prevent your guides from being moved by choosing View

  

• Align your layout blocks to existing guides by enabling View

  

• Snap guides to the edges of layout blocks by selecting View

  

Tip

Guides are retained when you save the page and restored when the page is re-opened.

Precise guide placement

Guides can be positioned precisely as well as by dragging. To set a guide's horizontal or vertical placement to a specific value, follow these steps:

1. Double-click the guide you want to move.

2. When the Move Guide dialog box opens, enter the desired position in the Location field.

3. Select the measurement system (pixels, centimeters, inches, or percentages) from the list.

   To use the percentage measurement, enter a value between 0.00 and 100.00; Dreamweaver will reposition the guide according to the width or height of your Document window.

4. Click OK.

Editing guide settings

By default, the guides are colored a bright green and the distance indicators a dark blue. If these colors don't contrast enough with your layout to be seen clearly, you can adjust the colors through the Edit Guides dialog box. The Edit Guides dialog box also provides all-in-place access to basic guide controls: Show Guides, Snap To Guides, Lock Guides, Guides Snap To Elements, and Clear All (see Figure 11-18). To access the Edit Guides dialog box, choose View

Figure 11-18. Alter the color of your guides for maximum visibility.

Showing the browser window fold

One application in the guide featureset unique to Dreamweaver is especially useful for Web designers. When a browser displays a Web page, the portion initially visible is said to be "above the fold." The concept of a fold comes from the world of newspaper journalism where papers are divided into a top and bottom portion by the way they are folded. Dreamweaver can quickly display the fold of a browser window—that is, the viewable area—through guides.

Six of the most common browser window configurations are available through the Guides submenu:

• 640 × 480, Default

• 640 × 480, Maximized

• 800 × 600, Maximized

• 832 × 624, Maximized

• 1024 × 768, Maximized

• WebTV

You'll recognize the dimensions from the Window Size selector on the Status bar. When you select any of these options from the View

Figure 11-19. Make sure your most important content is above the fold with guides.

Aligning objects with the grid

Rulers and guides are generally good for positioning single objects, but a grid is extremely helpful when aligning one object to another. With Dreamweaver's grid facility, you can align elements visually or snap them to the grid. You can set many of the grid's other features, including grid spacing, color, and type.

To turn on the grid, choose View

The snap-to-grid feature is enabled by choosing View

Like most of Dreamweaver's tools, you can customize the grid. To alter the grid settings, choose View

Table 11-3. Grid Settings Dialog Box Options

Grid Setting	Description
Color	Change the default color (light blue) by selecting the color box (which brings up color palette) or by typing a new value in the text box.
Show Grid	Show or hide the grid with this checkbox toggle.
Snap To Grid	Toggle the checkbox to enable or disable the snap-to-grid feature.
Spacing	Adjust the distance between grid points by entering a numeric value in the text box.
Spacing Unit of Measure	Select pixels, inches, or centimeters from the Spacing drop-down list.
Display	Choose either solid lines or dots for the gridlines.

Figure 11-20. Dreamweaver's grid feature is extremely handy for aligning a series of objects.

After you have created and initially positioned your AP elements, you can begin to fill them with content. Inserting objects in an AP element is just like inserting objects in a Web page. The same insertion methods are available to you:

A known problem exists with Netscape Navigator 4.x browsers and nested AP elements—and AP elements in general. Whenever the browser window is resized, the AP elements lose their left and top position and are displayed along the left edge of the browser window or parent AP element. Dreamweaver includes the capability to insert code that serves as a workaround for this problem. With this code in place, if the browser is resized, the page reloads, repositioning the AP elements. If you want the code to be automatically inserted the first time you add an AP element to your page, select the Add Resize Fix When Inserting AP Elements option found in the AP Elements category of Preferences. You can also insert it on a case-by-case basis by choosing Commands

When you're mixing forms and AP elements, follow only one rule: Always put the form completely inside the AP element. If you place the AP element within the form, all form elements after the AP element tags are ignored. With the form completely enclosed in the AP element, the form can safely be positioned anywhere on the page and all form elements still remain completely active.

Although this rule means that you can't split one form onto separate AP elements, you can set up multiple forms on multiple AP elements—and still have them all communicate to one final CGI or other program. This technique uses JavaScript to send the user-input values in the separate forms to hidden fields in the form with the Submit button. Suppose, for example, that you have three separate forms gathering information in three separate AP elements on a Web page. Call them formA, formB, and formC on apDiv1, apDiv2, and apDiv3, respectively. When the Submit button in formC on layer3 is selected, a JavaScript function is first called by means of an onClick event in the button's <input> tag. The function, in part, looks like the following:

function gatherData() {
  document.formC.hidden1.value = document.formA.text1.value
  document.formC.hidden2.value = document.formB.text2.value
}

Notice how every value from the various forms is sent to a hidden field in formC, the form with the Submit button. Now, when the form is submitted, all the hidden information gathered from the various forms is submitted along with formC's own information.

document.layers["apDiv3"].document.formC.

hidden1.value=document.layers["apDiv1"].

document.formA.text1.value

To make the code cross-browser compatible, you can use an initialization function that allows for the differences, or you can build the code into the onClick function. (For more information about building cross-browser–compatible code, see Chapter 30.)

Page-layout artists are often confronted with Web-page designs that have been mocked up in a graphics program. Dreamweaver's Tracing Image function enables you to use such images to guide the precise placement of graphics, text, tables, and forms in your Web page, enabling you to match the original design as closely as possible.

To use a Tracing Image, the graphic must be saved in JPG, GIF, or PNG format. After the Tracing Image has been placed in your page, it is viewable only in Dreamweaver—it will never appear in a browser. A placed Tracing Image hides any background color or background graphic in your Web page. Preview your page in a browser or hide the Tracing Image to view your page without it.

Adding the Tracing Image to your page

To add a Tracing Image to your Dreamweaver page, choose View

Note

Even though the Browse dialog for the Tracing Image enables you to choose from a data source, the image is not displayed on the page.

Figure 11-21. Setting the transparency of the Tracing Image to a setting such as 50 percent can help you differentiate between it and the content AP elements you are positioning.

Moving the Tracing Image

The Tracing Image cannot be selected and moved the same way as other objects on your page. Instead, you must move the Tracing Image using menu commands. You have several options for adjusting the Tracing Image's position to better fit your design. First, you can align the Tracing Image with any object on your page by selecting the object and then choosing View

To precisely or visually move the Tracing Image to a specific location, choose View

Figure 11-22. Use the Adjust Tracing Image Position dialog box to precisely place your graphic template.

In order to place AP elements on your page that can later be converted to a table, the AP elements must not overlap. Before you begin drawing out your AP elements, open the AP Elements panel—either by choosing Window

For the Web designer, positioning an AP element is easy: Click the selection handle and drag the AP element to a new location. For the readers of your pages, moving an AP element is next to impossible—unless you incorporate the Drag AP Element action into the page's design.

With the Drag AP Element action, you can set up interactive pages in which the user can rearrange elements of the design to achieve an effect or make a selection. The Drag AP Element action includes an option that enables your application to execute a JavaScript command if the user drops the AP element on a specific target. In the example shown in Figure 11-23, each pair of shoes is in its own AP element. When the user drops a pair in the bag, a one-line JavaScript command opens the desired catalog page and order form.

Figure 11-23. On this interactive page, visitors can drop merchandise into the shopping bag; this feature is made possible with the Drag AP Element action.

After you've created all your AP elements, you're ready to attach the behavior. Because Drag AP Element initializes the script to make the interaction possible, you should always associate this behavior with the <body> tag and the onLoad event. Follow these steps to use the Drag AP Element action and to designate the settings for the drag operation:

You've seen how AP elements can dynamically move, and change their visibility and their depth—but did you know that you can also change an AP element's content dynamically? With Dreamweaver, you can do it easily. A standard behavior, Set Text of Container, enables you to swap the entire contents of one AP element for whatever you'd like. You're not limited to exchanging just text, either. Anything you can put into HTML, you can swap—which is pretty much everything!

This behavior is extremely useful for putting up context-sensitive help and other information. Rather than construct a series of AP elements that you show and hide, a single AP element is used, and just the contents change. To use Set Text of Container, follow these steps:

The capability to implement interactive control of an AP element's visibility offers tremendous potential to the Web designer. The Show-Hide Elements action makes this implementation straightforward and simple to set up. With the Show-Hide Elements action, you can simultaneously show one or more AP elements while hiding as many other AP elements as necessary. Create your AP elements and give them a unique name before invoking the Show-Hide Elements action. To use Show-Hide Elements, follow these steps: