KompoZer:

On this page:

Related Pages:

Go to TopBuilding a Master Page

Consider the general page layout illustrated below. At the top is a header area, where one might expect the site title and logo or page name to appear. Under that is a horizontal menu for navigating the site. This features a set of buttons that change colour to reflect the currently selected page and to indicate that there is an active link under the mouse pointer as it is moved across the page. Beneath the menu the page splits in two. There is a narrow column to one side, which might be used for a vertical menu, links to the updated pages, or for thumbnail images that highlight and link to key areas of the site. The larger area will contain the main page content and finally, at the bottom, is a footer area, typically used for copyright notices, links to company information, or telephone numbers.

Sample Master Page Layout

This general layout is the foundation of the vast majority of web pages today and this will form our master page, which can be copied repeatedly with each copy populated with the content for an individual page. Of course there are many variations. Some sites have the menu above the header area. Others abandon the horizontal menu in favour of a vertical one in a column to one side or the other of the main content area. Many disguise the rectangular layout by using background graphics with sweeping curves. Others use a three column layout, where the additional column caries advertisements or larger graphic links to some important content and many abandon the footer block.

If you plan to use the tutorial that follows, to create your own master page but want a slight variation of the design, then you should feel free to leave out any of the container blocks and skip over the instructions for them. Other specific customisation ideas are mentioned below, and some have further pages that provide further information about how to implement them..

Go to TopIntroduction to the Tutorial

This tutorial is broken down into these components:

  1. Creating the Containers
  2. Naming the Style Rules
  3. Identifying the Containers
  4. Applying the Header Styling
  5. Applying the General Menu Styling
  6. Applying the Menu Bar Styling
  7. Applying the Basic Button Styling
  1. Applying the Button Link Styling
  2. Applying the Button Hover Styling
  3. Applying the Content Area Styling
  4. Applying the Column1 Styling
  5. Applying the Main Content Styling
  6. Applying the Footer Styling
  7. Finding and Deleting Breaks

It assumes that you are already familiar with the purpose and function of a stylesheet and have completed the External Stylesheet tutorial on this site. It builds on that knowledge introducing three more significant components of web page construction, "generic containers" (HTML <div> tags) and CSS's "contextual" and "id" selectors.

