Upload
anjolie-briggs
View
22
Download
1
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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