Chapter 9
Positioning Objects with AP Div Tags
© 2010 Delmar, Cengage Learning
Chapter 9 Lessons
1.
2.
3.
4.
Insert an AP div
Set the position and size of an AP element
Add content to an AP element
Use the AP Elements panel
© 2009 Delmar Cengage Learning
Using AP Div Tags
• Let you control the appearance of elements
on your web page
• Allow you to stack your information in a
vertical pile, allowing for just one piece of
information to be visible at a time.
• Are treated as their own documents, so you
can easily change their contents.
• Add behaviors to your div tags with
JavaScript
© 2009 Delmar Cengage Learning
Using AP Div Tags
• Behaviors are preset pieces of JavaScript
code that can be attached to page
elements, such as an AP Div tag.
• A behavior instructs the page element to
respond in a specific way when an event
occurs, such as when the mouse pointer is
positioned over the element.
• Behaviors are attached to page elements
using ActionScript
© 2009 Delmar Cengage Learning
Understanding AP Elements
• AP div tags can be used to
– Create special effects on a Web page
– Stack elements on top of each other
– Create dynamic pages
– Lay out a Web page
© 2009 Delmar Cengage Learning
Fig. 1: Using AP Elements to
Create a Single Image
© 2009 Delmar Cengage Learning
Fig. 2: Inserting an AP Element
Using the Draw AP Div Button
Draw AP Div
button
AP Div icon
AP Div border
© 2009 Delmar Cengage Learning
Using HTML Tags to Create AP
Elements
• Dreamweaver uses the <div> tag to create
an AP element
• Initially, the default value for the first AP Div
Tag on a page appears as <div
id=“apDiv1”>
• Each additional AP Div Tag will be assigned
the next number in sequence
© 2009 Delmar Cengage Learning
Understanding AP Elements Content
• An AP element is like a separate document within a
Web page. It can contain the same types of elements as
a page
– background colors
– images
– links
– tables
– text
• You can set the contents of an AP element to work
directly with a specified Dreamweaver behavior to make
the page interact with a viewer in a certain way
© 2009 Delmar Cengage Learning
Using Advanced Formatting
• Clip: identifies the portion of a layer’s
content that is visible when displayed in a
Web browser
• Vis: lets you control whether the selected
layer is visible
• Overflow: specifies how to treat excess
content that does not fit inside a layer
© 2009 Delmar Cengage Learning
Fig. 4: Property Inspector Showing
Properties of Selected AP Element
Selected AP
element
#content
style
Properties for
#content style
CSS-P Element ID
text box
Overflow
property
Position and dimension
properties
© 2009 Delmar Cengage Learning
Visible
property
Understanding Absolute
Positioning
• You can position AP elements precisely
using absolute positioning
• An AP element is positioned absolutely by
specifying the distance between the upperleft corner of the layer and the upper-left
corner of the page or layer in which it is
contained
© 2009 Delmar Cengage Learning
Fig. 5: Scrolling a Page
Containing an AP Element
© 2009 Delmar Cengage Learning
Setting Positioning Attributes
• Five primary attributes (properties)
– Position: absolute by default
– Left: distance to left edge of page
– Top: distance to top of page
– Width and Height: in pixels or %
– Z-Index: used to specify vertical stacking
of layers
 Cannot be less than 0
© 2009 Delmar Cengage Learning
Fig. 6: AP Element Moved Down
and to the Right
AP element moves
according to new L
and T properties
The width and height
of your AP element
may vary at this point
L = 520px
T = 260px
© 2009 Delmar Cengage Learning
Fig. 8: New Background AP Element
on Top of Contest AP Element
New AP element
name = background
Z-Index = 1
© 2009 Delmar Cengage Learning
Fig. 9: Contest AP Element Moved
on Top of Background AP
Element
Contest AP element positioned
on top of background AP
element with Z-index value
changed to 2
Z-Index value
© 2009 Delmar Cengage Learning
Understanding AP Element
Content
• An AP element can contain elements such
as background colors, images, links, tables,
and text
• You can insert images or set them as
background
• Use CSS styles to format your text on an AP
element
© 2009 Delmar Cengage Learning
Fig. 10: AP Element with
Background Color and Inserted
Image
© 2009 Delmar Cengage Learning
Fig. 11: AP Element with Image
Inserted as Background Image
© 2009 Delmar Cengage Learning
Fig. 12: White Background Color
Applied to AP Element
Type #FFF in the
Bg color text box
© 2009 Delmar Cengage Learning
Fig. 13: Image Added to AP
Element
© 2009 Delmar Cengage Learning
Fig. 14: AP Element Displays
Scroll Bars
Scroll bar
© 2009 Delmar Cengage Learning
Fig. 15: AP Element Containing a
Background Image
Image serves as
AP element
background
Bg image = contestants.bak.jpg
© 2009 Delmar Cengage Learning
Fig. 16: Editing #contest Style
Font family = Arial,
Helvetica, sans-serif
Type
category
Font-size =
small
Font-weight =
bold
Block
category
Color = #006
© 2009 Delmar Cengage Learning
Controlling AP Elements
• Use the AP Elements panel to:
– Control visibility, name, and Z-index order
– See how AP Elements are nested
– Change nesting status
• Open using the Window menu
© 2009 Delmar Cengage Learning
Controlling AP Elements
• Nested AP elements are those whose HTML
code is included within another AP element’s
code.
• A nested AP element does not affect the way it
appears to the page viewer; it establishes a
relationship of how it appears in relation to its
parent AP element
• To change the nesting status of an AP element,
drag it to a new location in the AP Elements
panel
© 2009 Delmar Cengage Learning
Fig. 18: AP Elements Panel
Nested AP elements
are indented under
their parent AP
element
© 2009 Delmar Cengage Learning
Fig. 19: Using AP Elements Panel
to Change an AP Element Name
Z-Index values
AP element names
© 2009 Delmar Cengage Learning
Fig. 20: Using AP Elements Panel
to Hide Contest AP Element
Closed eye icon
indicates that the
AP element is
hidden
Contest AP element
is hidden
© 2009 Delmar Cengage Learning
Fig. 21: Using AP Elements
Panel to Make Contest AP
Element Visible
Eye icon
indicates AP
element is
visible
AP element is
visible again
© 2009 Delmar Cengage Learning
Fig. 22: Nested AP Element
Shown with Parent AP Element
Properties
© 2009 Delmar Cengage Learning