Download Absolute Positioning, Image Maps, and Navigation Bars

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.
AP Div Property Inspector

Specifies the element’s top-left
corner relative to the top-left
corner of the page
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