Website Template Tutorial

This website template tutorial gives all the steps you need to build a web site template suitable for your small business or home business. This page gives a step by step overview of the process, and the links give the details you need.

If you follow through the template tutorial, you'll end up with a versatile two column template. It's easy to update the navbar, header and footer, or to put an advertisement on every page. Small changes can give completely different looks to the template, so you can get the style that you want.

And if you decide you'd like to change some aspect of your site's style after you've built a few dozen or a few hundred pages, that's easy to do too.

Once you learn the basics you're not restricted to this template. You can create a website template the way you want it.

After your template is made you can use it as the basis of every web page which will save time and keep your styling consistent throughout your website.


The Web Design Software

There are lots of different web design software programs you can use. I'm using KompoZer for this website template tutorial which is a free wysiwyg program. You can download it and follow through with the tutorial if you want.

KompoZer is quite good enough to build your small business website with. It's not perfect, but there are workarounds for the few problems you might come across.


The Template Layout

This website template template tutorial shows how to build a two column template. Two column versus three column is a matter of choice, with the two column seeming "friendlier",  more like one friend talking to another.  The three column layout seems more official and impersonal.

If you want a three column style, it's just a matter of adding one more column as you design and build your template.


Designing Your Template

You should have a good idea of what your template will look like before you start making it with your web design software. Look around at other top ranking websites in your niche, and get an idea of what is suitable. Design your page on paper first, and then build it.

Creating The Layout Using HTML Tables

Laying out your small business website with HTML tables gives good results and is quite easy to do.

Creating the layout using HTML tables shows how to make the table, and set table properties and column widths, plus how to make a row for the header graphic, a cell for the navbar, and a table for the content.


Styling Your Template With CSS

CSS stands for Cascading Style Sheets, and it's a great way to style all the elements in your template because then they're so easy to update. If you've built 50 pages and decided that in hindsight the colors are wrong, or the headline font is too large, you can change the entire site in minutes by changing one CSS file.


Setting  Font Styles Using CSS

If you don't want to use the default font styles for the headlines and body text on your website, you can specify how you want them to look.

Setting font styles using CSS shows how you can change colors, sizes, and the font families.

Some fonts are more readable on a computer screen than others, so this page tells how to choose and set the best font family. Also some of your visitors will want to increase the font size on their monitor because their eyes aren't as good as they used to be, so the template tutorial shows how to specify font sizes so they can do that.


Setting Background Colors  And  Images

Using CSS to set background colors and images means it's easy to change them if you change your mind. You'll learn how to set them, plus the advantages and disadvantages of background colors versus background images.


Setting Table Styles

You can set table styles with CSS. The website template tutorial shows how to center your table using CSS, how to set the background color of the table, and how to set the alignment and size of body text if you need to.


Putting A Border Around Your Web Page

Sometimes you want to put a border around your web pages to make them look better. You could use HTML, but it's time consuming to change the border if you want to because you have to change every page individually.

This page shows how to use CSS to put the border around the table. Then its very easy to change the color, size, style or even to delete the border.

Linking From Your HTML Table To The CSS File

After you've styled your website template with CSS, you need to link all your pages to the CSS file or the styling won't work.  The website template tutorial shows how on linking from your HTML table to the CSS file.


Linking CSS Styles To An Item On The Page

For some styling on your web template you'll need to apply the style rule to a particular item on the page, for example when you put a border around a table.

You'll need to link the CSS styles to the item. This page shows how to do it.


Making  Site Wide Updates Easy With Virtual Includes

Virtual Includes are a way of putting the same content on many different pages and being able to update that content easily by changing just one file. It's good for navigation bars and menus, for headers and footers, or for putting an advertisement on every page.

Adding virtual includes for easy site wide updates shows how to add virtual includes to your web site template.


Making A Navigation Bar

The website template tutorial shows how to make a text based navigation bar. Text based navbars are used on many sites, and are fine for a small business web site.

You'll learn how to remove the underlining, how to set custom colors, fonts and styles, and how to make the color or other styling of the navbar item change when the mouse is moved over it.


What To Be Aware Of With Subfolders

Sometimes, if you have a large site you'll want to use subfolders in your website organization. For example if you had a car site you may want all the Ford pages in a subfolder called "ford".

You'll need to change how you link to virtual includes, and how you make links for the navbar. What to be aware of with subfolders shows what to do.

Build Or Buy?

Creating your own website template costs nothing, but it takes time. You can have frustrating problems with things not working properly, and it can take hours to troubleshoot.

Buying a template isn't that expensive, and you can get a very professional look. You can buy templates from sites such as Template Monster, or subscribe to a template service such as Dream Template. Some web design programs come with a selection of templates.

If you're building a small business website, possibly the best solution is Site Build It, which not only has a good selection of customizable templates, it has every other tool you need to build a website.


Next Page: How to lay out your template with HTML tables


Pages In The Template Tutorial



Return from the Website Template Tutorial to Building a Website home