<font color="red" size="+1"> ERROR Hit Cmd and R key, hold for 4-5 seconds. </font>


LET'S MAKE A SLIDESHOW


A Tutorial


~~THIS IS FOR THE "FRAMES" VERSION~~

[Click here for Non-Frames Version]

The following instructions and examples pertain to the construction of a very simple slideshow using "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 screen 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 5 page slideshow. Please understand that we will have 5 new HTML pages. In our sample we are going to have these page names: intro.html; framespg.html; slide1.html; slide2.html; and slide3.html.

INTRODUCTION PAGE:

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.

WELCOME TO A
FOURTH OF JULY
CELEBRATION!

The pictures celebrating this grand holiday will change automatically about every 10 seconds. Sit back, relax, and enjoy the fireworks.

Click here to begin.

Note that this page will not automatically change to the next page. Instead it has a clinkable link to the first page of the slideshow via the "frames" page (more about that later). 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):

<<>html><<>head><<>title>SLIDESHOW INTRODUCTION<<>/title>
<<>link href="slide1.html" rel="next">
<<>/head>
<<>body link="#000080" vlink="#bfefff" background="flagbg.gif">
<<>bgsound src="starspangle.mid">
<<>center>
<<>noframes><<>font color="red" size="+1"> ERROR Hit Cmd and R key, hold for 4-5 seconds. <<>/font><<>/noframes>
<<>font color="#8b0000">
<<>h3>WELCOME TO A<<>p>FOURTH OF JULY<<>p>CELEBRATION <<>/h3><<>p><<>/font>
<<>font size="5" color="#8b0000">
The pictures celebrating this grand holiday will change automatically every 10 - 15 seconds. Sit back, relax, and enjoy the fireworks.<<>p>Click <<>a href="framespg.html">here<<>/a> to begin the show. <<>/font>
<<>br><<>br><<>br> <<>font size="1" color="#000000">
You may move the pictures faster by clicking on the small flag in the lower left corner.<<>/font>
<<>/center>
<<>/body><<>/html>

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

Because there is a WebTV javascript bug periodically popping up when you have any sort tag in the "head" (i.e, between <<>head> and <<>/head>), the code shown in green text is needed after the <<>body> tag. This will appear on the screen should the WebTV bug strike allowing the viewer to correct the bug.

FRAMES PAGE:

The next page we will construct is the "framespg.html". It is a stand-alone page but one you do not see. It is merely the vehicle in which the remaining 3 pages (your 3 slides) "ride", one at a time, sharing the same music.

(IMPORTANT NOTICE: Since the summer upgrade to WebTV, the banners of Tripod and Angelfire hosting sites interrupt the music in "frames" constructed slideshows.)

A "frame" will be in evidence around your slides during the operation of the slideshow. The "Frames Page" is constructed as this sample depicts:

<<>html><<>head><<>title> (page title) <<>/title>
<<>/head> <<>frameset bgcolor="(color)" rows="400,*"><<>frame src="(URL first page of slideshow"><<>embed src="(URL of midi)" width="35" height="25" autostart="true" loop="-1"><<>bgsound src="(repeat URL of midi)" loop="-1"> <<>/frameset>
<<>noframes> <<>body bgcolor="black" text=red><<>font size="+1"> ERROR Hold your Cmd and R key down for 5 seconds
<<>/font><<>/body> <<>/noframes>
<<>/html>

The red text items are areas where you must determine the entry.

The bgcolor you choose for the frameset will appear as a narrow frame around the top and the 2 sides of each slide. Select any color using the name or the HEX code.

The URL of the 1st page is another choice you make. You also determine the entry for the URL of the midi. Of course, you don't have to have a song. If you choose not to, then delete all of the text for <<>embed> as well as <<>bgsound>.

The text in green is the coding which creates the "frame".

