 |
|
How To Make A
Website
Template Using HTML Tables
When
you make a website template you can use it as the basis of every page
on
your site.
This page gives you a step by step guide on how to lay out your
template using html tables.
How To Put Things
Where You Want Them
Tables let you position all the elements
of the web page.
These are like tables in a word processor, just a rectangular
arrangement of rows and columns. You put all the elements of the page
(header graphic, navbar, content, ads etc) into different cells or into
more tables nested inside cells.
The
picture shows the tables in a web page I've built as an
example. Table
borders are shown in red, and
aren't seen in a web browser.
This template has a
simple but effective arrangement with two rows
and two columns in the main table.
The
text is in a
separate table that is nested inside the main table's second row and
second column. The header graphic spans both columns in the top
row.
You can have a look at this page at www.web-hangar.info.
Making Your Own Website Template
It's
quite easy to make a website template using tables. I'll explain
how to make the two column website template shown above using KompoZer,
a free web design
software program, but most
other wysiwyg web design software will work in a similar way. (KompoZer
is an update of Nvu.) Even if you're using a different web page
design program you still should be able to follow the example.
Things
start getting a bit more complicated when you use CSS and virtual
includes to make it easy to update styles, navbars, headers and
footers,
but it is well worth the extra effort.
Creating The Table
At
the top of the page in KompoZer you'll see a menu-bar with File, Edit etc,
and Table.
Click on the Table
tab and you'll get an option to
insert a table. Select three rows and two columns and it will appear on
the page.
Set The Table Properties
Now
you need to set the table properties.
You can double click on the table, or click on Table in the
menu-bar
then Table Properties.
When the table properties dialog box appears you get a
few options. Click on the Table
tab first.
You
can reset the number of rows or columns
in the Table Properties box if you
need to.
There
is an option to set the height of the
table, but I leave that blank. Then the table changes to
whatever height is needed.
You can set the width of
the table (and cells) as a percentage. Then when people view
the table with different size monitors and different settings the table
will change width. There are problems with that though.
If
you use a variable width table to make a website template the text rows
can
become too wide for comfortable reading, and your visitors are more
likely to leave and find another website. I prefer to fix the
width in pixels to avoid that problem, and to control the
layout better.
For the
page shown above, the table width is 780 pixels, to suit an 800
pixel wide monitor display. It's safest to design for the 800 pixel
display because there are still a lot of people using it. If you make
the table say 1000 pixels wide anyone using the 800 pixel display has
to scroll sideways to read it, and that is a real pain. I normally
leave a site like that pretty quickly unless it has info that I
can't find anywhere else.
If the
border is set to zero pixels it won't be seen when visitors see the
page online.
Spacing is the gap between cells
measured in pixels. It can be set to zero pixels for this table.
The
padding is the distance the text or image is in from the border of the
cell, measured in pixels again. For this table it can be zero.
Experiment
with border widths, spacing, padding
and other table or cell properties to see what happens.
When you've set the table properties as you want them click Apply or Okay.
Set
The Column Widths
After the table
properties are set, it's onto the column widths which you set with the
cell properties. Open up the table properties dialogue box again if you
closed it, then click on the Cells
tab.
Because you'll be combining
the two top cells into one to take the header graphic, you'll need to
set the cell widths in the second row.
Click the Next
or Previous
buttons until the first cell in the second row is highlighted. This
will be the column for the navbar.
When I make a website template I
normally make this column around 160 pixels wide and put the navbar
there in a
virtual include.
The right hand column takes up the rest of
the table width. With a 160 pixel left column and a 780 pixel table
that's 620 pixels.
Set the horizontal alignment of
the text or image to top, middle, or bottom, whatever you need, and the
vertical alignment to left, center, right, or justify (you'll usually
want left).
You
can set background colors of individual cells as well, which is good
news if
you want to have the left hand column a different color.
Set
Up The
Header Graphics Row
If you want
your header graphic to span the whole table it's quite simple. Click in
the top left cell, go to Table
in the menu-bar, and click on “Join
With
Cell To The Right”. Alternatively highlight both cells,
right click in them and click Join
Selected Cells.
The whole top row becomes one cell and
the header
graphic can go from side to side of the table.
You can change the header graphic on every page at once by changing the
image in the header graphic file.
To make it more versatile though, you can put the header graphic in a
virtual include. Then you can change it anyway you want, e.g. you can
add text as well, not just
change the graphic.
Set The Rest Of The Cells
Have you ever looked in a search engine's results page and seen a
description that just repeats the navbar. Here's one I just found in
Google: "Home · Landscaping · Utility · Septic · Specialty ·
Gallery · Company ·
Find A Dealer · Legal · Privacy · Contact · Site Map. Designed by:"
It's pretty ugly, and it will cut down on the number of visitors your
site gets. It is because search engines can use the first text
they find on a page as the description, and the navbar was in text
rather than graphic buttons.
It shouldn't happen if you use a meta
description tag, but to be doubly sure there is a little
trick to use in when you make your website template.
You can put a small cell above the navbar, so the first text the
search engines read on the page is the content.
To
get that extra cell, make the table two rows and three columns as we
have already done. The
top row is for the header graphic. Highlight the right hand column,
second
and third rows by clicking and dragging. Right-click in the highlighted
area. In the dialog box that appears, click on Join Selected Cells.
Then
select the little cell that will be above the navbar (middle
cell, left hand column)
and set its height to something small like 8 pixels.
You can see that little cell in the Web Hangar template above. It's
right below the "Han" in "Hangar".
Make
A Content Table
To put a table in
the lower right hand cell for your content, click in that cell and then
Table
in
the menu-bar, Insert,
and Table
just as you did before. Then
set the number of rows and columns to one. Click Okay and the table
appears.
Now go into the table properties and set
the table width to 500 pixels and the table alignment to Center. You
can set the background color too. Just remember that dark text on a
light background is best for readability.
Having a table like this for the content lets you make the page look
better, keeping your text
away from the navbar and the table borders. You can manage without it,
but you'll need to set the cell padding to 5 or 10 pixels or even more.
That can affect how other parts of your layout look.
Experiment and see what suits you. I do like to use the content table
for better control of the web page layout when I make a website
template.
Set Up The Navbar Cell
About the only thing you'll need to do in the navbar cell (left hand
column, bottom row) is to set the vertical alignment to Top.
I put the navbar in a virtual
include to make updating easy.
Add
Navbar, Virtual Includes, And Link To The Stylesheet
When the
tables are set up the way you want them add in all the extras you
need. I put in a virtual
include for a footer and also another one at the top of the page in
case I might want to put an ad or a notice on every page.
If I don't want the ad on some pages I just
delete the virtual include on those pages.
If you're
using an external
style sheet (CSS) to make site-wide changes to styles easy,
then
link to it in your template as well.
Save
Your Template
Save your template as filename.html or
filename.htm. I normally just name it my-template.html
When
you use it to build a page, do a Save
As, and save the page with the file name you want, which
should include the keyword you are targeting on that page.
Using
Other Software
KompoZer is free and it does a
good job, but there are quite a few other programs you could use. If
you use another program you'll have to search around for the Table
options, but there should be similar options to KompoZer.
Make
a Website Template That Suits You
The two column
template is a pretty good one for this type of content site. It may not
suit your needs though, so lay out your design on a sheet of paper then
use tables to build it in your favorite web page design software.
Another
Layout
The Alzheimer's site
shown here has a different layout with three columns. I did that to
have an ad above the fold (visible without scrolling) on every page.
The ad and the navbar are both in virtual includes so that I could
change them on every page just by changing one file.
The space under the ad could be used for a newsletter subscription,
xml/rss feeds, testimonials or what have you.
You
Can Save Time And Effort By Buying A Template
Making
a web page layout using tables is quite simple. If you're happy to use
a text based navbar, it's not hard to create a website template like
this that works well.
But if you want to make a website template that's a bit more
attractive and upmarket with nice buttons in the navbar, particularly
if you want them to change when the mouse goes over them, it's harder
and more time consuming. It needs more programming skills and
you have to make the buttons in a graphics program, or buy them.
It
can definitely save time and effort to just buy a professionally
designed template and that allows you to get on with the most important
part of building a website – writing the content.
Next Page: Setting CSS
Font Styles
Return
from How To Make
A Website Template to Building
A Web Site home
|
|
