1 / 18

Ch. 6 Web Page Design – 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

Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related