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

© 2010 Delmar, Cengage Learning

Chapter 9

Positioning Objects with AP Div Tags

© 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


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


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


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


Fig. 1: Using AP Elements to Create a Single Image


Fig. 2: Inserting an AP Element Using the Draw AP Div Button

AP Div icon

AP Div border

Draw AP Div button


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


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


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


Fig. 4: Property Inspector Showing Properties of Selected AP ElementSelected AP element

#content style

Properties for #content style

CSS-P Element ID text box

Overflow property Position and dimension

properties

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 upper-left corner of the layer and the upper-left corner of the page or layer in which it is contained


Fig. 5: Scrolling a Page Containing an AP Element


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


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


Fig. 8: New Background AP Element on Top of Contest AP Element

New AP element name = background Z-Index = 1


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


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


Fig. 10: AP Element with Background Color and Inserted Image


Fig. 11: AP Element with Image Inserted as Background Image


Fig. 12: White Background Color Applied to AP Element

Type #FFF in the Bg color text box


Fig. 13: Image Added to AP Element


Fig. 14: AP Element Displays Scroll Bars

Scroll bar


Fig. 15: AP Element Containing a Background Image

Image serves as AP element background Bg image = contestants.bak.jpg


Fig. 16: Editing #contest Style

Font family = Arial, Helvetica, sans-serif

Font-size = small

Font-weight = bold

Color = #006

Block category

Type category


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


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


Fig. 18: AP Elements Panel

Nested AP elements are indented under

their parent AP element


Fig. 19: Using AP Elements Panel to Change an AP Element Name

AP element names Z-Index values


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


Fig. 21: Using AP Elements Panel to Make Contest AP Element Visible

Eye icon indicates AP element is visible

AP element is visible again


Fig. 22: Nested AP Element Shown with Parent AP Element Properties

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

Documents

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