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

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

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

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

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

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

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.

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

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.

The AP Elements Panel Visibility Name of Element Z-index

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

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

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

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

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

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

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

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