And the "bug" coding is also included (shown in blue here.

Notice that the sound is included in two manners since this has been found the only way for most computers to hear the music when viewing the slideshow.

Another important point to consider is the selection of the title on this page. This title will appear in the title bar at the bottom of each screen. THERE IS AN ALTERNATIVE which will be covered later in this tutorial.

SLIDE PAGES (THE HEADS):

The next 3 pages are your "slides" and are constructed in similar manners, with only slight variations. As stated previously these 3 pages are slide1.html, slide2.html, and slide3.html. Here is 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.

Slide 1 Head

<<>html><<>head><<>title>Slide 1 <<>/title>
<<>link href="slide2.html" rel="next">
<<>meta http-equiv="refresh" content="10;url=URL of the next page of slideshow">
<<>/head>

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 10 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 slide.

Here is how the next two pages would begin:

Slide 2

<<>html><<>head><<>title>Slide 2 <<>/title>
<<>link href="slide3.html" rel="next">
<<>meta http-equiv="refresh" content="10;url=URL of Slide 3 of slideshow">
<<>/head>

Slide 3

<<>html><<>head><<>title>Slide 3 <<>/title>
<<>link href="URL of page you want the viewer to be routed to" rel="next">
<<>meta http-equiv="refresh" content="10;url=URL of the page you want the viewer to be routed to">
<<>/head>

Note what has been done in the <<>link href> and <<>meta> tags in Slide 3. Since the slideshow is finished in this example, we can send the viewer to a page we want them to see. Maybe your homepage or to an index of more slideshows, for example.

SLIDE PAGES (THE BODY):

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

<<>body background="URL of your chosen background">
<<>center>
<<>noframes><<>font color="red" size="+1"> ERROR Hit Cmd and R key, hold for 4-5 seconds. <<>/font><<>/noframes>
<<>img src="URL of your chosen picture or image">
<<>/center>
<<>/body>
<<>/html>

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 so the delay between each slide can be kept short. Also, instead of a background, you can just select a background color - the same for each slide or a different one for each. (In the sample slideshow you will see in a moment a background color was used because of the type of images we're displaying.)

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.

THE ACTUAL PAGES:

Here is the "Frames Page" and the complete pages for the 3 slides, using "actual" URL addresses:

Frames Page

<<>html><<>head><<>title> 4th of July <<>/title>
<<>/head> <<>frameset bgcolor="red" rows="400,*"><<>frame src="slide1.html">
<<>embed src="starspangle.mid" width="35" height="25" autostart="true" loop="-1">
<<>bgsound src=
"starspangle.mid" loop="-1">
<<>/frameset>
<<>noframes> <<>body bgcolor="black" text=red><<>font size="+1"> ERROR Hold your Cmd and R key down for 5 seconds <<>/font><<>/body> <<>/noframes> <<>/html>

Slide 1

<<>html><<>head><<>title>Slide 1 <<>/title>
<<>link href="slide2.html" rel="next">
<<>meta http-equiv="refresh" content="10;url= slide2.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>
<<>img width="128" height="128" src="firewks1-2.gif">
<<>/center>
<<>/body>
<<>/html>

Slide 2

<<>html><<>head><<>title>Slide 2 <<>/title>
<<>link href="slide3.html" rel="next">
<<>meta http-equiv="refresh" content="10;url= slide3.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>
<<>img width="100" height="200" src="firewks3-2.gif">
<<>/center>
<<>/body>
<<>/html>

Slide 3

<<>html><<>head><<>title>Slide 3 <<>/title>
<<>/head>
<<>link href="index.html" rel="next">
<<>meta http-equiv="refresh" content="10;url= index.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>
<<>img width="200" height="200" src="firewks4-2.gif">
<<>/center>
<<>/body>
<<>/html>

VARIATION FOR THE TITLE BAR:

An effective way to display your slide images or pictures is to have a different caption in the title bar for each. Doing this is quite simple. First of all, DO NOT put a title nor the <<>title><<>/title> tags in the "framespg.html" as shown previously. Instead, insert this javascript in the <<>head> of each slide page.

<<>html><<>head>
<<>script>window.status="insert the caption here"; <<>/script>
<<>link href, etc, etc<>>

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 70 shows with more being added.

Questions? Comments? Suggestions?
E-Mail me

Access to my Guestbook

Many thanks to "Mona", "BabyDoll" and "Jerry11" for their important contributions.

This WarpSpeedHelp site is owned by
DON.
Click The Logo To Join The Ring!

PRE 5 PREV NEXT SKIP NEXT 5 RANDOM ALL
Hosting by WebRing.