KompoZer 0.8 pre-release - Using KompoZer (Section 3 of user Guide)

Finding your way around

On opening, the screen layout of Kompozer 0.8 looks familiar. Look more carefully some important differences from earlier versions will become obvious.

At the top of the page on the composition toolbar a new HTML Icon appears. The remaining toolbars are the same as previously.

Views selection

Moving to the bottom differences are more obvious. The status bar is unchanged but the edit mode toolbar has been reorganised, in fact its function has been split between a new edit mode toolbar and a drop down selection box at the right hand side. The Normal, HTML Tags and preview tabs from earlier versions have been moved to the drop down box and the tabs allocated to Design view, Source view and Split view. The Design view tab actually shows the view selected in the drop down box, the Source tab shows the source code and the Split view splits the screen, the upper section showing the design view and the lower section showing a fragment of the source code.

The working of these views will be covered later.

Sidebar

The sidebar may be opened on the left hand side by pressing F9. In earlier versions this opened the Site Manager, now the sidebar has two modes of use – Site Manager or DOM Inspector. Either may be selected by clicking the corresponding bar.

The DOM inspector

The Document Object Model (DOM) provides a structural representation of the page which is useful during development for navigation and debugging. In design view the Status bar provides a view of the slice of the tree leading to the element selected. The DOM inspector in addition shows other branches of the tree structure. Three tabs provide HTML view, CSS view and a split presentation showing both views.

When the HTML tab is selected clicking any element in either the Design view pane or the DOM pane highlights the same element in the other pane which will be scrolled if necessary.

Figure 2 shows how the DOM inspector would look when inspecting the first item on the page menu. You may note several things:

• The selected element, in this case an anchor, is highlighted
• Each ancestor of the selected element is expanded to show the page structure
• The class and/or id of all ancestors are shown
• Double click any element in the DOM pane to open its Advanced property editor.

When CSS view is selected clicking an element in Design panel reveals all style declarations that affect the element. (This is much quicker than having to search through a stylesheet to see what is involved.)

The HTML + CSS view opens two separate panes showing both views simultaneously. You are likely to find this view less useful due to the small area available for each pane.

The DOM inspector is by definition an inspector, it cannot be used to change or edit the document in any way.

Editing HTML files

KompoZer 0.8 provides new ways of editing files and of selecting the items to be edited. While this adds power to the application it also adds complexity.

Editing in Design view

Items may be selected and edited using the mouse and keyboard as for earlier versions.

The DOM inspector provides a quick way of navigating around a document to locate an area for editing but it does not select anything. The Status bar conversely can be used to select an element ready for editing e.g. copying or deleting.

When selecting using the Status bar if you click on a tag, as well as highlighting it, the element also has a dotted outline around it. If you now copy the element the outline is also copied. To avoid this you must remove the mouse hover from the tag, the element remains highlighted and may be copied without the outline. Alternatively you can later delete the inline style used for the outline.

Checking spelling

KompoZer 0.8b4 has reinstated the spelling checker which was not available with earlier releases of 0.8. Additional dictionaries may be installed as an extension in the usual way. (Europeans will also be glad to know that one with British English spelling is available ^{[Ref 5]}.) Once additional dictionaries are installed it is possible to choose which is to be used via Edit > Check Spelling > Language.

Editing in Split View

When Split view is selected, clicking any element in the upper pane brings its source code into view in the lower pane. Typically this a very limited view, e.g. one item in a list, but by using the DOM inspector its position in the DOM is highlighted and by clicking its parent there the source now covers all the content of the parent. Thus, for instance, you can reveal the source code for a complete list, it's containing division, the complete body or, by selecting 'html' in the DOM inspector all the code for the page.

Being able to view the source and being able to edit are however two different things. Some edits can be made and will stick, others, at present at least, cannot.
Some examples:

