Method 1: Using a text based menu and in-line styles

  1. Open the home page in KompoZer, type the heading. Using the Styles box to select Heading 1. You may right click on the <h1> tag in the status bar of KompoZer and choose in-line styles. Edit the in-line style to what you want it to be. Suggestions are as follows:

    • Text – Font weight of Bold, Alignment Center; Font Size of 40px, Colour Dark Green

    • Background – colour grey; Image selected as the strawberry from the images folder (inside the site folder); Tile – don't tile; Position – Left and Center (vertically).

    • Borders – All four sides the same – Style double, Width 5 px, Colour dark green

    • Box – Width 80%; Left Margin 10%

You are advised not to change any of the other settings. Click on OK to keep the style when you have decided the style appropriate for the client's specifications.

  1. Select a background colour for the page in the Format menu.

  2. On a new line type the following which will form a text-based navigation line when the files have formed. (Note the vertical line, which is in different places on different keyboards – Usually it is somewhere on the right near the enter key). [Note that some achieve a similar effect using the square brackets]. As an attempt to match the client's requirements, you should also insert an image of the berry just before each word.

Home | History | Fruit | Veggies | Flowers | Specials

  1. While on the navigation bar line, select the style as paragraph.

  2. Press the enter key and on this new line type the word “Content” as a reminder that this is where the text will go which will form the information on each page.

  3. Select the word Home from the navigation line. Use the Link button from the toolbar to open the dialogue box to make the link back to itself (index.html). Include alternate text such as Home page.

  4. Select the word History from the navigation line. Use the Link button from the toolbar to open the dialogue box to make the link to the history page (history.html), including alternate text.

  5. In the same way make the links for the pages fruit, veggies, flowers and specials.

  6. Save the page.

  7. When it has been saved, then also choose save as, to save the identical page as history.html. Also save the same pages as fruit.html, also as veggies.html, flowers.html and specials.html. This will re-create the file structure of the site with each page having a text based navigation bar that is linked to the relevant pages of the site.

  8. Open each page in turn, and edit the Title, Heading and content to what it should be.

If this is not the effect you want, you should consider using full CSS to design your page.