Graphic Design Exercises

Integrated: HTML Slide Show

 

Objective

To learn to web site production techniques by example. To learn how to generate easy-to-manage slide shows using a HTML/Javascript approach to make this sample page.

 

Discussion

In this sample web page, the thumbnail images are linking to a larger full-sized image (which have all been prepped to be 700x430px). Once the Javascript code has been added, clicking on a link will activate a slide show on top of the current page.

 

Procedure

prepping for the exercise

  1. download starter files, move files to "html" folder
  2. download jQuery Lightbox Clone "compressed" source files
  3. copy contents of "prettyPhoto" into "slides" folder
  4. examine files

prepping the slide show

  1. open "contact.html", save as "portfolio.html"
  2. select <div#col3>, delete
  3. select <div#col2>, change id=portfolio2
  4. select <div#text>, delete
  5. insert table (4 rows, 3 cols)
  6. window > css: new (+) "#portfolio2 td": box: padding: top=0, others=40
  7. insert > image "slides/thumbnails/01.jpg"
  8. link image to "slides/700x430/01.jpg"
  9. save, file > preview in browser (opt+F12)

embedding the slide show

  1. open "slides/index.html"
  2. file > preview in browser (opt+F12); close
  3. select first image in gallery
  4. view > code
  5. copy rel="prettyPhoto[gallery1]", paste into "portfolio.html"
  6. copy lines 7-12 from "index.html" into <header> of "portfolio.html"
  7. update links in header: add "slides" to "slides/css/" and "slides/js/"
  8. browse to jquery-lightbox-clone/documentation
  9. copy and paste customization into body (before </body>)
  10. change the following:
    opacity: 0.60,
    showTitle: false,
    counter_separator_label: ' of ',
    theme: 'dark_square'
  11. view > design
  12. save, file > preview in browser (opt+F12)

finishing the slide show

  1. copy "slides/thumbnails/01.jpg"
  2. paste 11x into other table cells
  3. view > code
  4. change image numbers
  5. view > design
  6. swap out each thumbnail (double-click)
  7. window > css: div.dark_square .currentTextHolder: verdana, 11px, color=#999
  8. rename "prettyPhoto\dark_square\btnNext_safe.png" as "_safe"; repeat with "btnPrevious.png"
  9. save, file > preview in browser (opt+F12)
  10. publish the finshed page as a link from your personal process page for grading