▶ CSS Drop Down Navigation Menu Tutorial on Vimeo: Couch Mode

▶ CSS Drop Down Navigation Menu Tutorial on Vimeo: Couch Mode

WNM 608, Module 8: Forms

WNM 608, Module 8: Forms class lecture

Wufoo Online Form Builder

Wufoo  Online Form Builder

the id v the class in css...

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).

So the CSS might look something like:

#top {
 background-color: #ccc;
 padding: 1em
}

.intro {
 color: red;
 font-weight: bold;
}

The HTML refers to the CSS by using the attributes id and class. It could look something like this:

<div id="top">

<h1>Chocolate curryh1>

<p class="intro">This is my recipe for making curry purely with chocolatep>

<p class="intro">Mmm mm mmmmmp>

div>

Grouping

You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.

For example, if you have something like:

h2 {
 color: red;
}

.thisOtherClass {
 color: red;
}

.yetAnotherClass {
 color: red;
}


You could make it:

h2, .thisOtherClass, .yetAnotherClass {
 color: red;
}


Nesting

If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:

#top {
 background-color: #ccc;
 padding: 1em
}

#top h1 {
 color: #ff0;
}

#top p {
 color: red;
 font-weight: bold;
}


Removes the need for classes or ID's if it is applied to HTML that looks something like this:

<div id="top">

 <h1>Chocolate curryh1>

 <p>This is my recipe for making curry purely with chocolatep>

 <p>Mmm mm mmmmmp>

div>


This is because, by separating selectors with spaces, we are saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.

This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.

Assignments

Assignment 8.1: Forms

Description

Make two form pages. The first form page is a simple demonstration of your knowledge of the form controls. The first form must include the following controls:

• Text input
• Password box
• Radio button set of at least five elements
• Check box set of at least five elements
• A textarea box
• A select menu presented as either a list box or a drop menu with at least seven options
• A submit button and a reset button

Be sure to group your controls into fieldsets with legends when appropriate.

The second form must be a graphically rich page using CSS to control the look and feel of the page. The page must include at least five of the controls listed above and a file control. The submit and reset button must be graphics.

Validate your code. Make the necessary corrections. Upload your pages to your web server space and post the URLs in the Class Discussion.

Purpose

The purpose of this assignment is to review the form tags and understand how to use form tags with CSS:

• To learn the underlying HTML of forms
• To write accessible forms
• To design make graphically rich forms

Tools

• TextWrangler (Mac) or Notepad ++ (PC)
• Firefox with FireFTP installed

Due Date

This assignment is due by the end of Module 8.

Submission Directions

Place all of your files in a folder, and name the folder m8_yourlastname. Save your folder to your server space. ZIP the local copy of your folder. Post the URL to the appropriate topic in the Class Discussion, and attach the ZIP of the folder.

Use the following file-naming convention:

• m8_yourlastname.zip

 

• Assignment 8.2:  Project 3: Personal Portfolio

For this project you will be building a portfolio of your work. The portfolio will serve as a vehicle for you to display your work as you progress through your degree program. You are building a website for yourself to display your growing skills. This portfolio will evolve over the course of your education. As you take more courses you will have more work to show.

This is a professional portfolio, and as such it is a more targeted site. You should select and carefully edit the work you want to show. This portfolio is a demonstration of your professional skills and judgment.

Your target audience includes your department director, instructors, classmates, and eventually, future employers. You will use this site as part of your mid-point review presentation. The committee will want to know more about you. They will need to see demonstration of your technical skills as well as your design skills. As you think about this portfolio, consider how you want to be perceived and design accordingly.

Your portfolio should include the following sections:

• Home: to establish the look and feel of your site. To inform the users what to expect in your site.
• Personal history/Artist's statement (optional): this can be incorporated in the home page if desired.
• Resume: Must be in HTML with CSS. You can link to a PDF as well, but there needs to be an HTML version incorporated in the site.
• Portfolio: Include carefully chosen examples of your work. How you present them is up to you, but be sure that they read well on the Web. Extremely large images and videos will need to be optimized, and in some cases reduced to work well. If you have professional experience and wish to show some of that work as well, you should do so.
• Contact Page 

Final content and page list will vary somewhat from student to student -- the important thing is that the final piece fairly represents you.

A further consideration is that your portfolio is a "living" document. It is not a static brochure, but rather a growing, evolving site. As you think through the navigation, keep in mind that you will be updating this site in the future to include a growing body of work.

