^HTML^
Logo.gif

Front Page Title Here

home
page1
page2
page3
subDirectory
experiment
Navigation
bar (above)
is common
to all
pages.

Body of the Page contains useful information i.e. the "content": This page and its linked sub-pages show some simple, general-purpose layouts that work quite well.
NB. The sub-pages show variations but if you are picking a "style" for a real site you should of course be consistent.

General Principles

  • Pages should resize, from 600x500 to 1200x900 or more, as well as possible. There are two trends to be aware of - small-screen, hand-held devices, and ever bigger desk-top screens.
  • Do not set FONT FACE, assuming this is a content-rich-site, not a graphics-site. FACE effects are unpredictable across platforms (Apple, Linux, Solaris, Wintel,...), use the reader's default fonts.
  • Do not set FONT SIZE - setting SIZE ridiculously small packs stuff in, but the effects are unpredictable across platforms, and bad for the partially sighted.

Navigation

Many sites put a navigation bar on the <-left-< which feels natural, but it arguably wastes paper-space if a long page is printed. If the nav' bar is placed on the right-hand side, and the "content column" (this one) is set to at least the width of an A4 page (see subDirectory/), then the nav' bar won't get printed (but there are other disadvantages).

The common navigation bar lists the major sections of the site. It is possible to have cascaded "menus" come up, e.g. by using JavaScript. One can also have sub navigation lists within major sub-sections.

Layout

The layout is done by TABLEs, here with BORDER=1 (on) to make this clear. It is possible to suppress this by BORDER=0, and it is then usual to employ different colours and/or backgrounds to distinguish the various components.

Similar effects can be obtained with FRAMEs but FRAMEs have fallen out of fashion lately on many popular sites (being more trouble than they are worth in my opinion, and having unfortunate interactions with bookmarks, search engines etc.).

How's it Done? Source HTML :-

Server Side Includes

[Server side includes] are used here to reduce duplication. Common information can be held in one file and include-d into several pages. This makes maintenance easier. The Apache web-server can be made to use the `execute' protection flag as the indicator of a server side include page if you do not like the `.shtml' suffix.

File common/footer.txt e.g. address and other contact information.
School of Computer Science and Software Engineering, Monash University, Australia 3168.