Page layout

The task requires that you produce a website to meet the specifications of the client. That is a site that satisfies what the client wants. So you should continually consider the client's specifications while you are designing the site. Later, we will also check that your site also meets valid html code specifications.

Navigation

Read the article about site Navigation. The article includes a discussion of some different methods of achieving easy site Navigation for the client. Three methods are indicated here to produce the desired effect, or an effect near to what the client asked for. These methods are:

  1. Using a text based menu and in-line styles

  2. Using Tables

  3. Using CSS (Cascading Style Sheets - also see the notes on using CSS in KompoZer)

The 3rd method is preferred as the resulting file size of the site is then smaller, allowing for quicker downloads. By learning to design in terms of CSS you will also be able to produce much more powerful sites, without making the code excessive. The main difference between the look of the site for each is visual effects when browsing, and the size of the files (which effects the download speed for the pages).

With each of the methods the first step is set-up the folder structure for your site on your computer. The following steps help you to do this. (There are other methods to achieve the same effect). Check the design specifications to adjust these instrustions where needed to meet the design specifications of the site.

  1. Start with a folder where you will construct your site. (We will call this the site folder).

  2. Place an images folder inside the site folder. Save any images you want to use into this folder.

  3. Open KompoZer and save a page into your site folder with the Title of “Jim's Produce” and a file-name of index.html. This will be the Home page.

  4. Save the page.

  5. 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 create the file structure of the site with each file being the relevant page of the site.

When all the relevan files have been created, you should then move on to the method you are going to use to create your site.