Following is a step by step process of using KompoZer to create and style a web page.

Suppose we are making a website of short biography's about famous mathematicians. Let's start with Barnhard Riemann.

We have some biographical text and we can get a photo by going on the Wikipedia. So lets bring up KompoZer and create our web page:

Using KompoZer to create  xHTML

  1. Open KompoZer
  2. On the first format toolbar, click the drop down that says "Body Text" and select "Generic container (div)".
  3. A dotted red box appears. Place your cursor in the box and type "Famous Mathematicians", press return and enter "Barnard Riemann" (don't use the quotes).
  4. Click the <div> button on the status line (at the bottom of the KompoZer window), tap the right arrow on you key which has the effect of moving your cursor just outside the dotted box.
  5. Again on the first format tool bar, click the drop down that says "Body Text" and select "Generic container (div)".
  6. Select the text in the box below and  paste it in the 2nd dotted box that appeared as a result of step 5. 
    Bernhard Riemann (1826-1866) was one of  the leading mathematicians of the nineteenth century. In his short career, he introduced  ideas of fundamental importance in complex analysis, real analysis, differential geometry, number theory, and other subjects. His work in differential geometry provided the mathematical basis for the general theory of relativity. His name is attached to one of the most important outstanding problems, the Riemann Hypothesis.
  7. Save the page to a folder for your work, enter "Famous Mathematicians - Bernhard Riemann" for a title and "Riemann.html" for a file name.
  8. Make an 'images" folder in the same folder you just used and download an image of Bernhard Riemann from a public domain location to this folder (or download mine at http://weblitesites.com/images/225px-Georg_Friedrich_Bernhard_Riemann.jpeg -- this one is the correct size). 
  9. Now just drag and drop this image from the folder to your KompoZer window just in front of the text.
  10. Now check our work. Select the "Source tab at the bottom of the KompoZer window and compare to the html below. You can  edit this source to fix anything you  want. I find myself going freely in and out of KompoZer's editing and viewing modes.
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
     
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
      <title>Famous Mathematicians - Bernhard Riemann</title>

     
    </head><body>
    <div>
    Famous Mathematicians<br>
    Bernhard Riemann
    </div>

    <div><img src="images/225px-Georg_Friedrich_Bernhard_Riemann.jpeg" alt="">
    Bernhard Riemann (1826-1866) was one of the leading mathematicians of
    the nineteenth century. In his short career, he introduced ideas of
    fundamental importance in complex analysis, real analysis, differential
    geometry, number theory, and other subjects. His work in differential
    geometry provided the mathematical basis for the general theory of
    relativity.<br>
    His name is attached to one of the most important outstanding problems,
    the Riemann Hypothesis.
    </div>

    </body>

    </html>
  11. Your KompoZer window should look like this:

Using KompoZer for CSS Styling

First, I forgot something, so lets fix it now. Switch into "Source" view mode and mark up "Famous Mathematicians" as header-1 and "Bernhard Riemann" as header-2. Like so:

<h1>Famous Mathematicians</h1>
 <h2>Bernhard Riemann</h2>

Now lets start with a few simple style rules:

  1. Click on the CaScadeS  palette at the top of  the KompoZer window to bring up the CSS Stylesheets dialog.  Leave the button selected that says "style applied to all elements of type" and either enter the word "body" or select "body" from the pull down text box and click "Create Style rule". Then click the "Text" tab and from the "Font Size:" pull down select "small", and for "Font family" push the "predefined" radio buttons and select "Arial, Helvetica, sans-serif" from the pull down.
  2. Note: If you select OK you drop out of the Styling dialog and we aren't finished, so get the "CSS Stylesheets" dialog back click the little palette icon in the upper left and enter "h1,h2" in the edit box and click "Create Style rule" button. Select the "text" tab and enter "#007e7e" to make our headings a kind of green.
  3. Back at the "New Style rule" dialog enter "h1" and "Create Style rule" then the "Text" tab and enter "150%" for "Font Size".
  4. Make a new rule for "h2" and set the "Font Size" to "130%".
  5. See if you can go back and set the "body" style "line height" to "2em".
  6. I want the image of Mr. Riemann to "float" to the upper right, so on the "CSS Stylesheets" dialog, click the little pallet's pull down and select "Style rule". On the resulting "New Style rule" window select the radio button "style applied to an element with specified ID attribute" and enter the word "picture" behind the # that shows up in the edit box and click "Create Style rule".
  7. Now on the "Box" tab select "right" on the "Float:" pull down and click "OK".
  8. In the "Normal" mode of KompoZer, put the cursor on the picture of Riemann and click. This selects the picture and you will see in the status line at the bottom of the KompoZer window the hierarchy of the html elements: "<html> <body> <div> <img>". Right click on <img> and hover over "ID" and select "picture".
  9. Now save your work and the page should look like this in "Preview" mode.
     

This little tutorial is finished and just gives a taste of KompoZer. For more practice run through GregTutor's Web Site.