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

templates

You want each page of your web site to be consistent, with the key elements like headers, banners, navigation menus, logos and footers in the same place. You also want the text to be consistent and layout to be retained or only vary slightly.

Care in creating your first main page will make a huge difference to the amount of work you have to do later.

Spend time getting the layout right. Fix those widths and heights and any spacing or padding. Then think about what every page requires. That's likely to be:

A banner or header display / graphic, maybe with a logo or telephone number or strap line.

Enter the text or make the graphic and insert it or them there. If you haven't got the graphic ready put either an image placeholder or any graphic the right size in for now.

Make the menu or navigation bar and add the links required for each item. You won't have made the pages yet but you can decide now what they'll be saved as and can use that name for the hyperlink.

Put a heading on the page, set its font size and style. Add some sample content. Use lorem ipsum design text to fill space in the sample page (and any page until you have real content).

Enter and adjust as required any footer text, dates, design or any other information to feature on all or most pages.

Add image placeholders or correct size images where images are to go.

When you everything that is common to most pages in the layout and you have adjusted measurements and sizes so that it looks right, save the file as sample1 or something like that.

You can then make all the other pages by simply saving the file again with the required names - make sure they are the ones you used for the links in your menu!

Open each page and change the headings so, at least, you can tell one from the other. Save them.

You now have a working web site. Check it by previewing it in your browser. Click the links and the different pages will appear. Hopefully.

All you now have to do is update the content on each page. Of course, if you'd followed my instructions you would have it ready but, I know, you couldn't wait to get designing could you?! It's OK, we all do it. But if you had rushed ahead and created all the pages before getting the links right you would now have the laborious task of changing them on every page. If there were layout problems then, again, you'd now be fiddling around with measurements over and over. That gets tedious. Sometimes it's unavoidable but the better that first sample page the less trouble you'll have later.

There is a Dreamweaver 'template' type of file but this is seldom used nowadays, the simple method above achieving much the same result. A better solution is to use a CSS stylesheet to control things - but that is something for another day. One step at a time.