UP


www. Teachwebdesign .Com
F.A.Q.
Layout
Tables
Navi- gation
Temp- lates
HTML Tricks1
HTML Tricks2
Images
Glossary
HTML Tools
Design QUIZ
 

Webpage Navigation
Some Important Considerations

    Webpage Navigation will depend on how your Total Website is Structured... and will vary between different Sections of your site... but several important factors should be considered overall...

  1. Ease Of Use... Visitors to your site must be able to EASILY Navigate to other pages... so your Nav Areas should be Easily Accessible... which means that, generally it is best to place Nav Areas near the Top of your page, and again at the Right or Left sides of your page, and again near the Bottom of your page...
  2. Consistancy... Visitors need to find your Nav Areas easily, so being Consistant in placing your Nav Areas in the SAME PAGE LOCATIONS throughout your pages (within each section of your site) is a MUST if you want visitors to stay on your pages...
  3. Multiplicity... Visitors tend to Skim Thru Pages Quite Rapidly, and they might overlook Nav Areas unless they are placed multiple times in at least TWO LOCATIONS on each page...
  4. Navigation Type... Using TAB STYLE Navigation requires (in most cases) Javascript Coding, and infrequently JS might be either DISABLED or "Not Functioning" correctly in the Browser (due to code errors, from YOUR Code), so it is a MUST to provide secondary "back-up" Nav Areas, that use simple "list-type" or "table-type" display, which will Always Be More Likely to function correctly on the page...
  5. Destination Target... When a visitor clicks a Nav Area link to goto another page, you must decide if you want that page to open in the Same Browser Window, or in a New Browser Window (in a new Tab, for Tab Browsers) ...and so to return to your current page, a visitor will have to use their Browser "Back Button" if you open the page in the Same Browser Window, or else the visitor can simply "Close The New Tab" (if you set target="_blank" in your link code) to open the page in a New Browser Window... and then they will REMAIN on your current page... so often you actually WANT visitors to REMAIN on your current page and simply "point out" another page to them, so to speak...

Navigation Examples

     Look Up at the top area of our ART OF JUNKING PAGE... you'll see an example of Tab Navigation...

You'll see how CSS Coding makes the Tab Areas "become underlined" as you mouseover them... as well as how Javascript makes the "drop down menues" become visible...

There are many easy Copy & Paste Tab Style Menus available to use, and you need to decide what is BEST for YOUR Page, if you want to use them... also there are Horizontal as well as Vertical Styles to choose from... Check out Dynamic Drive's CSS Library ... they provide all the code and files and instructions for you to Copy & Paste and/or Download to your computer... then of course you need to set up all the code and scripts to suit your specific requirements and then of course FTP these files to your Host Server...

     Next, Look over to the LEFT SIDE OF THIS PAGE... and you'll see an example of Table Style Navigation...

You'll see how HTML Table Coding presents the Nav Area links to our other pages, and how CSS Coding (in our main site stylesheet) makes the link text "change color" as you mouseover them...

You can find help with HTML Tables Coding for Presentation at Our Custom Tables Page

NOTE: Using SSI (Server Side Include) is a Very Helpful and Time Saving way to place your Nav Areas into your source code... Read more about SSI Here

     Throughtout this page's content area, you'll find linked Text Words... this is an example of Inline Navigation. Once again you need to decide if you want the links to open in the same Browser window, or in a new window...

     Finally, Look at some of our Design Pages to see the Previous/Next Style Navigation of Those Pages... and you'll see how visitors can navigate back and forwards thru our Design Series Pages... This type of Nav Area is often useful if you have content that you are trying to "string-out" or "continue" from page to page, so to speak... you can see how CSS Coding (in our main stylesheet) makes the link text "change color" as you mouseover them...

This concludes our discussion on Webpage Navigation...