Summary:

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.

resolution

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.

width

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

crop

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

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.

preview


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: http://www.javascriptkit.com/script/script2/jsslide.shtml