Web Page Design for Designers

 Virtual Slide Show

 

 

 

 

 

NEXT
 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

Instead of having a continuously scrolling web page, sometimes it is preferable to present information in screen-sized chunks, as would be the case in a multimedia or slide show presentation.

By using tables, you can control the way the 'slides' fit the browser window.

Clicking on a Next button will jump to an Anchor directly above the next slide.

The 'slides' are arranged one above the other like a film strip.

By putting only text or small graphics in the first slides, it gives the slides below time to load up unobtrusively.

 

 

 

 

 

 

BACKNEXT
 

 

 

 

 

 

 


10%
< The four corner pieces of the table are set to 10% Width and Height >
10%
 

 

Centering the image in the browser window is
accomplished by using a table like this.

For clarity, the cell backgrounds have been given a colour
to make them visible.

Firstly, the whole table is set to be 95% Width and Height.

This makes it fit comfortably within the browser window
automatically adjusting to its size.

It has 3 Columns and 3 Rows with the main
area floating in the middle but other combinations may
suit your particular layout better.

 

 

 

10%
BACKNEXT
10%

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BACKNEXT
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The smooth blue gradient in the last slide will
only look its best on monitors with 16 or 24 bit colour capabilities although your browser should make a reasonable attempt at dithering it.

The gradient was created in Photoshop and the file
indexed to an Adaptive palette.

Have a look at the source code to find out some other tricks.

 

 

 

 

 

BACKNEXT
 

 

 

 

 

 

 

 

 

 

 

 

The techniques on this page only use HTML and are safe to use with virtually any browser.

The next section uses JavaScript to accomplish a little more but precludes Netscape 2 and MsIE 3.x (PC).

This technique preloads the next image whilst viewing the current one. So, instead of having to wait for all the images to load into cache, you only have to wait for two before you can start viewing the slides.

        When you move on to the next slide, it is already cached and instantly available for display. You will see the next one is loading up in the status bar.

Don't click on the next button whilst images are loading.

 

 

 

 

 

BACKNEXT
 

 

 

 

 

 

 

 

 

 

 

 

        Note also, how the arrows dim themselves at each end of the sequence to show the user that they can't go any further.

        You can mix any combination of GIFs and JPEGs, but they must be the same height and width. Look at the source code.

        There, you will also find a function called auto() that can sequence the slides without having to press buttons. Try it by typing javascript:auto() in the URL field at the top of your browser.

 

 

 

 

 

BACKNEXT
 

 

 

Back to Top