Washington Apple Pi

A Community of Apple iPad, iPhone and Mac Users

Best of TCS

Web Site Creation & Maintenance the Cheap & Easy Way

By Richard A. “Dick” Rucker

Washington Apple Pi Journal, reprint information

The following message thread can be completely recalled on the TCS if you follow this path of clicks after logging onto http://tcs.wap.org:

Computing Conference > Internet Software > web design software

So I’m just going to quote a bit of it as a lead-in to this article:

FROM: John Rhead
TO: All
Wednesday, Feb 18, 2004
Can anyone suggest some software for setting up a basic website?

FROM: Blake Lange
TO: John Rhead/all
Wednesday, Feb 18, 2004
Two professional web design apps for the Mac are Macromedia Dreamweaver and Adobe GoLive. If you are willing to learn simple HTML coding and can do without the graphical user interface then BBEdit is an excellent choice...

FROM: Lila Bednar
TO: John Rhead/all
Wednesday, Feb 18, 2004
There are lots of alternatives if you don't want to run Virtual PC or spend the money for something like GoLive (I love it, personally) or Dreamweaver...

FROM: Richard Rucker
TO: John Rhead/all
AM Thursday, Feb 19, 2004
The way I got started was to use the site templates provided by Apple's .mac service. Then I bought PageSpinner and taught myself enough about HTML and Cascading Style Sheets (CSS) to get by.

PageSpinner allows me to create my own pages, while .mac allows me to use its photo album templates and other server support to do a pretty creditable job for very little effort.

For what this website looks like today, see

http://homepage.mac.com/rrucker/chapter91.html

Oh yes, I have used one book as a reference:
Elizabeth Castro, "HTML for the WWW," Peachpit Press.

PageSpinner is inexpensive ($30) and superbly designed for the beginner who wants to learn how to use HTML, CSS, and other HTML add-ons to write web pages...

The remainder of this article will tell you what the site offers and how I depend on PageSpinner and certain features of my .mac — pronounced “dot mac” — account with Apple Computer to maintain it. For more on these tools than I mention here, see:

http://www.mac.com/1/learningcenter/
http://www.optima-system.com/pagespinner/

