Troop 174's
New Scout-Webmaster Starter Kit
Dec. 23, 2005
Creating a New Troop Website
-
Welcome, new webmaster. Starting from nothing, this guide gives step-by-step
instructions to create a free troop website like the one at Boy Scout Troop
174 of Yorktown Heights, New York ( http://troop174.net
). This imaginary site is the mythical Troop 9999. Edit to
suit. We provide
-
Step-by-step instructions, starting from scratch.
-
A cut-down starter version of our pages to be your starter kit, including
-
a sample quick-start public
home page, index.html, complete
and working, but limited. Get this working first.
-
a sample complete public
home page, indexComplete.html,
with many more capabilites. Later, get more things customized here,
then copy to index.html.
-
a password-protected area, pwChooseAPassword.html
for private information and interactive sign-up forms,
-
a private webmaster page, privateFormsTestArea.html
to develop more interactive forms and ideas.
-
Sign up for a free Tripod web-hosting account at http://www.tripod.lycos.com/
. Tripod is the only free web hosting service (as long as you can
stay below 20 MB of storage) I have found that has a script for interactive
signups that appends to a .TXT file that anyone in the protected pages
area can read.
-
To manage the Tripod free account:
-
Go to http://www.tripod.lycos.com/
-
Click on My Account
-
User bsaroop9999
-
Password YourTripodPassword
-
Download a free FTP program. I use
-
WS_FTP LE has a simple two-panel from-to push-the-arrow user interface.
-
In this directory double click on install executable ws_ftple.exe
-
or click to download WS_FTP
LE
-
In either case, go to Options / Extensions and add types .htm and .html
to the .TXT that is already there, or else file transfers may be messed
up in subtle, hard to fix, ways.
-
SmartFtp has a drag-and-drop user interface.
-
In this directory double click on install executable SmartFTPSetup.exe
-
or click to download SmartFtp
-
Setup
Be sure that your ftp program is set for ASCII for .htm, .html, and
.txt files, else the line-termination characters will be mangled, and then
if you download a page from the website you may have an editing nightmare
with an HTML page in for example Notepad coming up as a single, fantastically
long line instead of as several lines. You must do this because Tripod
uses UNIX or LINUX, not PCs.
-
Configure your ftp program to transfer .htm, .html, and .txt files as ASCII.
-
Ftp to ftp.tripod.com (IP address 209.202.240.80)
-
Host Type Unix
-
User BSATroop9999
-
Password YourTripodPassword
-
Set your local folder to the place on your computer drive where the website
files are.
-
Upload the complete website.
-
Start the FTP program
-
Connect to ftp.tripod.com.
-
Copy the entire contents of directory CopyToWebsite to the ftp site.
Do not copy the directory itself. Go into the directory CopyToWebsite
and then copy everything in it to the FTP site.
-
Test the website. Familiarize yourself with the web pages. Try all
the links from all the pages.
-
http://bsatroop9999.tripod.com/
the quick-start home page, (well, you also have a less convenient address
of http://members.tripod.com/BSATroop9999
). When you go there you will be in the index.html
page, which is the "home" page. this can also be accessed as http://bsatroop9999.tripod.com/index.html
.
-
http://bsatroop9999.tripod.com/indexComplete.html,
the complete home page.
-
http://bsatroop9999.tripod.com/pwChooseAPassword.html,
the password-protected area. This is where you go when from Complete.html
you select the link for the password-protected pages, it asks for your
password, and you type "ChooseAPassword".
-
http://bsatroop9999.tripod.com/privateFormsTestArea.html,
the private webmaster page. This is a private place for the webmaster to
put links to pages that have been loaded on the website but not ready to
be linked to from the user-accessable pages. Example: event sign-up
forms, which should be tested before public use. Some are on the
page as supplied.
-
Familiarize yourself with the directory structure of the website and which
files are where. index.html is the home page, and also a dummy page
in directory "NameOfProtectedDirectory" to help keep hackers from being
able to list the contents of these directories. favicon.ico is a
small image that displays in the tabs used by Netscape for tabbed browsing,
soon coming to Internet Explorer perhaps.
-
Edit the quick-start website, post it, and announce.
-
Get an HTML editing program. It does not really matter what as long
as it produces simple, short HTML.
-
I use an older version of (click to download) Netscape, version 4.75.
I suppose that editing with Internet Explorer directly might work OK.
But whatever you do, do not make a Microsoft Word document and then save
as HTML, because this produces lengthy, bloated HTML that takes a long
time to load over a modem and will not render on a PDA. Install Netscape
4.75 --
-
by, in this directory, double clicking on cc32d475.exe
-
or by downloading and installing from Netscape,
version 4.75.
-
Select a custom install.
-
If you are already running Netscape, type in c:\Program Files\Netscape\Communicator475
to avoid stepping on another netscape version.
-
Select the checkbox only for Netscape, no other components.
-
Uncheck all file type boxes so as to not associate any file types with
netscape 4.75.
-
When first running Netscape 4.75 you must choose a profile. Do not
let it match any existing profile,
-
Would you like to register Navigator as your default browser: Check "Do
not perform this check in the future" and click No, as you will not be
using e-mail on this browser.
-
I like
-
Full name: Netscape475
-
Email: Netscape475@None.com
-
Outgoing Mail server: None
-
Mail server user: None
-
Incoming Mail Server: None
-
NNTP server: None
-
Assuming that you have another internet browser, disallow internet access
through the firewall.
-
Make a copy of the Netscape icon and then
-
Right click on the icon and select Properties
-
Under the Shortcut tab ...
-
Change the target field from ...\Program\netscape.exe" to ...\Program\netscape.exe"
-edit
-
Click OK
-
Drag and drop the icon into folder C:\Documents and Settings\YourUserName\SendTo
-
Change the name of the icon to something like "Netscape 4.75 Edit"
-
To edit an HTML file, right click on it and select Send To / Netscape 4.75
Edit.
-
The first time editing a page, and before saving,
-
Select Edit / Preferences / Composer / Publishing
-
Uncheck Maintain links.
-
Uncheck Keep images with page.
-
Click OK
-
Edit the home page to refer to your troop number and other information
and likewise edit the files it points to:
-
FTP all changes to the website and test.
-
Announce the website. You are up and running.
-
Warning: Use only the alphabet and numbers for file names, no spaces or
other characters, and be sure that hotlinks are to the exact file name
including matching upper-lower case characters on the file name, else things
will work on your PC, but fail when you put them on the website.
Calendar Future/Past, Photos, People, Major Projects, Merit Badges,
Password-protected Pages, Online Signup Forms, Domain Name
-
Enabling features not in index.html, the quick-start home page.
-
indexComplete.html, which
you will be able to access as http://bsatroop9999.tripod.com/indexComplete.html,
has links to many features that index.html does not. Add these features
one at a time to your index.html website as follows:
-
Features, in order as they appear on the indexComplete.html page:
-
For each feature that you want ...
-
Try all links within the feature's page and see where in the directory
structure you go.
-
Edit all the sample subpages to make them yours.
-
FTP changes to the website.
-
Copy the indexComplete.html link to the feature to index.html, and FTP
index.html to the website to activate the feature.
-
Enabling the Password-protected
pages.
-
Change the password page from pwChooseAPassword.html to something else.
so that your website will have your distinctive password for the password-protected
pages. Instructions below in the "Protected Pages" section.
All you need do is change the html file name from pwChooseAPassword.html
to something else, and ftp it to the site. Delete the old pwChooseAPassword.html
file.
-
In the new password-protected page you made that used to be pwChooseAPassword.html,
change the references to directory "NameOfProtectedDirectory" to something
distinctive to your site, and of course change the actual name of the directory
from NameOfProtectedDirectory to that new thing. This site uses security
by obscurity. If you can figure out how to get Tripod to password-protect
directories for real, please let me know -James Lipscomb.
-
In this protected directory rename text files to your troop number.
For example, rename file "Troop_9999_Phone_List.txt" to "Troop_41_Phone_List.txt".
-
On Tripod, delete the old pwChooseAPassword.html and rename the NameOfProtectedDirectory.
-
Copy references to the password-protected pages from indexComplete.html
to index.html
-
Online signup forms are provided in working condition. Sign up at
indexComplete.html, sign up and see signups on the password-protected pages.
Signup pages are in the Forms directory, and there they must stay, at least
at that level of directory, not another directory level, or else they will
not work. The signup Forms pages append their results to .TXT files
at the top level. These .TXT files can have only certain names.
If a signup page is called xyz.html, the corresponding text target file
must be xyz.html.txt. Tripod has a tutorial on how to make Forms.
Even without that, you may mix and match from the examples provided to
make new signup Forms pages and their respective text files.
-
Optionally, in a few weeks, sign up for domain name. If as we did
you find that something like http://bsatroop9999.tripod.com is too long
to easily communicate to newcomers, you may have a short name, like http://troop9999.net.
Sign up either directly from Tripod or from another vendor, such as LowCostDomains.com,
for which there are instructions below in the "lowcostdomains" section.
This will cost $24/year or so, and be very sure to renew, or else.
Notes on the website
Design Principles
You are now ready to modify the site. You have your own ideas
on web design I'm sure, but let me try to sell you on our design ideas.
-
Less technology gives more technology. By keeping web pages technically
simple, just lists at most, we add the technology of rendering them on
Palm and Pocket PC devices with a variety of web viewers (AvantGo and Plucker
for example). These simple web viewers, small enough to fit in a
pocket device cannot handle frames, style sheets, or other fancy HTML.
-
A large top level page with pretty much everything one needs to know for
the next few months is an idea that has been warmly received by our users.
No digging needed to find things, it is all just there. But keep
the top page less than 44 KB, or else it cannot be rendered by AvantGo
on a pocket device.
-
Be modem friendly. Not everyone is so rich and up-todate with equipment
as the web master. Honor and embrace those who have less, and are
on slow modem lines. They will be too embarrassed to complain.
Keep images small.
-
Buy a decent image editor and learn how to use it. Traditional choices
are PaintShopPro or Photoshop, but there are many other choices today.
-
Learn when to use JPEG format (natural images) and when to use GIF format
(when there are large flat areas, such as in maps or printed documents).
Sometimes GIF can beat JPEG compression by a country mile.
-
Learn how to squeeze down the size of JPEG images by reducing the quality
level until they scream. Note that this entire starter website fits
on a floppy disk.
-
Learn how to squeeze down the size of GIF images by reducing the number
of colors. I like to reduce the number of colors to 5, then edit
the color map to make some of those the same color, then save the image,
reload it, and save it again. This reduces the number of colors to
what I wanted in the first place. This Information
page is a good example of the result, a big image made from few bits.
-
Adopt a consistent style for all troop pages. This traditional technique
of graphic design comforts and orients the reader while letting them focus
more easily and quickly on the different content of the pages. Troop
174 has a white background with a first line of "Troop 174" and a second
line with the title. There is a small image centered just underneath
that to brighten up the page without making it slow to load.
-
Isolate files for a particular year in that year's directory. This
lets you start off almost fresh each year, with last year's files tucked
away. Unfortunately, that means that each year you must (after saving
a copy to copy and paste events from to future years) the inPastMo.html
and photos.html pages down two levels and then adjust the relative links
within these pages. Details are below, but after this onerous task
is done, the pages are out of the way for next year.
-
Alphabetize related files together, for example a page, "pda.html" and
the image it uses, "PdaCa.jpg." Another example, if you take
a lot of pictures is alphabetizing all photos by event name, with the first
event of the year starting with "a", the second with "b", etc.; see CreateWebsite2\CopyToWebsite\History\Y2003\Photos.
Alphabetizing like this at first seems unimportant, but becomes more helpful
with each file added to the website. In 5 years, you will be very
happy you did.
-
Keep the home page below 44 KB. Somewhere between 45 KB and 46 KB
as listed in the Size column (or between 44.1 KB and 45.3 KB as listed
at the bottom of the Windows explorer page when you click on the file)
the home page, or any other page for that matter, is too big for AvantGo
to serve to PDAs. File inFutureMo.html in the home directory provides
a place to put extra calendar entries to keep the home page manageably
small.
Protected Pages
Just to be on the safe side, keep up the convention of protected pages
excluding robots, so in the off chance that a search engine finds the pages,
it will not make them findable in a user search. See
http://www.robotstxt.org/wc/exclusion.html#meta
and follow its advice to add the
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
tag in the header of each new protected page you make.
How to Make a Photo Thumbnail Image Array
-
Make up the regular page of images, here Scout Sunday page called eScoutSunday.html,
which has a black background and centered images separated by black-colored
periods that blend in with the background.
-
Copy eScoutSunday.html to a thumbnail construction page. Let's call
it eScoutSundayThumbs.html .
-
Open eScoutSundayThumbs.html with a text editor and edit the raw html tags
to make a white background and right-adjusted images separated by white-colored
periods that blend in with the new background, producing a new eScoutSundayThumbs.html
. This file is not posted to the website. Inspect the HTML
in these two files to see what was changed. Here is a summary:
-
Replace the existing <body> tag by <body bgcolor="#FFFFFF" text="#000000">
-
Add </center> before the photos to end centering and make them right
justified.
-
After the first photo but before the period character change the <font>
tag to <font color="#FFFFFF"> to make the periods white
-
Replace all occurrences of full-sized photos "height=240 width=320" by
thumbnail-sized photos "height=56 width=75".
-
Adjust the right margin of eScoutSundayThumbs.html to make the picture
wrap around if the line of images is too long.
-
Click on the browser view of eScoutSundayThumbs.html to make sure that
the focus is on that window, and then do a screen capture (hold down the
"alt" key and hit the "print screen" key).
-
Paste this image into a photo editor.
-
Copy a rectangle with just the thumbnails from the view of the entire page.
-
Save the thumbnail image, which you can see above, as a very lossy compression
JPEG and use it where you wish.
Each year (e.g. going from 2005 to 2006)
inPastMo.html
-
Copy inPastMo.html to inPastMo2005.html to perserve last years events
-
Specialize inPastMo2005.html to just that year by removing links to previous
years, and adding a top image or title for just that year.
-
In inPastMo.html create a "2005" link to inPastMo2005.html.
photos.html
-
Copy photos.html to photos2005.html to perserve last years events
-
Specialize photos.html to just that year by removing links to previous
years.
-
In photos.html create a "2005" link to photos2005.html.
If you want a Domain Name like "troop9999.net" use Lowcostdomains.com
Tripod can give you a domain name instead of you paying for lowcostdomains.com.
However, I went that way in case the troop ever wanted to move from Tripod,
because Tripod may not point their domain to a remote hosting service.
If as we did you find that something like http://bsatroop9999.tripod.com
is too long to easily communicate to newcomers, you may have a short name,
like http://troop9999.net.
-
You must pay about $24/year before each (Your renewal date) to keep
the domain name troop9999.net, or else maybe pay a heavy penalty.
"troop9999.net" is a simple, easy-to-remember domain name troop9999.net.
troop9999.net is a nickname that points to http://bsatroop9999.tripod.com/,
which is where the website really is. Valid URLs are:
To manage the domain name troop9999.net:
-
Go to https://secure.lowcostdomains.com/manage.htm
-
Domain Name troop9999.net
-
User BSATroop9999
-
Password LowCostDomainsPasword
-
Click Organization Contact
-
Change to your name, e-mail address, and credit-card number.
-
The renewal fee for trooop9999.net is due on or before (YourRenewalDate)
every year. In 2002 it was $24/y. The Renew button is on
the left.
-
(By the way, click Domain Forwarding to verify settings of http://bsatroop9999.tripod.com
and Masking OFF).
Failure to renew may result in a pornographic company picking up
http://troop9999.net and plastering pictures of naked people all over it,
plus an e-mail to the former owner, you, offering to sell it back for hundreds
or thousands of dollars, extortion to be sure but perfectly legal.
Meantime it is a good idea to continue the policy of having official sites,
such as the town or Yorktown, to point to http://bsatroop9999.tripod.com/
or even to http://members.tripod.com/BSATroop9999/ instead, to avoid a
potential public-relations catastrophe.
However, beware of renewal scams, http://www.theregister.co.uk/content/6/26167.html,
in which you get a call or e-mail from an impostor asking you to renew
conveniently by reading off or sending off payment. Renew and pay
only at lowcostdomains.com.
So, although you should expect an e-mail renewal notice around (OneMonthBeforeYourRenewalDate)
or so with an easy-to-click hotlink to take you straight to the renewal
page, do not click it. It could be a scam. Renew at https://secure.lowcostdomains.com/manage.htm
(the Renew button will be on the left).
Technical Details
To verify settings click Domain Forwarding and see http://bsatroop9999.tripod.com
and Masking ON. To change settings click Edit. To the question,
"Would you like your domain name to appear in the browser address bar?",
answer Yes, which sets URL Masking ON. Be careful, the default is
No.
It is bad for URL Masking to be set OFF, because then troop9999.net
will never appear in the location window at the top of the browser.
URL Masking ON, however good, does have some quirks. Although
it will put "http://troop9999.net" in the location window at the
top of the browser, it unfortunately it has the gripping power of an octopus.
You've got it, but it stays there unless you fight it off. The problems
....
-
an ordinary link from the home page (index.html), to anywhere else, onsite
or off, will still show http://troop9999.net in the address window, even,
for example, if you link to usscouts.org and then to a subpage there.
-
if you then try to bookmark this remote page, it will save as http://troop9999.net
instead of the page you are looking at.
Consequently, you must add TARGET="_top" to all hotlinks on the
home page.
This is the annoying, because you must constantly remember to do this
every time you add a link off the home page, every time all year long,
but it is your fate.
Examples of how to do it:
-
<a href="http://www.grace-lutheran-church.com/" TARGET="_top">
-
<a href="photos.html" TARGET="_top">
-
<a href="#January" TARGET="_top">
On some HTML tools this involves setting the link and separately adding
under "Extra HTML" the TARGET="_top".
These target tags are unneeded but harmless in sub-pages. Past
months of the calendar have them starting with 2002. Just be careful
that when you add or copy and paste to index.html that you check for and
add if not there the target tag to any links.
For an explanation of target tags, see http://www.freewebmastertips.com/php/content.php3?aid=22
.
Users who wish to increase the font size must use http://bsatroop9999.tripod.com/
, because http://troop9999.net does not respond to browser controls that
adjust the font size (on Netscape, cntl-] ), being hidden inside a frame.
There is a note about this at the bottom of the home page. Whatever
you do with this site, do not make things so fancy that the capability
to change font size disappears.
The ultimate fix to the problem of having to add TARGET="_top" to all
references from the home page, but I judge it too expensive, is to drop
a forwarding page on Tripod and move the website to a paid web hosting
service like lowcostdomains.com, which will have a primary and secondary
DNS for troop9999.net to point to instead of using URL masking. This
should remove the need for TARGET tags, allow font enlargement, and give
a nice troop.net/subpage.html address on each page, which can be bookmarked.
But this costs $300 per year, and the troop money should go more to the
scouts instead.
Contact me if you have questions,
James S. Lipscomb
914-784-7048
Troop 174, Yorktown Heights, NY