Web site Documentation
Template
for main page.
Template
for secondary pages with banners.
This wet
site is patterned after the AMC Outdoors Site following the layout of
a central image banner with drop down menus. Lower on the page is a
place for tabled individual subjects, each one having a mini photo
associated with the subject. At the bottom of the page is a footnote
area with information that would be handy if problems arise with the
browser rendering the upper drop down menu non-functional. The site
is a static (so far) site with limited javascript use. The drop down
menu is based on CCS plus a small javascript. The [Close]
form buttons are javascript. The plan is to keep the site as simple
as possible to reduce the learning curve for anyone who has to
maintain the site.
Graphics use
Since some users
still use a dial-up connection to get to the Internet, this site and
especially the front page should be limited on graphic files which
take time to download. While graphics makes the site look nice, it
can make the viewing of a page frustrating for many non-broadband
users. I like to make a limit of 30 seconds for a page. The AMC
Outdoors.org does not meet my criteria, although it is a beautiful
presentation. If the page takes more than 30 seconds to load, it
should be fixed. Currently this front page loads in 30 seconds on a
slow dial up connection. I will edit original photos down to
approximately 640x480 pixels with a size of 50 - 100 Kbytes and
thumbnail images around 3 - 5 Kbytes.
Navigation with
links
All the links on the front page link to a second page
(ie "_blank"). This includes the drop down menus, the text
links, and the footer. Once a second window (or tab in Opera or
Firefox) is opened, all the drop down menu links are to "_self"
pages. This is so the user does not accumulate an inordinate number
of pages on the screen, but will always have the front page to fall
back on if all the secondary pages are closed out. All (or almost
all) of the secondary pages have a javascript [Close]
button at the bottom to conveniently close the page. Once that
page is closed the user will be dropped back to the front page. This
site is designed for and best navigated with a tabbed
windows.
Compatible browsers
Note the footer at the
bottom of each page which indicates that only modern browsers work
properly on this site. This is specifically due to the type of drop
down menu used. Browsers that work include IE6 but not IE5.5 (the
central front page cells balloon out). And definitely not IE 5 or
IE4. From what I have seen from link statistics on my own web site,
IE 4 is not being used anymore. Most users are using IE6. Opera works
for version 8 and 9. Firefox works in version 1 and 1.5 . Some
Linux/Unix browsers do not work. Safari for the Mac works. Anyone
that has trouble can click on one of the footer links to upgrade
their system. I personally recommend them in the order listed. Each
brand of browser renders CSS a little differently. I have found that
Opera and Firefox render almost identical. IE6 renders a little
different.. Subtle differences have been compromised so that the
pages look consistent to the casual viewer.
Banner coding
rules
The above problems have resulted in the following rules,
specifically relating to the CSS formatting of the drop down menu.
The front and secondary banners have been adjusted to have a very
specific width determined by the drop down menu. The CSS code that
controls it should not be changed. Any changes will affect the menu
slightly different in different browsers. The central photo on the
front page is about 600x278 pixels. The height of the window is 278
pixels. Try to keep any subsequent photos within these dimensional
constraints, although because of the width of border around the
photo, there is latitude.
The secondary banners are
specifically adjusted to fit a photograph of 742 x136 pixels. The
height is set for the Opera and Firefox browses where the menu sits
below the window top and cuts off the top 20 pixels of the photo. The
IE6 menu sits above the photo with a small acceptable gap where the
background peaks through. Any photo of different dimensions will
cause problems with the rendering of the drop down menu.
The
secondary pages that have banners at the top use SSI include
statements to insert the photo banner and drop down menu. A footer is
also inserted. When pages are constructed using these banners they
have to follow a specific format to insure no double <html></html>
and <body></body> tags are inserted.
Warning:
If you use an editor (OpenOffice will do this) that inserts or
replaces the doctype
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
in the code, the resulting
page will not format the CSS menu correctly in IE6. The below DOCTYPE
should be used.
-------------------------------------------
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The
title of this page</title>
<!--#include
virtual="/SSI_2lvl_upper_banner.html"--> #which includes
the </head> and the beginning <body> tags
This
middle section is where the full .shtml code goes. It should not
include any </head> or <body> tags. It should not include
any CSS code. This form is similar to the 3rd and 4th level banners.
The virtual include code must go in the sever root / level. Which may
or may not be the same as the index.html lever.
<!--#include
virtual="/SSI_2lvl_bottom_footnote.html"--> #which has
no
tags
</body>
</html>
---------------------------------------------
When
making secondary pages, I have found it best to construct a page for
the new subject matter with an html editor that inserts no CSS
(local style OK) <head></head> section. Use the above
example for combining the new page with the SSI virtual includes. If
you use" Evrsoft First Page 2006" with the include SSI code
in the same directory/folder, you will see the full resulting page.
This is the only html editor (that I have used so far) that
automatically inserts the 'Server Side Include' code. Very handy
feature. For another method of viewing the shtml pages see the
paragraph below titled Viewing the “Server Side
Include”.
If you construct the main text for
secondary page with shtml code using OpenOffice, you will have to
change the DOCTYPE as noted above. Also when the page is edited later
using Openoffice, the DOCTYPE will again revert to the wrong type. To
prevent this, once the form of the page is done, I do almost all
reediting using a html editor, not OpenOffice.
At
this time you may have to clean up a little of the formatting.
Usually the errors are paragraphs being centered that should be left
aligned. In such cases, I have forced the formatting with <div>
</div> around the offending sections. This is caused by the CSS
styling, used for the drop down menu system. After all the formating
is complete, name the file with the .shtml extension before saving
it.
The main index page which uses a photo banner and footer,
does not use SSI includes because it is to hard to see the finished
page viewing the page as a file, and there is only one front page to
contend with, as there are dozens of secondary pages. Note that when
visually checking the secondary pages you will have to upload them to
a proper Server, such as Apache, and access them through the browser
for them to be viewed properly. Or you can install a server on your
windows machine. (See below for suggestion.) You can not view shtml
pages directly by clicking on them in a file manager or Windows
Explorer.
Site folder and file structure
The folder
structure of the site is top down with all drop down menu subjects
within their own folder. Single subjects, like a set of trip
photographs, has its own folder below the lead folder. Files
pertaining to the top page are in the root folder. The lower sections
(in the table cells) eg. "Things to Do" all have their own
folders. All files names are typed in the Unix style with "_"
for blank spaces between letters.
I have tried to make all the
pages with a consistent 'brown-tan-green' look and feel. The
backgrounds on most all of the pages is beige-sa.jpg and other plain
pages is tan_bg.jpg. These files have been put in the various folders
for simple linking.
For the SSI virtual includes to work on
the server, the SSI files must be in the root directory, which many
or may not be the same directory as the index.html file. You may also
have to configure the Apache Server to recognize SSI code.
Subject
material delegation
The
purpose of the drop down menu is to contain subject matter that is
fixed, although the linked content may change. Things such as Privacy
Statement, and 'AMC Chapters' links are pretty much constant.
The
first menu item "Our Chapter" is for items that are
important for users to know about the chapter. How to join, and
things like that.
The next item "Recreational"
is an area for individual sub-chair groups to link to with their own
site , or show relevant information about their group that would be
helpful to others. Lengthly stories or photo journals can also be
presented here. Some activities like the "young members"
and "technical climbing" have their own sites, and are
linked to this menu.
The next item "Educational"
is for activities related to conservation and trail maintenance,
issues both supported by, and sponsored by AMC can be included
here.
The next item "Activity Listings" is
mainly for accessing the new AMC event database. It includes and
overview of the system and links to the main database and one that
brings up just Narragansett activities. The AMC calendar is also
included because it is so handy. Links to the Gazette and the Message
Board are also here.
The "Leader Support" is
trips can be submitted to the AMC on line event database. User guides
are here also. Other activities that support the chapter leaders
should be included in this area.
The last menu "AMC
Chapters" includes direct links to the other AMC
chapters.
The lower sections such as the "Notices &
Reminders" are simple links to relevant material. Similar to
the drop down menus except that they are to be changed as subject
matter becomes obsolete or new. An example would be the "New
Members Potluck Social". These are items that need to be brought
to the attention of the members.
The "Resources"
section is to be used to reference material relevant to participating
in an event or activity. Activity reference material is located here
along with a link to the AMC on line database showing the Chapter
events.
The "Photo Albums" is for publishing
chapter photos, and any associated text. Each major activity has, sub
folders for each trip. All photo presentations include thumbnails
linked to larger photographs. All are done in a consistent format.
Photos and captions will be accepted by the web master and put into a
consistent presentation format. This frees up contributors from
knowing html coding and hopefully will encourage people to
contribute.
The "Members Only" section is
for password protected material. Anything that the chapter considers
"off bounds to non members" can be put in this area.
Programs used for coding html files
These following
are the programs used to construct the site. I have used programs
that are free or upgradeable shareware.
This site has been
mainly coded using"Evrsoft
First Page 2006". It is nagware for the free version and
encourages you to upgrade to the professional version. "AceHTML
Freeware" has a very similar look and feel. Both "
Evrsoft First Page 2006" and "AceHTML
Freeware" are straight editors with preview options. These are
not WYSIWYG editors. "AceHTML Freeware" has a very nice
Table generator, allowing merging cells visually, which "Evrsoft
First Page 2006" does not. So I would recommend using
"Evrsoft First Page
2006" because I liked the feel, it had the most features, and I
was familiar with their older freeware "1st Page 2000",
which is still available. While using "Evrsoft First Page 2006"
on the construction of this site, I have found that it has some bugs
that lock up the code. There have been no upgrades for over a year.
Be sure to save edits often. Consequently I use "AceHTML
Freeware" more often for the ongoing editing of the
site.
Formating
plain text html files is easier if a WYSIWYG editor is used. An
example is MS Word which after composing your text, you save it as a
html file. I am not sure if you can save it with or without CSS
formating. The simplest WYSIWYG
editor is "Nvu"
which is what is being used to write this document. It is very good
at generating simple html documents but has a couple of bugs that
although are not fatal, are aggravating. One is that the formating of
the source code is lost once you edit the source code window. Since
it is such a nice editor, I use it and later reformat the code in
"Evrsoft First Page
2006". The other quirk is in the 'Normal' view you can not paste
from the clipboard with the mouse right button. Which for some
strange reason does a "select all" on the entire code. This
means that when you paste, you paste your copy item into a blank
page. That problem is solved by using the hot key paste function,
cntl-V. For a more complete WYSIWYG
editor I use the free "OpenOffice
2.0" which is a full featured office suite comparable to MS
Office. I use it often making simple pages that involve inserting
images and I want to see where they are going. This program has been
used for alot of the coding for this site. Often in the cut and paste
operation generating pages with the drop down menu banners. The
generated code does not insert CSS code. But when using and then
saving a file with a WYSIWYG
editor , some items may be changed. One small example is "OpenOffice"
will change remove borders around images that had borders previously
. Images placed in documents with borders will be reduced by the
width of the border, to accommodate the border. Thus resulting images
are not quite as sharp as the original. The smaller the image, the
greater the effect. After editing a document with" OpenOffice"
I am careful to look at the final code in "Evrsoft First Page
2006" or "AceHTML
Freeware"
Graphic programs used
The
"Photo Albums" section has photo presentations arranged
into thumbnail index using a free (for non commercial use) program
"XnView".
This program has the look and feel of the commercial "ACDSee"
image manipulation program. There are many other good freeware image
manipulation programs available, but I found that "XnView"
produced the nicest and navigable pages for the least amount of work.
The program uses CSS styling and templates which are stored in a
standard folder. I have altered the templates and CSS files to suite
our site and have the respective files placed in each of the photo
album folders. Each folder has the name of "_Default - amc
-xxxx" depending on the activity. These default files are to be
used generating the thumbnail images for each respective activity.
"ACDSee" is used to manipulate the order of the images and
rename image sequences. It is a very effective program, but the
thumbnail generation in the current version (Version 7 my latest) is
a more of a slide view setup than static viewing. Version 4 (no
longer commercially available) is faster , half the size and
preferred by many. "ACDSee" version 4 generated plain
thumbnail images, simple and usable, but linked to respective jpeg
images, and not images within html pages. XnView displays the jpeg
images in the context of a static html file which allows headers and
text descriptions to be included. with simple editing.
The banner photographs have the AMC text watermarked on the photo with a program PowerBatch. It is free but unfortunately it seems to only print the resulting watermarked photo. If there is a method, I have yet to figure it out, therefore I resort to using a screen capture to save the finished watermarked photo. I am open to other programs.
Viewing
the “Server Side Include” pages
Viewing the SSI
pages (.shtml) is not possible without having them served from a
server. If the served code is in the same directory as the main code,
"Evrsoft First Page 2006" will render the pages properly.
But if the SSI code is not in the same directory you will have to
view the pages from a server. One way is to set up a Linux Apache
server and copy the pages to them to view the final pages. This is
how I proof CGI searches and password pages . An easier way to just
view the pages is to use a local server. A good free windows server
is “Abyss
Web” . I found that it saves time and works very well. Do
not forget to rename the .html or .htm extensions to .shtml or some
browsers will not render the page properly. Be sure to also configure
the Apache server to recognize SSI and the .shtml extensions.
Uploading
files to the host
Files are uploaded to the main host using
the ftp protocol in a "ftp" program. Many programs perform
this function in addition to their main use, such as image
manipulation. I have found that a separate program is a better way to
go. The best that I have found is a commercial program (nagware for
the free version) "Total
Commander" . This program allows simple viewing of source
and destination file trees. It has the ability to compare folders. It
treats host files as just another folder, and ftp transferring files
is very simple. It has many other features, like multiple tabs and
ftp auto reconnect to last directories, that makes it the swiss army
knife on my desktop.
Michael Krabach
rev. July 9, 2007