Each page must include:

• The site name and any branding you want associated with you
• Global navigation to all the sections of the site
• Local navigation, where appropriate
• A breadcrumb trail where appropriate and only if your site is deep enough to require one
• The section title
• The page title
• The content
• A foot with a copyright

If you already have a portfolio that you like and fits you well, you can propose to create another site, but you will need to show your site and get approval. Everyone in this program is required to have a web-based portfolio.

See DUE DATES section below for breakdown of individual module assignments.

Technical Requirement

This is a web-based portfolio. You should design using web "friendly" technologies. The site should be developed in HTML with external CSS and JavaScript. You may use Flash to enhance your site with animation and interactivity. This is an HTML class -- you may not build a Flash site. You may include sound files, video, animation, and anything else you feel will show your work off in its best light.

Purpose

• To create a showcase for your growing body of work.
• To gain experience designing a site that will be updated on a regular basis.
• To gather examples of your work and collect your creative history as a student.

Tools

• Mac: BBedit
• PC: Notepad ++
• Use the image editor of your choice -- Fireworks or Photoshop
• JavaScript and JavaScript Libraries
• Flash, if desired, to enhance the site
• Software for creating and compressing sound such as Audition or Garageband
• Software for creating and compressing video such as Quicktime Pro or Sorenson Squeeze

Due Dates

Due Module 8: Define, Describe & Gather -- Begin collecting your content. Make a list of all the work you would like to show. Begin writing your resume, if you don't already have one. Write one paragraph that describes you as an artist. Write a second paragraph about what you would like your portfolio to do for you -- what would you like people to understand about you from viewing your portfolio?

Due Module 9: Finish collecting content and begin designing -- Continue to collect and refine your content. Make a list of all the different kinds of media your portfolio will need to accommodate. Begin grouping your content into categories. Start thinking about the hierarchy of your categories. Complete your resume.

Make a list of everything that must be on each page. Using the media of your choice, make your first design pass. You can use paper, pen and pencil or use your computer. Keep your designs flexible. Remember, this is just your first pass. Pick just three pages from your site to design -- don't try to do all of them. Be sure you have included everything that must be on every page.

Due Module 10: Redesign -- Using the feedback you received from your first design, re-work your site design. Pay particularly close attention to the navigation. Pay attention to the value range in your colors. Make sure there is enough contrast in the darks and lights.

Due Module 11: Complete design and begin coding -- Do any needed final tweaks on your design and begin coding. Validate your pages as you go. Separate the CSS out into external sheets and link to your external CSS. If you are going to need any special kind of interactivity, begin planning for it now. If you want to use some JavaScript or JavaScript Libraries, start looking the code you will need.

Due Module 12: Continue coding and begin production work on your content -- Continue making your pages and refining your code. Make any last tweaks to your designs as you code. Make sure all your pages validate.

Due Module 13: Finish coding and complete production work on your content -- Complete coding. Get as much working as you possibly can, even if it is rough.

Due Module 14: Final clean up, editing, submit -- Use this module to clean up any loose ends. This is the time to test your site and fix all the little snags and tidy up the messy bits.

Submission Directions

Put your files in a folder. Name your folder "m8_final_yourlastname". Upload your folder to your server. ZIP the local copy of your folder. Post the URL to the appropriate Class Discussion topic and attach the ZIP of the folder.

Forms: Student Outcomes

• Understand the nature and uses of forms.
• Learn the best practices for creating accessible forms.
• Work with the different form elements.
• Create forms that validate.
• Style forms with CSS.

Forms are the primary way information is gathered and passed from users to the server. They represent one of the most widely used methods of creating customized web applications. It's hard to imagine the Web without forms.
We have grown so accustomed to using form elements in web pages that we don't even notice them for what they are any longer. Some of the most common uses of web forms include:

• Search boxes
• Shopping carts
• Booking a ticket online
• Posting a blog or Twitter entry
• Posting a video to YouTube
• Commenting on a news story
• Writing on a friend's wall on Facebook
• Accessing online banking
• Logging into this course
• Participating in the Class Discussion

Forms are relatively easy to code, yet difficult to design well. The HTML that creates all the form elements is quite straightforward. The form elements provide simple, familiar tools for the user to input information. There is a small but powerful collection of form elements. Together they make up the front-end interface for forms. They include:

