1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Light Speed

Animated Backgrounds

Make

Banners

A Pain-Free Lesson

Your Check is in the Mail

Many graphics are loading.

This might take a moment.

The Graphics

Color Coordinated

2

  

1
     

3

= Actual Sizes =

 

 

 

 

 

Take a quick look at the banner below.

If you read this lesson, you will learn how to make

millions of banners, including the banner below.
 

 

 

Part A

Make a Banner Fast

Easy Overview

Make Banners

Learn How

Click Here

The banner above was made with two tables,

one pasted inside of the other.

Table #1

Cell Padding = 4 pixles

No Width Set for This Table

 

Actual Size =  

 The amount of cell padding in Table #1 determines the amount of visible animation.  In other words, the amount of cell padding determines the width of the animated border.

Later on in this lesson we explain everything about nested tables and widths of tables.  We even explain how to make your text look good.

Table #2

100% Wide

Make Banners

Learn How

Click Here

Actual Size =  

 

 

Part B

Easy as Pie

There is another easy way to make banners.

We explain that easy way below.
 

Another Easy Method

Use "Cell Spacing"

Get the Graphics Here

  Actual Size =  

 

 

Step 1: Use an animation as a background in a table (table #1).
 

 Step 2: Create table #2 with any number of cells.

 Paste table #2 into table #1.  

Save Money

Save Time

Save Whales

Play All Day

Party Hardy

Celebrate Tonight

 

Save Money

Save Time

Save Whales

Play All Day

Party Hardy

Celebrate Tonight

 

Save Money

Save Time

Save Whales

Play All Day

Party Hardy

Celebrate Tonight

Step 3: The amount of "cell spacing" in table #2

 determines the "visible amount" of animation. 

 Use CSS to set the amount of cell spacing.

Cell spacing = 3

 

 Cell spacing = 5

 

 Cell spacing = 8

 
 
 
 
 
 
 
 

Cell spacing = 1

 

 Cell spacing = 2

Tiny
 

Your Words

 
 

 

 

Part C

Special Banners

Use "Cell Padding"

Get the Graphics Here

Here you will learn how to make millions of banners.

However, let us begin by making one tiny "flashy banner" -- because such a banner is easy to understand.

Free

Money

 

The banner above has 2 animations
 
 

The easiest way to make fancy banners of any kind is to use nested tables and to use cell padding.

You can use "divisions" instead of tables, if you like, especially if think -- by mistake -- that tables are yesterday's news.

Tables are called "nested tables" when they are pasted inside of one another.

We will use nested tables to build the flashy banner.

This lesson is easy as pie, we think.  We hope you will agree.

 

Advanced Tutorial

Anatomy of a Banner

We used four tables to make the flashy banner.  Three of those tables have "cell padding."  Please view all four tables, below -- and please ignore the sizes of those tables.  Those tables "look big" only because we wrote some words in them.

Table 1

Table 1. 

 Cell padding = 3 pixels

 

Table 2

Table 2.  Cell padding = 4 pixels.

 

Table 3

Table 3.  Cell padding = 4 pixels.

 

Table 4

No Padding

Free

Money

 

 

Expert Level

Assemble

The Banner

 

To assemble the banner, begin with the blue table (table 1, on display below).  Right now we  WON'T set a width for the blue table. 

Note: YOU may set a width for the blue table at any time you like.  However,  we explain how and why to do that later in this lesson.

Table 1. 

 Cell padding = 3 pixels

Paste table 2 (the white table) into the center of the blue table.  Set the width of the white table to be 100%.  Center the white table.

Notice how the blue table now becomes a border.

The blue border around the white table is 3 pixels in width because we assigned three pixels of cell padding to the blue table.

The amount of padding determines the width of a border.

Please view the result below.

Table 2, white, with 4 pixels of padding.

Now we add an animation as a background to the white table.  For this example, we used a "flashy animation."

Please view the result below.

Table 2.  Cell padding = 4 pixels.

Table 2.  Cell padding = 4 pixels.

Paste table 3 -- the green table -- into the center of the white table.  Center the green table.  Set the width of the green table to be 100%.

Please view the result below.

Table 3.  Cell padding = 4 pixels.

Now we give the green table an animation as a background.  We used a flashy animation, but you may use ANY graphic to animate (or to decorate) a border.

As a matter of fact, some of the best borders are made with non-animated graphics.  (Please don't tell anybody.)

View the result below.

Table 3.  Cell padding = 3 pixels.

Now we paste table 4 -- a white table with words -- into the center of the banner.  We center the white table and set the width to be 100%.

Because the white table is tiny, the entire banner will shrink in size.

Please view the result below.

Free

Money

Now we will set a width for the outermost table.  The outermost table is blue, and it is not animated.

The width of the table may be set in pixels or percents.

Recall that earlier in this lesson we assigned no width to the outermost table (which is table #1).

For the purpose of this lesson, we set the width to be 80%.  See the result below.

Free

Money

If you want to control the width of your banner, just set a width -- any width -- for the outermost table.  The banner will grow -- or shrink -- in size, but only if all of the other tables are set to be 100% in width.

The outermost table of the banner below is set to be 70 pixels in width.

Free

Money

If words bump into the borders of a banner, then use cell padding to push the words away from the edges of the table.

No

Padding

Below, the centermost table has 20 pixels of padding.

20 Pix.

Padding

 

Even though this lesson sucks, we hope you gained valuable knowledge.

Perhaps you learned that banners can be made with nested tables (or with nested divisions).

Perhaps you learned that the width of a border depends entirely upon how much cell padding you give to the table that "holds the border." 

We assigned 15 pixels of cell padding to the outermost table of the banner below.  Note the thickness of the outermost border.

Free

Money

We assigned 1 pixel of cell padding to the outermost table below.  Note the skinniness of the outermost border.

Free

Money

Now let's look at another banner and see how it was made.  The explanation below is VERY SHORT -- because you learned almost everything already.

 

The Graphics

Color Coordinated

2

  

1
     

3

= Actual Sizes =

 

 

Note: Animations 1 & 2 are displayed directly above the banner.

The banner above has four tables.

From outside to inside:

Table 1, animation 1, padding 8, width not set, no border.

Table 2, no animation, padding 8, width 100%.   Border=10 pixels, dashed, white.  The cell color is "automatic," which means "transparent."  (You only see the animation that is behind table 2.)

Table 3, animation 2, padding 14, width 100%.

Table 4 -- the one with the picture -- will be of the same dimensions as your photograph.

If you hate tables, then use divisions  instead.

 

 

Now let's look at one more banner.

 

 

Frame

A Entire

Page

 

 

 

 

 

Welcome to

Incandescent