| APS 6020 Home Page | Before you start | University Regulations | Setting up Kompozer | Using Images | Page Layout | APS Home Page |

APS RTP  - Page Layout

The Visual Impression

A very important aspect of constructing a web site 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 RTP Using Images and Colour. An equally important aspect of web site design is how the information, images, logos and navigation are arranged on the pages. Having a consistent style to the all of the pages on your web site helps to unify your web site 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 web sites 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). 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. 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. In this example the table is very simple, just one row, 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.

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, select the number of rows and columns 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 dialogue box. Set the values for table width. If you click on the 'Cells' tab, you can also set individual widths for each columns of cells. In addition you can set the vertical and horizontal alignment of the content of each cell and the background colour of cells. This 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