Roadmap of the Web | Tools and Process | Your First Page | Lists | Hyperlinks and Anchors
Images and Backgrounds | Tables | Frames | CSS and The DOM | Animation | Image Maps | Meta Tags and Keywords
FTP | Forms | Audio and Multimedia | Website Promotion | Intro to Javascript |
Special Characters | Color Hex Codes | Glossary

Animation, Banners and Counters

.

The first bit of animation is not a true animation but is a special META Tag which loads a new HTML document automatically and replaces the first one. If you have a frame based site though you could set up a single frame to display a small slide show with this bit of code. This is more commonly used if you are abandoning an old website and want to point visitors to your new website.

This is called the Refresh Tag and it lives in your HEAD section with your other META Tags. It is written as

<META HTTP-EQUIV="Refresh" CONTENT="5; URL=index.html">

It basically tells the browser to load a new page which could be another HTML document in your root folder or it can be an Absolute Path to another website. Click here to see it in action.A page will display announcing you are being transported to another page which for this example is my Test page I loaded up to the web.

The CONTENT="5" tells it how many seconds before it loads the second document. the URL=should point to whatever document you wish to load or to the absolute path of another website

Click here to see a multiple page example

Now on to true animation

Since I'm Mac based I am going to work with a Freeware Animation program called GifBuilder which is available through many download sites. There are a number of great animation programs like Adobe Live Motion,or Macromedia's Fireworks and Flash which can generate animated GIFs. Windows users may have to look around to find a similar animation program.

What we need to do first is to create or scan some images that we will animate. What I am going to do first is use Photoshop to create some images that will become the cells in my animation.

With GifBuilder it is important that all images be converted to .gifs and if you want a clean animation... all of the cells should be of the same dimension and 72dpi.

I created a series of .gifs that will eventually become an animation of some ballroom dancers.

Now I open GifBuilder.

Under the Window menu open GifBuilders Frames Window



From the File Menu select Add Frame and individually add each .gif image into GifBuilder in the desired sequence.



You can then open up the Preview Window in the Windows menu.



Under Animation choose Start and the animation will begin in the preview window



On the first try the Dancers moved much too fast. By default it was set ata 10th of a second per frame. By going to the Options Menu I select Interframe Delay



Which allows me to set a longer time. I individually set the time for every frame at .3 seconds.



I also go to Loop which gives me a Pop up screen which I can tell Loop Forever or How many Times or None.



Then I Save it naming it Dancers.gif and make sure it ends up in the images folder



I can then call it with a regular IMG SRC Tag and on my webpage appears the Animated Dancers.



There are many more commands you can play with to animate your images in GifBuilder. Besides True Animated Objects You can also create things like Animated Banners. You've probably seen tons of them as Web Advertisements.

Banner swapping is a great way to drive traffic to your website. Many websites that act as directories or have similar interests to you will often times swap links with your website and many times you could do it with a graphic advertisement instead of a boring old text link. There are also many services where you can exchange banners randomly with some of the banner exchange websites like Exchange-It. Links are a good thing. many people get to other websites via Link exchanges and there are many places out there where you might do a Banner swap. All you have to do is ask. Sure some people get greedy and want you to pay and depending on your business and target audiences it can be very much like a newspaper or magazine advertisement. But there are thousands of people out there just waiting to swap banners with you which means more ways people can get to your website. Also the more people you swap links with the higher up the search engine lists you become as more people use your website.

To make a simple banner with GifBuilder I created 4 images in Photoshop loaded them and played with the Interframe Delay, looped it and below is an animated banner.





It also is a hyperlink directly back to my website.

So the thing to do is then start swapping your banners at a place like bCentral'sLink Exchange. bCentral is also a great resource if you want to get a Hit Counter to see how many visitors you are getting Register atFastCounter and they will give you the code to place into your website which will generate a visitor odometer and you can also get stat reports.

There are many other Counter websites, Banner Exchanges and places to get listed. Once your website is up and in place then start looking for places that will drive traffic to your website.

So go make some whiz bang animations... remember sometimes just a small thing moving in the right part of your page is enough to draw attention to a particular item. Don't bombard your viewers...invite them in.
Roadmap of the Web | Tools and Process | Your First Page | Lists | Hyperlinks and Anchors
Images and Backgrounds | Tables | Frames | CSS and The DOM | Animation | Image Maps | Meta Tags and Keywords
FTP | Forms | Audio and Multimedia | Website Promotion | Intro to Javascript |
Special Characters | Color Hex Codes | Glossary


This website sponsored by
www.maineinfo.net
P.O. Box 17891
Portland, Maine 04112