Generic containers hold the five main "blocks" that form the design, shown in bold in the section above. (Never use tables as a way of laying out content on a page. Tables may work well for the fixed lay-out of a printed document, but is inappropriate for the very varied platforms to which a web site may be served. There's more about this issue on the page describing how to construct a simple Image Gallery)

Contextual selectors simply means styling that is conditionally applied. For example, a link on a menu bar is likely to need to be styled very diferently to a link in the main body of the page, so one needs to create a different set of rules for links that appear in the menu block.

An ID selector is not just for "special case" styling, in the way that a "class" is, but for "unique" styling. It can be used as an anchor, so only a single element on a page can be assigned a particular ID. It is therefore most useful for styling non-repeated blocks on a page.

Before rushing to create the containers, we need to consider further the properties of the column and main content areas. It is easy to set the column or main content area to be a certain width or percentage of the window's width, but, as each is filled with content, they will extend independently. Not only that, the lengths may vary on each page with no guarantee one is always longer than the other. A mechanism is needed to ensure that the footer always appears below the deeper area and that the colour of the gap below the shorter area has the appropriate colour. This is done by adding a further <div> containing both the column and main content blocks.

The boundaries to the various containers offer many possibilities. Borders are used extensively in this design. If dispensing with them or any components of the design which use them, bear in mind that you may have to add them to the edges of the remaining containers in order to replace a missing one. Also bear in mind the HTML Box Model, as removing borders will affect the total width and height of the elements concerned. Another option is to replace borders and use a graduated blend, as on this site. Solutions to some of these and other design issues are described in the Customising the Master Page group of pages.

As this is a single page demonstration an internal stylesheet is used. This keeps the HTML and CSS code in a single file, which has an advantage for teaching but should not be used for real-world multi-page sites. If you wish to adapt the completed tutorial for a site of your own you should export the stylesheet, as described in the External Stylesheet tutorial, before making any copies of the master page. Now, let's start work...

Go to TopCreating the Containers

1. Open KompoZer (or start a new tab).

2. On the Formatting Toolbar, drop down the Paragraph formatting list and change "Body Text" to "Generic container (div)". (A dotted red box will appear across the page and the paragraph format returns to "Body Text".)

3. With the cursor inside the dotted line type "Site Title" (without the quotes)

4. Click the <div> button on the status line (the text becomes highlighted) then, on the keyboard, tap the right-arrow (cursor) key once. (The cursor reappears to the right of the container that's just been created and the <div> button disappears from the status line.)

NOTE: The function of Step 4 is to move the cursor outside the HTML tags in the code which is generated that define the container block. "Select on Status Line then Cursor" is a technique that can be used when ever you need to locate the cursor accurately immediately outside the tags that define any block of code.

Selecting a <div>

5. On the Formatting Toolbar, again drop down the Paragraph formatting list and change "Body Text" to "Generic container (div)". (A second dotted red box will appear across the page.)

NOTE: If your site is not to have a horizontal menu, skip to Step 9.

6. With the cursor inside the second container click on the "Bulleted List" Toolbar button. (The container separates and expands and a bullet symbol appears.) Type "HOME" (without the quotes) and hit the carriage return key. (A further bullet appears.) Continue, adding "OPTION 2", "OPTION 3" and "OPTION 4" to the list. Do NOT hit the carriage return key after the final list item.

7. Place the cursor within the text "OPTION 2" and click on the <li> status line button. Click on the "Link" Toolbar button. Enter "#" (without the quotes) in the "Link Location" field and click the OK button. (The text will turn blue and be underlined.)

NOTE: The # character creates a link that sends the visitor to the top of the current page. It is used here as a dummy. On a working master page, a link to another page on the site would be used.

8. Repeat Step 7 for the "OPTION 3" and "OPTION 4".

9. With the cursor still in the list, click the <div> button on the status line (the list becomes highlighted) then, on the keyboard, tap the right-arrow (cursor) key once. (The cursor reappears just outside the container that's just been created.)

10. On the Formatting Toolbar, drop down the Paragraph formatting list and change "Body Text" to "Generic container (div)". (A third dotted red box appears.)

11. With the cursor inside the new container type "content" (without the quotes). (The function of this dummy text is to provide some content in the container, so that you can see the effect of some of the styling to be added later.)

NOTE: If your site is not to have a footer zone, skip to the NOTE after Step 12.

12. With the cursor still in the content container, click the <div> button on the status line. Again tap the right-arrow (cursor) key and drop down the paragraph formatting list to, once more, change "Body Text" to "Generic container (div)" so adding a fourth dotted red box. Type "footer" (without the quotes) inside it.

NOTE: There is a minor bug in KompoZer so that it does not always display container boundaries and line spacing as it should. The illustration below shows an example. Saving the page and then selecting "Revert" from the "File" menu frequently provides a work around.

Normal view showing the containers

13. Save the page in a folder created especially to hold your web site, entering "Master Page" when prompted for a page title and "masterpage.html" as the file name.

NOTE: If your site is NOT to have its main content area split into columns, skip to the "Naming the Style Rules" section..

The function of Steps 14-17 is to provide two containers nested within the main content area. Although, initially, appearing more complex than necessary, this approach allows the greatest flexibility in the way all three containers can be positioned and styled.

14. Place the cursor at the end of the word "content" and tap the carriage return key. With the cursor on the new blank line, drop down the paragraph formatting list and change "Body Text" to "Generic container (div)", so adding another dotted red box. Click inside the new box, to place the cursor there and type "col1" (without the quotes) inside it.

15. With the cursor still in the col1 container, click the right-hand of the two <div> buttons on the status line (Only the text "col1" becomes highlighted). On the keyboard, tap the right-arrow (cursor) key once. (The cursor reappears at the edge of the container.)

16. Drop down the paragraph formatting list and change "Body Text" to "Generic container (div)", so adding another dotted red box. Click inside the new box, to place the cursor there and type "main" (without the quotes) inside it.

17. Save the page.

NOTE: Step 18 is not necessary as part of the process, but is intended to reassure those using these techniques for the first time. It can be skipped if desired.

18. Because it can be difficult to make out the relationship between the red border lines, confirm that things have worked as intended by checking Source view. Click the "Source" tab on the Edit Mode Toolbar. The code between the <body> ...</body> tags should look similar to that below. Your code will certainly NOT be indented exactly like this but the text and surrounding opening and closing tags for each section should be in this order. Importantly, the "col1" and "main" <div>s should be nested inside the "content" div:

<body>
  <div> Site Title </div>
  <div>
    <ul>
      <li>HOME </li>
      <li><a href="#">OPTION 2</a></li>
      <li><a href="#">OPTION 3</a></li>
      <li><a href="#">OPTION 4</a></li>
    </ul>
  </div>
  <div> content <br>
    <div> col1 </div>
    <div> main </div>
  </div>
  <div> footer </div>
</body>

Return to Normal view.

Go to TopNaming the Style Rules

1. Click the CSS (Artist's Palette) Toolbar button on the main window to open the CSS Stylesheets dialogue.

2. On the right hand panel, select "style applied to an element with specified ID attribute", complete the field at the bottom to read "#header" (without the quotes) then click the "Create Style rule" button. (The rule name will appear indented under the "internal stylesheet" label in the left pane of the dialogue.)

NOTE: ID selectors are similar to class selectors that are used to create "special case" styling for an element (See the External Stylesheet page). However, an ID selector is not just for "special case" styling but for "unique case" styling. As it can only be used once on a page it can serve as an anchor for a link and so is especially useful for styling non-repeated blocks on a page.

If, on your site, it is intended to repeat the menu on the same page (Some sites have the menu sited both above and below the main content area of the page), then all the "hmenu" rules should be set as a CLASS, not an ID (i.e. with a dot (.) not a hash (#) prefix marker).

3. On the CSS Stylesheets dialogue, click the Style Rule (Artists Palette) button. On the right hand pane, select "style applied to an element with specified ID attribute", complete the field at the bottom to read "#hmenu" (without the quotes) then click the "Create Style rule" button. (The rule name will be added to the left pane of the dialogue.)

4. Repeat Step 3 to complete the full list of rules:

NOTE: When entering rule names below that include a space, the radio button above the name field will automatically change to reflect the fact that you are producing a "Custom style rule".

  • #header
  • #hmenu
  • #hmenu ul
  • #hmenu li
  • #hmenu a
  • #hmenu a:hover
  • #content
  • #col1
  • #main
  • #footer

With the list of rules complete, click the CSS Stylesheets' dialogue OK button.

Dialogue after adding rule names

Go to TopIdentifying the Containers

1. Place the cursor within the text "Site Title". On the status line, right-click the <div> button, select "ID" on the menu, then "header". (The <div> button changes to read <div id="header">.)

2. If the horizontal menu was not skipped, place the cursor within the any of the menu items. On the status line, right-click the <div> button, select "ID" on the menu, then "hmenu". (The <div> button changes to read <div id="hmenu">.)

NOTE: If a class has been used for the hmenu rule, the option should be found under "Classes" not "ID".

3. Place the cursor within the text "content". On the status line, right-click the <div> button, select "ID" on the menu, then "content". (The <div> button changes to read <div id="content">.)

4. If the column section was not skipped, place the cursor within the text "col1". On the status line, right-click the <div> button (ignore the <div id="content"> button), select "ID" on the menu, then "col1". (The <div> button changes to read <div id="col1">.)

5. If the column section was not skipped, place the cursor within the text "main". On the status line, right-click the <div> button (ignore the <div id="content"> button), select "ID" on the menu, then "main". (The <div> button changes to read <div id="main">.)

6. If the footer section was not skipped, place the cursor within the text "footer". On the status line, right-click the <div> button, select "ID" on the menu, then "footer". (The <div> button changes to read <div id="footer">.)

NOTE: With the containers now identified, as rules are defined the effects will be seen immediately.

Go to TopApplying the Header Styling

1. Place the cursor within the text "Site Title", then click the CSS (Artist's Palette) Toolbar button to open the "CSS stylesheets" dialogue. On the left hand panel, select "#header".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background" and "Border" tabs in the way that you learnt in the External Stylesheet exercise:

border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: #336699;
color: white;

EXPLANATION:As you might guess from the code, all that is done here is that a thin black border is added around all but the bottom of the block. Text becomes white and the background becomes a shade of blue.

Stylesheet Dialogue with #header styling added

As the code is pasted (or entered) the effects can be seen instantly in the main window, so try to keep both window and dialogue arranged on the screen so you can check the effects are working as expected.

IMPORTANT: All the instructions in this tutorial assume that you will copy the code fragments and paste them to the General tab of the CSS Stylesheet dialogue. While pasting code works reliably, there is a bug in the dialogue and editing any existing code in the General Tab can produce erratic results. If you wish to change or delete code in order to customise your master page then you are advised to do this by editing the appropriate values under the other tabs of the dialogue.

NOTE: If customising your master page, do not be tempted to enter style rules that add emphasis to any text in the containers. Search engines rely heavily on heading tags to assess the importance of text on a page. Titles, and slogans, are key features of a site and need to be marked up as headings. It is the headings that should be styled as required to give them visual impact not the containing block.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

1. On the left hand panel of the dialogue, select "#hmenu".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background" and "Border" tabs in the way that you learnt in the External Stylesheet exercise:

font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 0.7em;
text-align: center;
line-height: 2.5em;
height: 2.5em;
background-color: #003366;
border: 1px solid black;

NOTE: Three out of four people who have written to me because of a problem they had with this tutorial had failed to notice there are lines "height" and "line height" in the above!

EXPLANATION: Rules set here are in two parts. The first five control the appearance of the button text. The other three control the main features of the menu bar. The text rules could equally be set in the individual rules for the nested elements, but in general it is best to set rules at the highest level possible, so they don't need to be repeated lower in the hierarchy. The list of fonts is chosen from the Predefined list and set to bold. Font size for all text within the menu is set at slightly smaller than the default font size and aligned to the centre of the element that contains it. The line-height setting determines the position of the text on the menu bar. Height defines the height of the menu bar and the background colour provides the darker blue than the header to give it a distinctive appearance. It also has a full border to make it easy to use the code elsewhere. If used in several places the hmenu block should be set as a class rather than an ID. (Neighbouring blocks would need to have missing top or bottom borders to compensate, in the way that the "header" border was missing where it mated with the menu bar.)

3. Do NOT click the OK button. Instead select the next rule in the left pane...

1. On the left hand panel of the dialogue, select "#hmenu ul".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "List" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

NOTE: For those entering settings under the Box tab an explanation of the code below is required:

CSS syntax is sophisticated and KompoZer will vary the code it generates. In particular, this shows up in the rules for box sides (margins and padding). Rules may be specified for specific sides, as with the border in the Header rule above, but it may also generate code for the margins and padding with the syntax seen below .

In this case the margin and padding is to be applied to all four sides, so all four sides, Top, Right, Bottom and Left should have zeros entered to produce the code here.

list-style-type: none;
margin: 0;
padding: 0;

EXPLANATION: These rules, for any unordered list appearing within the menu container, provide the basic appearance for the buttons on the menu bar. First the default bullet that normally appears when an unordered list is rendered by a browser is disabled. The margin and padding settings both make the bar abut tightly to the header and content area between which it is contained and stops the indentation that accompanies the bullet in the default display of an unordered list.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Basic Button Styling

1. On the left hand panel of the dialogue, select "#hmenu li".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Border" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

NOTE: For those entering settings under the Box tab an explanation of the code below is required:

Extending what was learnt in the syntax applied to the menu bar, margin and padding can, in fact, have up to four values, one for each side. They are taken clockwise starting from the top, so here, the top and right sides are defined. With this syntax, when the when the third (bottom) number is missing it is taken to be equal to the first (top) value and when the fourth (left) number is missing it is taken to be equal to the second (right) value, i.e. the opposite sides in each case.

In this case the margin values are applied to all four sides and 0px padding is applied to the top and bottom edges, while left and right sides have 20px padding.

color: white;
background-color: black;
border-right: 1px solid black;
float: left;
width: 85px;

EXPLANATION: This is another contextual rule. In this case the styling will only be applied if the list item is contained within an "hmenu" block. It defines the appearance of the "current page" button. (Technically, it defines the appearance of all buttons, but those with links will be subject to further rules that over-ride this set. Similarly, other list items elsewhere on the page will use the browser defaults unless a specific rule over-rides their appearance too!) Text colour is set white to contrast with a black background. A text colour needs to be defined here, otherwise the browser's default for links (or that defined locally) will be used. The button only includes a right border as the others are provided by the #hmenu rules or any button to its left. Each menu item is floated to the left of the containing block so they draw up alongside each other, forming a horizontal list. The width is set to a width sufficient for the longest button text.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Header and most of the Menu Styling entered

1. On the left hand panel of the dialogue, select "#hmenu a".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

color: white;
background-color: #003366;
display: block;
text-decoration: none;

EXPLANATION: This is another contextual rule where styling will only be applied to the link if it is contained within the "hmenu" block. Most buttons have links so this styling takes over from the default styling that is applied to the "current page" button. A text colour needs to be defined here, otherwise the browser's default for links (or that defined locally) will be used. The background colour is varied from the standard menu button to indicate this is a link. (A menu button without a link will indicate a button whose target is the current page!) Setting text decoration to none overrides the browser default of adding an underline to any link. A link is normally an "in-line" feature (i.e. like italic or bold text, it can start and stop anywhere.) but here we want its features to extend over the whole button (i,e, the list item) so it needs to display as a block rather than its default in-line behaviour.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Button Hover Styling

1. On the left hand panel of the dialogue, select "#hmenu a:hover".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Background" tab in the way that you learnt in the External Stylesheet exercise:

background-color: #333333;

EXPLANATION: This is another contextual rule that uses the CSS "pseudo-class" hover. This is one of a number of special case rules that allow control of the appearance of a link in the active, visited and hover states. Because this rule works like a class it inherits the properties of the normal version of the rule changing only the properties defined here. Now, should the pointer hover over a button with a link, the background colour will change.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Content Area Styling

1. On the left hand panel of the dialogue, select "#content".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Background", "Border" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

background-color: #cccccc;
border-left: 1px solid black;
border-right: 1px solid black;

EXPLANATION: The content area reaches down to the footer and contains the "col1" and "main" areas which will appear to be superimposed over it. It has two functions. It ensures that the footer will always display beneath the longer of the two superimposed blocks and it provides a background colour to match the "col1" block should it be the shorter of the two. The borders are only required to each side as the top and bottom borders are supplied by the hmenu and footer blocks.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Column1 Styling

1. On the left hand panel of the dialogue, select "#col1".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Background" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

float: left;
width: 150px;
background-color: #cccccc;

EXPLANATION: Floating an element takes it out of the "normal flow" of the document content.(Normal flow refers to the general rule that one block follows the next with no overlap should an earlier one not fill the full width of the space available) Once taken out of the normal flow any following content will draw up alongside the floated block occupying any gap to the side of the floated element. The block is restricted to the desired width and given the desired colour.

3. Do NOT click the OK button. Instead elect the next rule in the left pane...

Go to TopApplying the Main Content Styling

1. On the left hand panel of the dialogue, select "#main".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background", "Box" and "Border" tabs in the way that you learnt in the External Stylesheet exercise:

border-left: 1px solid black;
background-color: white;
color: black;
margin-left: 150px;

EXPLANATION: The left border is defined to match the right border provided by the content block. (Top and bottom borders are provided by the previous and following blocks.) The background colour overlays that defined for the containing content block. The text colour is defined here for convenience. It could equally well have been defined as standard for the entire page under a definition for the <body> tag. The left margin ensures that the block does not wrap under the col1 block when content here is longer. Leave this out if the content of this block is to wrap under the "col1" block when it is shorter than the main block.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

1. On the left hand panel of the dialogue, select "#footer".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background" and "Border" tabs in the way that you learnt in the External Stylesheet exercise:

border: 1px solid black;
background-color: black;
color: white;
clear: both;

EXPLANATION: Although a black border around a black background may appear unnecessary, it is defined to ensure a uniformity of width (See Box Model) and to allow for easier colour changes of the footer background. Text is set white to be legible against the background. The clear rule forces this block to display below the bottom edge of any floated content. ("both" was chosen, rather than the more specific "left" or "right", so that no changes need to be made should it later be decided to swap the side of the column or add a Third Column.)

Dialogue after adding #footer code

3. With the last of the sets of styling rules defined, click the OK button to close the CSS Stylesheets dialogue and return to the main window.

Go to TopFinding and Deleting Breaks

1. Finally, double-click on the word "content" to select it, then, on the keyboard, tap the DEL key. (This removes the word but, as always when using the DEL key in KompoZer, it replaces the deleted code with a <br> tag. To reveal the tag, hold SHIFT and hit the Cursor-right key. It appears on the status line. Now, right-click on the <br> tag and select "Remove tag" on the menu that appears. The grey line will disappear.

Removing the <br> code

2. The basic master page is now complete and can now be saved.

All styles applied to the Master Page

See a completed example of the Master Page.

Go to TopCustomising the Master Page

Before you create a copy of your master page to fill with the content of your first real page, you MUST export the stylesheet. Only then, can any further changes you make to the styles be applied any subsequent pages you create for your site.

Almost certainly, the very first thing you will need to do is add further styling rules. For example, if you place the cursor with the text "main" and select "Heading 1" from the paragraph formatting list, you'll find that the content and menu blocks separate, because the default styling for <h1> tags includes a top margin. To stop this you could set a zero top margin for <h1> tags and add some padding to move it down from the top slightly. Similarly, the default paragraph styling includes a bottom margin. To allow text in paragraph blocks to reach the very bottom of the "main" area, you would need to set <p> tags to have a zero bottom margin. With a top margin setting for <h1> set to zero, this might upset your intended display of the "Site Title" text. This will then require a contextual rule for the <h1> tag inside the header block.

To keep control of the styling all text should be placed in appropriate heading and paragraph tags, with more specialist blocks marked up with blockquote, list, preformatted and so on, as appropriate. Tables should only be used for tabular data and not for page layout. All these elements should then be styled through the CSS dialogue and just because your favourite browser renders them the way you like by default, don't assume that others will. It is wise to set everything in the stylesheet, even if it does just confirm the default rendering for that tag.

You'll also need to substitute the names of actual pages for the existing button text and replace the dummy links with real ones. That will mean that you need to have planned exactly what they should be and have decided on a file name so you can set the link location before you make copies of the master page.

You will, of course, also want to change the colour scheme. Adding graduated background images to various blocks can help disguise the inevitable rectangular components of web pages, especially if used in combination with some that provide sweeping curves.

Further hints and tips on changes you might make to this master page are provided in the Customise the Master Page and KompoZer Techniques and Tips pages.

Go to Top Page updated: 2 February 2013