|
The_Background Table_Combo
| The Background-Table Combo
Ever wondered how some websites seem to have multiple "layers"
of designs?
Although some use frames and other design techniques to
accomplish this look, I'm going to show you a simple way to
create the look without the "headaches" of complicated design
techniques.
You'll be glad to hear that you can create a dimensional look
for your website using only two simple tools.
1. Background Images 2. Tables
Go here to view a sample web page before we begin:
http://www.webmastercourse.com/web-design-weekly/background-table
-combo.htm
How to Insert a Background Image:
When you open up a blank page in Composer, html, or any other
design program, it's wise to insert your background image first
- before beginning your design work.
This allows you to lay the foundation for the web page from the
start, and eliminates confusion as well.
A background image can be inserted the same as any other graphic
image.
In Netscape Composer, you would open a "blank" web page, click
on "Insert" and then "Image".
On your image screen, you'll see a section near the top labeled
"Choose File". Here you'll select the background image from your
hard drive that you would like to use. It will probably be a
".gif" file such as bg001.gif or bg002.gif. Whatever you named
the background image on your hard drive, you'll find it, and
insert it here.
Next, check the box where it says "Use as Background". This will
cause the image you have selected to become the background for
your entire web page. Click "Apply" or "Okay", and your page's
background should now be the image you've selected.
Where Can You Get Background Images?
The background image on my sample page was free from
http://www.free-backgrounds.com/
You can visit their website for a huge selection of free
backgrounds available that you can use on your website.
You will save the background image to your hard drive the same
as you would any normal graphic image or clip art. Simply hold
your mouse over the background image you would like to use,
right-click your mouse, and click on "Save Background As". A
screen will pop up for you to save the image to your hard drive.
You can name the image whatever you would like with .gif being
the suffix.
Such as: mybackgroundimage.gif
Inserting Tables
Once your background image is in place, you may begin designing
with tables.
On the sample web page you viewed earlier, I inserted one table
that was 730 Pixels in width first. I chose a color for my table
that was complimentary to the background, and then began typing.
Next, I created a second table within the first table, and gave
it two columns or "cells". I resized the column or "cell" on the
right to be only 20% of the entire table width. This creates a
sidebar navigation section on the right. I also colored this
table white to distinguish it from the rest of the web page.
Please remember to insert your background image before beginning
your design with tables. Some designers place a background
image, and then begin their writing without tables. But, I
recommend using tables for the simple fact that it helps you to
organize your web pages and keeps everything in it's rightful
place on your page when others are viewing it.
I hope you'll be able to accomplish many new looks with these
simple little tips.
About the author:
Candice Pardue, author of the new Graphic Design Training Course
for beginners. Go here to learn more about the course and to
take your first graphic design lesson FREE...
http://www.webmastercourse.com/graphics-tutorial/
|
|
| |
| |
