Chapter 4 - Planning Site Navigation

The free-flowing nature of information in a nonlinear hypertext environment can be confusing to navigate. Help your users find content easily rather than making them hunt through a maze of choices. Let your users know where they are at all times and where they can go within your Web site. In this chapter you will learn to build user-focused navigation within the hypertext environment to accomplish these goals. Then you will get a chance to apply these skills in a Hands-on Project.

When you complete this chapter, you will be able to:

• Create usable navigation
• Build text-based navigation
• Link with a text navigation bar
• Add contextual linking
• Use graphics for navigation and linking

Exercise Source Files

This zip file contains the files shown in Figure 4-3.

Individual Case Project

Examine the flowchart you created for your Web site. Consider the requirements of both internal and external navigation. Create a revised flowchart that shows the variety of navigation options you are planning for the Web site.

Using your HTML editor, mark up examples of navigation bars for your content. Make sure your filenames are intact before you start coding. Save the various navigation bars as separate HTML files for later inclusion in your Web pages.

Plan the types of navigation graphics you want to create. Sketch page banners, navigation buttons, and related graphics. Find sources for navigation graphics. For example, you can use public domain (noncopyrighted) clip art collections on the Web for basic navigation arrows and other graphics.

Team Case Project

Work as a team to examine and discuss the flowchart you created for your Web site. Consider the requirements of both internal and external navigation. Collaborating as a team, refine your work to create a revised flowchart that shows the variety of navigation options you are planning for the Web site. Make sure you have standardized your filenames and all team members agree on the naming conventions.

Work individually to create text-based navigation bars for your content. Use your HTML editor to mark up examples of navigation bars for site navigation. Save the various navigation bars as separate HTML files. Have a team meeting where everyone can present their navigation schemes. Choose the best scheme or combine features from different schemes to create the navigation for the Web site.

Work together to plan the types of navigation graphics you want to create. Assign team members to complete the remaining tasks, which include sketching page banners, navigation buttons, and related graphics, and finding sources for navigation graphics. For example, you can use public domain (noncopyrighted) clip art collections on the Web for basic navigation arrows and other graphics.

Top