HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

A Web Document Hierarchy

Another example of a well-organized hierarchy is found at the URL:

www.utoronto.ca/webdocs/HTMLdocs/tools_home.html

which is the top node for a document collection describing Web browsers, HTML editors, and support tools available on Mac, UNIX, and PC platforms. This collection is organized hierarchically, first by platform (Windows, Macintosh, OS/2, UNIX, Miscellaneous tools) and second by subcategories based on tool type (TCP/IP Software, WWW Browsers, Browser Helper Applications, HTML Editors, HTML Translators/Filters). Figure 4.8 shows a typical page from this collection—in this case, from the top-level page of this hierarchy. Note how this page has navigational links to the documents one level down in the hierarchy, namely to tools specifically for DOS and Windows, Macintosh, OS/2, unix, and so on. This organization makes it extremely easy to navigate through the hierarchy and find the desired information. Although not apparent from this page, the hierarchy is only three levels deep.

Figure 4.8  A page from a hierarchical list of Web software resources, illustrating important design features in a hierarchical collection. This page is available at: www.utoronto.ca/webdocs/HTMLdocs/tools_home.html

This page was designed by Michael Lee of the University of Toronto’s Information Commons.

Note also that there is a link from this page all the way back to the home page for this Web site (“Home”), which is the top node or home page for the entire document collection. The overall design and organization of a Web site is discussed later in this chapter.

Hierarchies and Linear Components Together

Obviously, it is easy to include linear collections within a hierarchical model: A particular node within the hierarchy simply becomes the starting page for the linear collection. The hierarchy then gives an overall and easily navigable structure to the entire collection, rather like shelf labels in a library.

Web Site Collections

A Web site usually follows the hierarchical approach, but with a few twists. Figure 4.9 illustrates a possible organization of a large site’s Web collection. In general, a Web has a single top node, or home page, which is the publicly advertised location for the document collection. The home page then has links to other pages that lead down to the remaining resources. In this example, the home page has links to small introductory documents that explain the origins of the site and that outline copyright rules associated with the site content. There are also links to the top-level nodes of the various hierarchical collections beneath the home page. Figures 4.10 and 4.11A and B show three example home page that illustrate these features. Despite their superficial dissimilarity, both pages follow precisely this model.

Figure 4.9  Schematic layout of a large web collection, showing the hypertext links between the home page, the top-level organizational nodes, and other documents. Solid lines indicate main links between items within the hierarchical (or linear) structures, while long-dashed lines indicate links between “siblings” at the same level in a hierarchy. The arrows indicate the possible directions of the links, as coded into the HTML anchor elements. The short-dashed lines indicate links to general-purpose pages—note that these links are unidirectional, since it is unreasonable to code in all the possible return paths. Typical home pages from large collections are shown in Figures 4.10 and 4.11.

Figure 4.10  An early mock-up for the official home page for the University of Toronto. The page has links to single documents describing the university organization and mandate as well as links to the main organizational areas. These latter links are to top-level nodes of subsequent hierarchical trees.

Distinguishing Branches in a Large Web

Often, a Web site will have many different main sections rooted in the home page, as seen at both the University of Toronto (Figure 4.10) and Silicon Surf (Figure 4.11A). The Web manager may want to use similar document layouts and design models in the different branches, since this makes it easier for users to navigate through the collection. At the same time, the designer will want to give each section a distinctive look, so that the readers have a sense of location and know where they are.

One way to do this is to modify the banner text graphic at the top of the page to reflect the identity of the site and the specific features of the local tree—this is just what we prescribed for linear collections earlier in this chapter. Consider, for example, the “Information Commons” Web site. For this site, the banner graphic shown in Figure 4.5, which contains the Information Commons logo and name, could be modified for each section at the Web site, retaining the logo and name, but adding a subtitle appropriate to each section. The logo immediately communicates that the page belongs within the Information Commons collection, while the subtitle quickly indicates the particular subsection or topic. In addition, different-sized or differently styled logos can be used for sections and subsections to give a graphical feel for the hierarchical location of the document in the overall collection. Finally, the BACKGROUND attribute to the BODY element can be used to tile the background with a “watermark” reflecting this same information. This is not sufficient on its own, however, as the information provided by the graphic is lost with a text-based browser or if image loading is disabled.

Figure 4.11  Part (A) shows the home page of Silicon Surf, the electronic publication of Silicon Graphics Inc, while (B) shows the home page for The Nando Times, an electronic newspaper. Both pages are strongly graphically oriented, with links to the main site areas. Despite the very different looks, the organization of these pages is very similar to that of Figure 4.10. Note that the Silicon Surf home page has a prominent link to a text-only version, while the Nando Times has a link to a “no frames” alternative: Both sites were carefully designed to support a wide range of users.

(A) is used by permission of Silicon Graphics (www.sgi.com); copyright 1997 Silicon Graphics Inc. All rights reserved. (B) is used by permission of The Nando Times (www.nando.net). All rights reserved.

Figure 4.12 shows some possible banner designs, based on the ideas just presented, that were created for the Information Commons Web site. Note how they preserve a common look and feel, while quickly communicating the function of the page and its location within the overall hierarchy.