For organizing information, sometimes it's better to "lump" things together; other times it is better to "split" them apart. Scrolling through long web pages is often tedious. Long, single web pages take longer to load over networks when compare to a series of smaller pages.

In many cases, you can identify logical points to "split" information into multiple web-pages. However, there is no magical formula, and opinions will vary. You should strike a balance between pages with breaks that parallel the content yet avoid forcing the reader to click through too many screens of options and sub-options before getting to the desired information. It also becomes important to build in hypertext links that help the reader navigate your information web as well as providing visual clues about their location within the web.

So far we have built one web page with a link to a shorter page. In lesson 8d we created a list of links that works as a table of contents by connecting them to named anchors for the different sections of the Volcano Web lesson. These same divisions might be sensible breakpoints for splitting the single long page into sub-pages.

Up to now we have created a directory called volc that contains our two HTML files (index.html, the lesson, and msh.html, a second web page). We also have a second directory called pictures that contains our graphic image files.

We will now split the single Volcano Web file into a series of web pages, linked as shown in this schematic diagram. The entry point is a main index/cover page, index.html that has links that point to each of the other parts of our lesson:

·         Introduction

        [intro.html]

·         Volcano Terminology
[term.html]

·         Volcanic Places in the USA
[usa.html]

·         Volcanic Places on Mars
[mars.html]

·         Research Project
[proj.html]

Each part of the lesson will link back to the index as well as to the preceding and following pages. Also note the two-way link between usa.html and msh.html

Or if you prefer a more traditional directory listing structure:

NOTE:To complete this lesson, we will have to create quite a few new files and do a fair amount of copy/pasting from the files you have been working on. Be sure that you are comfortable jumping around between the different application and document windows on your computer.

Also, we have changed the name of the volcano directory/folder to a shorter volc. (We like trying to keep our URLs from getting too long, but also not shrinking them too short that they are cryptic)

The first thing we will do is create the new index.html file, which will be the "cover" page for our Volcano Web lesson:

1.    First make a copy of the index.html file you have been working on and name it old.html or something like that. This is a very good habit when you start making major changes to your web pages!

2.    Now open the original version of the index.html file in your text editor. This is our lesson that we have been working on to this point.

3.    We are going to use the picture, the opening text/quotation, and the table of contents as the content for our title page. To do this, we will remove the sections that will be "split" out to other web pages.

Delete the sections from Introduction to Bilbiography, that is everything from:

  <hr>

  <h2><A NAME="intro">Introduction</a></h2>

  A <b>volcano</b> is a location where magma, 

  or hot melted rock from within a planet, reaches the surface. 

   :

through

   :

  <dt>Lipman, P.W. and Mullineaux (eds). (1981)

  <dd><I>The 1980 Eruptions of Mount St. Helens, Washington.</I>

  U.S. Geological Survey Professional Paper 1250.

  </dl>

4.    Now look at the section labeled "In this Lesson..." In our previous work, we used hypertext links to jump to a named anchor (e.g. <a name="term">..</a>) in the same document (see lesson 8a). Now we will modify these anchor links so that each jumps to another web page (which we will create below).

Find the portion that reads:

<b>In this Lesson...</b>

  <ul><i>

  <li><a href="#intro">Introduction</a>

  <li><a href="#term">Volcano Terminology</a>

  <li><a href="#usa">Volcanic Places in the USA</a>

  <li><a href="#mars">Volcanic Places on Mars</a>

  <li><a href="#project">Research Project</a></i>

  </ul>

and edit it to read:

<b>In this Lesson...</b>

  <ul><i>

  <li><a href="intro.html">Introduction</a>

  <li><a href="term.html">Volcano Terminology</a>

  <li><a href="usa.html">Volcanic Places in the USA</a>

  <li><a href="mars.html">Volcanic Places on Mars</a>

  <li><a href="proj.html">Research Project</a></i>

  </ul>

NOTE: Be sure you understand the difference between a link written:

  <a href="#quest">go to questions</a>

and another one written:

  <a href="quest.html">go to questions</a>

The next thing we will have to do is create the individual files for the other parts of our lesson. It will be easier if we first create a template file that we can modify for each of the different pages.

1.    In your text editor, create a new file called temp.html

2.    In this file, put the following HTML:

<html>

<head>

<title>XXXXXXXX</title> 

</head>

<body>

<h5>Volcano Web / 

<a href="index.html">Index</a> / 

<a href="xxxx.html">back</a> / 

<a href="xxxx.html">next</a></h5>

<h2>XXXXXXXX</h2>

   :

   :

   :

<hr>

<address>

<b><a href="index.html">

Volcano WebL</a> : 

XXXXXXXX </b><p>

created by Lorrie Lava, 

<a href="mailto:lava@pele.bigu.edu">

lava@pele.bigu.edu</a> <br>

Volcanic Studies, 

<a href="http://www.bigu.edu/">

Big University</a><p>

<tt>last modified: April 1, 1995</tt>

</address>

<p>

<tt>URL: 

http://www.bigu.edu/web/xxxxxxxx.html

</tt>

<p>

</body>

</html>

3.    Now you should make 5 copies of the template file and make the appropriate changes to the template:

4.        Now, open the old index.html file (that we re-named old.html) in your text editor. For each of the new files, you will have to copy the HTML that was underneath that section's <h2>...</h2> header and paste it into the new files you created in the previous step. Note that Volcanic Places in the US and Research Projects both include sub-sections that have <h3>...</h3> headers.

5.        Finally, you will have to modify the link in msh.html file. Previously, it returned to a named anchor in the main lesson (the section for Volcanic Places in the US) where now it should link to the usa.html file. Open msh.html file in your text editor and edit the line to read:

  <a href="usa.html"> 

  <img src="../pictures/left.gif" alt="** "> 

  Return to

  <i>Volcano Web</i></a>

Just to be consistent, you should also make the footer look like:

<hr>

<address>

<b><a href="index.html">

Volcano Web</a> : <a href="usa.html">

Volcanic Places in the USA</a> : 

Mount St. Helens</b> <p>

created by Lorrie Lava, 

<a href="mailto:lava@pele.bigu.edu">

lava@pele.bigu.edu</a><br>

Volcanic Studies, 

<a href="http://www.bigu.edu/">

Big University</a><p>

<tt>last modified: April 1, 1995</tt>

</address>

<p>

<tt>URL: http://www.bigu.edu/web/msh.html</tt>

</body>

</html>

Performance

A.   Independent Practice

Take a look at the web page you are developing. Is it getting very long? Is there a logical division where you could "split" the page? Set up a cover/page index to your web pages and design appropriate links for navigating between them. Then design a template for your "sub-pages."

Now ask some friends/colleagues to view your pages. Do they prefer the "split" pages or the "lumped" one? Could they easily negotiate their way through your information?

ASSIGNMENT

Study in advance the Standard and Enhanced HTML..