Ian Graham
(UTIRC/UTCC)
igraham@hprc.utoronto.ca
978-4548
Sian Meikle(UofT Library)
meikle@library.utoronto.ca
978-0885
Date: April 21, 1995 Version: 2.0
This document is printable!
This readme file is a single document, and can be printed for easier reading. Just select the print option from your Web browser. It is usually under the 'file' pull-down menu.
You can also examine the online template by browsing through the copy on our server. It is found at the URL http://www.hprc.utoronto.ca/Template/depthome.html.
This collection will be used when a Department asks for advice in setting up a home page, or when UTCC or the Library are setting up pages on behalf of a department. The template collection is publically available for downloading by anyone who wants it. It is available in formats appropriate for UNIX, IBM-PC and Macintosh computers. For those without a web browser, these archive files can also be obtained via anonymous FTP at the site ftp.hprc.utoronto.ca in the directory /pub/www/Template.
http://www.hprc.utoronto.ca/Template/template.exe. (60195 bytes).Download the file and save it on your hard disk in a convenient location (for example, you might want to create a directory C:\WEB\TEMPLATE). To extract the archive simply type template.exe at the DOS prompt. This will automagically create the template documents in the chosen directory.
These documents were developed by Ian Graham of the Instructional and Research Computing Group (UTIRC), a Division of University of Toronto Computing and Communications (UTCC), with input from Sian Meikle of the University of Toronto Library. The document authors are listed at the top of this page. Sian and I encourage feedback, either by phone or e-mail. Please let us know what you think!
In developing these pages we have adopted what seemed to us the nicest features of the different pages across campus (and elsewhere). This is what led to the linking structure you see on the main home page 'depthome.html'. This structure is the most important part of the collection, since a good initial organization makes it much easier for a user to find what they are looking for. We've also tried to add relevant navigation icons/buttons to the documents. Of course the details of the icons, page layout and so on are entirely up to the page authors -- this collection is simply a template that illustrates organizational issues and some examples of good page design, but is not a work fixed in stone!
Filenames for the main HTML documents were chosen to reflect the document content, with the constraint that the same name could be used on UNIX, Macintosh or PC computers. Thus the first part of the file name has at most eight characters (e.g. 'depthome') so that it can fit in the eight character limit of PC filenames. The filename extension is more problematic, since the Web convention is to designate HTML documents by the filename extension .html. PCs, however, can only have three character filename extensions, and in this case you must use the extension .htm, both in the file name and in all URLs pointing to the files. This overview refers to documents having the *.html extension. If you download the PC ZIP archive you will find that all the files have the *.htm extension, and that all the URLs within the documents have been modified to use this filename extension.
These filenames were also chosen to allow for automatic indexing of web pages at the University of Toronto. Indexing software can be configured to search for particular file names on all web servers across campus, but this will only work if there is a known relationship between the filename and its contents -- therefore you must use a commonly accepted filename for the document to be properly indexed. We therefore chose filenames that reflect the document contents. Thus 'depthome.html' is the main departmental home page. An automated program can then check all the servers on campus and look for all files named 'depthome.html', and index them as departmental home pages. Similarly, pages referenced from the depthome.html page, such as graduate.html or staff.html, can be indexed as providing information for graduate students, staff information, and so on. In principle this will allow a program to automatically maintain an up-to-date central collection of links. This may not happen soon, but it is a good idea to prepare for this facility ahead of time.
depthome.html - Departmental home page deptinfo.html - General information about the department graduate.html - Page for information of interest to graduate students undergrd.html - Page for information of interest to undergraduate students staff.html - List of Departmental faculty and staff, pubs.html - Page of pointers to online documents (working papers, etc) published by the department. resource.html - List of Internet resources of particular relevance to the department announce.html - Page for departmental announcemnts, library.html - Page of information about the departmental library
Depthome.html is the main home page for the department. It contains links to all the departmental resources, as well as links to the the Main UofT home page and to other resources at the University that are likely to be of general use to someone in the department (library access, Internet search tools, etc). These latter pointers are placed at the bottom, to separate them from the department-specific information.
The depthome.html page should be short -- hopefully not more than one computer screen of material, and certainly not more than two. This makes it easy for a person to see, at a glance, what is available in the department's web collection. Thus you will note that the example page is mostly links, with only a short paragraph about the department. This is probably the best way to organize this page, in keeping with the above constraints.
The page should not contain large graphics, since graphics are large and make it slow for a user downloading a file over a phone line, or from far away (it is not uncommon for users in Europe to be downloading at 300 bits/sec, which means even moderately large images can take a minute or more to download). This example contains one seemingly small image -- but you should note that the file is 11 kbytes big. You should really use a smaller image - a 2 or 4 color departmental logo of comparable size would be much smaller (2-4 kbytes) and is a much better choice.
The document then contains pointers to the major sections "Introduction, Graduate student information, undergrad information, staff information, notices and on-line resources. Most departments categorize information this way -- if you don't have anything for one of these categories just leave out the line. You can always add in the item (and the link) later on. The example documents that we include give an idea of what these different documents can contain.
This is followed by headings for "Research Programs and Groups" and for "Departmental Facilities". These are often used by departments that have special research programs that have their own web pages, or by special facilities housed in the Department. If you don't want these you can leave them out. On the other hand, if you have lots of Research Programs with web pages you might want to move this whole category to a separate HTML document, and have a pointer on the home page that points to this "Research Programs and Groups" page.
This is the information page for the department. This version does not have images, but you can always put some here (again, small is better). Note the 'home' navigation button at the top and bottom of the page, which links back to the depthome.html document. This is a first example of navigation icons.
This page contains the full address of the department -- you should do this too. If there is a generic e-mail address you should put it here also, and code it as a mailto: URL. This allows users to click on this address and mail messages to the department.
The remainder of the page shows one way this departmental information can be organized. You shoould do what you like, but should try and retain a coherent design to the documents (they should all have a similar design). Thus the use of inline navigation buttons (i.e.
On this page: [General Information] [Research Facilities]if used, should be used for the same meaning in all your documents. Similarly, if you use lists to indicate links to other HTML documents: such as
you should then use the same model for all other documents in your collection.Subsections
These pages will be similar in layout to the deptinfo.html page. The examples give some idea of the material that could be here. In many cases this page will simply contain links to elsewhere - for example to the S.G.S. calendar for course and scholarships listing.
This is an example bio page, illustrating the type of information you can put here. You should use you own design of course. Things you might want are name, address, e-mail (with a mailto: URL), brief biography, etc. You might also want links to a list of publications, to on-line material produced by the person, hobbies, and so on.
Note the two navigation icons. The Home button takes the user right back to the home page, while the Up button returns the user to the staff listings page. If you are consistent with a usage of home (go to home page) and up (go to the top of this section of material) your users will quickly grasp the icon meanings.
This is a document containing online resources that might be of interest to people in your department/division. I've tried to break these down into obvious categories, but certainly these categories will be different depending on the community using them. Again, the "home" icon links back to the home page, and so on.
This is a document containing online publications produced by the department (of by faculty in the department). You may not need this link to start with, but eventually you will -- online publication is becoming more and more popular.
This example page shows how you can put together a document collection describing, for example, a research project. I've not put much here - just enough to give an idea of the organization. I have illustrated some additional navigation buttons: Prev(ious) and Next. The "Prev" button can be used to link to a logically preceeding document, while "Next" should be linked to the next logically following document. Thus you can have documents organized as follows:
------ | | section | | overview | | document | | ------ / / | \ / / | \ / ^ ^ ^ / / | \ / / | \ / / | \ / / ^ \ / / | \ / / | \ / /up | up \ up / / (also | \ / / 'prev') ^ \ / / | \ |/ / | \ next / | \ ------ next ------ next ------ next | | -----> | | -----> | | -----> | page | | page | | page | ... | | prev | | prev | | prev | | <----- | | <----- | | <----- ------ ------ ------An example of this implementation can be found at the URL
http://www.hprc.utoronto.ca/HTMLdocs/NewHTML/intro.htmland within the related document collection.
This page contains information current event information of interest to the department, such as seminar notices, special events, and so on.
This page would contain information about the departmental library.