 Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience.  Navigation labels are short, clear, and user-friendly  Above all navigation should be designed for your visitor not yourself

 Global navigation- the navigation that appears on each page, usually at the top or left side. › Features top-level section in a site › A small site would include every page a larger site would not

 Local Navigation- used on large sites where there is so much content in a section that global navigation is inadequate.  For example, a site that sells books, music, and movies would feature top- level categories in global and feature categories in the local section

 Related navigation- usually appears within the content area and highlights content related to that page’s information.  For example, the page featuring a specific movie for sale might list movies by the same director in the related navigation.  Figure G-1 page 149

 The elements that make up your navigation should be determined by: › the site’s goals › the content of the site › the target audience  Pulldown menus are now popular

 Information architects – people whose job is to create structures, navigation, and search systems for Web Sites.  IAs work as independent consultants or as part of in-house Web design teams within organization  Working with an IA can be especially useful on › complex sites that have thousands of pages of content › or that deal with multiple audience or topics

 Interactive buttons (rollovers)- navigation graphics that change appearance when a visitor interacts with them  Original state- appears when a visitor is not interacting with the button  Hover state- appears when a visitor points to or hover over the imaged  Pressed state- appears while the visitor is clicking the button

 Navigation bar- a set of related navigation links, whether text or images  Maintain a consistent look among the buttons! › Copy and paste then change the text and link

 Each page on a Web site should have a navigation bar.  Copy and paste the navigation bar to each page!

 Pseudo-class defined properties for a particular state of the element.  Links have 4 Commonly Used pseudo- class selectors: › a:link › a:visted › a:hover › a:active

 a: link – the normal, unvisited state of a link  a: visited – the link has been clicked in the visitor’s browser and is present in the browser's history  a:hover– the visitor’s cursor is pointing to the link  a: active – the link has been clicked by not released

 By default, normal links are blue and underlined and visited links are purple and underlined.  It’s best to create a style rule for at least the a:link, a:visited, and a:hover states so that each state looks different to visitors.  Styled in order in the style sheet so it’s very important they are listed in order.

 Leave links underlined. › Underlined text is universal for links (user- friendly)  Differentiate between visited and unvisited links. › It’s best to create styles that make unvisited links more noticeable  Experiment with hover styles and colors › Be dramatic and coordinate with your design › Avoid purple or blue!