Navigation

• Development of your web site organization

• Organization of your site - Navigation links

• How to NAME the pages of your website

• Presentation of the Navigation

• How to set up your Navigation

• Java Script, dhtml, cgi scripts flash for menus

Development of your web site organization :    

Sections of a web site (all the main pages) 

use "post-its" for a mock-up - ONE post-it for each of the pages below...

• Home

• Company information

• History, Presentation

• Management

• Products

• Services

• Customer Services

• Order form

• Guest Book, Information gathering form

• Link pages, related sites

• Testimonials (what people say) 

• please write one for THIS class - advertise your website

• FAQ

• Contact us

• Certificates, Awards

• Guarantee, Privacy Policy, Disclaimer

• Translations

Organization of your site - Navigation links :    

• Book has chapters, titles : 

  • index

  • go from page 6 to 34 by flipping pages

• Your website = giant puzzle, go from page to page via links

• Organize and put it together BEFORE you start.

Two different methods of approaching the information architecture of your website:

1. Exact Navigation System: Alphabetical, Chronological or Geographical organization of content

   www.bonjourlafrance.net/tips.htm

2. Ambiguous Navigation System: Topical or Task Oriented organization of information.

Th is can be more helpful as many of your site visitors don't know exactly what they're searching for. An ambiguous navigation system allows them to browse and drill down or target their search. 

This type of navigation system demands initial design and continued maintenance.

www.yahoo.com

You must be consistent in classifying content, realizing the ambiguity of language. For example, is a tomato a fruit, vegetable or a berry? Is tar... petroleum or pollution?

• Site map

  • move your post-its around

    www.bonjourlafrance.net/sitemap.htm
    http://www.sitepoint.com/sitemap.php

How to NAME the pages of your website :    

1. Use ONE word or a phrase : welcome

2. DO NOT put spaces between letters or, if you use two words, between the two words : 
   homepage (with a "-" between the words ) home-page

3. Use a word or phrase (keyword) that describes the content of your page even if it is a little longer : sheet music

4. Always write the file name in small letters (NOT CAPITALS), including the first letter : forum
   
   Using just one CAPITAL letter can prevent reading the name : get in the habit of always writing your file names in small letters.

5. NEVER use letters with accents of "strange" characters : societe my-wifes-mother

You MUST :

Name your home page (the first page your visitors will see)

    index.htm    OU    index.html

There are some other possibilities... but keep it at that. If you do NOT use one of these names your site will NOT be visible. This is probably the most common error of neophytes !

Presentation of the Navigation :    

• Consistent navigation

• Unchanging index from page to page
  
  scm - original
  scm - modified
  scm - today
  
  

• Link all pages to home

• Contact information on every page

How to set up your navigation     

• Templates

• Frames

• Getting anywhere within 3-4 clicks (bookmarks / anchors) for quickly finding and accessing information on long pages or taking a visitor directly to a specific point on another page

www.bonjourlafrance.net/france-lodging.htm#Bed

• Image maps

www.healthy.net
www.bonjourlafrance.net/regions.htm 

• Internal search engine
  

http://siteLevel.whatUseek.com

Atomz - Add a search engine to your site. Features allows you to control how this service will index your site and rank results.
You can even find out what people are searching for. www.atomz.com

www.fusionbot.com

• Drop down option box and menus

www.wsabstract.com/script
cascading menu, unscroll menu...

http://javascript.internet.com/navigation/

www.dynamicdrive.com/dynamicindex1/

examples:

www.bonjourlafrance.net

The code for the doublecombo navigation

Java Script, dhtml, cgi scripts flash for menus :    

www.hotscripts.com 
www.cgi-resources.com http://wsabstract.com/javaindex.shtml www.jsworld.com www.essex1.com/people/timothy/js-index.htm http://javascript.internet.com www.dannyg.com/javascript/index.html http://webdeveloper.com/javascript   
www.javascript.com  
www.javascriptsearch.com  
www.MyFreeToolbox.com
www.java-scripts.net 
CGI Resources  
www.bignosebird.com www.scriptsearch.com  www.superscripts.com/scripts/index.html

Different examples of dynamic menus

www.crt-auvergne.fr/uk.htm 
www.oratory.com/onebag/pack_list.html  
Beaujolais horizontal Javascript