WEBSITE NOTES  (PRIMARILY FOR NEW WEBSITE AUTHORS)

This site is hosted on PowWeb.com   This is by far the best value for web hosting that I have been able to find (as of 10/2003) – lots of space and transfer capacity for under $100 per year.   The only limitations they have are: no adult content, no gambling, and there is no easy way to move up to more space if needed  (this whole site with all of it’s pages is using less than 10% of the available storage capacity on that host).

At the time I started this website I knew absolutely nothing about website design.

I originally tried several different web authoring programs to create this website.

Microsoft’s Front Page is often offered as a good design tool for beginners, and it may well be, if you are not too particular about how you want the finished product will look.  But I had some definite ideas about how I wanted the site to look, and I found that I could not easily find out how to do some simple things, like putting a link button on top of a picture.  I also did not like Front Page’s heavy dependence on frames to organize multiple pages.  Front Page also represented an extra cost for me.

Next I tried the computer art program that I use most frequently for image editing:  Micrographicx Picture Publisher  (version 8) (now owned by Adobe).  This program has a ‘webpage export’ wizard.  I was able to do everything I wanted as far as the appearance of the website.  But there was a big problem with this program in that a webpage could not be saved at an interim stage for more work later nor could you reopen an exported page to fix mistakes (there were of course a lot of mistakes at first).  To change the webpage it was necessary to start over from scratch.

Finally, I designed the whole website in Word 2000 (which I already had).  Word has, under the ‘Save As’ menu two choices applicable to website design:  ‘Save As Website’  and  ‘Save As Website (filtered)’.  I wrote the whole site, exported it ‘As Website’ and uploaded it, then began examining it at work (where we have a high speed connection and I use Microsoft Internet Explorer) and everything seemed to work very well.  So I let folks know that I had a website, and almost immediately began receiving complaints from some people who were using proprietary browsers (especially AOL) that my site didn’t work for them.  It took a long time to learn what was wrong.  Finally, with the help of the web designer’s forum at    http://forums.webdeveloper.com/forumdisplay.php?s=43ad52bfed8a8a77a7d18ef1c829e8c7&forumid=1   I learned that Word loads up the exported web page with ‘Microcrap’, especially when the web page is unfiltered.  Going back and exporting as ‘Website (filtered)’ eliminated a lot of this useless stuff and seemed to make the site work for everyone.  But still a lot of stuff remains.  Many of the text only pages on this site remain in the ‘Web page (filtered)’ form.  But with the encouragement of the folks at  http://forums.webdeveloper.com/forumdisplay.php?s=43ad52bfed8a8a77a7d18ef1c829e8c7&forumid=1  I rewrote both the falconlabs  and personal  main pages  (the ones with the rabbit in the hat and the big lizard picture) by hand in html using the Windows notepad as a text editor.  To give an idea of how much garbage was removed from the original Word exported pages, the size of the falconlabs mainpage (rabbit page) html document (not including image files) went from 32k when exported as ‘Web page’  to about 10k when exported as ‘Web page (filtered), to about 3k after rewriting it by hand in html.  It also went from not loading at all with some browsers to loading for most everyone, but somewhat more slowly than I like, to the present form which loads in a reasonable time even with a dial up connection.  Note that, if you create your pages in Word, you should export two versions, one unfiltered and the filtered version to upload to the actual website host.  This is because some information may be lost in the filtered version and Word may not be able to reopen it properly for more editing later. When you need to make changes, you open the unfiltered version for editing and then export a new filtered version to send to your web server.

The moral of all this is:  if you are going to be serious about your webpage, learn html.  It really isn’t all that hard.  Here are some resources on the web that were helpful to me:

This site is a good starting point which begins with very basic examples and works through to some very jazzy effects (many of which I have not tried):

http://www.pageresource.com/html/hclist.htm

This site contains a pretty complete html syntax dictionary:

http://vzone.virgin.net/sizzling.jalfrezi/iniframe.htm

Some more ‘secrets’ that were not addressed in any of the references or the developer’s forum:

1) You can view the html text for most any website (including all of the pages on this one) if you are using Internet Explorer by going to the top menu bar, View / Source. You can also write and test your own html without actually having a website, by opening your html with your browser. Usually this is as easy as finding the file with Windows Explorer or under My Computer and double clicking the file. If the extension is .htm then your browser should automatically open the file.

2) Nobody tells you how to move text away from the left margin (html ignores additional spaces in any sequence of more than one consecutive space). I have included in the text lines and lines with images (including buttons) a character which does not print on notepad and which forces a space in html, no matter how many of them you string together.             I have tried to create this character by using the ‘Character Map’ tool found in Windows, but only occasionally is ttat successful. My best suggestion is to open this page in notebook (View / Source from your browser's toip menu bar if you use Internet Explorer, and simply cut what appears to be a string of spaces at the beginning of this sentence. Then paste into your document as necessary. Once you have imported some of these characters (which print as space in notepad and Word) you can cut and paste them into other places into your html. Paste more than you need and then backspace out the extras. Those characters start each line on the two mainpages so that the lines of text of buttons start to the right of the background image.

3) Optimize your images so that your site will load quickly. Save as both .gif and .jpg if you have that capability, and see which makes the smallest file. Look at the finished product on your own browser to see how small you can go and still have acceptable quality. Some developer’s tools can create ‘progressive gifs’ from large files so that initially a coarse image appears to let the user know that something is happening, then the image clarifies as more information is added over time. One of these programs (like Dreamweaver) is probably a worth while investment if you have a commercial site where you feel it is necessary to use large image files. I have read that statistically, most folks who are browsing will jump off your site if something doesn’t appear to catch their interest within under 10 seconds.

4) The moving rabbit in a hat background is an ‘animated gif’, created in Picture Publisher. Once you have an animated gif you use it on your site just like you would use any other gif.

5) If you have a lot of fonts on your computer (like I do), be cautious how you use them. If you choose a font that does not exist on your viewer’s computer then their browser will substitute some other (usually icky looking) font that it DOES have. The only way to avoid this is to save your fancy font text as an image file and put it on the page as an image (which will slow loading). Too many different fonts just clutter up your page and add an unprofessional appearance.

6) Adding scroll bars: The browser will automatically add a scroll bar along the right side of the screen if your page is too long to fit on whatever screen your viewers have on their computer. But if your page is too wide ot fit on a viewer's screen, their browser may not automatically add a scroll bar at the bottom. Instead, it may well 'rearrange' your objects so they will fit on the width of the viewer's screen, ruining the formatting you have tried so hard to obtain. (This rearrangement is acceptable, maybe even desired if your page consists of all text, but it plays havoc with the arrangement of images, buttons, etc. ) To prevent this rearrangement by the browser, make a long headline (as wide as the widest part of your page) at the top and add the 'nobreak' command at the beginning. The 'nobreak' command is nobr written between the back and forward arrows that signify an html command. Then the browser will be forced to show that line, and hence your whole page, at full width, adding scroll bar at the bottom if necessary.

10/2003

More later….