|
Side Bars are small graphics that
allow you to create different effects in your background
images. This is an example of a side bar and what it looks
like as a graphic. Used with the tables tutorial you can
achieve a similar effect to frames without all the
programming.
Side
Bar Exampless
.
You can find a lot of different designs on the various art
pages, some of which I have listed below, or you can create
your own. Simply do a search for side bars or web graphics. A
site like http://www.nba.com/
or W3
School show good examples of how you can utilise
the side bar concept.
Using
Text as a Side Bar
If you look at http://www.msincome.com/intro.htm
you will see how by using text you can customise your pages
even further with a little thought. The MSINCOME logo on the
left of the page is a Side Bar using the background command. I
simply added some text and rotated it 90 degrees. (You can
right click and use the save background as in IE to see how it
works.)
Being
Creative
By using the side bar technique
you can create all sorts of exciting effects. As you can see
over on the left I am using a type of side bar. This is a
table with a graphic in it.
The best way to use a side bar
is to set up a new page and then in your editor choose the
page properties. Choose background image and select the one
you have saved to your hard disk.
Side
Bar Creation
There are a few considerations
to think about when designing your side bar. Many computers
today are starting to use higher res screens so I would
suggest you use a bar about 1280 pixels wide by about 10
pixels high. On the left you then highlight an area and colour
it in. You can add more elements or shadow etc. These usually
fall in about the 100 to 200 pixels on the left of the bar.
As a background this image then
tiles and creates the pattern you see on the left of this
page. You can see some fairly complex side bars that use
curved sets etc and these need a little more finessing. This
one creates a style like a book however because of its length
it will tile to early and the effect looks poor.
Length to short and so it will
repeat sideways as well as downwards
|<
To Short
> |
Introducing
Colour
The real beauty of this format
it that you can introduce colours with very little download
time and also allows you to make a contents in a
different format and colour. On the side of this page I was
able to introduce the brown style which looks different than
the white page. Because the link colour is constant over the
whole page, the brown link on this white page looks different
to the link on the side bar eg. Link By
just choosing one colour I have introduced a few colours with
very little effort.
Learning
Tables with Side Bars
To use the side bar effectively
you will need to use tables to organise your work. I have a
two cell table on this page. The left cell is set at 200 and
the right cell is 100%. This means the left cell is locked and
I can put all my contents in there without it spilling out
onto the white main page. If your not to sure about tables you
can do the workshop on tables.
Making
Templates with Side Bars
There is another advantage of
using side bars and that is you can make a template to put
your work in. I call this side bar "bg.gif" and I
made the original page with this side bar as my template. Then
I pasted all the text into the right side for each different
page. If I ever want to change the look all I have to do is
save the new side bar as bg.gif and I will have a whole new
look. I have done a small example for you, and also shown the
table layout. Go
there now.
Here
are some links for side bars
All
Free Clip Art:- Some
nice side bars and lots of graphics.
W3Schools:-
A great site for some interesting side bars as well
as tutorials.
|
