Genealogy site - other pages include Family ancestor charts, surname interest lists, and a condensed collation of useful facts relating to UK Family History research. Established on March 23rd, 1999 - and is extended/revised bi-monthly.

This page last updated 7th September 2003

Web Site Design

talk notes / beginner's guide

NOTES & TERMINOLOGY

This page was written post talk both to tie the talk pages together and to partially provide a stand alone tutorial
Most of the pages herein use bold text to improve visibility when projected.

A DIRECTORY is the same as a FOLDER . On systems used by ISP's (Internet Service Providers) - the term directory is used while PC's running Microsoft Windows use folder .

It cannot be emphasized enough - that filenames for uploading must NOT contain spaces . Once uploaded filenames are case sensitive. I have learnt the hard way - that it is better to use only lowercase letters and to use _underscores in filenames where you might have put spaces. See also Internet Corner herein - (accessible from my Contents page) for more about filenames (= page addressing).

A server is a computer with masses of disk storage - dedicated to communication - file handling - access security. In the case of the internet - dial in modem connections number in 100's - and for a large site in 10,000's. For reliability - the operating systems are invariably UNIX based - which usually only crash as a result of a serious hardware failure.

All of these pages are my copyright . They may be freely downloaded and saved for personal use only - and personal users are invited to examine page source HTML in a text or HTML editor. These pages or any part of their content must not be reproduced or used in any other way without my express consent.

WEB SITE STRUCTURE

WHAT IS A WEB SITE?

A Web Site is a file or collection or files linked in some manner - resident in allotted file space on an ISP's web server. This Good Connexions Site was used to demonstrate web site structure

Place all your files to be upload in a folder(s) having the same structure as your uploaded site. This should always reflect the current or intended state of your site and should only contain files that are - already uploaded - updated or new ready for uploading. I have named my root folder mirror to emphasize its function. Develop new pages in a separate folder and only place them in your site folder for testing - once they are ready for uploading. It is also regarded as good practice to place any image or none HTML files in separate sub folders.

Why Build a a Site

If you do not focus an a single subject - you will have classification problems later - should you wish to register with search engines.

MARK-UP LANGUAGE

You all have used - mark-up language at some time although probably not formalized. The formalized mark-up used for web pages is HTML - so what is a mark-up language? - you will all have used at least an unformal version at some time.

HTML controls all aspect as to the whole appearance of a web page .
Example of how a browser displays a pre-formatted text file with a .txt extension
And now the same file - but with a .html extension

The whole concept of HTML relies on tags - but what are tags
There are about 70 tags in all and you should be able to do most of what you want - using about 20 tags.

The minimum tags for all pages - but with the addition of <PRE> tags can be seen in this .txt file (again having the text extension so the tags may be viewed) The <html> at the top and bottom of the page are madatory - as are the <HEAD> (header) <BODY> tags. Not mandatory but should be included is the <TITLE> tag contained within the header. The text contaned within the TITLE tags appears in the title bar at the top of your browser - and again on the browser button on the task-bar. Items included between the HEADer tags - do not appear when the page is displayed by the browser. They are there for system purposes and may included information to aid search engines. The affect of these minimum tags can be seen where the .txt extension is replaced by .html

Getting_started - what do you need to start designing your web pages?

As part of the talk preparations- a small number of html_editors - were surveyed. Screen editors have been included as the end result is changes to the underlying html. (see MyLinks "Tu Cows" downloads)

PAGE/SITE DESIGN

EXAMPLES - examine other web sites and save pages that you find attractive - and look at them in an editor to see how they are done. Pay particular attention to sites covering similar subject matter to your own. Also make notes of any features that annoy you - and avoid them in your own pages.

I find the usual way of providing gedcom to html page - slow and laborious to use and I have been experimenting with other formats

What works for surfers not paying for access time - may be hated by those that do.
Pages should be designed with the wider audience in mind. Remember - you may be using a 17" monitor - but someone else could be using a Hand Held computer. Certain ISP's force their particular browser on users. Other surfers may have images disabled to speed browsing - and is therefore essential to use the Alternative Text field when inserting images. It is equally desirable to include dimensions when inserting images - as the text will be formatted around the defined space and will not go through additional reformatting processes if an image is slow in arriving. There is nothing more frustrating than to find a page reformats after you have started reading - loosing your place

PAGE LAYOUT - this example HTML page has been extended since my talk - to demonstrate most of the tags you will need in designing your own web pages - including relative font sizes and colour. Design check list

