Create a Java Slideshow in Dreamweaver

    ●   Download the Kit and put it in your Root Foler.

    ●   Then shrink your images and create your slideshow.

Learn About:

JavaScript HTML

  •   This tutorial is used in the Art Genre Project.

Other People's Work:

Here are some examples of work inspired by this tutorial.

This free script provided by
JavaScript Kit

Step #1: Open your Index page in Dreamweaver ~

Open your index page - or whatever page you want a slideshow to appear - in Dreamweaver

… hit Split to view your code …

… locate your head tags …

… and clear some space to work in …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #2: Copy this Code ~

Copy this code …



… and paste between the head tags:

paste between head tags

Step #3: Find your #content area ~

Now scroll down through your code and find your #content div - or wherever you want your slide show …

content div

Step #4: Copy MORE Code ~

Now copy this code …

This free script provided by
JavaScript Kit

… and paste it between the #content tags.

Step #5: Setting up your Slideshow pictures ~

Collect some images your artist created and open them in Photoshop - at least three for starters …

open all your images

Step #6: Set the Resolution ~

Go to: Image > Image Size and set the resolution to 72 for each image.


Remember - 72 is the highest resolution a computer screen can show.

Step #7: Image Size ~

All images must be approximately the same size! Lower the width on all the images to 550 pixels.


If necessary, Crop the images to get them to fit.


You may have to cut parts of your images off.

Just do your best to get ALL your sizes as close as possible.

Step #8: Save for Web ~

Lastly, go to: File > Save for Web and save your images as .jpg


Adjust the quality, if necessary.

Name the file image1.jpg

save as image 1

Save the image in the ROOT FOLDER OF THIS PROJECT!

Do this to all your photos: save them as image1.jpg, image2.jpg, image3.jpg, …

Step #9: See if it Works !~

Hit small to view your work.


Last Step: Save & Attach ~

Upload your site with the work you completed, attach the link to your site where the work is located, and continue working …

Other Resources: