KompoZer Web Editor Tutorials

Creating A Simple First Web Page

To give you an idea how simple it is to create a web page, first start up KompoZer.

You will be greeted with a window that contains a menu (the top line of the window that says "File Edit View Insert..." etc), a few lines of toolbars (containing buttons like "New", "Open", etc), a left panel with a heading "Site Manager", and a large pane on the right-hand site that has a tab called "Untitled". This large pane is where you will design your web page.

Type the following into the KompoZer. You don't have to do anything special - just start typing. Note that you can type whatever you wish - I'm just furnishing you a block of text as an example. For ease of explanation, though, I will assume that you have typed the text here in the rest of the tutorial. Don't let that stop you from being creative, though.

Shakespeare's Website

Tomorrow, and tomorrow, and tomorrow, creeps in this petty pace from day to day, to the last syllable of recorded time; and all our yesterdays have lighted fools the way to dusty death. Out, out, brief candle! Life's but a walking shadow; a poor player, that struts and frets his hour upon the stage and then is heard no more. It is a tale told by an idiot, full of sound and fury, signifying nothing.

When you type, you are typing into KompoZer's "Normal" mode. You can see which mode you are using by glancing at the series of tabs at the bottom of the KompoZer window.

To see how your page appears in an actual web browser, click the "Preview" tab to enter KompoZer's "Preview" mode. Return to the "Normal" mode before continuing. I shall assume that you are using the "Normal" mode in this tutorial unless otherwise specified. The "Normal" mode is KompoZer's WYSIWYG editor mode. When you type text in this mode, KompoZer converts it into a HTML web document behind the scenes so that web browsers can recognize it as a web page. If you want to look at the HTML code that is generated from what you just typed, click the "HTML Source" tab at the bottom of KompoZer. Remember to return to the "Normal" mode when you've finished admiring the code.

Now save the page onto your hard disk. Do this by clicking on the "File" menu, then the "Save" item on the menu that appears. A dialog box should appear asking you for the Page Title.

Note: For convenience, in future, I shall refer to this sequence of clicking on the "File" menu, followed by the "Save" item simply as:

File | Save

This means that you are to click on the "File" menu, followed by the "Save" item on the menu that appears. There are shortcuts to saving a file in KompoZer, as there are for the many commands given in this tutorial. I shall, however, leave the discovery of minor things like that to you and concentrate on the main task of creating a web page.

As mentioned earlier, when you use "File | Save", a dialog box will pop up, asking you to give a title to your page. Since this is the main page of your website, you should enter the name of your website here. For example, if you are publishing a personal web page, you might want to name your website "Shakespeare's Website" (without the quotes) if your name happens to be Shakespeare. If you are publishing a company web page, the site name should be your company's name, such as "ABCDEF Company" or the like.

Once you've finished with the title, click the OK button or simply hit the Enter key (or Return key on the Mac).

A new dialog box will appear, prompting you for a filename. Navigate to a directory (ie, folder) on your computer where you want to save your page. Type "index.html" (without the quotes) into the file name part of the dialog box. Do not accept the default name given in the dialog box. Do not use another name. Do not use capital letters in the name (ie, uppercase). Most web hosts expect the main page of your website to be called "index.html". Their computers are configured in such a way so that if you simply type your domain name, like http://www.example.com/, the index.html file will be displayed. If you change the name to some other name, this will not work as expected.

After you've saved the file, you will be returned to KompoZer's main window. Look at the top of the window at the window's title bar. Notice that instead of the words "untitled", the title that you typed in earlier now appears there.

Uploading or Publishing Your First Web Page

Before we proceed to polish the page so that it looks at least half-way decent, we need to publish the page to your web host. One reason we're going to do this now, even before we've finished the page, is that KompoZer needs the information about your actual website's address (or URL) before it can correctly handle things like links and images on your web page. So even though the page is probably an embarrassment to you at this stage, please complete the following steps, or you will encounter problems later.

Don't worry about the page being so plain. If you've not advertised your website's address (URL) to anyone, no one will even know your site exists, so this preliminary version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. It's not that easy to get visitors.

Another reason that you're publishing your page at this time is so that you can get familiar with the major stages in the design of a web page. Once you get this hurdle out of the way, and you know how to get your web page from your computer into your web host's computer, you have mastered what is arguably the biggest technical challenge a newcomer is likely to face. Don't let this scare you though - it's actually quite easy!

To publish the page, go to "File | Publish" (ie, the "Publish" item on the "File" menu). A "Publish Page" dialog box will appear asking you for more details.

• "Site Name" is the name that you want to give your website. Use the name that you gave to your website when asked for the title earlier (ie, "Shakespeare's Website" or "XYZ Company" or whatever). This name is only used by KompoZer internally, to refer to your site, but it's probably best to use the real name you ultimately wish to give to your site to minimize any confusion later.
  
• The "HTTP address of your homepage" field specifies the actual web address (or URL) of your website. If you registered a domain name like "example.com" for your site, enter "http://www.example.com/" into this box. This field is required because KompoZer will use this information to form links on your site. Be sure to enter the "http://" prefix as well.
  
• "Publishing server" is a bit more complicated to explain. When you signed up for your web hosting account from a commercial web host, you would have been given a whole bunch of details by your web host. Among these is something known as your "FTP address". FTP, or File Transfer Protocol, is the usual means by which you transfer your web pages from your own computer to your web host's computer. Transferring your pages from your computer to your web host's computer is known as "publishing" or "uploading" your pages.
  

  For the purpose of this tutorial, I will assume that your web host told you that your FTP address is "ftp.example.com". You should substitute your real FTP address everytime you see "ftp.example.com" in the examples below.
  

  Before you enter that address though, you will need to know which directory (or folder) you need to put your web pages. Some web hosts require you to put your web pages in a directory named "www". Others require you to put it in a "public_html" directory. Still others say that you are to put your web pages into the default directory that you see when you connect by FTP. And so on. Find out the directory where you're supposed to upload your web pages to.
  

  Once you've got all the details, you're ready to form the address you have to enter into the "Publishing address" field.
  

  If your FTP address is "ftp.example.com", and the directory that you're supposed to upload to is "www", enter "ftp://ftp.example.com/www" here. Notice that you have prefixed "ftp://" to your FTP address ("ftp.example.com"), added a slash ("/") and followed it with your web directory name ("www"). If your web host tells you to simply upload it to the directory you are logged into when you connect by FTP, then just enter "ftp://ftp.example.com" here.
  