• form: creates the form, tells the browser what to do with the form and how to do it
• input: input controls include text fields, password fields, radio buttons, check boxes and more
• button: generic input buttons
• textarea: multi line text boxes with scrolling for large text input
• select: scrolling list, multiple choice or drop menu
• option: options within the select menu
• fieldset: for making groupings of related controls, used to make forms accessible
• legend: assigns an action to the group, used to make forms accessible

Forms use these controls to collect user input. Usually the input is validated using JavaScript before it is passed up to the server to be parsed and processed. There, the server uses server-side scripts to decide how to handle the input depending on how the form was intended to be used. The writing of these scripts is beyond the scope of this course, but in this module we will explore the client side of making usable forms.

Forms & Scripts

The basic elements of a form are relatively simple HTML tags. The information is gathered from the user and passed to the server. The server needs to use a script of some kind in order to process the information it receives. The script can be written in any language the developer favors. Some of the most commonly used languages are Perl, Java, Ruby, PHP and Cold Fusion. The form tag references the script and the script does the work of sorting, formatting, and directing the data to where it should go.
With a good script you can do all kinds of things with your data. The interface between HTTP, which is responsible for the transaction and the script that is being called, is referred to as the Common Gateway Interface, or CGI. The scripts are stored in a folder on the server. By convention the folder is called "cgi_bin". If you are a designer you may not want to/have to write your own scripts. Fortunately, there are many services available for free on the Web. If you need something special you can always hire a programmer, or learn to code them yourself. Your ISP (Internet Service Provider) probably has a number of pre-written ones available for your use. It's worth checking with them to find out. Sometimes they have message boards and email programs available at no extra charge.

An excellent resource is Wufoo.com. This site provides a drag and drop interface for creating forms that it can attach scripts to as well host. It's also a great example of Web 2.0 design. Check it out at: http://wufoo.com/

The Form Tag

The best way to learn how to build a form is to just go ahead and build one. We are going to write a form that allows people to talk about their pets.

 Make a folder and name it "m8_yourlastname". Open up your template page and go to File > Save As and resave the file as "m8_form1_yourlastname.html".

The first step in making a form is declaring a form. The form tag wraps completely around all the controls used in the form. The form tag has a number of attributes, the most important of which are "action" and "method".

The "action" attribute points to the script that the server will use to process the form. It is the URL to the script. It could look like this:

action="cgi_bin/guestbook.php"

If you just want to have the data sent to your email address with no formatting you can always just use your email address as the action. For the purposes of this module you can send your forms to your own email address. The code will look something like this:

action="mailto:me@mysite.com"

The method attribute has two values:

• GET
• POST

The method specifies how the information is transferred to the server. The information is transferred in the form of "name=value pairs". The pairs are separated by "&". A series of "name=value" pairs looks like this:

dogName=fido&dogBreed=whippet&favoritefood=kibble

The GET method appends the "name=value" pairs to the end of the URL when the form is submitted. As a result it is visible to everyone while it is being passed. This is fine for short variables that are not sensitive, but you may think twice about asking people to send their credit card numbers, exposing them to prying eyes. An example of a GET method looks like this:

http://www.google.com/search?hl=en&ie=ISO-8859-1&q=dante

The POST method attaches the data after the URL and certain header information. The key word POST tells the server to expect more information after the header information has been read. This is the method that the W3C recommends. Sensitive information is not visible and secrets are not exposed. The POST method can handle long, elaborate postings.
Add the form tag to your HTML page like this:

Assignment 7.... Accessibility!

Assignment 7.1: Project 1: Recipes From My Friends (Part 5)

Overview
We have been writing HTML and CSS from the very beginning of the course. We have also been learning about the Web as a unique design environment. In this project we are going to bring them all together to create a website. All of you have put together a recipe for your demonstration files. For this site you will collect all the recipes from your fellow students and collect them into a finished website. Your site will include the following pages:

