Build a Website from Scratch using KompoZer

Robert's mother-in-law is visiting so he is leaving town for the next two months (to show her around!), so Bob Backstrom and I will be taking over temporarily.

We'll be showing you how to build a website from scratch, using some freeware tools. Wolfgang has volunteered as a guinea-pig and will supply us with some content.

If you want to "play along" you can bring a laptop pre-loaded with the software and data listed below. You'll also HAVE TO DO some preparation.

We'll use KompoZer to build the web pages - it can generate the latest XHTML standard code (Bob will explain), edit CSS (Bob will explain) files and give you total control of the layout. Unlike design suites like NetObjects, it does not come with "themes" so we will start with a simple text-based site and later add frills like buttons and banners created in GIMP (making them will be a homework exercise).

The first step in Web Site Design is DESIGN. What information do you wish to convey, what pictures/graphics do you need to include and what pages do you need (and how they will be linked)? So ... on the back of an envelope or a blank wall make a "Site Map" showing the pages, then draw a rough sketch of how you think each page should look.

Then we start to BUILD the web pages with KompoZer. This will be our main task in February. We hope to build the main page and at least one of the content pages (& template).

For those playing along, your preparation is -
" Download and install KompoZer, GIMP and OpenOffice (or equivalent editor - eg that Microsoft thing).
" Prepare your site map and page sketches - example below (get inspiration from real sites on the interweb).
" Collect your graphics and pictures - make a dummy if you have not created them yet so we can fill up the space.
" Text-heavy pages can easily be prepared (for the 'content' sections) in your office suite (with graphics/photos as you need). This can be saved as HTML and dropped into KompoZer. It is a lot easier to lay out the page this way. Remember to set your page size to the size you plan to allocate for content in the web page.
" Otherwise prepare the text part as plain-text in Notepad, so we don't waste time typing (and Bob spell-checking).Set up a folder to hold your pages / images / buttons.

I generally like to structure the files like this, so things can be found quickly -
• Root containing homepage index.html only
• html containing the pages
• jpeg containing photos
• gifs containing graphics
• butn containing buttons & banners
• misc containing other stuff eg downloadable files

" Bring all this on your laptop.

In the second (March) session we'll convert the text links to buttons, and get some free scripts to jazz up the look.

Please invite any friends who may be interested in this, remember - their first SIG meeting is free and costs as much as the software we will use!

Peter Collard

Appendix 1 - Design

Here's a very crude picture which will probably look a mess by the time it gets to you - try viewing in text mode.

Generally you want the pages look similar (layout of header/menu/credits the same) so we would make a template, or fully create one page, then replace the 'content' on subsequent pages so ...

Appendix 2 - Software

KompoZer

http://www.kompozer.net/
Download v0.7.10
Tutorial - http://www.charlescooke.me.uk/web/kz_user_guide-ss.pdf

OpenOffice

from www.filehippo.com office page
not the RC versions - get v3.1.1 (select the latest, but download the older version) unless v3.2.0 is ready.
for part 2 in March

GIMP

from www.filehippo.com graphics page or the gimp-win page below
On-line Help / Manual http://docs.gimp.org/2.6/en

Combined help files - download from http://gimp-win.sourceforge.net/stable.html

Tutorials (for older versions, but a good reference - BEWARE menu structure has changed)
http://gimp-savvy.com/BOOK/index.html
http://rs239.rapidshare.com/files/274022564/gimp-tutorial.rar

Making Buttons & Graphics

http://binnyva.blogspot.com/2007/01/creating-web-20-graphics-in-gimp.html
http://binnyva.blogspot.com/2006/12/using-gimp-to-make-web-20-buttons-and.html
http://binnyva.blogspot.com/2006/12/creating-badgesviolators-using-gimp.html
http://binnyva.blogspot.com/2006/12/creating-reflections-for-logos-in-gimp.html
http://binnyva.blogspot.com/2006/12/creating-shadows-in-gimp.html
http://www.novell.com/coolsolutions/feature/17391.html