Navigation

A navigation bar, also known as a nav bar or a button bar, is a series of buttons that appears on one or more pages of a website. Navigation is a key component of a website, relating directly to its success. Navigation is the gateway into the different sections of content. It is the way a user moves through information on a single page and from web page to web page. Creating links is the key to quick and responsive interactivity bringing the user to the necessary information. You can have all kinds of great attractions on your site, but if your visitors don't know how to get to them, they will just collect dust on the server. Worse yet, if the visitors find your site's navigation confusing or convoluted, they'll simply give up and head off to explore the rest of the Web, never to return. So, a good navigation design will be an essential ingredient for any successful website construction. Before you get started with planning your navigation, you need to define your site's information architecture. Once you have an idea of the site structure and organization, you're ready to think about the navigation design. There are several things you should consider in deciding on your navigation design:

1. Accessible The navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it. This means avoiding special effects like Flash or JavaScript as your only navigation method.
2. Understandable and Meaningful Keep your navigation understandable and meaningful. Make the links clear - don't try to get cute or use terms that are internal to your organization. Visitors who have never been to your site before should know immediately where the link will take them. Don't make them think!
3. Prevalent Your navigation should appear on every page of your site. While you don't need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.

General Rules to Design the Navigation System

• Use navigation tag(s)
• Keep it simple
• Keep it consistent
• Easy to find
• User friendly

Requirement:

• Create a "navigation.html" page,
• Create an "anchor.html" page to address the named anchors
• Create a "link-back.html" page
• Create the following common navigation elements and realize their functions

Common Navigation Elements:

• Spry Menu Bar
   
  • Home
  • Navigation
    • Anchor
    • Link Back
    • New Window
  • Layout
    • Fixed Layout
    • Fluid Layout
    • AP Layout
    • Table Layout
    • PSD2CSS Layout
  • Typography
    • CSS Document
    • Hierarchy
    • Graphic Text
    • Overflow
  • Image
    • GIF Image
    • JPG Image
    • SVG Image
    • Rollover Image
  • Background
    • Texture
    • Pattern
    • Image
    • Full Screen BG
  • Map
    • Text Map
    • Image Map
  
  
  
  
• Anchor
• Relative Hyperlink: Link Back Page
• Absolute Hyperlink: Truman VisComm
• Graphic Link
  
  
  
  
• Image Map (Hot Spot) - Click on the Jellyfish below
  
  
  
  
• Jump Menu
  Home Navigation Layout Typography Image Sitemap
  
  
• New Browser Window