Home Page Recipe Pages (one from each person in the class) Table of Measurements You will need to organize all of these pages into a maintainable website. I recommend that you keep the folder structure simple. Place all the HTML pages into a folder with an assets folder for the images. Your sites will require navigation. In the modules we use a two-column layout with utility links at the top and local navigation on the left. You can stick with this system or come up with one of your own.
The look and feel is also up to you. You can re-shape and re-design the recipes that you get from other students. Feel free to experiment with imagery, icons, colors, and typography. CSS is to be used for all styling and positioning. Tables may be used for tabular data only.
One of the big issues you will need to resolve is how to handle the background image. In my example, I used a head of cabbage. Obviously, this will not be appropriate for many recipes. There are many design solutions here. You could have:
A unique background image for each recipe
One graphic that reflects the site as a whole
A watermark
No background image
Unique illustrative graphics for each page
A strip graphic
Graphic buttons
Some combination of the above -- the possibilities are endless!
Project Breakdown
Module 3: Collect, proof, customize and refine all the recipes from your classmates.
Module 4: Begin designing the look and feel of your recipe site.
Module 5: Rework the look and feel of the recipe site and begin roughing out code. Externalize the CSS.
Module 6: Make the Comparative Table of Measurements and refine the CSS. Add navigation and link the pages.
Module 7: Finish the code and clean up any remaining details.
Description
Make the Comparative Table of Measurements. Add navigation to all your pages. Link all your pages. Continue to refine your CSS. Finish preparing graphics. Begin page clean up.
Purpose
Learn to manage a multi-page website.
Design a functioning navigation.
Use CSS to control the layout of multiple pages.
Prepare and use appropriate graphics.
Tools
Mac: TextWrangler or your preference
PC: Notepad ++ or your preference
Recipes from Module 3
If you want to include an image, use the image editor of your choice -- Fireworks or Photoshop

Due Date
This assignment is due by next class.

Submission Directions
Put your files in a folder. Name your folder "project1_yourlastname". Upload your folder to your server. ZIP the local copy of your folder. Post the URL to the appropriate Discussion topic and attach the ZIP of the folder.

Throughout the semester you will be building demonstration files. By the end of the semester you will have a sizable collection of pages demonstrating different skills. For your Midterm you will collect all the demonstration files from the first half of the course into a single site. Your site will need a home page that describes and links to every demonstration. The individual demonstrations need not link to each other.
You home page must include:


Your name
A paragraph about you
A photo/portrait of you
The name of every demonstration file with a description
A link to every demonstration file
Organize your demonstrations into folders. Organize the folders in a way that makes sense to you. I suggest you keep your folder structure as flat as you can.

Use HTML and CSS to make your page. Design your page and make it into something special! Don't be afraid to have fun with it. You can add thumbnails, background images, personal logos, icons, wacky colors, goofy type -- just so long as it's legible. Have fun.

Validate your code. Make the necessary corrections. Upload your recipe to your web server space and post the URL to your Demonstration Library in the Discussion.
You will be updating this page again at the end of the course. As part of the Final you will be collecting and adding all the demonstrations from the second half of the semester.
Purpose
To gain practical experience working with structured content and using HTML to express the structure.

Submission Directions
Put your files in a folder. Name your folder "demo_library_yourlastname". Upload your folder to your server. ZIP the local copy of your folder. Post the URL to the appropriate Discussion topic and attach the ZIP of the folder.
Summary
This module highlighted the importance of accessibility when it comes to web design. The Web Content Accessibility Guidelines 2.0 outline the four main principles: that websites should be built in such a way as to be perceivable, operable, understandable and robust for those with and without disabilities.
Assignments
Assignment 7.1: Project 1: Recipes From My Friends (Part 5)
Assignment 7.2: Project 2: Demonstration Library

Accessibility

As part of the W3C's Web Accessibility Initiative, they released a series of Web Accessibility Guidelines. In this module we are going to take a closer look at the Web Content Accessibility Guidelines. These guidelines are dedicated to making the Web more accessible for people with disabilities, but they also improve the lot of all user agents, including under powered mobile phones. The first version of the guidelines was released in 1999. We are currently in version 2.0. It is referred to as WCAG 2.0.

The guidelines address the following kinds of disabilities:

Visual: impairments including blindness, low vision and color blindness

Motor/Mobility: difficulty using one's hands due to tremors; loss of fine motor coordination due to diseases like Parkinson's disease, muscular dystrophy, cerebral palsy, and stroke

Auditory: deafness and other hearing impairments

Seizures: photo-epileptic seizures due to visual strobing or flashing effects (Remember the notorious blink tag? Not a good idea.) Cognitive/Intellectual: developmental, learning, and cognitive disabilities Accessibility helps with assistive technologies that people with disabilities might be using. When we talk about "assistive technology," we are referring to technologies like:

screen readers
Braille terminals and keyboards
screen magnification
speech recognition
keyboard overlays