TEMPLATE / OUTLINE - when formulating your page design - you should consider a uniform style for all of your pages. Not only does this give your site an identity - it can actually speed new page design. The page template produced during demo - does just this. You design your page outline once and then use a copy of this as the foundation for each new page. It is at this stage that the file extensions .htm & .html can become exchanged according to the default of your editor.
e.g. NS Composer defaults to .htm and I use .html because my ISP requires a home page named index.html

In addition to your logo - your ISP may require banners and or links to their main site. If your site becomes established - then it is possible particular pages will get bookmarked - and visitors will go straight to a particular pages. In which case it is desirable to include any legal notices on every page together with how you may be contacted.

IMAGES

Are a subject in their own right - and the Our Supersite Logo - used for the template design demonstration - was designed using the 30 day trial version of Paint Shop Pro 6 - and took about five minutes to complete. I used the .gif format because I needed transparency (the background colour to show between the letters). There are excellent tutorials on a wide range of fancy lettering at the Abstract Dimensions web site accessible from My Links page - and others may be found in support of most other paint packages.

Size Does Matter - at least when it comes to file sizes - and image files are the worst offenders. Make them too big and you will eat into your web space allocation - and also have pages that are slow to download.

For more information on file sizes and compression strategies see my Scanned Images & Editing page accessible via my contents page. For web use - images should not be more than 75 pixels per inch. A 75 pixels per inch resolution gives an image that is 56% of the data size (before compression) of the same image at 100 pixels per inch.

PRE PUBLISHING

Now is the time you assemble your files into a folder structure that mirrors that of your site. Test your local links (i.e. links to other pages on your site). NOTE: Testing of external links (links to other web sites) - can only be done online. Pre publishing Check List

Troubleshooting: - links fail either because the calling link has a different spelling or letter case usage to the called file - or because the file is missing or has the wrong extension.
Pay particular attention to file extensions should it be .html or .htm - calling links for image files often have wrong extensions should it be .gif or .jpg or .png - any others are not generally viewable by browsers.

PUBLISHING

This is the process of uploading files to your web-space.
Publishing Your Site

At the time I gave the talk - I had been using Netscape Communicator for ftp (file transfer protocol) uploads. I have since been able to evaluate the program ws_ftple - and I am now pleased give it my full endorsement.

NEW (20 Jun 2000) : WS_ftple in action

ADVANCED TECHNIQUES - (not included in talk)

If there is a demand pages will be added demonstrating the use of:

Frames - devised by Netscape - result in easily navigated pages. However there are major problems inasmuch that they cannot be bookmarked - saved or printed. They also require a degree of skill in their reliable design - and alternative pages are required if you wish to reach people with browsers that don't support frames - and there are quite a few. They also cause a large additional loading on a site as individual pages cannot be bookmarked and everone need to start at the home page then navigate from there.
My own opinion is they should only be used where pages are generated in responce to users enquiries. e.g search engines - time tables - bookings - etc.

Forms - provide a means of collecting data from your site. They are generally used in conjunction with special software supported by your provider. There is a general misapprehension that this is the only way forms can operate - but this not true - they can be configured to send the required information directly to the page owner by email. However it arrives as a series of unmarked fields - which you must identify by their order. (importing into a spread sheet is one way)

Style Sheets - are the future - used in conjunction with html tags - they are already in wide use and have the potential of controlling layout in ways that are impossible with plain html. None of the current browsers fully support the full capability of Style Sheets - the trick is to only use the functions that common to most. Having said Style Sheets are the future - HTML may well be overtaken by XML (extensible mark-up language) - depending on browser support.

Java scripts - really require programming knowledge - and very much browser dependant - but there are ready made scripts that you can drop into your web pages.

Sounds - add a new dimension - but to what purpose - and can add 10 to 20 seconds to page loading time whilst a player is loaded.

The above advanced features have varying degrees of browser support and are not recommended for beginners. They will be included to give a more complete picture - if there is demand. Generally any of the above techniques may used without causing older browsers to crash - as fundamental browser design requires them to ignore all unrecognized tags.

If you need any help mail me have fun - James Montague

WSFHS Computer Group
Contents Page

PLEASE NOTE: unless stated otherwise - all material and images presented in these pages are original work - copyright (C) James Montague 1999 thru 2003. - or are believed to be in the public domain. If there is any image or other material here that is either your copyright or that you know belongs to someone else, please let us know and it will promptly be removed or an acknowledgement of ownership included. Thank you.

Good Connexions was established on 23rd March 1999
and is hosted by Dabsol.net.net