1. © 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags

2. © 2009 Delmar Cengage Learning Chapter 9 Lessons 1.Insert an AP div 2.Set the position and size of an AP element 3.Add content to an AP element 4.Use the AP Elements panel

3. © 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

4. © 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

5. © 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

6. © 2009 Delmar Cengage Learning Fig. 1: Using AP Elements to Create a Single Image

7. © 2009 Delmar Cengage Learning Fig. 2: Inserting an AP Element Using the Draw AP Div Button AP Div icon AP Div border Draw AP Div button

8. © 2009 Delmar Cengage Learning Using HTML Tags to Create AP Elements Dreamweaver uses the tag to create an AP element Initially, the default value for the first AP Div Tag on a page appears as Each additional AP Div Tag will be assigned the next number in sequence

9. © 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

10. © 2009 Delmar Cengage Learning Using Advanced Formatting Clip: identifies the portion of a layers 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

11. © 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 Visible property

12. © 2009 Delmar Cengage Learning Understanding Absolute Positioning You can position AP elements precisely using absolute positioning An AP element is positioned absolutely by specifying the distance between the upper- left corner of the layer and the upper-left corner of the page or layer in which it is contained

13. © 2009 Delmar Cengage Learning Fig. 5: Scrolling a Page Containing an AP Element

14. © 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

15. © 2009 Delmar Cengage Learning Fig. 6: AP Element Moved Down and to the Right L = 520px T = 260px AP element moves according to new L and T properties The width and height of your AP element may vary at this point

16. © 2009 Delmar Cengage Learning Fig. 8: New Background AP Element on Top of Contest AP Element New AP element name = background Z-Index = 1

17. © 2009 Delmar Cengage Learning Fig. 9: Contest AP Element Moved on Top of Background AP Element Z-Index value Contest AP element positioned on top of background AP element with Z-index value changed to 2

18. © 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

19. © 2009 Delmar Cengage Learning Fig. 10: AP Element with Background Color and Inserted Image

20. © 2009 Delmar Cengage Learning Fig. 11: AP Element with Image Inserted as Background Image

21. © 2009 Delmar Cengage Learning Fig. 12: White Background Color Applied to AP Element Type #FFF in the Bg color text box

22. © 2009 Delmar Cengage Learning Fig. 13: Image Added to AP Element

23. © 2009 Delmar Cengage Learning Fig. 14: AP Element Displays Scroll Bars Scroll bar

24. © 2009 Delmar Cengage Learning Fig. 15: AP Element Containing a Background Image Image serves as AP element background Bg image = contestants.bak.jpg

25. © 2009 Delmar Cengage Learning Fig. 16: Editing #contest Style Font family = Arial, Helvetica, sans-serif Font-size = small Font-weight = bold Color = #006 Block category Type category

26. © 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

27. © 2009 Delmar Cengage Learning Controlling AP Elements Nested AP elements are those whose HTML code is included within another AP elements 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

28. © 2009 Delmar Cengage Learning Fig. 18: AP Elements Panel Nested AP elements are indented under their parent AP element

29. © 2009 Delmar Cengage Learning Fig. 19: Using AP Elements Panel to Change an AP Element Name AP element names Z-Index values

30. © 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

31. © 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

32. © 2009 Delmar Cengage Learning Fig. 22: Nested AP Element Shown with Parent AP Element Properties