Ch. 6 Web Page Design – Absolute Positioning, Image Maps, and Navigation Bars

1. Ch. 6 Web Page Design – Absolute Positioning, Image Maps, and Navigation Bars Mr. Ursone

2. AP (Absolute Position) Elements • AP Element: A container that holds other types of content, such as images, text, form objects, and even other AP elements (Nested elements). • Similar to a table • Absolute Positioning: An AP element can be placed in an exact spot anywhere on the page with pixel perfect precision. • It stays in the same position regardless of how the Web page visitor resizes the browser window or views the text size

3. AP Elements • AP elements are positioned using a standard x-, y-, and z-coordinate system. • Z-Coordinate or Z-index: determines an AP element’s stacking order when more than one element is added to a page. • Higher Number Higher Priority. • Ex. If two elements are stacked and both have a vis: visible, the one with the higher z-index will display on the page

4. Dynamic HTML (DHTML) • Absolute Positioning is a component of DHTML • Dynamic HTML is an extension of HTML that gives Web page developers the capability of precisely positioning objects on the Web page. • Effects you can accomplish using DHTML • Add images that are hidden from view initially and then display them when a user clicks a button or hotspot • Create pop-up menus • Position objects side by side • Drag and drop objects • Create Animations • Provide feedback to right and wrong answers

5. AP Div Property Inspector • Vis: Specifies whether the element is visible initially or not.

6. AP Div Property Inspector • Specifies the element’s top-left corner relative to the top-left corner of the page

7. Vis (AP Div Property Inspector) • 4 Options: • Default: Most browsers will default to inherit • Inherit: Uses the visibility element of the element’s parent • Visible: Displays the element contents, regardless of the parent’s value • Hidden: Hides the element contents, regardless of parent’s value. • Note: if multiple stacked elements are visible the Z-index will determine the order. Higher-numbered elements appear in front of lower-numbered ones.

8. The AP Elements Panel • It is part of the CSS panel group • It is helpful in managing elements in your document • Uses: • Prevent overlaps • Change the visibility of elements • Nest or stack elements • To select one or more elements at a time

9. The AP Elements Panel • Has 3 Columns • Visibility • Uses Eye Icons • A closed-eye icon indicates that an element is hidden • An open-eye indicates the element is visible • The absence of an eye icon indicates that the element is in its default state • Name: Name of AP Element • Z-Index: Determines the stacking order. Higher Number Higher Priority.

10. Visibility Name of Element Z-index The AP Elements Panel

11. Nesting Elements • Parent Element: Gives its behaviors to child(ren) elements • To create this “nested” relationship You create the parent element (be it an AP element or table) • Then you will draw another element inside the existing one while holding down the CTRL key • Nesting (Child Element): Takes the behavior of the parent element. • Ex. If a parent element is moved on the screen the child element will move with it • If you hide the parent is hidden this will automatically hide the child element

12. Stacking Elements • Elements can overlap and/or be stacked one on top of the other. • Elements that float on top of each other have a stacking order • Stacking order is another name for Z-index • The order is determined by the order in which they were created. 1,2, 3, 4… • The element with the highest number appears on top or in front of elements with lower numbers. • Stacking elements provides opportunities for techniques such as hiding and displaying elements and/or parts of elements, creating draggable elements, and creating animations

13. Image Maps • Image Map: an image that has one or more hotspots on it • Hotspot: a designated area on an image map that the user clicks to cause an action to occur. • Hotspot actions • Link to different parts of the same web page • Link to other web pages within or outside the web site • To Display content within a hidden AP element

14. Hotspot Tools (This isn’t rocket science) • Rectangular Hotspot Tool: Creates a rectangular shaped hotspot • Oval Hotspot Tool: Creates an oval shaped hotspot • Polygon Hotspot Tool: Creates an irregularly shaped hotspot • Pointer Hotspot Tool: Assists with the Polygon tool to close and shape the hotspot

15. Behaviors • Behaviors: Allow visitors to interact with a Web page. • Behaviors panel displays a menu of actions that can be attached to the hotspot • Show-Hide Elements: Makes visible or hides an element and the element’s content

16. Navigation Bar and Date Object • Navigation Bar: is a set of interactive buttons that the Web site visitor uses as links to other Web pages, Web sites, or frames • This can be inserted Horizontally or Vertically on your Web page • Date Object: Inserts the current date whenever you save the file

17. Navigation Bar • You use buttons or icons to create a navigation bar • You can animate the navigation bar by creating something called a rollover • An element in a navigation bar is called a rollover if animation takes place when you move the mouse pointer over the element or click the element. • It becomes animated because the original image is swapped out for a different one. This creates a simple animation

18. Elements in a Navigation Bar • Each element can have up to four different states • Up: the image that is displayed when the visitor has not clicked or interacted with the element • Over: the image that appears when the mouse pointer is moved over the Up image • Down: the image that appears after the element is clicked • Over While Down: the image that appears when the pointer is rolled over the Down image after the element is clicked