Using CSS for Page Layout Working with Floating and AP - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 212

When you view the code for the TICKETS AP div in the home page, you see its ID
style name in the internal style sheet in the head of the page. The following code shows
the code (the exact measurements of your AP div might be slightly different):
<styleƒtype=”text/css”>
#TICKETSƒ{
ƒƒƒƒƒƒposition:absolute;
ƒƒƒƒƒƒleft:20px;
ƒƒƒƒƒƒtop:20px;
ƒƒƒƒƒƒwidth:130px;
ƒƒƒƒƒƒheight:75px;
ƒƒƒƒƒƒz-index:1;
ƒƒƒƒƒƒoverfl ow:ƒvisible;
}
</style>
The following code for the AP div tag is placed in the body of the page:
<divƒclass=”featured”ƒid=”tickets”>
ƒƒƒƒƒƒ<h1><aƒhref=”tickets.html”>TICKETS</a></h1>
</div>
The CSS-P Element name (or the ID style) that you assigned in the Property inspector
is placed in the opening div tag, as shown in the fi rst line of the code. In the code, id is
the attribute name, and everything to the right of the equal sign in the quotation marks
is the value. The div tag also references the external featured style that you created. The
AP div content appears between the opening and closing div tags. When you drag an
AP div tag to a new position or when you change its attributes in the Property inspector,
Dreamweaver updates the ID style.
Creating AP Div Positioning Styles
It is sometimes useful to create external styles to define the AP div positioning; for
instance, if you plan to use the same positioning for multiple AP divs (similar to the way
you used regular divs when you created multiple pages). If you create a site that enables
users to choose from a variety of looks for the display of the pages (depending on which
style sheet is attached to the page), creating external styles for the AP divs enables you
to change the location of the AP divs in each style sheet to accommodate the corre-
sponding look. You can also use this technique to create pages that display differently in
different types of devices such as phones.
There are many other reasons to create external styles to define the AP div position-
ing. When you drag an AP div whose positioning is defined externally to a new position
in the page, the style is updated with the new positioning coordinates in the same way
that an ID style would be. This can cause problems if you have attached more than one
AP div to the style and want to reposition only one AP div. As you can see, both methods
of AP div positioning have drawbacks and benefits. However, because Dreamweaver
automatically places AP div positioning styles in the head of the page, this tutorial uses
that method.
You'll examine the HTML code for the tickets AP div in the home page.