Go to TopWeb Design

There is no "right" way to build a web site, but there are definitely a lot of ways to build a bad one.

Before you start you should read the few short pages of Essential Theory. Do this even before taking a look at KompoZer, the software we use on this site to construct your site, and learnt the best way to create your installation of the package and some of the tricks you'll need to know when using it.

Having got a working copy of the program you'll practice the basics of Building a Site, by doing an exercise in the use of external stylesheets and then create your basic "master page". Populate that with all the features that will appear on your site, make copies and populate them with the actual content and you'll be ready to upload it to the server you will use, so everyone can visit it. In the jargon of KompoZer this is Publishing but it's best to use an independent program, as you will find out.

Go to TopEssential Theory

Don't worry if you are the practical "Let's get on with it" kind of person. There's not too much of it...

Let's start with a description of the general approach to creating a new site.
Size: Screen, Images and Text
In Step 2 on the Planning page differences between paper and electronic documents were emphasised. Here the key issues that will affect your page design are explained.
Content and Style
In Step 3 on the Planning page there are references to "style" and "stylesheets". Unless you are used to working on multi-author documents then this essential aspect of word processing and desk top publishing software may have passed you by. This page presents vital concepts!
The Box Model
Here it gets a little more technical, and you may not need to read it immediately, but as you start to "style" the content of your page you'll need to know why various components of a page may not always butt up against each other in the way you expect. This page will provide the clues, and further explains how to provide the "hooks" for on which to hang the styling of your content.

Go to TopKompoZer

KompoZer is a WYSIWYG (What You See Is What You Get) web page editor. It is based on Nvu, which grew out of the Composer element of Netscape's original "Navigator" browser package.

Unlike some web editors, it was designed from the start for that purpose and is not converted from a Word Processing, Desk Top Publishing or Presentation Graphics program. This means it is capable of producing good compact HTML and CSS that needs little or no amendment to validate against W3C (World Wide Web Consortium) standards.

NOTE: Currently, there are two releases of KompoZer that you may encounter, 0.8b3 and 0.7.10. Neither is perfect nor a complete web authoring package. For example you will need separate image editing software for any graphics associated with your site and the internal facility for "publishing" a site has bugs and it is definitely best to use an external FTP program for this. There are a number of subtle differences between the two versions.

On this site, pages that relate specifically to KompoZer are version-specific. The material on the main site refers to 0.8b3.

Although more recent, there are elements of this version that are a regression. However, it is the essential version for those running a recent Linux distro. (0.7.10 relies on an obsolete version of the GTK package and it crashes when run under a more recent version.) For this site's intended audience, Windows users will also find this version fully satisfactory. (I'm a Windows user and use this version!)

NOTE: On the site you can still access older versions of the pages covering the use of KompoZer. Use the "0.7.10" option that appears on the vertical menu on each appropriate page.
The pages documenting the 0.7 version of the program were effectively abandoned when work began on the 0.8 version. In consequence the two sections of the site do not entirely mirror each other. No promises are offered on when I might do the work to bring them more closely in line.
Should you Contact Me, be clear about the version of the program version you are using, and refer to the page title, heading and any instruction number about which your question/problem relates.

Installing KompoZer
This page explains where to obtain and how to install KompoZer, make some initial customisations and set up the Site Manager, so that files are easier to load.
Useful KompoZer Add-Ons
Here are described, a set of near-essential extras for KompoZer, e.g. where to obtain and how to install a UK English dictionary. You can also improve the program by incorporating your preferred text editor (use SOURCE View at your peril!) and by adding a code formatter which make editing sode very much easier.

Go to TopThe Basics of Building a Site

External Stylesheets
In Step 3 on the Planning page I talked of the need for an external style sheet (KompoZer uses the term "Linked Stylesheets"). This page provides an introductory exercise on styling page content and an exercise in which you create an external stylesheet that controls the appearance of headings and paragraphs on two pages.
Creating a "Master Page"
Having grasped the fundamentals of styling a page, now we create a master page that could be used as a "master.html" file, a template for all other pages on a site. (Avoid KompoZer's "Template" facility. It is incomplete, complicates things, and doesn't do what many people assume it will.)

Go to TopAdditional Master Page Features

Linking to an Existing Stylesheet
When incorporating the CSS code, found in the following demonstrations, into your own Master Page, you may find it easiest to export the internal stylesheets found in the demonstrations and then link them to your own master page. This page shows you how to do that.
Adding a Wrapper
Many web designers want to stop their pages expanding beyond a given width. This page explains how to add the necessary code and style it for best effect.
More Menu Designs
The basic Master Page tutorial featured a menu bar with buttons of a fixed width. Now learn how buttons can be made to expand according to the length of the text on them, dispense with the menu bar and centre the buttons instead, or change the menu from a horizontal to a vertical format and, finally, how to add graphical backgrounds to menu buttons.
Adding a Third Column
In the basic master page tutorial space was created for a vertical menu on the left of the page. Besides a vertical menu in the main content area, many sites require a third column (ideal for those Google Ads, news flashes, or other "quick links").
Adding Curved Corners
Tutorials on two techniques for adding a panel with rounded corners.
Adding a Photograph Gallery
Many newcomers first attempts at an image gallery use a table to hold the thumbnail images. This page explains why it is inappropriate and presents a simple fluid gallery that adjusts automatically to window width.

Go to TopKompoZer Techniques

The first of these techniques is an essential trick to learn and will be used regularly by any KompoZer user. The next three will prove useful for those struggling to debug their first few pages. The last two may only be required by a few users and can be ignored unless required on your site.

Placing the Cursor
Click on the contents of a page and you place the cursor within any code block tags. This page describes how to place the cursor outside existing block tags - useful for inserting images so they are not tied to paragraphs of text and adding further <div> tags.
DOM Explorer
A useful tool for understanding the overall structure of a document. Probably best used for discovering how another author's page is constructed.
Split View
While this site aims to keep HTML and CSS code very much in the background, KompoZer's SPLIT View feature, which reveals, and allows editing, of sections of a page's source code can be useful, even for beginners.
Editing Issues (In preparation)
Originally intended to extend the guidance offered on the Placing the Cursor page, to cover removing unwanted <br> (line breaks) and <hr> (horizontal line) codes, it is now turning into a general F.A.Q. on editing issues found when using NORMAL view.
The Pound (£) sign
The default KompoZer settings make a meal of the £ (Pound Sterling) sign. It appears differently depending on the browser. This tells you why and how to change things. (The technique will help with other non-ASCII characters too!)
Formatting Tables
KompoZer has a bug affecting the formatting of groups of cells in a table. A work-around is described here!

Go to TopPublishing your Site

Domain Names
If you are creating a club or business site you'll want a relevant and memorable address that people will find easy to remember and spell.
Web Hosting (Planned)
A few brief points on hosting your site.
Uploading Your Site (Planned)
Don't attempt to use KompoZer's "Publishing" tool. It is seriously bugged and will leave you frustrated. Use an independent FTP program instead.

Go to Top Page updated: 23 April 2012