On this page:

Related Pages:

Go to TopAbout KompoZer

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 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. However, it is not perfect and not a complete web authoring package. (For example you will need separate image editing software for any graphics associated with your site and its internal facility for "publishing" individual pages has bugs, only works with a few servers and is not ideal for managing a major reorganisation of an expanding site.)

Installing KompoZer (Part Written)
This page explains how to install and run KompoZer to best effect. In particular it shows how to add a number of extensions and add-ons that help overcome the basic program's shortcomings and assist with best practice in web authoring.

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.
Building 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 TopCustomising the Master Page

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 and Tips

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 deleting "Break Below Image(s)" code and moving code blocks to certain locations.
Formatting Tables
KompoZer has a bug affecting the formatting of groups of cells in a table. A work-around is described here!
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!)

Go to Top Page updated: 10 October 2010