© 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 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=176pxW=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 backgroundBg 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 windowAP 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