Objective

To learn to web site production techniques by example. To learn how to generate an easy-to-manage slideshow similar to this portfolio web page.

Discussion

Updating and editing portfolio slideshows is time consuming. There are many approaches to making this process more efficient. One of them is making use of slideshow plugins. SimpleViewer is a popular easy-to-use plugin that uses XML and Flash for large monitor displays and loads a simplified mobile version when Flash is not available. SimpleViewer also comes with a small app that helps configure the plugin without having to edit any code.

Procedure

prepping for the exercise

1. download starter files, move files to "html" folder
2. download SimpleViewer source files; examine files
3. move "simpleviewer" folder into "_assets" folder

prepping the slide show

1. launch svBuilder: new gallery
2. load images from "slides/500x430" (resize=no)
3. images > sort > by file name
4. customize (see screenshot)
5. publish (desktop/slides/index.html)
6. options > save preset (on your home computer)
7. move "slides" folder into "svGallery" folder
8. replace images inside "thumbs" with images from "65x65"
9. examine "slides/gallery.xml" in dreamweaver
10. preview "slides/index.html" in browser

modifying the home page

1. open "index.html"
2. delete placeholder image "spacer.gif"
3. insert > html > frames > iframe
4. edit code: <iframe src ="slides/index.html" scrolling="no" width="100%" height="600" frameborder="0" >
5. window > css: edit layout.css
   • #slides: margin-top=-40px: min-width=750px; max-width=850px
6. window > css: edit layout_small.css
   • #slides: margin-left/right=15px: min-width=320px
7. save, file > preview in browser (opt+F12)

making your own slideshow

1. replace the contents of "500x430" and "65x65" folders with your own images and republish a new gallery with svBuilder
2. publish the updated site as a link from your personal process page for grading