You may be wondering why you should go to the expense and trouble of learning and following the guidelines. There is both a moral and business case to be made for following the guidelines. First we'll discuss the moral case for coding accessible websites:

It's the law. The United States, Canada, and other countries now have legal mandates advocating for accessibility. In the U.S., we have Section 508 of the U.S. Rehabilitation Act. Section 508 establishes standards that websites of federal agencies should incorporate. If your organization takes federal money you will be expected to follow the guidelines. It is likely that these policies will only grow in the future, so you might as well be a good citizen and get started now.
Accessible sites encourage independent living and improve people's lives. An accessible website grants access to information and also increases independence and dignity.
Accessible websites permit learning, shopping, working, and communicating with friends and family. They encourage and enable greater participation in the larger community. For some, the Web is their lifeline to the outer world. When you take the time and care to make your site accessible, you improve the life of a disabled person. There are a lot of people with disabilities in this world. We are all mortal and will experience greater and lesser mobility at different times in our lives.
Inclusion spurs innovation. Creating accessible websites force the designer to be more inventive. It encourages empathy. Adhering to accessible design guidelines will make you a better designer.

Quite simply, accessible web design makes the world a better place. It forces us to acknowledge the dignity and value that each of us brings to our society.
Here's the business case for accessible design:


An accessible site is one that is available to more visitors. More visitors mean bigger markets and more customers.
Accessible websites are built according to web standards. They are faster to develop. They save time and money by reducing site development and maintenance costs.
Developing an accessible website using web standards makes the site more likely to work across browsers, platforms and devices.
Accessible websites have faster performance. They download and function more quickly.
Improving accessibility means improving usability for everyone.
An accessible website is search engine-friendly. You will get a boost in your search engine ratings.
You also get good publicity and good karma.


The Hidden Nuggets of WCAG2: The Wonderful World of ALT Attributes, Part I Time-Based Media

Time-based media gets a bit more complex. You need to consider presenting both audio and video content in multiple forms. Captions should be provided for video -- preferably closed captioning that is synced to the presentations. You may also need an audio description of the action in the video.

For audio you might consider providing a sign language option as well as captioning. The key here is to consider alternative ways of presenting the same content.

Adaptable

The concept of adaptable means paying attention to:

Info and Relationships: The structure of your documents should support creating meaningful associations and distinctions within the content. The presentation of your content should be supported by thoughtful structuring of your code. Again this goes back to our theme of human/machine collaboration. Meaningful Sequence: The sequence that your content is presented in should be meaningful. It should support the message you want to convey. The structure of the documents themselves should support and be expressive of the meaning.

Sensory Characteristics: This directive is a hard one for most designers to hear. When designing the controls for a page's functionality, be sure that any instructions, navigation/control buttons and so on are presented in such a way that their meaning and usage is clear without relying on the look and feel. If your page controls depend solely on size, color, shape, position or sound, then think again. Designers hate to hear this but it pays to be explicit. A picture may be worth a thousand words, but sometimes a decent label makes an icon much clearer.

Distinguishable

The distinguishable guidelines are interesting for designers. "Distinguishable" refers to the practice of creating pages that help the user separate precious content from background clutter. It separates foreground from background. This is true for audio as well. You need to help the user separate sound from noise. Let's break it down:

Use of Color: The use of color on the Web is more than creating pleasing combinations of tones. The palette directly influences the functionality of a page. If your body copy is dusty gray and you make your link color dusty violet, who will ever be able to see your links in order to click on them? You might want to consider going old-school and including an underline in your link styles. Also, what if your users are color blind? Upwards of 8 percent of men and 0.5 percent of women are born color blind. This is definitely an aspect you'll want to consider.

Audio Controls: It used to be fairly common to embed music in a web page that would automatically play on load. Thankfull, this practice has fallen out of favor. If you do find yourself in a position where you are embedding music or any audio on a page that plays automatically, be sure to include controls so the user can pause, play and adjust the volume. Think of it as common courtesy.

Contrast (Minimum): The guidelines suggest a minimum contrast of 4.5 to 1 for all text and images of text, except for oversized text, incidental text that is there strictly for decoration and logo types.

