Webmaster Design Notes

A Compendium of Design Notes for hacastronomy.com

These notes are for use by the HAC webmaster.

General
The current website is maintained with Dreamweaver from Adobe. It uses HTML, JavaScript, CSS, PHP, and MySQL.



Page Design
These notes are for the design of pages.

There are two basic types of regular HTML pages: those with two columns, and those with one column. All pages contains the "left sidebar", which is generated from JavaScript.

Two-Column
<--- 400p ---><--- 169p --->

One-Column
<--- 570p --->




File Notes
These notes are about file names, file-naming conventions, and the meaning and content of various key files.

/admin - the administration directory where all these notes reside

Templates
Templates should be used. The template files are stored in the /admin directory.

/admin/page_templ_subdir.htm - a page template for second-level subdirectories. Directory level is important to consider because there are a lot of links that are relative. That means if you place pages down deeper in the directory hierarchy, such as second-level, third-level, etc., then certain pathnames may need to be adjusted accordingly.

Speakers
In general, the HAC has a guest speaker every month. These speakers usually present information that is worth recording and preserving. Therefore, an attempt is made on hacastronomy.com to make a web page for each speaker.

Some speakers with voluminous material, or repeat speakers, may warrant an entire subdirectory of their own. The main subdirectory is named "speakers" and it is at the top level:

/speakers

Under the "speakers" directory, there are individual speaker pages with the following convention for file names:

Lastname_Firstname.html

Some speakers have a whole subdirectory. The subdirectory name follows the same convention, but without the ".htm" file extension. There is a Speaker Index page that also must be updated for each new speaker:

/speakers/index.htm

This index is maintained in an alphabetical order, with last-name first. The entries in this index are links to the appropriate speaker page.

There is also a "scroller" in the left sidebar. This is some JavaScript that causes the contents of an HTML file to be scrolled within a frame. The contents of this scroller can be found in the following HTML file:

/scroller/scroller1.html

There are also "scroller2" and "scroller3" HTML files, but they are not currently used. The contents of the "/scroller/scroller1.html" file should be edited at the "Code" level and not the "Design" level (in Dreamweaver).

Photo Galleries
Photo galleries are generated. There are certain folders that are treated as nothing but photo galleries:

/members

/events

The above two directories are image repositories. They are invoked from the main menu as Photo Gallery --> Event Photos, and Photo Gallery --> Members' Photos. When these menu options are selected, the "index.php" script in the corresponding directory is executed. The "index.php" script calls other PHP scripts, such as "config.php" and "header.inc".

All images in any of the Photo Gallery directories are turned into thumbnail images by the scripts, and then displayed within frames that look like "slides" (from the days of film photography). Links are automatically generated to full-size, half-size, and quarter-size images. Any file that has the same name as the image file, but with ".txt" appended to it, will be displayed as a caption to that image. If a file named "album.txt" is found in any directory, then the text contents of that file are displayed on every page of that particular "photo album".

To create dummy caption files, use the following Perl script:

C:\perl\mktxt.plx

In a DOS shell, type commands similar to the following:

C:\>cd C:\Apache2\htdocs\members\2009_01

C:\Apache2\htdocs\members\2009_01>c:\perl\mktxt.plx

Running the above Perl script from a directory creates a corresponding "*.txt" file for every file in that directory. However, now each file has to be populated with the appropriate caption text for that image. Any text editor will work, such as TextPad, NotePad, or WordPad.

Menu Hierarchy, JavaScript
There are several JavaScript files that generate HTML dynamically. The "menu.js" file generates the top-level menus. Modify "menu.js" to change the menu names, or menu ordering, or menu hierarchy.

Colors for Months
There are certain colors that are commonly associated with the months of the year. Instead of guessing or trying to remember each month's color, the following list offers some suggestions.

Month	Color(s)	Hex Value(s)	Icons	Holidays
January	Dk. Blue, Lt. Blue			New Year's Day, MLK Day
February	Red, Dk. Red			Valentine's Day, President's Day
March	Green, Dk. Teal	#009900		St. Patrick's Day, Spring Begins, Easter
April	Yellow, Purple			Passover, Easter
May	Robin's Egg Blue, Lt. Brown			Memorial Day
June	Dk. Green, Green , Dk. Yellow			Flag Day, Father's Day, Summer Begins
July	Red/Blue, Dk. Red			Independence Day
August	Lt. Brown, Orange
September	Red, Dk. Orange			Labor Day, Autumn Begins
October	Orange, Black, Green			Yom Kippur, Columbus Day, Halloween
November	Brown, Dk. Brown, Dk. Gold	#CC3333		Veterans Day, Thanksgiving
December	Green, Red, Gold; Teal/Purple			Christmas, Hanukkah, Winter Begins

Months in File Names
Use 3-letter abbreviations for months inside filenames for consistency.
For text displayed to the user, use full month names whenever space permits.


Amazon Link Colors

Amazon Links

Go to the change log.

Go to the snippets page.