LET'S MAKE A SLIDESHOW

A tutorial

The following instructions and examples pertain to the construction of a very simple slideshow to be viewed by older browsers which do not support "frames". It is assumed you know what a slideshow is since you are looking at this tutorial. In case you don't, it is merely a collection of pictures or images that you wish to display with a process that automatically changes the picture to the next picture or image. Many people use this to display photos to friends via the internet.

If you plan on using the WebTV Page Builder for your slideshow, then go the Beth Candy's Instructions for making a slideshow with the Page Builder.

In this example, we are going to construct a 4 page slideshow. The first page is merely an introduction for your viewers to explain to them what they are about to witness. Here's a simple "Introduction" page.

Note that this page will not automatically change to the next picture. Instead it has a clinkable link to the first page of the slideshow. This allows time for the viewers to read the comments and begin the slideshow at their convenience.

This is how it is constructed (and enhanced a bit):

The <<>link> tag shown in the "head" above serves to preload the first slide. So when you click on the link to begin, the first slide is already loaded.

The next 3 pages of the slideshow are all constructed in an identical manner, with only slight variations. We shall name and call these 3 pages Slide 1, Slide 2, and Slide 3. Here is the beginning....what you need in the "head" of all but the last page of your slideshow. The <<>meta> tag is what makes the next picture load and come on the screen.

The red text are areas that will vary slightly in each page.

Slide 1 is the title of your first page, the next page would be Slide 2, and so on.

The 15 is the length of time in seconds you want the next screen to appear. You have to adjust this based upon the time it takes for the next page to load.

The URL address of the next page would be "slide2.html" in this example and change to "slide3.html" on the next page.

Here is how the next two pages would begin:

Note that in Slide 3, we have not included the <<>meta> tag because we are not going to automatically change to the next page since the slideshow is finished in this example. The viewer may proceed to any page on the web from this last slide, or you may include a clickable link to take the viewer to a site you select.

Now we will build the body of Slide 1, Slide 2, and Slide 3, as folllows:

Note the text in red.

The URL of the background can be the same or different for each slide. Just keep in mind to select a background that loads quickly or the delay between each slide will be lengthy. Also, instead of a background, you can just select a background color - the same for each slide or a different one for each. (In our example a background color was used because of the type of images we're displaying.)

These same rules apply to the bgsound src URL; that is the same for each slide or a different one for each.

The last text in red is the URL of the picture or image which will change for each slide.

Because there is a WebTV bug periodically popping up when you have a <<>meta> tag in the "head", the code shown in green text is needed directly after the <<>body> tag. This will appear on the slide should the WebTV bug strike and the viewer can correct the bug.

Here are the complete pages for the 3 slides, using "actual" URL addresses:

Slide 1

<<>html><<>head><<>title>Slide 1 <<>/title> <<>meta http-equiv="refresh" content="10;url= slide2-nf.html"> <<>/head> <<>body bgcolor="#000000"> <<>center> <<>noframes><<>font color="red" size="+1"> ERROR Hit Cmd and R key, hold for 4-5 seconds. <<>/font><<>/noframes> <<>/center> <<>bgsound src="starspangle.mid"> <<>center> <<>img width="128" height="128" src="firewks1-2.gif"> <<>/center> <<>/body> <<>/html>

Slide 2

<<>html><<>head><<>title>Slide 2 <<>/title> <<>meta http-equiv="refresh" content="10;url= slide3-nf.html"> <<>/head> <<>body bgcolor="#000000"> <<>center> <<>noframes><<>font color="red" size="+1"> ERROR Hit Cmd and R key, hold for 4-5 seconds. <<>/font><<>/noframes> <<>/center> <<>bgsound src="starspangle.mid"> <<>center> <<>img width="100" height="200" src="firewks3-2.gif"> <<>/center> <<>/body> <<>/html>

Slide 3

<<>html><<>head><<>title>Slide 3 <<>/title> <<>/head> <<>body bgcolor="#000000"> <<>center> <<>noframes><<>font color="red" size="+1"> ERROR Hit Cmd and R key, hold for 4-5 seconds. <<>/font><<>/noframes> <<>/center> <<>bgsound src="starspangle.mid"> <<>center> <<>img width="200" height="200" src="firewks4-2.gif"> <<>/center> <<>/body> <<>/html>

---

If you haven't already thought about it or you are not familiar with it, the most convenient way to make these similar pages is to use the "copy" feature at your host's edit or housekeeping pages, or if your host does not have this feature, then the "copy & past" (C&P) procedure can be used. For beginners who have never used C&P, it is very simple. After you have built your first slide and before you "save" it, hold down the CMD key and hit the A key. This will "paint" the entire edit page. Then, hold down the CMD key and hit the C key. This will copy the painted area and hold it in memory. Then "save" your page and then proceed to create a new page. When you are on the edit blank, hold down the CMD key and hit the V key.....now EDIT this new page as needed. For instance, the title, the next slide URL, etc. You can continue "dumping" the page you have in memory for subsequent slide pages and then edit them as above. You can of course, customize your slideshow in any manner so long as you follow the basic principals above. Just keep the loading time short so viewers' attention will be held. An option you may want to include is a clickable link to the next slide so that viewers can move to the next slide sooner than it will change. It is not shown in the examples above but I've included this feature in the slideshow that we can now view.

Click on the computer geek and have fun.

To see what is possible in the construction of slideshows, visit these sites.

Emerald makes wonderful "non-frame" versions for her holiday slideshows.

Visit Tboob (THE BALD ONE) and enjoy his quality shows. (Frame versions)

And visit my own slideshows - there are over seventy shows with more being added.

Questions? Comments? Suggestions?
E-Mail me

Access to my Guestbook

Add Your Site To WebTastics Directory