© 2011 Delmar, Cengage Learning

Chapter 10

Positioning Objects with AP Divs

© 2011 Delmar Cengage Learning

1. Insert an AP div

2. Set the position and size of an AP element

3. Add content to an AP element

4. Set AP element properties

Chapter 10 Lessons

© 2011 Delmar Cengage Learning

• 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.

Positioning Objects with AP Divs

© 2011 Delmar Cengage Learning

• 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.

Positioning Objects with AP Divs

© 2011 Delmar Cengage Learning

Positioning Objects with AP Divs

Tools You’ll Use

© 2011 Delmar Cengage Learning

• 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.

Insert an AP Div

© 2011 Delmar Cengage Learning

• 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.

Insert an AP Div

© 2011 Delmar Cengage Learning

• 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.

Insert an AP Div

© 2011 Delmar Cengage Learning

• 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.

Insert an AP Div

© 2011 Delmar Cengage Learning

Using AP divs for placing interactive content

Insert an AP Div

© 2011 Delmar Cengage Learning

• 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.

Set the Position and Size of an AP Element

© 2011 Delmar Cengage Learning

• 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.

Set the Position and Size of an AP Element

© 2011 Delmar Cengage Learning

• 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.

Set the Position and Size of an AP Element

© 2011 Delmar Cengage Learning

AP div with width and height adjusted

H=176px W=250px AP div is resized, but stays in same position

Set the Position and Size of an AP Element

© 2011 Delmar Cengage Learning

• 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.

Add Content to an AP Element

© 2011 Delmar Cengage Learning

Inserting a background image for an AP div

Add Content to an AP Element

Image serves as AP div background Bg image= two_children_on_beach.jpg

© 2011 Delmar Cengage Learning

• 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.

Set AP Element Properties

© 2011 Delmar Cengage Learning

• 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

Set AP Element Properties

© 2011 Delmar Cengage Learning

• 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.

Set AP Element Properties

© 2011 Delmar Cengage Learning

Set AP Element Properties

AP elements in browser window AP elements in wider browser window

© 2011 Delmar Cengage Learning

• 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

Set AP Element Properties