Creating Your Own Navigation System

Lesson 2: Creating Your Own Navigation System

Overview

In the previous lesson you learned about organizing the information on a website, and assuring that websites are usable so that visitors can easily navigate the site, easily access information, and easily perform the site's intended functions. One common feature on websites that plays a key role in making sites usable is the site's navigational menu. In this lesson, you will create a navigational menu for your portfolio website.

Learner Ouctomes

At the completion of this exercise, you will be able to:

organize all web pages in your portfolio so that someone can easily navigate through them and find the pages they're looking for
create an XHTML list that will serve as the navigational menu for your portfolio website

Activities

Throughout this course, you have been building a structured HTML list on your portfolio of each of your completed activities. You will now use this same list to build a navigation system for your portfolio. This list might not look like a typical navigational menu yet, but you will later change the way it looks by applying CSS to your entire site.

Organize your list. Put the items in order by unit, topic, or in any other order that seems logical to you. The order should result in an effective, usable sight for anyone who accesses it, including your instructor.
Include future assignments in your list. This way you won't have to update the list later. See your instructor for a list of future assignments.
Have your list approved by your instructor prior to continuing on to the next step.
Copy the HTML code for the list and paste it into each of the web pages associated with your portfolio. In order to make the navigational menu appear at the of each page, be sure to paste it at the top of each page, immediately after the <body> tag.
Since your list will later be stylized using CSS to look like a navigation menu, you must add an "id" attribute to it, as in the following example:
<ul id="NavList">

All done?

Show your instructor all the web pages of your portfolio; they should all now have an unordered list of web pages (your navigational menu) at the top.

Copyright © 2006 by University of Washington. Permission is granted to copy these materials for educational, noncommercial purposes provided the source is acknowledged. This product was funded by the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306). However, the contents do not necessarily represent the policy of the Department of Education, and you should not assume their endorsement.

Web Design & Development I

Lesson 2: Creating Your Own Navigation System

Overview

Learner Ouctomes

Activities

All done?