I created this Web site for the Vic Clark Chapter (#91) of the Quarter Century Wireless Association (QCWA), whose 94 members are amateur radio operators who were first licensed at least 25 years ago. The motivation for the Web site came when we could no longer find someone willing to edit and publish a five-page newsletter mailed to chapter members every other month.

At the time it was created a few years ago, only about half our members had email addresses and access to the Internet. At the present time, 90 of our members have both working email addresses and Internet browsers. I believe that the existence of the Web site, and our decision to not print and snail-mail some version of it for those who didn’t yet have on-line access, was one important reason for this increase. Most bought Wintel machines so thank goodness that Internet protocols are platform-agnostic!

We communicate with the remaining four members using snail-mail or telephone whenever the message is relevant enough to warrant the effort. One of these members has been blind since birth; the second is a 98-year-old who would have a computer were it not for his advanced glaucoma; the third is a 97-year-old who chooses not to get it; and the fourth is an 80-year-old who spends a lot of his time away from home and doesn’t long for additional stimulation.

The last paper issue of our newsletter was the January-February 2001 edition, and the Web site was put on-line in March 2001. Our membership seems to have increasingly used it since, so I’ve stuck with the original format, augmenting it slightly from time-to-time. The hit-counter on the main Web page currently shows more than 4000 hits since 2001.

Overview of the Web site

The site is organized as a main page with links to other pages. On the main page you will find, in this order:

Chapter 91 in brief: Things to know if you want to find us or join us.

Recent updates: Brief descriptions of files recently added to the Folder of Downloadable Files. The latter contains a membership application form in several formats, a map to our regular meeting place, biographies on members and former members who are now Silent Keys, and other items of perhaps enduring interest.

Also listed here are recent updates made to stories or photo albums previously posted. Not listed here are new stories, with or without associated photo albums, which are always found under “Recent Events.”

The Table of Contents (ToC) is subdivided into:

Following the stories of recent events is a list of links to all photo albums and downloadable files belonging to the site. The main page ends with a table giving contact information on the officers of the chapter.

How the Web site was built and is maintained

Apple’s “dot-mac” Homepage provides the templates for the photo albums and the folder of downloadable files. These templates are very easy to use and work flawlessly. Given the compliments they’ve drawn from readers, I see no reason to try to improve on them.

The main page was created in, and is edited periodically, using PageSpinner (PS) by Optima Systems. It can be downloaded from their Web site and used for free for up to 21 days. I played with it for a few hours before deciding it would do just fine and bought a copy.

Between its self-tutoring features and Elizabeth Castro’s easy-to-read manual, I had the first version of the Web site up and running one day after I started. Having no prior experience in either writing in a mark-up language or doing Web site design, I’d say it seemed surprisingly easy to do.

PS can be thought of as a specialized text editor with all the tools you need to insert HTML tags and clickable links, with plenty of help at your finger-tips. The type of HTML I use is “4.01 Transitional,” but PageSpinner supports other types including XHTML 1.0.

PS allows you to quickly see how what you’ve written will be rendered by any of the Internet browsers running on your machine. I’ve fallen into the habit of using Microsoft’s Internet Explorer as my default editing browser, though I do check its interpretation against Apple’s Safari on occasion.

Since I use only simple HTML constructs, a lot of cross-checking isn’t required. There is a clickable “send me a message” button prominently on most pages of my Web site to facilitate feedback from readers, so if anything appears amiss on someone’s screen, I usually hear about it.

I discovered which HTML constructs proved most useful by trial-and-error. I don’t know how other HTML editors work, but PageSpinner makes this very easy. One good tool for doing that is HTML Assistant in the Window menu. Here are excerpts from the Help file section entitled “How do I use HTML Assistant?”

Select the text in your document that you would like to format using HTML tags…

Topics that are supported by HTML Assistant are displayed in HTML Assistant’s “Topics” pop-up menu…

Some topics apply formatting, linkage or information tagging of the selected text in your document… When this is the case, the button in the lower right corner will be named Apply.

For other topics, the HTML Assistant Window just inserts a single tag in your current document. When this is the case, the button in the lower right corner will be named Insert.

I don’t see how learning and using this mark-up language could be made any easier. When I’ve wanted more background in the language itself, consulting Elizabeth Castro’s book provided it.

To give just one example of an HTML construct, consider how a list entry in the Recent Events subsection of the ToC is linked to the corresponding story using a relative address:

1. A clickable link in the ToC looks like this:

< LI><A HREF ="#section 4021">February 21, 2004: Tour of WETA's facilities in Shirlington, VA</A></LI>

The stuff bracketed by the <A…> and </A> links to a target numbered “4021” — year 2004, 2nd month, 1st story for that month. That’s a convention I’ve found easy to remember.

Bracketing that address reference is another pair of tags: <LI> and </LI>. These indicate the address is part of a list, another HTML construct that HTML Assistant will show you how to use.

2. The target of that clickable link looks like this:

< A NAME ="section 4021">February 21, 2004: Tour of WETA's facilities in Shirlington, VA</A>

I’ve found it unnecessary to commit such constructs to memory as there are several ways the PS will provide them for you. Even simpler is to cut-and-paste whatever construct I’m looking for from elsewhere on the page I’m updating.

One more thing…

I’ve found maintaining this Web site educational and a lot of fun. It has become our chapter’s official record. The last formal minutes I took as the long-time Secretary for the chapter can be found in the Folder of Downloadable files. The last minutes I wrote for the chapter cover the meeting held on September 15, 2001. Any chapter business that should not appear on a public Web site is handled via email or via another means.

Since I am the Secretary for Chapter 91, I am also expected to prepare chapter reports for publication in (1) the bi-monthly magazine Auto Call published for distribution to hams in the greater Washington, D.C. area by the Foundation for Amateur Radio (FAR) and (2) the quarterly QCWA Journal published by the national organization. Since I always update our Web site first, it is an easy matter to pick-and-copy material from it to satisfy these other two obligations.

Optima Systems
http://www.optima-system.com/pagespinner/