 |
|
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 web 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 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 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 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 template tutorial shows how to make a text based navigation
bar.
Text based navbars are
used on many sites, and are quite okay 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.
Also, you'll need to use a
text based navbar or go up a level of difficulty by making images for
your navbar and using java rollover scripts if you want them to change
when the mouse moves over them.
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
Return from the Website Template Tutorial
to Building a Website
home
|
|
