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