• You can make changes that do not alter the DOM structure e.g edit text.
• You can make some changes that do alter the DOM structure as long as they have the nature of being inline changes. By this I mean you can add images and text inline elements or attributes.
• If you select a block element and delete the code in the Split window this is of no effect and the element remains undeleted when you return to the Design window.
• If you select and display the parent of a block element it is often possible to delete the code for the block element and have it remain deleted.
• If you select and display the content of a parent you appear to be fairly free to edit the content e.g. adding or deleting elements block or inline. There seem to be some limitations to this which may be due to bugs in the current implementation. For instance I was able to split a paragraph into two but concatenating the two later usually fails but sometimes works. Whitespace adjacent to edits seems to affect the result. Removing all adjacent space seems to make the process more reliable.
• Editing in split view will sometimes destroy the structure you are editing in unexpected ways. The good news is that the Undo button will normally recover the situation. This is a big improvement on earlier versions.
• Split view has at present no search and find facility.

Editing in 'Source' View

Switching to source view the listing is almost identical to the Split view when the html element is selected. Some differences are:

• The most obvious difference is the absence of syntax highlighting.
• Find and replace is supported (Great for getting rid of unwanted  s).
• There is no linkage to the DOM or Design view so navigation is much more difficult.
• The lack of linkage does however give complete freedom in altering the markup though KompoZer will do its best to correct faulty markup on returning to another view.
• Source view has an undo facility but this is cleared once you change to a different view..

Using an external editor

On the Composition toolbar the new button 'Open the current document in an external text editor' does just that. You can set your preferences to select which editor to use.

After making any changes in the external editor save the file and return to KompoZer. You will now be invited to accept changes or discard changes. Accepting changes will synchronize KompoZer with the changed file.

When using an external editor the view differs from that in split view or 'source' view. An editor like Notepad++ provides line numbering. This is a valuable when you encounter validation errors. The line numbers returned when using the ^] or by Marc Gueury's HTML Validator ^[Ref3]match those on the editor so that problem areas may be immediately identified and possibly quickly corrected.

While the external editor is a valuable tool experienced users are likely to be the main beneficiaries. Others are advised to use it only on pages encoded as ISO-8859-1. For more details see the Character treatment in KompoZer 0.8 ^{[Ref 4]}.

Editing other files

Yes KompoZer 0.8 has horsepower in places were you might think are unknown.

CSS files

In the Site Manager if you select a view that includes CSS stylesheets double-clicking any stylesheet will open it in a new tab offering a simple text editor.

This is just a text editor. It does not do any checking on the accuracy of the code but this is an advantage because it allows you to enter code that is out of the scope of KompoZer's CSS editor. This includes the parts of CSS2 which are not covered and also of course CSS3. It is also possible to reformat or comment the file as you prefer.

To save the file do not click the save button. (If you do so an Alert window will open and, if you click OK, the file will be converted to HTML which is something you do not want.) Instead just close the window (using the red X) and you are presented with an option to save.

Alternatively when in this text editor the external editor remains available (via the HTML button). For more detail see Stylesheets (4).

Remember that, while these editors allow you to reformat and comment stylesheets, if you edit any stylesheet using the CSS editor all comments will be stripped and formatting restored to the default.

php files

KompoZer 0.8 is also capable of saving and editing php files and creating and editing fragments of code intended for use as php includes.

Saving files as php

Any web page may be saved to a file and given the extension 'php'. Adding the php specific code is probably best done using the external editor as detailed above.

Creating php inserts

If you need to create a php code fragment as an insert you can use the following method.

1. First create a file as a standard html file ignoring any complexities.
2. Save it with the php extension
3. Open the file in the External HTML text editor
4. Delete the doctype, the opening tag and all between them
5. Delete the closing and tags
6. Save the file
7. Return to KompoZer Design view
8. Click 'Accept changes'

In source view you should now see

 
 
 
 
 
Here you will find the code you want to appear in the final of php file
 

If you return to the HTML Text editor all you will see is the text corresponding to that shown emphasized.

The result may be edited as any of the modes described above under Editing HTML files.

Copyright © 2009 - 2011 Charles Cooke

Updated 18th April 2009 (Reformatted February 2011)