Banner Head

APS Level 4 Home Page - Introduction and Software
APS Level 4 University Regulations and Style Guide
APS Level 4 Using Images and Colour
APS Level 4 Before You Start Your Website
APS Level 4 Setting up the KompoZer Program
APS Level 4 Page Layout
Previous Year Level 4 Student Web Pages
Department of Animal and Plant Sciences Level 4 Pages


APS Level 4  2010 - 11  About Page Layout


The Visual Impression

One of the most important aspect of constructing a website is the visual impression the pages make upon the viewer. You will have learned something about the use of images and colour if you have looked at the link APS Level 4 Using Images and Colour. An equally important aspect of website design is how the information, images, logos and navigation are arranged on the pages. Having a consistent style to all of the pages on your website helps to unify your website visually.

Page Width and Printing

It is important to ensure that your web pages are set out in such a way that your viewers will be able to print out your pages easily on an A4 printer. I am sure you have all experienced web pages where the text to the right hand edge of the page has been cropped just a word or two short of the line ending by the printer? This happens often with American websites because the American 'letter paper' size is slightly wider than European A4 and the page layout has been allowed to exceed the recommended 850px limit for A4 pages.

To ensure that your web site will print on a standard A4 Inkjet or Laser printer you must limit the width of your web pages to not more than 850 pixels.

There are two main ways to do this -

1) By putting your page content into a 'Layout Table'.

2) By the use of Cascading Style Sheets.

Unless you are an experienced web author I do not recommend that you use Cascading Style Sheets (CSS) for your first attempts at making a website. I will therefore concentrate upon the first method above - the use of a layout table.

A layout table has quite similar properties to the table properties you will be familiar with in Microsoft Word for example. In Kompozer there are two methods of designing a page layout table.

Method 1. Precise Method - Screen Shot

Kompozer Precise

From the main menu click on 'Insert', choose 'Table' and then choose the tab labeled 'Precisely'. From the option boxes you can then choose the number of rows, columns, the width of the table and if it has a border or not. In this example the table is very simple, just 1 row and 1 column, it is 850 px wide and has a border. If you do not want a border set the border value to 0.

On screen the table with the settings above will look like this:

Single Cell Table

As you add content into your table, it will expand downwards. Be aware though that if you add an image that is wider than your table width setting, the table will expand to fit the image - and if it becomes wider than 850 pixels, it will be too wide to print on an A4 printer. This is why it is important to make sure that your images are sized correctly to fit correctly on the page.


Method 2 Graphical Method - Screen Shot

Table Graphical

If you select the first Insert Table tab 'Quickly' (it is also the default in Kompozer) you can, by moving the mouse over the on screen grid, select the number of rows and columns in your table graphically. However this method does not give you very much control, especially over table width. On screen you will see something like this with the above graphical settings.

Kompozer Table Graphical

Once you have the table on screen, you can then set the width of the table by placing the cursor in the first cell and right clicking with mouse. You will then see a sub menu. Choose 'Table and Cell Properties' and from that dialog box. set the values for the table width. If you click on the 'Cells' tab, you can also set individual widths for each column of cells. In addition you can set the vertical and horizontal alignment of the content within each cell and also set the background colour of cells. This method provides great flexibility for you to set out the various elements of your page design.


Layout Examples

Here are some examples of the way in which tables are used to set out web pages

Layout Tables