Chapter 10
Positioning Objects with AP Divs
© 2011 Delmar, Cengage Learning
Chapter 10 Lessons
1.
2.
3.
4.
Insert an AP div
Set the position and size of an AP element
Add content to an AP element
Set AP element properties
© 2011 Delmar Cengage Learning
Positioning Objects with AP Divs
• With CSS layout blocks, you use
containers formatted with CSS styles
to place content on web pages.
• You can set the appearance and
position of these containers using
HTML tags known as div tags.
© 2011 Delmar Cengage Learning
Positioning Objects with AP Divs
• An AP div tag creates a div with a
fixed position on your web page.
• You can add behaviors to your AP
divs with JavaScript.
• JavaScript is a program that is used
to add interactivity to web pages.
© 2011 Delmar Cengage Learning
Positioning Objects with AP Divs
Tools You’ll Use
© 2011 Delmar Cengage Learning
Insert an AP Div
• AP elements are page elements that
are absolutely positioned or assigned
a fixed position on a web page.
• You should use guides when placing
and aligning divs so their locations
are consistent.
© 2011 Delmar Cengage Learning
Insert an AP Div
• A fold line indicates where the paper
is folded in half.
• Dreamweaver uses the <div> tag to
create an AP div.
• An AP div is like a separate HTML
document within a web page.
© 2011 Delmar Cengage Learning
Insert an AP Div
• If you add more information than the
div can display, you will need to tell
Dreamweaver how to handle the
overflow.
• The Clip property identifies the
portion of an AP div’s content that is
visible in a web browser.
© 2011 Delmar Cengage Learning
Insert an AP Div
•
•
•
The Vis property lets you control whether
the selected AP div is visible.
Inherit means that the visibility of the AP
div is automatically inherited from its
parent AP div or page.
The overflow property specifies how you
treat excess content that does not fit
inside an AP div.
© 2011 Delmar Cengage Learning
Insert an AP Div
Using AP divs for placing interactive content
© 2011 Delmar Cengage Learning
Set the Position and Size of an AP Element
• Absolute positioning means that
the AP element will be locked in a
fixed position on the page regardless
of the size of the browser window.
• You can control the placement of AP
elements by setting their attributes in
the Property inspector.
© 2011 Delmar Cengage Learning
Set the Position and Size of an AP Element
• The Left property (L) specifies the
distance between the left edge of an
AP element and the left edge of the
page that contains it.
• The Top property (T) specifies the
distance between the top edge of
your AP element and the top edge of
the page.
© 2011 Delmar Cengage Learning
Set the Position and Size of an AP Element
• The Width (W) and the Height (H)
properties specify the dimensions of
the AP element, usually in pixels.
• The Z-index property specifies the
vertical stacking order of AP
elements.
© 2011 Delmar Cengage Learning
Set the Position and Size of an AP Element
H=176px
W=250px
AP div is resized, but
stays in same position
AP div with width and height adjusted
© 2011 Delmar Cengage Learning
Add Content to an AP Element
• If you add more content than the
preset image size, the AP element
will expand to display the content on
your page in Dreamweaver.
• You should use CSS to format your
text on an AP element.
© 2011 Delmar Cengage Learning
Add Content to an AP Element
Image serves as AP div background
Bg image= two_children_on_beach.jpg
Inserting a background image for an AP div
© 2011 Delmar Cengage Learning
Set AP Element Properties
• Use the AP Elements panel to control
the visibility, name, and Z-index order
of all the AP elements on a web
page.
• Nested AP elements are those
whose HTML code is included within
another AP element’s code.
© 2011 Delmar Cengage Learning
Set AP Element Properties
• You can use the AP Elements panel
to:
– Change a series of AP element names
– Control AP element visibility while
testing a site
– Control the visible stacking order
© 2011 Delmar Cengage Learning
Set AP Element Properties
• When you insert an AP on a web
page, its position is relative to the top
left corner of the browser window.
• Problems may arise if the page is
viewed in different browser window
sizes.
© 2011 Delmar Cengage Learning
Set AP Element Properties
AP elements in browser window
AP elements in wider browser window
© 2011 Delmar Cengage Learning
Set AP Element Properties
• If you don’t want AP elements to shift,
depending on the browser window
size, you can:
– Set the Positioning property of the div tag
you wish to use as the parent container
– Cut and paste the code for the AP
elements after the beginning tag for the
parent container
© 2011 Delmar Cengage Learning