• The "User name" and "Password" fields in the dialog box refers to user name (or login name) and password that your web host assigned to you. It is needed so that KompoZer can connect to your FTP account and upload (publish) your pages.
  

When you've finished completing the information, click the "Publish" button. KompoZer will proceed to connect to your FTP account on your web host and upload your pages. There will be a dialog box that pops up to tell you it is uploading your page. The box will automatically disappear when KompoZer has completed its task.

Testing the Web Page

Before you proceed further, you need to test the web page you have uploaded. This way, you will know whether you've made any mistake when entering your details earlier.

Start up your browser. Type the URL (web address) of your website. This is the address that you typed into the "HTTP address" field earlier. For example, type "http://www.example.com" if that is your URL.

If you've entered the "publishing server" earlier correctly, you should see the page you created earlier in your web browser.

If you get an error like "No DNS for www.example.com" or "Domain not found", it probably means that your domain name has not yet propagated to your ISP. Put simply, this means that you probably only just bought your domain name. It takes time for a new domain name to be recognized across the world (usually 2 or more days), so it's possible that your ISP has not yet updated its name servers to recognize your new domain. Some web hosts give you a temporary address which you can use to access your website in meantime. If you have that, use the temporary address to check that your site has been uploaded properly. Otherwise, you'll just have to wait.

If you get an error like "404 File Not Found" or you get your web host's preinstalled default page, you may need to go back and check your "publishing server" field. You may have published your page to a location that is not recognized by the web server as the default page to show when only your domain name is entered.

You can change the settings that you have just entered by accessing the "Edit | Publishing Site Settings" menu. Then click the name of your website in the left pane, under "Publishing sites". One possibility for the page not showing is that you did not specify the correct directory on your web site to publish your index.html page to. A more remote possibility is that your web host requires that your page be named something other than "index.html". This is very rare nowadays, so explore this last possibility only when you've ruled out all others. At worse, ask your web host's support department or check their documentation for help.

If you get no errors at all, but see the page that you've designed earlier, congratulations! You've created and uploaded your first web page. It may be a rudimentary page but you have successfully walked through all the essential stages of designing and uploading a web page.

How to Change Font Faces and Point Sizes

In the first chapter, we typed the following text into KompoZer:

Shakespeare's Website

Tomorrow, and tomorrow, and tomorrow, creeps in this petty pace from day to day, to the last syllable of recorded time; and all our yesterdays have lighted fools the way to dusty death. Out, out, brief candle! Life's but a walking shadow; a poor player, that struts and frets his hour upon the stage and then is heard no more. It is a tale told by an idiot, full of sound and fury, signifying nothing.

Let's polish up the page. As it stands, we have not specified the font face that your web page is to use. This means that your page will appear in the default font of the web browser your visitor is using, whatever that may be. For visitors using Internet Explorer on Windows, this usually means that the "Times New Roman" font face will be used, unless your visitor has changed the default setting. Since the actual font face varies from system to system, and browser to browser, it is usually best to specify that a particular font be used by the browser everytime it displays your page, so that you have more control over the appearance of your web page.

To do this, select the text of the entire page. This can be done with the mouse by dragging the mouse cursor from the first "S" in "Shakespeare" to the full stop (period) after the last word. Alternatively, type Ctrl-A (type "a" while holding down the key labelled "Ctrl") in Windows to select everything.

From the "Format | Font" submenu, select either "Helvetica, Arial", "Times" or "Courier". I will assume that you selected "Helvetica, Arial" in this tutorial. "Helvetica, Arial" (actually "Helvetica, Arial, sans-serif" although the menu does not say it) means that the browser will try to use a font named "Helvetica" on the visitor's computer if available, otherwise it will use the "Arial" font. If the latter is not available either, the browser will try to use another sans-serif typeface. For the curious: the Helvetica and Arial fonts are very similar in appearance. Arial is found by default in Windows systems, while Helvetica is available by default in a number of other systems.

The appearance of the text should instantly change. If you are running Windows, the Preview window will now show your text using the "Arial" font.

You can also change the point size of the font on the page. For example, if you think that the text of the "Tomorrow, and tomorrow" paragraph is too small for your visitors (for example, your site caters to people who need large print such as the elderly or the visually impaired), select the "Tomorrow, and tomorrow" paragraph, and go to the "Format | Size" menu. You can experiment with the various sizes till the text of the page is to your liking. Be careful not to make the text too small. What looks good on your computer with your particular monitor resolution may be unreadable on a different system with a high resolution monitor.

Do not change the point size of "Shakespeare's Website". We will do this next, using a different technique.

How to Specify Headers and Titles

In web design lingo, the text "Shakespeare's Website" is actually regarded as the header of the paragraph, or perhaps of the entire page. By convention, both in print and on the web, headers are usually in bold and in a larger point size than the rest of the text on the page.

While it is possible to simply change the point size of the text using the technique described earlier, headers are usually specified in a different way.

Select the text "Shakespeare's Website" at the top of the page. Go to the "Format | Paragraph" menu and select "Heading 1". "Shakespeare's Website" should now be in a large point size and in bold.

You may have noticed from that menu that there are a variety of header styles - "Heading 1" to "Heading 6". Although KompoZer will not prevent you from doing so, you should only use "Heading 2" after you have used "Heading 1", "Heading 3" after you have used "Heading 2" etc. That is, "Heading 1" is meant to be used as the topmost header in the hierarchy, with "Heading 2" used for the lower level section headers, and so on.

Note that even though you're using "Heading 1" for "Shakespeare's Website", it is still possible to control or change the point size and font face using the method mentioned earlier.

