 |
WWW WORKSHOP
SESSION 4
PAGE ORGANISATION
TABLES
|
General Principles
- Discretion. Just because you can do something with the Web doesn't mean it's a good
idea.
- Connectivity: Create an underlying structure that makes sense with respect to the
structure of the underlying subject matter. Choose appropriate connectivity
amongst the content pages.
- Navigation. Place appropriate textual and visual clues in the documents that make
the structure obvious.
Connectivity
- Tangled Web
- Encourages exploration
- Easy to get lost
- Hard to update
- Difficult for user to know that all pages have been visited.
- Linear Chain
- Little room for exploration.
- Easy to maintain
- Not very different to a book
- Good for documents that have a natural linear flow, e.g. reference
manuals, short stories.
- Tree
- A single "index" page is used as the entry point to all other
pages. Index pages can have take several forms, e.g. as a "home"
page, a table of contents, an alphabetical list.
- Each content page has at least three links:
one to the next page, one
to the previous page, and one to the parent.
- This paradigm can be extended, creating a tree in which a
master index page points to "subtrees" having a similar
structure.
Navigation: The Hyperspace Compass
- Previous, Next (, ) are used to navigate a a series of linearly
linked pages.
- Up ()takes the reader up a level, e.g. to the start
of a chapter or to the parent index page.
- Down is less frequently used, since for the most
part, going down from a given page means clicking a link
on that page.
- Top is often used to return the reader to the main
index page of the site.
Contents
Inserting Non-Local Links with Composer
Recall from the last session that there are three kinds of link
corresponding to three classes of
destination. Local links, dealt with in session 2,
point to destinations in the same
document.
Next we look at the insertion of non-local links which
point beyond the file which contains them.
To understand these, we must first see how files relate to
each other.
Files and Directories
Below is an incomplete schematic diagram of my webspace. Notice
first of all that it has the shape of an upside-down tree, reflecting
the hierarchical organisation of directories (black) and files (white)
Organising Non Local Links
The basic problem manifests itself as follows: how can a link
appearing in the file index.html underneath wwww make a reference to
any other file in the hierarchy, e.g. links.html?
The mechanism for creating the link is the same as before, namely,
by using the "links" icon in Composer, but the question is,
how to refer to the external file.
Absolute URLs
The obvious answer is to use the full (or absolute) URL of the
file. Using this method, the file links.html would be referred to as
"http://staff.um.edu.mt/mros/wwww/links.html"
There are two
diffulties with this approach, however:
- Full URLs are often very lengthy.
- If ever I move the entire wwww hierarchy to some other
place (e.g. to another server),
the above URL will no longer be valid, since that part of the
above URL
Relative URLs
Both of these problems are addressed by relative URLs, which
spell out a target's address relative to the location of the current
document.
The simplest kind of relative URL is just a filename: to solve
the above problem, we simply use "links.html", and the
browser looks for the file in the same directory as the current
document.
Now suppose that we require an additional link from within
that same index.html to a file
that is not in the current directory, such as anyfile.html.This is
achieved by simply giving the sequence of directories, separated by
slashes, followed by the
filename, namely: "session1/anyfile.html"
Links to files that are higher in the hierarchy are accessed in
similar way, the difference being that they must emply the special
directory name ".." which always points to the parent directory. So a
link from anyfile.html to links.html would be
"../links.html". Files and directories yet higher
can be addressed by iterating this scheme, so that
"../../links.html" looks in the
directory above that, and so on.
The great advantage of relative URLs is that documents that employ
them are portable. An entire hierarchy of self referring documents
can be moved to another location without modification provided relative
URLs are used to build the links.
Links to Other Servers
The one case where it is necessary to employ absolute
URLs is when the target resides on another server. For
instance, to access the exellent internet bookshop at
http://www.amazon.com, it
really is necessary for the link to refer using an absolute URL. You
can see where a link is referring by observing the small box at the
bottom of the window frame.
The role of index.html
If you omit to mention the filename at the end of a URL (thus ending
with a directory), most servers assume the standard filename
"index.html". It is therefore good practice to reserve this
name for the file that acts as an entry point to each directory, as
exemplified in the above hierarchy.
Exercise on Non-Local Links
To do the exercise you need to download using FTP.
- Invoke smartFTP.
- Download the directory
ftp.cs.um.edu.mt/pub/staff/mros/download/wwwwtest
together with all its contents to the directory mywww that you created
earlier.
Organisation of Web Pages
Directory Structure
The design of a website involves not only the creation of individual
pages, but a structure that pages can inhabit. In order
to ensure that the collection of pages may grow in a controlled way, it is
worthwhile investing some effort towards a sound design for
such a structure.
The principle structuring device available to the html author is the
directory. Directories may contain files or subdirectories.
Use of the latter immediately provides a kind of hierarchy, as seen in the
following diagram of structure underlying this course:
Note first of all that the main directory mainly contains subdirectories,
each of which is devoted to a conceptually separate aspect of the course,
hence: one directory for each session, another for the description,
another for images, etc.
Note also that there are two files: links.html and index.html. The first
is simply a file that happens contain a list of links that are pertinent
to the course. The other file is a bit more special for two reasons.
- It contains the course home page. This is important for the course,
but it is also important for the directory to have a single
file which acts as a kind of entry point to its contents,
much as a store guide shows a client where to find items in a supermarket.
- It is called "index.html". Servers are usually set up so that if asked
for a directory rather than a file, they will automatically look for
a standard filename in that directory. The most widely used standard
name is "index.html"
So it is highly recommended to
always provide an index.html for each directory!.
Web Page Organisation
It is beyond the scope of this course to teach the principles
of web page design. Most of the time it comes down to using the
medium to support the communication of the message.
- Be brief
- Keep to the point
- Don't make the reader wait (unless it's really worth it!)
- Do not send the reader on a wild goose chase.
- Sun's Guide to Web Style
is a very well-expressed collection of recommendations.
Exercise 4
- Using Windows, create a local directory for your department, office or course,
and within it, create a subdirectory (e.g.
"people" for information about the people in your group,
or "topics" for information about your course).
- For each subdirectory, create an "index.html" and start
to fill it with relevant information. Try including some
tabular information as shown above. You might wish to copy
and adapt items
in the templates directory for this
step.
- When you feel ready, test the system using the browser,
adding and changing the contents as you like.
- Publish the entire hierarchy of files in your
web directory.
Mike Rosner (mros@cs.um.edu.mt)
[Tue Sep 28 18:41:09 1999]