Create Your Own Website Templates Or Modify One To Suit You

Tutorial 6

Author: Ian McAllister Title: Create Your Own Website Templates Or Modify One To Suit You

Your website template is just a device to save you a lot of time and effort. Instead of designing a new page every time, your template contains what you will use for every page, and you just put in the extra stuff that is different for each page. It also means that your visitor sees the same layout for each page, which makes her feel less confused.

Good HTML templates are usually pretty complicated. I'll show you three very simple templates here, to demonstrate the basic ideas, then I'll create a video in the template section to show you how to undertand complicated templates.

There are three main kinds of templates. Tables, CSS, and Frames. Never use frames. CSS is best but is too much for beginners to learn, so I'll demonstrate the use of tables in your template.

Three HTML templates

You'll find three HTML Templates in this lesson. If you have worked through my other lessons (especially the one about tables) you already know why I designed them so simply. You can understand the fully commented HTML code.

Adsense has passed its best but still can be profitable. If I remember I'll put a link here to a free book about how to profit from Adsense arbitrage. I'm just updating the site, and may not get round to it. To use Adsense just copy your Adsense block into the right place in your template and it will appear on every page.

My web template designs are

fast to load,

will look good (I show you how to set colours to suit yourself) and be easy to read on all modern screens

use a table insted of frames for the two-column version.

The only problem with them is that they are too old-fashioned, so you should modify a more modern template to suit you.

Get your HTML templates

Click on each template below, and save the resulting page to your HTML directory (You do have one don't you? If you don't, make one now.) on your hard disk. Make sure you save it as HTML not as text.

Save the HTML files to any name that suits you.

Study the first template, especially the built-in comments, until you understand what I am doing, then the second, and then the third. Each one demonstrates tricks with tables that will help you to understand complicated templates that use tables.

You could click the link at the foot of this page to get the free CSS template that I use. On the same page Andreas gives you a link to other free templates. Make sure that you get one using tables instead of CSS if you are a beginner.

Change the templates to please yourself

Learn how from my video. Templates give a consistent feel to your site if you use them throughout. But make sure the feel is one you like.

You are sure to want to make some changes. For instance, you may want to change the colour that appears outside the table, or the background colour in the left hand column.

Click here to use the colour charts in the third lesson of this series.

White is the best colour for your main text panel, with pale cream or pale grey a fairly good second choice. The only other choice that is easy to read is white text on a blue background. However, if your visitor tries to print the page, it will come out as white text on a white background, because the background isn't printed. In other words, nothing will print.

It's still best to choose black text on a white background. People like familiar things, such as black text on white books. Whatever colour you choose for the left column, make sure the text is in high contrast to it. A red title doesn't show up well against brown, but a yellow title does.

You'll notice that I now put my main column in the left, and my navigation buttons on the right. That is because visitors look first at the top left of a page, and I want them to see the article first. That is also a good reason to put your adsense block at the top left.

Don't forget your contact details

Change the contact details. You don't want people to contact me instead of you! Yo'll see that I now have a button at the foot of the page to take you to a contact page. That's another option.

Write-protect your template

When your template looks just as you want it, save it and write-protect it. Then you can't accidentally save another file on top of it.

To do this in Windows, click My Computer to get to the file, right click on the file, choose Properties, and place a tick in the read only box.

Using templates for a unified site

Now you want lots of web pages with the same general feel to them. Start each by opening a template, and saving it immediately before you forget, with the name of your new page (pagename.html). Change the name to pagename.php when you upload it to your website.

Then enter your new text and graphics for the page. Once you are accustomed to the templates, you will probably want to remove the "place-holders" for the title and the text. For now, replace the placeholders with whatever you want for each page.

If the template won't let you enter anything, it means that it is still write-protected. You will have to remove the write protection from your new file. In Windows you just unclick the write protect box.

Find the places in the templates where you can insert your text and graphics. Change the headline, and remove the words about "text here"

What will you put in your templates? Free lessons

Take a free netwriting Masters' course. It will show you how to gently guide your visitors in the direction that you want them to go.

The best helper for writers that I know (and I use it all the time now) is at
http://healthforu.info/go/essayhelp.php

Next lesson - How To Use Pictures