KompoZer:

On this page:

Related Pages:

Go to TopThe Software

KompoZer is an excellent WYSIWYG (What You See Is What You Get) software package for introducing people to web design and site creation. 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.

For a UK-based user, on initial installation it does have some short-comings. Its default spell checker is US English and there are some shortcomings in some parts of the program. Various Add-ons and external packages can almost entirely overcome these issues, so they are not a serious concern. This page describes where to obtain both the main package and additional software and how to install it into your working copy of KompoZer.

Go to TopDownload and Installation

KompoZer is an "open source" program. This means that anyone can obtain the original source code and amend it. However, we are only concerned with the standard program.

KompoZer: Home Page | Download Page

Once downloaded you will have the installation file on your computer. Open the folder to which you downloaded it, double-click its icon and accept the various options when prompted.

For the conventional program, installation is completely standard. Assuming the defaults are selected for the various options presented, you will get a desktop and start menu icons, an uninstall option within the Start Menu system and the normal remove option within the Add/Remove Programs feature of the Control Panel.

Go to TopCustomise the Interface

Once installed, when the program is first launched you will first see a small "Tip of the Day" window overlaying the main program window. Once read, you should close that window and the main program window is revealed:

Default Screen

I urge all newcomers to web design to customise the toolbars of this window, without delay! Make yours look more like this:

Customised Toolbar

If you have read the Content and Style page, and the rest of the Essential Theory section, you should be able to guess why. The entire lower Formatting Toolbar and most of the buttons in the upper Formatting toolbar insert either presentational tags, dating from HTML3.2 which are invalid under the HTML4.01 STRICT doctype that KompoZer generates by default, or insert in-line styles in your code which produce a very hard to maintain site. Of course, you still have access to their facilities through the menu system, but removing the toolbar buttons should make you think hard and assess whether you are really using the best coding techniques. In the rare cases where inline styling is appropriate you will almost certainly want to alter KompoZer's default styling added with those buttons, so it is better to use methods that allow you to do this straight off.

You can remove an entire toolbar through the menu options: VIEW > SHOW/HIDE. You can add or remove individual buttons by right-clicking over a toolbar and selecting "Customize toolbar" and dragging icons between the dialogue that appears and the toolbar.

NOTE: The dialogues vary depending on whether you right-click over the main toolbar or either of the formatting toolbars, so be accurate with your right-clicking!

On the main toolbar, I have chosen to add a few buttons, Print, Cut, Copy, Paste and Spell Check. The addition of these buttons and the removal of the legends under each button is entirely optional. I have also removed the "Publish" button. This is because, in the current beta version of KompoZer, the publishing module is highly unreliable and you are advised to use an independent FTP program to upload your completed site to your server. There's more information about that in the Publishing section of the site.

Amongst my recommended set, one button remains on the main toolbar that adds inline styling to the code. This is the tables button. On most sites, tables should be sufficiently rare that inline styling might be appropriate. However, I still only retain this button reluctantly. This is because too many newcomers, with only a word processing background will instinctively use it to aid their page layout. Whilst this is an appropriate technique when the output is to be printed on paper of a known size. it is utterly inappropriate for the huge range of media through which an HTML document might be displayed, spoken, embossed and, yes, printed. The principle reason that the button is retained in my recommended set is because, on those rare occasions, where a table is appropriate this button does the job of setting up the framework rather well.

You'll see that most of the images on this site show the main window without without the "dock" to the left hand side. (F9 will show/hide it.) This is mainly to avoid showing irrelevant features of the window. However, it is worth setting up the Site Manager, as described below. The second facility within the dock is the Dom Explorer However, that is mainly use when examining other people's code and for de-bugging errors on more complicated sites and need not concern us at this stage.

Go to TopSet up the Site Manager

On initial launch of KompoZer the Site Manager appears within a Sidebar on the left side of the program's Window. The sidebar can be made to appear and disappear by hitting F9 (Menu: VIEW > SHOW/HIDE > SIDEBAR). If the DOM Explorer is showing in the sidebar, click the SIte Manager button at the top to drop the DOM Explorer out of the way.

Site Manager

The Site Manager has some basic tools for managing a site's folder structure. These permit the creation of new folders and renaming and deleting folders and files. (You can't drag and drop files to move them from one folder to another, nor create a copy of a file. For those operations you would need to open files for editing and use "Save as", deleting the original files if necessary.)

However, the Site Manager's most useful attribute is that double-clicking an HTML or CSS file will load it into the main window for editing. This alone makes it worth using as for HTML files it is so much quicker than using the standard Open dialogue, especially as you cannot drag and drop a file onto the main window to open it, and for those familiar with CSS code, it presents the only way within the program to access an entire CSS file.

It is also intended that the Site Manager will allow uploading (publication) of files to your server. However, because of bugs, this function is highly unreliable and does not work with the vast majority of servers. Without exception, you are advised to use an external FTP program for uploading and maintaining any site. Some recommendations are provided in the Publication section of the site. Because of this you may as well drag downwards on the bar dividing the File list section of the Site Manager from the FTP Console, to maximise the space available for the file list.

Site Manager Edit Sites Button

To add a site to the Site Manager, first click the "Edit site list" button. This opens the "Publish Settings" dialogue.

Because of the problems with publishing function in KompoZer, there is no point in making any entries under the "FTP Settings" tab and only the "Local Settings" section under the "General Settings" tab of the dialogue need be completed. The "Site Name" field is simply for identification and need not reflect the entry in the "Site Folder" field.

Publish Settings Dialogue

Page updated: 10 December 2011