Page layout

You should have noticed by now that the websites you have visited so far in this module usually have certain common elements which appear on each page. For instance, did you notice any of the following on the websites you have looked at (see diagram below for reference):

• A site title and the page title?

• A link to the home page?

• Any sign of a logo or graphic that gave the site its identity?

• A place for graphics and menus (sometimes combined) and a place for text on each page?

• Each page had a similar layout?

• Buttons that help you to go back, forward, up or home, as required?

  

Graphic design

The graphic design element of your page could consist of two main features:

1. A colour scheme - background colour(s), text colour.
2. Graphics - picture, logo or some other graphic design element.

Allow yourself to be influenced by good ideas, but do not copy designs or logos exactly. You could copy images and make significant changes to them. Good advice, though, is to keep it simple. 

Remember that some of the sites that you visit are top quality sites. They were designed by people with considerable experience in graphics and took a long time to perfect.  We recommend that you enlist the help of learners and colleagues when you work with and learn to use graphics programmes.

Main graphic elements

The main elements of a page that could be affected by graphic design are:

Logo   A possible banner across the top. This could include a menu Possible Menu Bar   A main text area that could have a background colour, background image or a text colour scheme.

The skills that you will have to acquire to ensure attractive layout are:

• A knowledge of tables (border width, cell and  background colours, merge cells)
• A knowledge of text attributes (text and link colour)
• A knowledge of graphics
• A sense of which combinations of colours, graphics, and fonts work best together.

Tables can also be used to assist in page layout. Some examples of websites demonstrate this:

In this example, we refer to the contents page of the Living Africa site. We hope that you will agree that it is an attractive site. Tables have been used to space the elements on the page. The table border width is set at 0, and the table lines are therefore not visible.

If one looks at the same page with the border width of the table set at 1 (and lines in the table therefore visible), you will see how the table has been used to separate the graphic and text.

In this example, we refer to the Land section of the Living Africa site.

Once again, looking at the same page with the tables visible, you will see how the basic elements are placed within a table. In this case, there are two tables. Notice how empty cells in the table are used to create white space on the page, which is important so that the page does not become overcrowded with text or graphics.