Now save the page with "File | Save". If the "File | Save" option is disabled, use "File | Save As". KompoZer may ask you for the filename again. Simply choose the "index.html" file, and click "OK" to replace the existing version. Note that you must save your page before you go on to the next step, or KompoZer will disable certain features that you will need later.

How to Add Images

1. If you want to add an image to your web page, you must have a means of creating that image. For that, you either need to have access to a graphics drawing program, or if you already have the picture on paper that you can use (such as a logo that is printed on your company's letterhead), you will need to scan that picture into the computer.
   

   If you are creating your own pictures, you need a drawing program that can create either PNG, GIF or JPG files. If you have no idea where to get such a drawing program, you can find a list of free programs on thefreecountry.com's Free Drawing and Painting Software page.
   

   A description of how to use a drawing program or a scanner is outside the scope of this tutorial. Nonetheless, you will need a graphics image for this tutorial.
   

2. Place the image file into the same folder as your index.html page. Alternatively, you may create a subfolder named "images" in the directory where you saved your index.html file in the last chapter, and copy your image file into it. If you don't know how to create a subfolder, just place the image in the same folder as index.html.
   

   For the purpose of this tutorial, I shall assume that your file is called "logo.gif". I recommend that you name your files in small letters (that is, lowercase letters) with no spaces in the name. This avoids a variety of problems that occurs when your filenames has capital letters (uppercase letters) and spaces.
   

3. To insert an image beside the words "Shakespeare's Website", position your cursor to the left of the word "Shakespeare" (or whatever word you have typed in the header). Select "Insert | Image..." from the menu. A dialog box will pop up asking you for the location of the image. Click the "Choose File" button (next to the box for "Image Location") to select your image and click "Open".
   

   Under the "Image Location" box, which should now contain the name of your image file, the "URL is relative to page location" box should have a tick in it. If not, click it to enable it. If the box is grayed out, it means that either you have not published your page before or you have not saved your file since your last change or both. Click the "Cancel" button and fix the error before returning to this step. For example, if you have not published it before, return to chapter 1 of the KompoZer tutorial for more information on how to do this. If you have already published your page previously and still encounter this error, it means that you have not saved the file after making some changes. Do it before returning here.
   

4. In the "Alternate text" field, enter "Logo for Shakespeare's Website". The text you type here will be displayed if the visitor uses a browser that does not display graphics or has the graphics display deliberately disabled. It is also useful for people who are blind or visually impaired, and rely on speech synthesizers to read web pages out aloud for them. As such, any time you add a picture, it is important that you add some sort of descriptive text in the "Alternate text" field. As a side benefit, adding the alternate text also improves your website's search engine friendliness, which is an important part of website design if you want your site to have visitors.
   
5. Click the "Appearance" tab in the dialog box. You can now change the alignment of the image. Click the down arrow in the box under the "Align Text to Image" field to display a menu with the options available for that item. Select the item "Wrap to the right" on that drop down menu. This will cause any text that follows your picture to move to the right of the image.
   
6. Click the OK button. Your image should display to the left of the words "Shakespeare's Website". Depending on the height of your image, it is possible that some of the words in the paragraph that follows are also aligned to the right of the image.
   
7. Move your cursor to the start of the main paragraph, that is, move it to the first "T" in "Tomorrow, and tomorrow". Select "Insert | Break Below Image(s)". The paragraph should now start below the image and not wrap to the right of it as before. Note: You do not have to do this if your image did not affect your main paragraph. To undo what you just did, click "Edit | Undo" on the menu. You can always use "Edit | Undo" to undo something that you just did, if you decided it was a mistake.
   

At this point, your page may or may not look good, depending on the size of your image. If your image is too large and the text too small, the alignment will not look good. One way to fix that is to adjust either the size of the image (use your drawing program) or the size of your heading.

If putting the image to the left of your header does not work too well, you can insert the image above your header. To do this, delete the existing image by clicking on it with your mouse, and hitting the Delete key. Next, insert a blank line above your header and move your cursor upwards to the blank line. Insert the image as before, only this time, do not change the alignment of the image in the "Appearance" tab (just leave it set to the default).

If you insert an image in this way, you may want to centre both the image and the header "Shakespeare's Website" on your web page. To do this, click on the image once to select it. Then select "Format | Align | Center". Similarly, to centre "Shakespeare's Website", select the text, and then use "Format | Align | Center" from the menu again.

Background Colour and Text Colour

There may be occasions that you need to change the colour of certain aspects of your web page. For example, you may wish to change the background colour of your page. To do this, select "Format | Page Colors and Background" from the menu. Click "Use custom colors", and then the colour button beside "Background". You will be presented with a dialog box with many colours to choose from. Select your preferred colour then click OK to accept the changes.

If you are changing the colours of your background and text, be sure to select colours that will contrast well so that your text can be easily read.

How to Create a Link to Another Page

In the chapters to come, we will create a number of other pages. In order for your visitors to reach those pages, you need to add links to those pages.

To create a series of links to the other pages on your site, do the following:

• Move your cursor to the bottom of the page. Leave a blank line after the the paragraph above. We will be creating a navigation bar for this site at the bottom of this page.
  
• Select "Insert | Link" from the menu.
  
• Enter "Home" (without the quotes) in the box entitled "Enter text to display for the link". This will be the underlined text that visitors will see.
  
• For the "Link Location" field, enter "index.html".
  
• Click the OK button.
  
• Using the same procedure, add links to the following pages as well:
  
  • About Us (aboutus.html)
    
  • Feedback Form (feedback.html)
    
  • Reciprocal Links (links.html)
    
  • Site Map (sitemap.html)
    

  Separate the links using a space and a vertical bar. For those who don't know how to get the vertical bar, you can find it on your keyboard.
  

  When you've finished this, the bottom of your page should look like the following:
  

  Home | About Us | Feedback Form | Reciprocal Links | Site Map
  

• Select the entire line at the bottom, centre the line with "Format | Align | Center", and if you wish, change the font to "Helvetica, Arial" as before.
  

At this point, your page should look something like the following. Since I don't know what picture you used nor its size, I've put a placeholder in the diagram below:

Writing the Real Content of Your Main Page

At this point, you have a working main page for your web site, except that the real text for the page has not yet been written. You should now replace the header on the page (if you have not already done so) and the quote from Macbeth with the real content of your site.

Here are some tips on what you can put on your main page.

1. Replace the header "Shakespeare's Website" with the real name of your website.
   
2. Visitors arriving at your site at the main page should be able to tell what your site is about. The text and graphics in your site should work together to that end. This does not mean, though, that you have to write a long story on your front page describing the purpose of your site or company. However, simply putting a cryptic picture in place of the existing Shakespearean text will not help your visitors figure out what your site or your company is all about.
   
3. Your main page should also allow visitors to access the rest of the site. For the purpose of this tutorial, we have placed links to certain pages of the site that are found on a typical company website. If you intend to have other pages, for example a page listing your products, you should create a link to that page as well. Important: when creating filenames for these other pages, create names that do not have any capital letters (ie, uppercase letters) or spaces in them. Spaces and capital letters in the names might lead to problems in the future.
   

Once you've finished rewriting the text on the page with more appropriate content for your site, publish your web page again. Select "File | Publish". When the dialog box appears, put a check in the checkbox for "Include images and other files" if it's not already there. If you don't do this, your images will not be uploaded to your website. Finally, click the OK button to allow KompoZer to upload your revised page to your web server.

Congratulations - you now have a functional main page for your website.

Creating Tables to Display Your Data in KompoZer

For this section of the tutorial, you will be creating a new page for your website: the "About Us" page. This chapter will take you through the process of creating a page that looks something like the page in the diagram below. You will of course have to modify the content to suit your site. The main idea in this section is to introduce you to the use of data tables, which we will use (or misuse) to create multiple column layouts for our site later.

Steps to Take

1. If you've been observing the websites that you visit, including thesitewizard.com, you will have noticed the pages on a particular website share a common design, with only the page-specific content differing from page to page. The common design not only saves the web designer time when designing a site, it also helps visitors. A common layout among the pages on a site make it easier for visitors to locate common elements like navigational links.
   
2. For this tutorial, we will use the index.html page that we created in the previous chapters as a template for our second page.
   
3. Make a copy of the index.html that you created in the previous chapter, and call it aboutus.html.
   

   To do this in Windows, open up "My Computer" and navigate to the index.html file. If you can't find any file named "index.html", only a file named "index", click the "Tools" menu in the "My Computer" window, followed by "Folder Options". Click the "View" tab at the top of the options dialog box. Uncheck the box "Hide extensions for known file types". Click the button "Apply to All Folders". Click the "OK" button. You should now be able to see the full filenames of all your files.
   

   Select the "index.html" file with your mouse. Right-click the file and select "Copy" from the menu that pops out. Click a blank spot in that same window and right click it. Select "Paste". A new file, "Copy of index.html", will appear. Right click the file and select "Rename". Change the name from "index.html" to "aboutus.html".
   

4. Start up KompoZer. Click "File | Open File". An "Open HTML File" dialog box will be displayed. Select the aboutus.html file which you created in the step above and click the "Open" button.
   
5. KompoZer will display your new aboutus.html file. At this point, the page is identical with the index.html that you created earlier. We will be changing this page to an "About Us" page. The "About Us" page on a site typically gives your site's visitors information about a company (if yours is a company site) or about you (if yours is a personal site).
   
6. Change the heading of the page from "Shakespeare's Website" to something appropriate for an "About Us" page on your website. For example, if your site is a personal website, you can call it "About Me". If you want to use that page as a resume, you can call it "[your name]: Resume" or [your name]: CV". If your site is a company website, call it either "About Us" or "XYZ Company: About Us".
   
7. From the Format menu, click the "Page Title and Properties" menu item. Change the text in the Title field to match what you used for the header earlier, and press the ENTER key.
   
8. Replace the quote from Macbeth with the "Here are some of my achievements:" or, alternatively, substitute with the real content that you want on your finished site.
   
9. Hit ENTER a couple of times to leave a blank line before the start of your table.
   
10. From the menu, select "Table | Insert | Table..." A dialog box appears. The dialog box shows an image of a 6 x 6 table, with 2 rows and 2 columns selected by default. Below the image, the dialog box shows the number of rows and columns currently selected in case you're too lazy to count the number of shaded squares yourself.
    
11. Basically we want to create a table with 5 rows and 2 columns. There are a couple of ways to create such a table. One way is to move your mouse over the squares until you get a 5 x 2 table. For small tables like ours, this method will probably suffice. However, this method limits you to creating a table with a maximum size of 6 rows by 6 columns. For this tutorial, you will be using the alternative method, which allows you to create tables of any size you wish.
    
12. Click the "Precisely" tab at the top of the "Insert Table" dialog box. This new tab will allow us to specify exactly how big the table is to be. Enter "5" (without the quotes) for Rows and "2" (again, without the quotes) for Columns. Under width, the default is 100 % of window, which means that your table will fill out the entire width of your web page. You can leave it set to the default. The "Border" value should be 1 pixel by default, which means that your table will have a border of one pixel surrounding its cells. You can leave that alone too. Once you've finished, click OK or hit the ENTER key.
    
13. A table should appear on your screen. Complete the table using the data below. Alternatively, you can complete it using your real content. To move to the different columns and rows in the table, use the TAB key. Alternatively, if you prefer using the mouse, you can click in the appropriate cell to position your cursor. (Don't worry about the constantly resizing columns.)
    

1. Note: your table will not look exactly like the table in my picture earlier. In particular, your table should fill out the width of the browser, while the table in my picture does not. I mention this for the sake of those who might worry that they're doing something wrong if their screen does not look the same as my image.
   
2. If you want to move the cursor outside your table, do not use the TAB key in the last cell. Use the arrow key instead. If you use the TAB key there, KompoZer will automatically create another row in the table thinking that you want to extend the table. If this warning comes too late for you, and you've already accidentally created another empty row, you can easily delete it the extra row by moving your keyboard cursor to that row and use "Table | Delete | Row" to get rid of it. It is also possible to undo mistakes immediately after you commit them by using "Edit | Undo" from the menu.
   
3. Now look at your table. The first row of the table actually contains the header for the rest of the table. To indicate that it is the header, move your cursor to the "Year" field, then select "Table | Table Properties". You will be greeted with a dialog box with two tabs at the top: "Tables" and "Cells". Click the "Cells" tab. The dialog box contents will change when you do so. Now change the "Cell Style" in that dialog box from "Normal" to "Header". Click OK. Now move your cursor to the "Play" field of your table and do the same here.
   

   You have indicated that the those two cells are headers for their respective columns. Browsers typically show such headers by displaying them in bold.
   

4. If you like, you can select the entire table and change the font face to "Helvetica, Arial". Use the method mentioned in Chapter 2.
   
5. Preview the page, save it as "aboutus.html" and publish it. Go to your website and click the "About Us" link from your main page, and you should be able to see this newly created page. You can return to your main page again by clicking the "Home" button at the bottom of your "About Us" page.
   

Congratulations. You've created your first page with a table and used it to present data. In the next chapter, we will use a table to control the positioning of text on your web page in order to create a multiple column layout for your website.

Creating a Two Column Layout for Your Web Page

The aim of this section is for you to create a page that looks something like the following:

If you notice from the above picture, the page is a two column web page that will serve as your Reciprocal Links page. The latter is where you can place links to other sites that either link to you or that you find useful.

If you decide to keep the two column layout you create here for your site after you finish this chapter, you should go back to the pages you created in the earlier chapters and modify them. This allows your site to have a consistent feel. That is, if you want a two-column layout for your site, change all the pages on your site to have the same two-column layout. Likewise if you prefer a one-column layout or a three-column layout (and so on), change them to have the same layout. This is not a hard-and-fast rule, just a general recommendation; for example, as noted above, thesitewizard.com (at the time this was written) varies its layout according to its content: it uses a three column layout for its main page and a two column layout for its articles.

Creating a Two-Column Layout: Steps to Take

• The basic idea here is to create an invisible table that has the number of columns you want. The table is configured so that it fills the entire width of the browser window.
  
• Start KompoZer with a blank page.
  
• Insert a table with "Table | Insert | Table". When the dialog box appears, click the "Precisely" tab at the top of the dialog box. In the fields that appear in the dialog box, specify 1 row and 2 columns. Leave the default width of "100% of the window" as it is. In the "Border" field, enter 0 to replace the default border value. You are creating a table without any lines that occupy the entire width (100%) of the window. Click OK when you are done.
  
• Move your cursor into the left column (eg, by clicking in the blank space in that column with your mouse), and type the text shown in the picture above. The underlined items in my diagram represent links to the other pages on your site. They are the same links that you have been using in the earlier chapters of this tutorial. For your ease of reference (if you have been using the same page names that I have given in the earlier chapters), the links point to the following pages:
  
  • Home (index.html)
    
  • About Us (aboutus.html)
    
  • Feedback Form (feedback.html)
    
  • Reciprocal Links (links.html)
    
  • Site Map (sitemap.html)
    

  If you have forgotten how to create links, you can review chapter 2 again for the information. If you are using KompoZer 0.7.10 (and possibly other versions as well), you might find that the links you create do not appear to have the traditional blue underline. This is due to a longstanding bug in KompoZer and its predecessors, Nvu and Mozilla Composer. Don't worry - if you created the links correctly, they will be there when your website is viewed by a browser even if it doesn't appear while you are creating the page.
  

• Before you carry on further, save the page. When prompted for a title for the page, enter "Reciprocal Links". For the filename, enter "links.html". Don't get creative here (unless you know what you're doing): if you change the filename or the title of the page at this point, you will need to go back and change all the links that you have already created in the earlier chapters of this tutorial.
  

  Once you have saved the page, you can open it in your web browser to verify that your links were coded correctly and appear normal. You need to do this because KompoZer doesn't render the left column correctly, making it difficult for you to check visually in the web editor.
  

• Now move your cursor to the right column (eg, by clicking in it). Type the main content of your Reciprocal Links page here. If you have no idea what to type, use the example text given in the picture above as a temporary placeholder. The URLs for the links in the diagram are as follows:
  
  • "please let us know" ( feedback.html ). Note that this sentence is just a placeholder until you get real links to place here. Once you have something, you can delete the sentence "If you wish to exchange link with us, please let us know" or, at your option, leave it above (or below) your list.
    
  • thesitewizard.com's KompoZer Tutorial ( http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-1.shtml )
    
  • thefreecountry.com's Free Hard Disk Backup and Restore Software ( http://www.thefreecountry.com/utilities/backupandimage.shtml )
    
• I'm sure you have noticed that the width of the right column expanded as you typed your text. KompoZer mimics the behaviour of a web browser when rendering table columns that do not have an explicit width setting. While a column that changes its width dynamically according to its content is acceptable for most data tables, it is not what we want when we use (or abuse) a table as a container for our page content. Another problem is that the text on your page is centered vertically, that is, if you don't have much text in that particular column, it will appear in the centre of your page.
  

  To fix this, move the cursor to the left colum (eg, by clicking in it). Select "Table | Properties" from the menu. Click on the "Cells" tab at the top of the dialog box that appears. Click the checkbox for "Width" to select it ("Width" can be found in the "Size" section). Type 20 in the Width field. Change the drop down box for "Width" from "Pixels" to "% of table". Under "Content Alignment", check the "Vertical" box, and select "Top" from the drop-down box beside it. Click the OK button.
  

  The left side of the table should change its width. If the width is still not acceptable for your content, try again and use a different number till you are satisfied with the width of the left column.
  

  Once you are satisfied with the width for the left column, repeat the procedure for the right column. The width for the right column should be 80 if you used 20 for your left column (ie, 100% - 20% = 80%). If you've used a number other than 20 for your left column, subtract that number from 100 to get the value you need to enter. Remember to set the vertical alignment value to "Top" for this column as well.
  

• Many people use a different colour for their navigation panel (which is what the left column of your page currently functions as) to distinguish it from the main content of your page. To do this, make sure your cursor is in the left column, and select "Table | Table or Cell Background Color" from the menu. Select a colour other than black, blue or purple. Actually, you are free to select whatever colour you want. But if you select either black, blue or purple, you will find that some of the text becomes extremely difficult to read under certain circumstances. If you can't decide, choose one of the yellow-based colours. For example, I selected the "#ffcc66" colour. (Every colour you choose has an associated colour value. This value appears in the "Hex" field at the bottom of the dialog box. If you want to choose the same colour I did, click on the colours until you find one that has "#ffcc66" appearing in that field.)
  
• If you have not already done so, you may wish to change the size of the text and the typeface used to something other than the default. For example, I used the "Helvetica, Arial" option in the "Format | Font" menu for the text. You can also use a graphic image with your site's logo in place of the text "Shakespeare's Website". Make sure that the width of the logo is suitably narrow so that it can fit into your left column when your site is viewed with a 1024x768 screen resolution. You may also want to change the various titles or headers on the page, that is, "Shakespeare's Website", "Sites that Link to Us" and "Useful Sites", to use the header styles "Heading 1" and "Heading 2", as described in chapter 2. Doing so will automatically switch those pieces of text to use a bold and large font.
  

  When you're done with your changes, save the page and publish it.
  

How to Create a Three-Column (or More) Layout

Although you will not be creating any three-column page for the purpose of this tutorial, if you find you need such a layout, simply enter the required number (eg, "3" for a three-column page) instead of "2" for the "Columns" field when you create your table.

Special Cases

Sometimes you need to create a page that is basically two columns but with a single column either at the top or at the bottom of the page. For example, you may want to put a banner at the top of the page that spans both columns. Or you might want to put a copyright notice at the bottom of the page that stretches from the left side of the page to the right.

The easiest way to do this in KompoZer is to simply place the banner or text before (or after) your table. Another method is to create a table with more than one row, and join the cells in top row (or the bottom row) so that there is only one column for that row. I leave these special cases as an exercise for those interested.

Creating a Site Map

At this point, you have sufficient knowledge to create a respectable-looking website with multiple pages. You can now consolidate your knowledge by creating (on your own) a Site Map for your website.

A Site Map is a page that links to every important document on your website. Such a page is a useful aid to your visitors in case they want to locate a particular page quickly. It is usually present in well-designed sites with multiple pages, and is one of the facilities that improve a site's usability. Although your site has only a few pages at present, and all of them are listed in your left-column navigation panel, it is a good practice to always create a site map for your sites (unless the site only has one or two pages).

You can see an example of a site map by checking out thesitewizard.com's Site Map at http://www.thesitewizard.com/sitemap.shtml. You do not need to use a three-column layout for your Site Map though; the only reason thesitewizard.com's Site Map has three columns is because there are too many pages to list in a linear fashion. Your Site Map can be a straightforward list of links to all your pages if you like. In fact, it is best to keep your Site Map simple so that visitors can find what they want easily. Restrain yourself from making it into such a graphical feast that your visitors have to solve a maze of visual puzzles before they can locate your pages.

Overview: How a Feedback Form Works

There are many aspects to getting a working feedback form on your website: it is definitely more than simply designing a web form with KompoZer. By way of overview, here are some of the major elements that we will need. You do not need to understand every single detail at this point since I will take you item by item through the whole process later. However, it is useful to have the big picture in mind so that you don't get lost in the forest of details later.

1. The first thing we need is the web page containing the feedback form. You will be designing most of this page using KompoZer. By itself, the form doesn't do anything at all: your visitors can click the "submit" button till they are blue and you will still not receive their message. The task of sending the form contents as an email message lies with what is known as the feedback form script.
   
2. The feedback form script is essentially a computer program that processes the contents of the form sent by your visitor's web browser. It takes the raw message and formats it as a regular email message and then sends it via email to the webmaster. This script has to run on the web host's server (ie, computer) itself. You will be using a script custom designed for you by thesitewizard.com's Free Feedback Form Wizard. However, you will have to find a web host that supports the running of such scripts yourself. Not all web hosts allow scripts to be run on their server (computer).
   
3. Next, we have the "thank you" page. After the browser sends the message to the script, you will want to thank your visitors for their email. Even if you don't feel particularly grateful, you will still need some sort of page that will inform your visitors that their message has been successfully sent. This page can be easily designed using KompoZer.
   
4. Finally, you will need an "error" page. If a visitor mistakenly clicks the "submit" (or "send") button before he/she has finished typing essential elements such as their email address, the feedback form script will direct them to a page telling them that they have missed out components required in a message. Like the "thank you" page, this is a straightforward web page that can be designed with KompoZer.
   

In other words, for your feedback form to work at all, you need five major things: the feedback form, the feedback form script (program), the thank you page, the error page, and a web host that allows you to run programs (scripts) on their computer.

Step by Step Guide

• Get a web host with PHP 4.1 or above
  

  Your feedback form will not work at all if you use a web host that does not allow you to run your own programs (scripts) on their computers. Basically, if you use the free web space provided by your Internet Service Provider (such as AOL), or if you use a free web host, you will not be able to get your feedback form working. Note that there are even some commercial (paid) web hosting that do not allow you to run your own scripts.
  

  If you are looking for a suitable web host, you need to find one that supports the running of PHP scripts with an installed PHP that is version 4.1 or above. Generally, if a commercial web host supports PHP, their PHP version will satisfy this requirement. Do not use free web hosts, even if they have PHP support, since many of them do not allow PHP scripts to send email.
  

  You can find a list of commercial web hosts at http://www.thefreecountry.com/webhosting/budget1.shtml. If you are curious as to which web host I use, you can find the information in my review at http://www.thesitewizard.com/archive/webhosting.shtml
  

• Generate a custom feedback form script
  

  The next thing you will need to do is to visit thesitewizard.com's Free Feedback Form Wizard to generate a customised feedback form script. The wizard can be found at http://www.thesitewizard.com/wizards/feedbackform.shtml
  

  Read through the Wizard's introductory page. Choose to create the PHP feedback form script. Although you can generate any of the other types of feedback form scripts, for the sake of simplicity, this tutorial will only focus on the installation and creation of a feedback form that uses the PHP feedback form script.
  

  In the next page, enter the information requested by the form. Modify the URLs supplied below to contain your real domain. For example, if your domain is "such-and-such-a-name.com", use that instead of the "example.com" given below.
  

  • Email: (enter your email address)
    
  • URL of Feedback Form: http://www.example.com/feedback.html
    
  • URL of "Thank You" Page: http://www.example.com/thankyou.html
    
  • URL of "Error" Page: http://www.example.com/error.html
    

  Finally, read the licence agreement. If you agree to the terms, indicate it in the form, and click "Generate script" to continue.
  

  Do not close the web page that appears. Leave it open while you work on the next few steps.
  

• Saving the script
  

  Start up an ASCII text editor without closing your browser. Windows users can simply start up Notepad, which is found in your Start menu. Click the Start menu, followed by the "Programs" menu item (or "All Programs" menu item if you use XP), the "Accessories" menu, then the "Notepad" menu item. If you are a Linux user, you probably already know what an ASCII editor is; for example, you can use "Kate", "vi, "emacs", or one of the million editors available on Linux. Mac users are on their own (sorry) since I have no idea what text editors are available on a modern Macintosh. It is important that you do NOT use a word processor like Office or Word or the like. If you are not sure where you can get an ASCII text editor, there are many free ones available for different platforms at http://www.thefreecountry.com/programming/editors.shtml
  

  Switch to your web browser, and locate the section that has the header "Feedback Form Script". Select everything in the box below. If you are using Windows, one easy way is to simply click your mouse somewhere in the box and type Ctrl+A (hold down the Ctrl key and type 'a'). Then copy the text you have selected to the clipboard. You can use Ctrl+C in Windows, or use "Edit | Copy" from the browser's menu.
  

  Switch back to your text editor, ie, Notepad if you are using Windows. Paste the contents you copied earlier. In Notepad, you can paste by using "Edit | Paste" from the menu. WARNING: Do not modify anything in this page. Do not attempt to beautify it. Do not even attempt to add a blank line. This is not the user-visible portion of your web page. We will come to that later.
  

  Save the file as "feedback.php" and quit your editor. If you are using Notepad on Windows, please take the following steps instead:
  

  • Click "File | Save As". A dialog box will appear. Navigate to the folder or directory where you have kept all the web pages created in the earlier chapters. Name the file "feedback.php" (without the quotes), and click "Save" to save in in that same directory. Quit Notepad.
    
  • Unfortunately, in spite of what you specified earlier, Notepad automatically added a ".txt" extension to your filename. You will have to manually rename the file to "feedback.php". To do this, start up Windows Explorer and navigate to the directory where you placed "feedback.php".
    
  • If the file appears as "feedback.php.txt" in your Explorer window, skip to the next step. If it appears as "feedback.php" or "feedback", click the "Tools | Folder Options" menu in Explorer. Click the "View" tab. Look for a setting "Hide file extensions for known file types" and uncheck the box beside it to disable it. Click "OK". You should now be able to see the full filename "feedback.php.txt".
    
  • Now click once on the filename "feedback.php.txt". Explorer will allow you to change the filename. If this is not true, select the filename and hit the F2 on your keyboard. Delete the ".txt" extension, leaving the filename as "feedback.php" (without the quotes). Make sure there are no trailing dots - that is make sure the filename is really "feedback.php" and not "feedback.php." with a trailing dot.
    
  • When you hit the ENTER key, Windows will issue a warning about the dangers of changing filenames. Allow the name change to take place.
    

• Publishing (uploading) the script
  

  To upload or publish the script so that it can be used by the pages on your website, you will need to use a program for transfering files, called an FTP client (FTP stands for File Transfer Protocol). KompoZer, up to version 0.7.10, does not seem to be able to transfer a script file that is associated with a form despite what its "Publish" dialog implies. Basically, you will need a separate FTP client to transfer ("upload") the "feedback.php" file from your computer to your web host's computer, so that it can be used by your website.
  

  If you are using Windows, please refer to the following tutorial for instructions on how to publish the feedback.php file to your website: How to Publish or Upload Your Files to Your Website with FileZilla at http://www.thesitewizard.com/gettingstarted/howtoupload.shtml. Read the tutorial, follow its instructions, then return to this tutorial for the remainder of the steps.
  

  Non-Windows users will have to look for an FTP client and find out how to use it to upload the feedback.php file to your web server. There are numerous free FTP clients available for many modern operating systems. You can find a list of them on the Free FTP and SFTP Clients and Free Download Managers page on thefreecountry.com.
  

• Creating the feedback form web page
  

  By now, you should have no problem creating an ordinary web page. In fact, if you have been diligently doing the things mentioned in the previous chapter on multiple-column layouts, you will already have a four-page website (Home, About, Reciprocal Links, Site Map) with each page having a two-column layout.
  

  Copy the layout from the other pages that you have created and create your navigation panel as before. If you are using the two-column layout from Chapter 4, put your cursor in the second column and type the heading "Feedback Form" (without the quotes). You can beautify it in any way you choose (for example, make it bigger, change the font, leave a blank line after it, etc). We will insert the feedback form generated by the wizard below that heading. If you are using some other layout, put the heading in the appropriate portion of the page.
  

  Now switch to the browser window that contains the generated code from thesitewizard.com's wizard. This time locate the section in the output generated by the wizard that reads "HTML Code". Click in the box below and select and copy everything.
  

  Switch back to KompoZer. Click in the space under the "Feedback Form" heading that you created earlier. Once you see your cursor blinking in the appropriate spot in the second column, click the "Source" tab at the bottom of the Window. The HTML code for your page will be displayed. Don't move the blinking text cursor and do not click anywhere in the HTML code portion. Select "Edit | Paste" from the menu to insert the HTML code given by the wizard in the current location.
  

  Click the "Normal" tab at the bottom of the screen again to view your form. The form should be inserted in the correct portion of your page. You can now beautify your page any way you wish.
  

  To widen the input field for "Name", click the field (the text-entry box) beside the words "Name:", and select "Format | Form Field Properties" from the menu. A dialog box will appear for that field (box). Click the button "More Properties" to expand the dialog box. The default field size as generated by the wizard is "25". You can increase it if you want the field to appear wider, or decrease it if you want it narrower. Note that this field size merely sets the appearance of the box on the screen. It does not affect how much text your visitor can type into the field. Most browsers will simply scroll the text if the box is not wide enough for what the visitor wants to type.
  

  Simlarly, you can change the size of the box underneath "Comments:". Click the box, select "Format | Text Area Properties" and adjust the rows and columns to your satisfaction. As before, this change is merely cosmetic, and will not affect the amount of text your visitor can enter.
  

  The text appearing on the button can be changed as well. Right-click the "Send Feedback" button. That is, click the right mouse button while your mouse cursor is over the "Send Feedback" button. A pop-up menu will appear. You can either ignore it and select "Format | Form Field Properties" from the main menu or simply click "Form Field Properties" from the pop-up menu that appears. The "Field Value" line in the dialog box that appears should display "Send Feedback", which is the text that is shown in the button on the form. Change it to some other text if you wish.
  

  Do not change any value other than those I mentioned above. Most importantly, you should not modify the "Field Type" and "Field Name" values or the form will not work correctly.
  

  When you have finished making changes, save your page as "feedback.html" with a title "Feedback Form". You can change the title if you wish, but you should leave the filename as "feedback.html" since this is the name you supplied to the Feedback Form Wizard earlier, and the script generated relies on it.
  

• Creating the "Thank You" and "Error" pages
  

  To create your "Thank You" and "Error" pages, start with the layout that you created for the other pages of your site and insert the navigation panel as usual. Then insert the appropriate text as outlined below.
  

  The "Thank You" page typically thanks your visitor for sending his comments. Its main purpose is to provide feedback to the visitor that his comments had been successfully submitted. You can write anything you wish for this page. For example, you might want to say something like "Thank you for your comments. If your message requires a reply, I typically reply within 24 hours of the receipt of the message."
  

  The "Error" page is shown whenever the visitor submits the form without filling one of the fields. For example, if he/she fails to enter an email address when the form is submitted, the "Error" page will be displayed instead of the "Thank You" page. Your error page should inform the visitor that he/she needs to complete all the fields in the form, and that he/she is to click the browser's "Back" button to go back to the form to repair the error. For example, a possible message that you can use for your "Error" page is "There were errors in the form that you submitted. Please complete all the requested information before submitting the form. Click the 'Back' button on your browser to return to the form to fix the error."
  

• Publishing the Feedback Form, Thank You and Error pages
  

  When you have finished designing your pages, publish them with KompoZer. If you have forgotten how to do so, you may want to read chapter 1 of the KompoZer tutorial again.
  

• Testing the Feedback Form
  

  When all your files have been published, you should test your feedback form to make sure that it works. If something goes wrong, check the Feedback Form Wizard FAQ (Frequently Asked Questions) for the answer. You should also reread this chapter of the tutorial to see if you missed anything.
  

Conclusion

Congratulations! With this chapter, you have completed the basics of using KompoZer to design a website. You have also created a fully functional site, complete with main page, an "About Us" page, a "Reciprocal Links" page, a "Site Map" and a working "Feedback Form". More importantly, you now have the knowledge to use KompoZer to create, design and publish new websites as and when you wish.

Steps to Inserting Cut-and-Paste HTML Code into your Site

1. Start up KompoZer and open the page that you want to edit. To do this, click "File -> Open File", that is, click the "Open File" item on the File menu.
   
2. Click the spot on the page where you wish to insert the HTML code.
   
3. Switch to your browser and surf to the page where you can get the cut-and-paste HTML code. Select the code and copy it to the clipboard. To do this, drag your mouse over the HTML code to select all of it, click the right mouse button on the text and click the "Copy" item on the menu that appears.
   
4. Return to KompoZer. Click "Insert -> HTML...". That is, click the "HTML..." item on the "Insert" menu.
   
5. A dialog box will appear. Click somewhere in the empty blank space. Right-click (that is, click the right mouse button) and select "Paste" from the menu that appears. The HTML code should appear in the box. Click the "Insert" button.
   
6. The code will now be inserted into your web page. If this was a button from, say, thesitewizard.com's Link To Us page, the image of the button will appear in your window and not the raw HTML code you saw earlier.
   

Voila, you're done. You can now save the file and upload it to your website.

Other WYSIWYG Web Editor Pages

• Free HTML Editors and WYSIWYG Web Editors
  
• Free Programmer's Editors and ASCII Text Editors
  
• Dreamweaver Tutorials
  
• Nvu (free WYSIWYG Web Editor) Tutorials
  
• Mozilla Composer (free WYSIWYG Web Editor) Tutorials
  

New Pages

• How to Save a File with Notepad Without the TXT Extension
  
• How to Use Your Web Analytics Software to Improve Your Website
  
• The Fine Print in Web Hosting: Resource Usage Limits
  
• Pros and Cons of Putting a Blog in a Subdirectory / Folder
  
• How to Password Protect a Directory on Your Website
  
• How to Install and Configure PHP 5 to Run with Apache on Windows
  
• Free Customized CSS Navigation Menu Bar Buttons (Wizard)
  
• 6 Things to Note Before Changing Your Site Design
  
• How to Make Your WordPress Blog Search-Engine-Friendly
  
• How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking)
  

Popular Pages

• How to Start / Create Your Own Website: The Beginner's A-Z Guide
  
• How to Create a Search Engine Friendly Website
  
• Tips on Choosing a Good Domain Name
  
• Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3
  
• How to Design and Publish Your Website with Nvu (free WYSIWYG web editor)
  

Other Articles on This Site

• How to Make Money From Your Website
  
• How to Accept Credit Cards on Your Website
  
• How to Register Your Own Domain Name
  
• Which Web Host Do You Recommend? (FAQ)
  
• How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking)
  
• 6 Things to Note Before Changing Your Site Design
  
• List of all Topics and Categories on thesitewizard.com
  
• Comprehensive list of articles in all categories