KompoZer

A Quick Guide to Using KompoZer

What is KompoZer?

KompoZer is a WYSIWYG web authoring system (for HTML, XHTML, and CSS) derived from Nvu, which in turn was derived from SeaMonkey Composer, which was derived from Netscape Composer. Whew! So KompoZer is sort of the grandchild of SeaMonkey. It works in a similar manner, but has some additional features.

As many of KompoZer's features are similar to SeaMonkey, this guide will reference the Seamonkey Tutorial frequently rather than duplicating documentation available there. If you've taken the HTML workshop or read the SeaMonkey tutorial, these notes should help you get along in KompoZer.

The headings of some of the sections listed below links to relevant pages in the SeaMonkey Tutorial.

The KompoZer Interface

Begin a New Page

There will be a fresh document when KompoZer opens. However, if you wish to create a new one:

1. Click File --> New
2. Keep default options unless you would like to create a document from a template, or start a new template. Note: the strict DTD option checked by default is recommended. Click the link to learn more.

Views in KompoZer

These are the same options you have in SeaMonkey (Normal, HTML Tags, HTML Source, Preview). The major difference is that the Source view in KompoZer color-codes the HTML tags, which many users find extremely helpful as they edit source code.

Color-coded HTML syntax makes it easier to see where there are problems with code, and also helps one distinguish between code and text on a page. Note that formatting tags, URLs/filenames, and comments are all different colors.

Adding and Formatting Text; Backgrounds

Identical to SeaMonkey

Links (External, Internal, Email)

Identical to SeaMonkey

Insert and Manipulate Images

The first step is a bit different. To choose an image from your hard drive, click the folder icon:

Then select an image as you would in SeaMonkey:

• Resize images as you would in SeaMonkey

Tables

As in SeaMonkey, you will click the Table button. A dialogue box will appear asking you to specify the number of rows and columns in your table.

• KompoZer has an added Quickly tab for quickly specifying rows and columns with a visual interface.

To specify these numbers precisely (the default option in SeaMonkey), click the Precisely tab.

• Add and format text, background colors, and so forth as you would in SeaMonkey.

Additional KompoZer Features

CSS Editor

The CSS editor (CaScadeS) appears to only allow you to use CSS within an HTML page, rather than creating separate stylesheets. KompoZer cannot open separate CSS files.

This has limited usefulness, as the style only affects one page. A major advantage of CSS is that a stylesheet can be created to affect formatting across an entire site, thus making your life easier (among other benefits).

Cleaner Code

• Markup Cleaner can be used in conjunction with the built-in HTML validator to create cleaner code. Markup Cleaner can do the following cleanup, although we still recommend proofreading as it may not catch everything.
• Fix nested lists
• Remove trailing "br"s
• Remove empty blocks
• Remove alignment on empty table cells
Miscellaneous Features
• Relativize local URLs
• XHTML support

Working with Forms

• The KompoZer interface will assist you in creating forms (e.g. for collecting contact information, etc.) so that it is not necessary to write all of the code by hand. Currently this is imperfect; some modification of the code may be necessary.
• Reference: This W3Schools tutorial explains the code and attributes of forms.

Additional Resources

KompoZer Tutorial from thesitewizard.com

SEARCH