|
Basic web formatting with tables
Barring some hot new techniques involving
high-end coding and special programming languages that go beyond
good old HTML, laying out a web site in a table is still the
most common way to put a web site together. You can create tables
with no borders, so they appear to be flush with one another,
and you can merge cells together so that you might have 2 columns
sitting right on top of a wide, single column row.
Using your web design software, you're going
to drop in a table that has the number of rows and columns you
plan on using in your navigation setup. This will generally
be a graphic in the top right, some space for a special feature,
like a SEARCH button in the top right, and then your buttons
across the bottom.
Through experience, we've started to utilize
a system of about 4 separate tables to put together a web page.
The top table will be the graphic part, with a search area,
or shopping cart link, or drop-down menu. Then, in a totally
separate table, we'll add in navigation. That's because trying
to make the top section have the same number of columns as the
ones you need for buttons is a bear of a problem! Then, trying
to make the rest of the site conform to those dimensions is
an insurmountable obstacle.
The best thing to do is to add in a third
table below your links that is meant to be the “body”
of the site. You can set this up with your main text area and
then a sidebar, or just leave it open. If you choose to do the
latter, you can then drop a table inside the main part of that
table (called a nested table) where you can divide it up for
the body and sidebar. We like to give the main body table some
cell padding, usually 5-8 pixels. What this does, is to make
your pictures and text stay off the edge of each cell in your
table. Some people go through the trouble of adding in extra
columns and rows in an attempt to give space around the text,
but that's a waste of time.
The last table we'll add in will be a footer.
This is a good spot to either add in links to all your main
pages, or just put in your copyright or contact information.
StepRock Media Uses Pro software:
- Macromedia DreamWeaver
- Adobe PhotoShop
- Adobe InDesign
|
