1 / 23

Chapter 6

Chapter 6. Absolute Positioning, Image Maps, & Navigation Bars. Objectives. Create an image map Add & edit behaviors Describe a navigation bar Create a navigation bar Insert a Date object. Explain the concept of AP elements Insert, select, resize, & move an AP element Name an AP element

marvin-salas
Download Presentation

Chapter 6

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. Chapter 6 Absolute Positioning, Image Maps, & Navigation Bars

  2. Objectives • Create an image map • Add & edit behaviors • Describe a navigation bar • Create a navigation bar • Insert a Date object • Explain the concept of AP elements • Insert, select, resize, & move an AP element • Name an AP element • Align AP elements • Describe an image map

  3. Understanding AP Elements • Similar to a table – it is a container that holds other types of content, such as images, text, form objects, and even other AP elements. • Provides more flexibility than table because it can be placed in an exact spot anywhere on the page. • Absolute Positioning – AP element remains in position regardless of how the Web page visitor resizes browser window/views text size.

  4. Understanding AP Elements • Absolute Positioning • AP elements are positioned using standard x, y, & z coordinate system • Point of origin is top left corner of page • Z-index • Determines AP element’s stacking order

  5. AP Divs & DHTML • Dynamic HTML (DHTML) • Extension of HTML that gives Web page developers capability of precisely positioning objects • Possible effects using DHTML • Add images that are hidden from view initially & then display when user clicks button or hotspot • Create pop-up menus • Position objects side by side • Drag & drop objects • Create animations • Provide feedback to right & wrong answers

  6. AP Divs & DHTML • How to create AP elements • Draw AP Div button • Insert Bar > Layout Bar • How to modify attributes • CSS-P Elements Property Inspector • How to control visibility • AP Elements panel

  7. AP Div Property Inspector

  8. AP Div Property Inspector • CSS-P Element ID • Assigns unique name to AP element • L & T • Specifies position of element’s top-left corner relative to the origin • W & H • Specifies width & height of element • Z-Index • Determines stacking order of element

  9. AP Div Property Inspector • Vis • Specifies whether element is visible initially or not • Default – no specific visibility property • Inherit – uses visibility property of element’s parent • Visible – displays element contents • Hidden – hides element contents • Bg Image • Specifies background image • Bg Color • Specifies background color

  10. AP Div Property Inspector • Class • Applies CSS rules • Overflow (works only with <div> & <span>) • Controls how elements appear in browser when content exceeds element’s specified size • Visible – extra content appears in element • Hidden – extra content not displayed • Scroll – adds scroll bars to element • Auto – displays scroll bars only when necessary • Clip • Defines visible area of element

  11. Using the Rulers as a Visual Guide • Rulers are used as a visual guide to create AP element • Ruler Origin • 0 point, or location on page where horizontal & vertical lines meet and read 0 • Ruler-Origin Icon • Generally located in the upper-left corner of document window • Used to move 0 point anywhere on the page

  12. The AP Element Marker • Code Marker • Appears when you insert AP element (small yellow square)

  13. The AP Elements Panel • Part of the CSS Panel Group • Helps manage the elements in document • Prevents overlaps, changes visibility, nests/stacks elements, & selects one+ elements • Contains 3 columns • Visibility, Name, & Z-Index • Visibility • Closed-eye icon = element is hidden • Open-eye icon = element is visible

  14. Nesting, Overlapping, & Stacking Elements • Nesting • Used to group elements • Child Element • HTML code for one element is written inside the code for another element • Parent Element • The element containing the code for the other elements • Parent element controls the behavior of its child elements • How to create? • Draw element inside existing element while holding down CTRL key

  15. Nesting, Overlapping, & Stacking Elements • Overlapping & Stacking • Stacking Order • Element’s, that float on top of each other, order • Order, or z-index, determined by order in which they are created • How to change z-index in AP elements panel? • Click element name & then drag it up/down in list • Click number of element you want to change in Z column, & type higher number to move element up/ lower number to move element down • When “Prevent Overlaps” check box is selected, elements cannot be overlapped/stacked

  16. Selecting Stacked AP Elements • Click name of desired element in AP elements panel • Click element’s selection handle <div#____> • Click element’s border • Press CTRL+SHIFT+click • Deselects other elements & selects only the one you clicked • Click AP element marker

  17. Images Maps • An image that has one or more hotspots placed on top of it • Hotspot • A designated area on an image map that the user clicks to cause an action to occur • 2 types of Image Maps • Server-Side Maps – Web server interprets code/map data • Client-Side Maps – Web browser interprets code/map data

  18. Creating a Client-Side Image Map • Rectangular Hotspot Tool • Creates rectangular-shaped hotspot • Oval Hotspot Tool • Creates circular-shaped hotspot • Polygon Hotspot Tool • Creates irregularly-shaped hotspot • Click Pointer Hotspot Tool to close polygon shape • Map Name/Hotspot Tools • Labels & creates client-side image map

  19. Behaviors • Drag AP Element • Used to set up an interactive process in which user can drag/rearrange elements of design • Show-Hide Elements • Used to make visible/to hide element & element’s content • onMouseOut • Initiates whatever action is associated with event when mouse is moved out of object • onMouseOver (default) • Initiates whatever action is associated with event when mouse is moved over object

  20. Behaviors • onClick • Initiates whatever action is associated with event when object is clicked • onDblClick • Initiates whatever action is associated with event when object is double-clicked

  21. Selecting, Aligning, & Resizing Multiple AP Elements • Arrange Command • Aligns elements • Makes selected elements same width/height • Last element selected controls alignment & width/height • How to select multiple elements • Select one element’s border then hold down SHFT & select another’s border • Use AP Elements panel to do same process

  22. The Navigation Bar & Date Object • Navigation Bar (nav bar) • A set of interactive buttons that Web site vistor uses as links to other Web pages, site, or frames • Date Object • Inserts current date in format of your preference & provides option of updating date whenever you save file

  23. Creating A Navigation Bar • Rollover • Element in navigation bar that is animated when you move mouse pointer over element/click element • Four possible images & states: • Up – image that is displayed when visitor has not clicked/interacted with element • Over – image that appears when mouse pointer is moved over Up image • Down – image that appears after element is clicked • Over While Down – image that appears when pointer is rolled over Down image after element is clicked

More Related