Resize Text: As you code your pages, be careful not to disable the users' ability to resize and zoom text in their browsers. This is a place where you need to say the Serenity Prayer and rely on your skills as a designer to use proportion and relationships well. Let the user customize their reading environment and they will reward you with loyalty. Images of Text: Using images of text to replace "live" text is an important weapon in any web designer's arsenal. There are times when you need a particular font that everyone must see in exactly the same way. CSS3 supports the use of embedded fonts, but you may not always want to go to the expense of licensing a font or forcing your users' browsers to download it. Using an image is a good alternative, but be careful how you use images of text. Make sure the text is readable. For instance, six-point lemon yellow text on cream is not a good choice.

Visual Presentation: When designing your body copy, pay attention to the basics of legibility.
Make sure there is enough contrast between the font color and the background color. You don't want so much that it tires the eyes, but you want enough that you create a comfortable reading environment.
Control the line length: don't let your columns sprawl wider than 80 characters in length.
Align your text, preferably to the left margin. Avoid justified text if possible. It looks nasty on the Web and is hard to read.
Be generous in your leading. Line-heights between 135 and 150 percent look good and facilitate reading. Be sure that there is at least a character and a half height margin between paragraphs.

Background Images: When using background images and colors, be sure that the user can easily separate background from foreground.
There are many more guidelines like these, but this list should get you started.

The Understanding WCAG 2.0 website says:
"Operable - User interface components and navigation must be operable."
The Operable guideline covers a lot of issues that you'll find familiar from your usability studies. The point of the Operable guideline is threefold: to ensure that your navigation is comprehensible; to allow your sites to be used by people that must navigate by keyboard; and to make certain that your sites don't cause seizures.

Keyboard Accessible
It is a courtesy to your users that rely on keyboards to make sure your entire page is navigable and operable with this tool. Setting the tab order for navigation and form elements makes your pages much easier to use. When you write your style sheets, be sure to include the focus pseudo class when you define the hover state. That way, users on keyboards will get the same visual cues as those using mice. This will also improve the experience for people using touch screens! It's easy to do:

a { color: #d00; }
a:hover, a:focus { color: #f00; }

Adequate Time
Users need time to react. If you have time-dependent content that appears and then goes away, you need to give your users enough time to digest what they are seeing or hearing and then react to it. Examples of this might include:
Step-by-step presentations in a slideshow format such as a PowerPoint presentation
Slideshows of images that automatically refresh
Pop-up information boxes that appear and then fade from view
Content that auto-scrolls like ticker tapes or news feeds
Information that auto-updates such as stock quotes or online auctions
Be generous with your users. Add controls for stopping, pausing, hiding, showing, starting and rewinding. Always be sure to add enough feedback for your users so that they know where they are in the sequence -- Slide 4 of 10, for instance.

Seizures
Back in 1994 Netscape introduced the infamous blink tag. Lou Montulli, who is credited with the idea, says that it was originally discussed as a joke in a bar after work hours. For better or worse it was insanely popular, though it never got wide browser support. It had serious usability problems. In 1996, Jakob Nielsen called it "simply evil."
There is no doubt about it: blinking and strobing effects are problematic in that they can cause seizures. You are strongly discouraged from using any element that flashes more than three times per second.
Navigability
This is a big topic. You could write an entire course about designing navigable pages; in fact, many have done just that. Here we are going to provide a brief discussion of navigability from the perspective of accessibility. Keep in mind that this discussion doesn't even begin to scratch the surface!
Good navigation answers the following four questions:
Where am I?
Where can I go?
How will I get there?
How will I get back?
There's a lot in these simple questions. The goal is to help users find the content they want and keep them oriented while they do it. There are simple best practices that go a long way to solving this problem. As an extra bonus, they also greatly improve pages' search engine performance!
Every page in your site should have a unique, descriptive and keyword-rich title tag.
Make sure all your page headers, subheaders and labels are descriptive. Every page should display a unique, keyword-rich header in either an h1 or h2 tag. This will let the user know where they are. It helps to orient the user.
Set the tab order so that your page can be navigated sequentially. As we mentioned before, include a visual focus style to cue the user.
Redundancy on the Web is a good thing. Provide more than one way for the user to find pages. Be certain the users always know which page they are on in relationship to all the other available pages. Let them know where they are in your site.
The purpose of your link should be clear. Name your links and buttons for where they go or what they do. Showing a picture of a cuttlefish and including a link that says "Read more..." is not so good. Pairing a picture of a cuttlefish with a link that reads "Parakeets Rejoice in Cuttlefish Population Explosion" is much more expressive. (Not long ago, we saw a spectacularly bad example on a site you are familiar with that shall remain nameless. There was actually a link that said "Click here to go there." Wow.)