Lesson Plan

Setting Up a Site’s Navigational Structure

When teaching students how to design and use websites, one of the most important aspects to cover is the site’s navigational structure. In fact, you’ll want to have your students chart out their websites’ navigational structures before they even start designing. Here’s a simple lesson plan that you can use to get this done:

Step 1

Have students start with a list of the site’s major pages. Have them map out their plan like this:

High School Football Team Website Pages

Page Title                                                        Brief Description

The Highview Falcons Football Team Welcomes the visitor to the site

About Us Tells about the team, participants and past records

Events Schedule of upcoming games and events

Contact Us How to reach management and volunteer personnel via phone and email

Site Map Complete list of site links and information

Step 2

As your students work through this exercise, tell them that using tables and charts is a good way to gather the information needed to plan out their sites. (You’ll want them to consider which pages will be “parent” pages, for example, and which will be “sub pages.”)

Step 3

Once they have a basic idea of their site’s navigational structure, explain to your students the need for hierarchical structure within their websites. Have them chart that structure like this:

1. Open a blank word processing document or use a sheet of paper. At the top, write the title that you plan to use:  Football Team Site Navigation Structure.
2. Using the information charted out in Step One above, have students create a chart showing the navigation structure of the proposed site. Have them employ hierarchical structure, with the home page at the top.
3. Add five lower-level pages, or sub-pages under the Events page. Write appropriate page titles for these sub-pages.
4. Have students proofread their charts, name them and save them on their computers.

By mapping out the information using these three steps in advance, students will be able to take an organized approach to designing their first websites.

Students can use any number of programs, such as Microsoft Word and its SmartArt features or Microsoft Visio to create their navigational chart. There are also free apps that can be found online in order to create their charts.