A few words on Design

I cannot emphasize enough the importance of a good layout and design for keeping interest in your web pages. If you want to create web pages for your department or office, the best thing to do is to talk it over with the people you will be representing.

A solid, well designed web page is the ultimate first impression. Hundreds of thousands of people all around the world will be accessing your page. Your page will not only reflect upon yourself and your department, but also on Ohio University as a whole. If you have links on your pages that lead to other people's work, consider carefully whether to include links to pages that may be considered controversial, or might offend some members of your intended audience. Be especially cautious about links located on your home page.


Planning

The long-term effort will be less if you invest some time in planning your web pages in advance, tempting though it may be to just jump right in and starting writing.

There are four stages to your planning effort, all of which are paper and pencil tasks:

  1. Storyboard each document: What will appear on the page? How should it be organized?

  2. Separate your project into the individual pages. Since people will have to follow links between the pages, and wait for them to load, this separation is a significant design choice.

  3. Decide on the basic link structure: What will be connected to what? From where?

    You don't need to include all the links that will seem appropriate as the project progresses, but you should plan out the links that define the overall organization of the pages. For example, the fundamental structure of this set of pages is what I refer to as the "wagon wheel": the table of contents functions as the hub, with the spokes being the links from it to the several pages and from each of them back to the topics list. The "back" and "next" (circumferential) links correspond to the rim of the wheel.

  4. Decide how your files will be organized on disk: Will they all be in one subdirectory? Will the image files all be lumped together in one subdirectory? Will each image file be placed in the same subdirectory as the HTML file that displays it? If multiple directories will be used, what will they be called and which files will go in which directory?

Hard Disk Organization

There are several issues to attend to when organizing your web files on your hard disk. The first principle is to establish a collection of folders on your hard disk that exactly correspond to the folders for your Web files on the server: identical names, nested within each other in the identical organization. This makes it possible to test your files from your hard disk, by using the Open File choice from Netscape's File menu.

A second principle is to help the browser's cache to provide the greatest possible advantage. You do this by using exactly one copy of each image file. Then, every time it is called up, the browser will know that it already has a copy in its cache, and will not ask the server to send it again. This applies not only to your own image files, but especially also to the collections of image files we maintain on the server for shared use. If your reader has recently seen any of the pages that use an image that you reference, it will already be in the cache the first time it appears on your page. This reduces the load on the server and on the network, while speeding up the display of your page.

In order to see the full layout while testing from your hard disk, including all images, copies of the shared image files need to be on your hard disk in places exactly corresponding to their location on the server. This is therefore specific to the configuration of each server. We have already configured OAK and the Front Door server according to the scheme outlined in Chapter I of Memo 85.

If you are taking the next course, HTML II, (I do strongly recommend it) we will go into design much more than this, so stay tuned. If not, you can still access the on-line version of the course.

Good Luck!

Back   Topics

HTML I   HTML II

Dick Piccard revised this file (http://www.ohiou.edu/pagemasters/class/html1/design.html) on November 2, 2000.

Please E-mail any comments or suggestions to acatec@www.ohiou.edu.