KompoZer:

  • 0.7.10
  • 0.8b3

On this page:

Related Pages:

Go to TopSplit View

In Split View an additional pane opens in the lower part of the main area of the KompoZer window that Normal View does not have.

Providing you have not hidden the Edit Mode Toolbar (MENU: VIEW > SHOW/HIDE > EDIT MODE TOOLBAR) you can easily switch between editing modes by clicking the buttons, DESIGN, SPLIT and SOURCE on the toolbar located at the bottom of the main part of the Kompozer window.

This new pane will show the source code currently in focus in the upper part of the window. You can adjust the size of the pane by dragging on the division between the two parts and widen the scope of the code shown in the pane by clicking on any of the tags on the Status Line. To narrow the scope again click on the required part of the page in the upper part of the window.

SPLIT View

Split View can be a powerful tool, especially when used in conjunction with the DOM Explorer, for analysing and understanding the nature of the display in the main Design area. For example, shown above in the Split pane is the HTML code code for the list item comprising the "Contact Me" button on this page's menu, while in the DOM Explorer, the top part of the display shows the position of this code within the page's overall structure and the bottom part shows the code in any stylesheet that affects the appearance of the selected element.

If you select the <html> tag on the extreme left of the Status Line you reveal the code for the entire page, including the file's <head> area. The Split View feature can be slightly more convenient for editing source code, as it includes syntax highlighting of code, which Source View does not, and because of bugs in KompoZer, some find edits made here prove more reliable than those made in Source View.

Having said that there are some issues if edits are made in the Design View pane, while the Split View pane is open. It can fail to update in some circumstances. An example of this is shown in the following example of the use of Split View to investiage the code generated by KompoZer.

Go to TopExample: Examining and Making Edits to HTML Code

The following is an example of how Split View might help in understanding how subtle differences in editing technique can effect the code that KompoZer generates. In this case, the difference between using the BACKSPACE and DELETE keys.

Here a new document containing the simple paragraphs of text has been created:

Dedetecting a <br> code #1

Split view has been opened and the <body> tag on the Status line has been clicked. This selects the entire body of the document and and displays its code in the lower pane. While the pointer remains over the body tag the area defined by the tag is shown with a heavy dotted line. Note how each of the three paragraphs has opening and closing tags and all are enclosed within the <body> tags.

The middle paragraph is now about to be deleted. The pointer has been clicked over the text of the middle paragraph and then moved to the Status Line and clicked to select the entire paragraph including the enclosing tags:

Dedetecting a <br> code #2

Having selected the paragraph one could now either hit either the  BACKSPACE or the DELETE key to remove the selected paragraph.

We'll start this exercise by hitting the BACKSPACE key once. When you do this KompoZer will insert a <br> tag in the code, to replace the missing paragraph. This is KompoZer's normal practice when deleting a section of code that consists of a matching pair of opening and closing tags all the tag's contents. The results can be seen below:

Dedetecting a <br> code #3

However, we want to remove the line feed created by the <br> tag. Hit the BACKSPACE again and the result is as below. Note how the cursor is now at the end of the first paragraph and the Split pane shows the <p> tags wrapping the text.

Dedetecting a <br> code #4

However, we wish to check the complete state of the code in the page so, once more, click the <body> tag on the Status Line. You will see that everything is as we would want it. The page now consists of two properly marked up paragraphs both enclosed in <body> tags.

Dedetecting a <br> code #5

Now hit CTRL-Z once. This should undo the edit that has just been made and return the page to the original three paragraphs as shown in the first of this exercise's images. One could click on the <body> tag to confirm that this is so. Once again, place the cursor in the middle paragraph and then click the <p> tag on the Status Line to select the full paragraph.

For this second attempt at removing the unwanted paragraph the DELETE will be used. Hit the DELETE key once. Check the page and it should appear as before, with the middle paragraph replaced by a <br> tag and the cursor flashing in the empty line:

Dedetecting a <br> code #3

Hit the DELETE key once more. This time something different happens. The gap between the paragraph disappears, as before, but this time the cursor is at the beginning of the second paragraph:

Dedetecting a <br> code #6

However, that is not all! If you check the Paragraph drop-down list on the Formatting Toolbar, you'll see that it indicates that the cursor is not currently within paragraph tags. (It shows "Body Text".) You'll also notice the effects of a minor bug in Kompozer...

Unlike the edits made with the BACKSPACE key, neither the Split View pane, nor the DOM Explorer have updated. You need to force the window to update. There are several ways to do this and some only re-draw part of the window.

Dedetecting a <br> code #7

The quickest way to update the both the DOM Explorer and Split View pane is to click the "head" tag in the DOM Explorer. However, that does not reveal the code we're interested in, so follow that by clicking the "body" tag beneath it in the DOM Explorer. This will reveal the screen above. We can see that by deleting forward of the cursor, rather than behind with the BACKSPACE key, not only has the <br> tag been deleted, but as the space occupied by the <br> tag was in a "Body Text" area, so the prargraph drawn forward into its space now also has that designation, i.e. it has be stripped of its <p> tags.

It is KompoZer's normal mode of operation for text joined via backspace or deletion to adopt the tag of the earlier text, but rarely is having untagged text, i.e. body text, on a page desirable, as its appearance is difficult to control via a stylesheet (and it reduces the chance of the page being analysed accurately by search engines).

Don't be distracted, in this example, by the reports of KompoZer's bugs or the particular example of differences in the effects of the BACKSPACE or DELETE keys. The important point is how you can examine the code behind mystery display effects. More importantly, as you become familiar with the code you wish to see in the HTML file, you will develop the confidence to edit it directly, within the Split View pane.

For example, in this case it would be a simple matter to click in the Split View pane, and add the required <p> tags around the text of the second paragraph. Once you have made your edit, hit ALT-ENTER to confirm the changes entered in the pane and the code is passed into the main part of the window and incorporated into the file when saved.

Go to Top Page published: 17 May 2012