intro | design software | page elements | site structure | measurements | fonts | images | colours | layout | tables | templates

the studyzone | web design | course tasks: 1 | 2 | 3

the basic principles

page layout

On the web there are no obvious dimensions - the area available is as wide and as deep as people's screens. So if you just start typing at the top left your web page text will appear right in the top left corner of their browser.

Paragraphs of text will simply stretch from one side to the other and, specially on today's larger screens, will be too long to read comfortably and will also look silly.

Images will either break up the text or just get lined up against the left of the window and appear pretty haphazard. Lining up elements on the left and right will be impossible.

In the early days, and still seen today when beginners are at work, people tried to make amends by centering everything. Browsers recognise left, center and right alignment but the results are pretty useless.

You will have prepared a rough layout of how you want your page to appear and now need some method to put things where you want. The simplest and still most popular method is to use tables.

An alternative method, using CSS script to specify positioning is very good but not at all easy to learn. Once you have mastered tables, however, and the measurements they require, then you will be better placed to move on to the newer system if you wish. But for those who do not want to work in code view, preferring to work in a design view to arrange things, then, until someone comes up with an application to make that simple in CSS, tables are the best answer.

You may encounter layers on your web travels. These used to be popular. You could draw a rectangle anywhere on the page area and enter text or images, rather like using text boxes in Word. They provided a quick way to make better-looking pages but have major drawbacks - mainly in the way different browsers handle them - and are now not recommended for good web design.

If you just type it ends up in the top left corner.

You could try right alignment

Perhaps not


OK, how about in the middle?

Well, it kinda works but, boy, is it boring . . .

let's add an image . . .

the worst part is when you have lots of text and it just stretches from side to side and this really isn't good enough.