Learning Resources
Lesson
You may recall from lessons on web page structure, web site structure and information on navigation that you need to create a file and folder naming structure for your website. This project will require an index.html file (or default.html, depending on how your computer is set up) and additional files for the other information.
There are a number of organizational structures that you may consider for the site. Some of the more direct structures are
- sequential
- hierarchical
- procedural
Sequential
A sequential structure is, as the name implies, a series of pages linked in sequence from. Each may have sub pages. The organization looks like this
Figure Sequential Web Page Structure
File names for this sort of web structure could be
- index.html (starting page)
- topic1.htm
- topic1a.htm
- topic1b.htm
- topic2.htm
- ...
If there are a lot of files associated with each topic, folders may be used to organize the files on the website. In that case, the organization would be as shown below. Folders are in red to make the structure easier to visualize.
website folder
index.html
topic1 folder
topic1.htm
topic1a.htm
topic1b.htm
topic1...
topic2 folder
topic2.htm
topic2...
Navigation (hyperlinks on the pages) would be as shown in the figure above. The opening page has a link only to topic1. Topic 1 has a link to topic 2, a link back to the opening page, and a link to each of the topic 1 subtopics. In the figure above, each of the lines connecting one page to another indicates a link to and a link back.
Hierarchical
This structure is like an inverted tree, with the opening page at the top.
Figure Hierarchical Web Structure
File names would be exactly the same as for the previous example, as would the folder structure and naming. The navigation structure is different, so the web links embedded in the pages would be different. As the figure shows, the opening page links to each of topic1, topic2, and topic3. Topic1 is shown with sub-topics. It would have links back to the opening page and to each of the sub-topics. It would not have links across to other topics. Navigation is up and down the branches.
Procedural
Procedural is also referred to as a 'how-to' structure.
Figure Procedural or 'How-To' Web Structure
You are probably way ahead on this one, and realize that the file and folder naming and organization is still the same as in the previous two examples. But, like the previous example, the navigation structure has changed. This time, the starting page links directly to each of the main topics (topic1, topic2, ...), and each topic has a link back to the starting page. Within a topic, the navigation Parts sequentially through the sub-topics. You go through them in order from left to right and back again. Each sub-topic has a link to the previous one and the next one.
Reference book (may be out of print)
Horton, William; et al. The Web Page Design Cookbook. 1996, John Wiley and Sons.
Activity
Assigned Activities
The purpose of this activity is to build capability with developing a structured web site. Please complete all sequences.
- Review the three organizational structures in the lesson, and select one to use in this project
- Sketch a navigation map for the project, as shown in the lesson. Label the pages with actual file names that you will use in your web
- Using FrontPage, start a new empty web.
- If one was not made during the web creation process, make an index page. The quickest way is to go to Folder View, then click on the New Page icon in the top left of the program, just below the File menu. A new index.html page will be created (or index.htm, or default.htm, depending on how your computer is set up)
- Make additional pages, one for each type of multimedia you will include and name them as in your diagram
- Open each page and create navigation links to other pages. Use the linking structure as shown by the lines in your diagram.
You should have one web page for each page drawn on your diagram, with the same filename as in the diagram. All navigations should be complete and functioning.