Are you a lumper or a splitter? Neither? Both?
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:
Or if you prefer a more traditional directory listing structure:
|existing file structure||new file 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:
Delete the sections from Introduction to References, that is everything between:
<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. :and
: <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>You may want to compare your HTML file to an example of how it should look at this point.
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>Compare your HTML file to an example of how it should look at this point.
NOTE: Be sure you understand the different between a link written:<a href="#quest">go to questions</a>and another one written:<a href="quest.html">go to questions</a>
<html> <head> <title>XXXXXXXX</title> </head> <body>
|HEAD: In the head portion of each document, XXXXXXXX is the name of that section|
<H5>Volcano Web / <A HREF="index.html">Index</A> / <A HREF="xxxx.html">back</A> / <A HREF="xxxx.html">next</A></H5>
|NAVIGATION: At the top of each page we use a small header (h=5) to create navigation links. Index points back to the main cover page. next and back link to the following and preceding pages. You will have to fill in the appropriate file name in for xxxx.html. Notice how this provides a common visual clue to each of our web pages.|
<h2>XXXXXXXX</h2> : : :
|HEADER: Use a header=2 to put a title for that page.|
<hr> <ADDRESS> <b><A HREF="index.html"> Writing HTML</A> : XXXXXXXX </b><p> created by Lorrie Lava, <A HREF="mailto:firstname.lastname@example.org"> email@example.com</A> <br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p>
|ADDRESS FOOTER: Note how the footer is now set up to indicate the name of the main web page (with a link back to it) as well as a line of text that indicates the name of the current section XXXXXXXX. Placing the name of the page here adds another important visual clue to the location of this page in the structure of the web we are creating.|
<tt>URL: http://www.bigu.edu/web/xxxxxxxx.html </tt> <p <body> </html>
|URL: Be sure to modify the line that indicates the document's URL to reflect its file name xxxxxxxx.html|
|intro.html||Introduction||As this is the first section, remove the line from the navigation section: <A HREF="xxxx.html">back</A>|
|usa.html||Volcanic Places in the USA|
|mars.html||Volcanic Places on Mars|
|proj.html||Research Project||As this is the last section, remove the line from the navigation section: <A HREF="xxxx.html">next</A>|
<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:firstname.lastname@example.org"> email@example.com</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>
|"click here" links|
|integrated hypertext links|
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?
The Internet Connection at MCLI is
Alan Levine --}
Comments to firstname.lastname@example.org