Alarm Clock Chapter

That Ringing In My Ears Is Sweet Music

ACC
Howard Banta

About Site Design

Introduction

This page is for those who have an interest in web technologies, or may later expect to maintain this site. This page will briefly overview the technologies used, how each relates to the others, and how, together, they produce an ultra-clean, validated, easily maintainable site.

Design Overview

This site uses php, html, and css. Later, it may employ Perl with either flat-files or, much later, a database backend, should growth require. But, for now, it is just php, html, and css. Obviously this is open source software so a Linux, Apache host would be ideal.

This site uses php, html, and css.

Each php page is a combination of five files: a references file, head.inc, nav.inc, foot.inc, and itself. Each specific php page includes the first four files. The references file will define variables appropriate to the specific php file. There are three references files: refs_level_0.inc, refs_level_1.inc, and refs_level_2.inc. For example, in pseudo code, a typical page will look like:

...
include( "../refs_level_1.inc" );
include( $head );
include( $nav );
...
The Content
...
include( $foot );
...

Obviously, head.inc, foot.inc, and nav.inc contain clean, structure-only html elements and php variables. File acc.css uses css with the minimum amount of class and id identifiers. All site nav anchors are relative, so the site can be easily moved.

CSS

The nav bar has a containing div with id = "nav", and the main content area has another div with id = "main". Both divs are floated left. There are other additional containing divs within #main. Selectors like #faqs_qa .qa are common, thus limiting the scope of the selector.

If people occasionally print some of these web pages, they will get just the content in the #main div, not any of the nav or foot items. Try doing a print preview. Notice there is no nav bar or footer when printing, but there is when viewing.

This result is due to another stylesheet used just for printing. It sets #nav { display: none; }, so that the nav bar is not rendered. Likewise for the footer. Then there are some adjustments to #main for margins, padding, etc. See head.inc for full details. Thank you Eric Meyer.

See the color box for this site.

If other style sheets are used, simply change the css variable in refs_level_1.inc or refs_level_0.inc as desired. Similarly for favicons.

New Pages

New pages may be created by copying an existing page, from the same level, as the new, desired page. For example, if we wanted a new page under the "About This Site" section, then copy eg, .../acc/about/foo.html to .../acc/about/bar.html. Then change the contents of .../acc/about/bar.html within the id = "main" div.

Significant site changes will be marked by a site version number. This is a way of recognizing our progress and of alerting viewer to new features or bug fixes. This site started at 0.1 version.

Color

Color is difficult, especially when there are monitors with varying sizes, brightness and color saturation, and individuals with different visual capabilities. Several links are helpful: the W3C color specifications, the color blender by Eric Meyer, and recognized color names.

Building a color box with potential colors for a site can sometimes be helpful. See the one for this site. Using a color box, one can compare color, rather than see a color. Check the source to see how easy you can do the same.

mary podium
Mary at Podium
medium or full size image

Image Box

Putting an image into a small box, like at right, works well for several reasons. First, it groups the image, caption, and links. Second, it gives the image a "matted" effect, like framing a print. Third, viewers have a choice of image download size. Fourth, the full image (aka original image, or nearly so) is conveniently kept with the downsized images. And finally, it just looks good!

The html code that created this image box is shown below. The "..." within the img element represents several attributes that were removed for readability.

...
<div class = "go_right">
<a href = "600/mary_podium.jpg">
<img src = "140/mary_podium_114_78.jpg" ... />
</a><br />
<span class = "caption">Mary at Podium</span><br />
<a href = "600/mary_podium.jpg">medium</a> or 
<a href = "full/mary_podium.jpg">full</a> size image
</div>
...

View the source above to see the containing div with class = "go_right". Notice the "anchor, image, close anchor" lines which link a thumbnail to a larger image. The remaining caption and 2 text links - to medium and full size images - complete the image box contents. A closing div completes the image box. See file acc.css for image box style properties.

A break element, at the end of the text accompaning the image, will let the next section have a clean start.

Reminder

Using php pages requires the use of a web server, eg, Apache, and the php language, to assemble the five files before delivery to the user. Just pointing your browser at a local file is not sufficient.

Comments

Your comments about this page, or how it could be improved, are welcome. I will read all comments, but may only respond when time permits. Email address below: