Next lets update our homepage. From the menu on the left, select content. This will bring up your site explorer. It looks pretty bare at the moment but don't worry, it won't be for too much longer. Click on the blue 'Home Page' link at the top of the explorer. Now you will be presented with the edit homepage screen. Using the editor tools described here, create the content for your home page. If you wish, you may upload images first and import them from the editor. Its completely up to you. 

For now you shouldn't worry too much about the content on your homepage, we can come back and change it any time we like. Once we click on the 'Update Content' button, we will be returned to the site explorer where we can have a look at our changes by clicking on the magnifying glass under options for home page.

By default, any installation of Clear-Site will contain a homepage so we only have to create 3 pages. From the 'Content' menu select 'Add New'. This will open up the add new ... screen. Choose 'Content' from the list here and this will open up the Add Content List screen. Enter 'Consult' as the content name and add the content list. Do the exact same for 'Products' & 'Contact'. 

Our site explorer should now look like this. The three new content lists are empty for now, we will come back later to fille them in. 

Images are uploaded through the upload screen. You can get here by selecting 'Uploads' from the 'Content' menu. Once uploaded we can then use images in our editor to create rich content. You may upload as many images as you like but be wary of the size of them as large files will take longer to display and the public page will load slower. We can view the image properties or delete unwanted images from the image manager screen. 

The rest of the content lists in our configuration will be built using the exact same techniques as above. So by the end of this step, we should have a populated (but not necessarily finished) site explorer. 

The other style options are completely up to yourself. Check out the style centre help section for information on the different parameters here. If you use style images then much of the Colours Fonts & Styles section will not apply. For the sake of the tutorial we will examine a few different options here.

First of all lets say we're not going to use style images. Uncheck all 3 images boxes under 'Images'. Under Colours Fonts & Styles select whatever details you want. I've selected Verdana as my Font, a maroon colour (#660000) for the primary colour, a dark colour (#330000) for the secondary colour, a red colour (#CC0000) for the highlighted colour and a white colour (#FFFFFF) for the text. I've also enabled the blending & highlighting options. For the time being, I'm going to leave all 3 options under Misc (breadcrumbs, Smart-Menu & Hitcount) checked. After clicking on the Update Style button we can now see that our homepage looks like this.

Ok so now lets switch on the style images. First of all we need to create and upload 2 suitable images. In an image editing program (such as photoshop), create 2 images. A header image (should be 760 pixels wide and between 100 & 200 pixels high), and a background image (doesn't matter how big it is but the smaller it its the more quickly the public pages will load. For this site, I have decided not to use Smart-Menu so we don't need to create a side image. I have however created a 'bottom' image which complements the header and background image quite well.  Below are the 3 images that I have created for my pages. The header image and background image can be uploaded from the style centre whereas the bottom image can be uploaded from the upload screen.

• Header Image
• Background Image
• Bottom Image

Save your 3 images to somewhere on your pc and upload the header and background image from the style centre and the bottom image from the upload screen (this will make sense in a moment). Finally tick the check boxes for the style images and untick all 3 Misc check boxes and save the style settings. Magically your home page will now look like this.

Now lets see how the Bottom Image can be used to make our pages look better. At this stage it should be uploaded to the system and we can insert it into our content through the editor. The Bottom Image was designed to work in conjuction with the Header Image and the Background Image to give a rounded look to the web pages. 

Open up the 'Contact' page from site explorer and edit the content item in the list. Place the cursor on the bottom line of the editor. Now click on the insert image button () from the toolbar of the editor. Select the Bottom Image from the dropdown list and allign it to the bottom. You don't need to add a description or a border, just insert the image. The image will now appear at the bottom of the editor, click on the update content button and preview your new homepage by clicking on the magnifying glass under options for the 'Contact' page. You'll notice that the page now contains an image at the bottom which makes the page appear to have a round border. See here for a screenshot.

Do the same as above for the remaining 3 pages in your site and your site will have a uniform look and feel to it.

For this site I've decided to make the menu through hyperlinks. We've all seen hyperlinks (this is one), basicly they're just text that we can click on to go to different pages or files on the internet. 

We'll start off by opening the edit homepage from site explorer. (just click on Home Page in the explorer). In the editor, insert a new line of text at the top of the page. These will be the text for the four different pages on the site (Home, Consult, Products, Contact). I've used a vertical bar (shift + the button to the left of z on the keyboard) as a seperator between each of the items.

Next select the text and use the right justify button on the editor () to make the menu appear on the right.

Now we need to add up the hyperlinks for the other topics. First of all, use the cursor to select the whole of the word 'Consult'. Next select the insert hyperlink tool from the editor toolbar (). This opens up the insert hyperlink dialog. Simply enter the full url to the 'Consult Page' (you can copy and paste this from the address bar after previewing the 'Consult' page by clicking on the magnifying glass in site explorer) and click on insert link. Do the same for the last two links and your menu now should look a little like this.

Finally I've used the text colour tool () in the editor toolbar to make the hyperlink text red.

So thats the homepage done, now do the same for the other 3 pages in your site explorer. It takes a while but is worth it if you want a clear, simple but professional looking menu. Of course you can also hyperlink from an image and this feature could make for some very interesting and diverse menus.

The most difficult part of setting up a site most often can be deciding on the structure of the site (i.e. coming up with the list from the top of this page). Once we have this defined, its quite easy to build in Clear-Site. By following the steps in this tutorial, you should be able to apply the same practices to your own site to achieve success for your website.

Click here to view the final site.