 |
|
How To Make A
Website
Template Using HTML Tables
This page shows how to lay out your website template using html tables.
It's part of complete
tutorial showing showing how to make a website template.
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 above 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 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 a two column website template 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.
Inserting
a table
|
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, click OK, and it will
appear on
the page.
Other Layouts
You can have 4 rows, and use the bottom row for your footer.
For a 3 column layout, just add another column.
Setting 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.
Setting
the table options
|
Variable Vs Fixed Width
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 that will annoy your
visitors. I prefer to fix the
width in pixels to avoid that problem, and to control the
layout better when I make a website template.
What Width Is Best?
I used to design for the 800 pixel
display because there were a lot of people using it. However my
website stats show that for this website only 1% of my
visitors use an 800 pixel
resolution now, and for my website about-alzheimers.com,
7% use an 800 pixel monitor.
About 30% of my visitors use a 1024 resolution, and over 65% use higher
resolutions.
Based
on that I am now designing my pages to fit a 1024 resolution monitor.
To leave plenty of room for scrollbars I'm making the table width 960
pixels wide. You'll need to make your own decision on the
best
width to use.
Border Width, Spacing and Padding
If the
border is set to zero pixels it won't be seen when visitors see the
page online, so do that.
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.
Leave the table alignment at left, and we'll center it later with CSS.
When you've set the table properties as you want them click Apply or Okay.
Setting
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 column 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.
I'm going to make the navbar column 200 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 200 pixel left column and a 960 pixel table
that's 760 pixels.
Set the vertical alignment to top, middle, or bottom, whatever you
need, and
the
horizontal alignment to left, center, right, or justify. I usually
put another table in this cell to hold the content. For that
reason I set the vertical alignment to top, and
the horizontal alignment to center.
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.
Highlight both cells,
right click in them and click Join
Selected Cells. Alternatively click in
the top left cell, go to Table
in the menu-bar, and click on “Join
With
Cell To The Right”.
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.
A Little Trick For Better Search Engine
Descriptions
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 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 columns and three
rows 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.
Check that the vertical and horizontal alignment of the
combined cell are still okay.
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". It's not essential to have
this little cell, but it takes no time to set up, and it may help.
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 what you want. I'm using 650 pixels. Then set the
table alignment to Center,
the border width to zero, and the padding and spacing the way you want
them.
Having a table like this for the content can 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 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 you can 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
you'll be linking to it in your template as well.
We'll get to virtual includes and linking to stylesheets later in the
tutorial.
Save
Your Template
There are a few different extensions you can use when you save your
template, such as htm, html, shtml.
If you're using virtual includes you'll need to save the page with the
shtml extension, e.g. my-template.shtml
If you're not using virtual includes, then use html or htm. There's no
real difference between them.
When
you use the template to build a new page, save it using Save
As, and save the page with the file name you want, which
should include the keyword you are targeting on that page.
Three Column Template
The two column template works well with a small business website where
you're giving valuable information to your prospective customers, and
where you want to appear as a friendly, helpful expert.
If you prefer a three column template you go through all the same
steps, just select three rows and three columns when you set the table
up. For a 960 pixel wide table try 180 pixels for the left and right
columns, 600 for the middle column, and maybe 550 for the content
table. See what it looks like and adjust the sizes to fit your needs.
If you work your way through this page you should be able to set up
tables for any style you want. Lay out your design on a sheet of paper
then
use tables to build it.
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.
You
Can Save Time And Effort By Buying A Template
Making your own template can take a bit of time, particularly if you
run into problems and have to troubleshoot it.
Also, 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 so you can get on with the most important
part of building a website – writing the content.
Web templates are part of the deal with Site
Build It and Hostgator, or you can buy
templates from sites such
as Template
Monster,
or subscribe to a template service such as Dream Template.
Next Page:
Setting Font
Styles With Style Sheets
Return
from How To Make
A Website Template to Building
A Web Site home
|
|
