Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Dreamweaver & Fireworks: XML Slideshow from Fireworks

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

Adobe Fireworks is a graphics editing application for web designers. Fireworks has a slideshow generator that can write the code for JavaScript gallery. The gallery is styled with CSS which can be modified by the user.

Tip: If the gallery is modified by the user, generating an updated slideshow will overwrite the customized code. Therefore it is recommended that the entire gallery be backed up before making any updates.

Procedure

Generating the slideshow

  1. download starter files, move files to "html" folder
  2. examine downloaded files
  3. launch Fireworks
  4. commands > create lideshow
  5. add album (+): files to process=custom; select all images in "slides_original"
  6. albums: title = (blank); folder name=400x480
  7. albumBook properties: player: black (flash plugin not required)
  8. export options: path="fireworks_export" (400x480), export thumbnails=yes (65x65), enlarge images=no; click CREATE
  9. duplicate "fireworks_export" folder, rename "slides"
  10. examine "slides/slideshow.xml" in dreamweaver
  11. preview "slides/index.html" in browser

Modifying the gallery

  1. open "slides/index.html"
  2. replace "previous"/"next" with "<<", ">>"
  3. window > css: modify the following rules:
    • #wrap: width=90%
    • #galleries: margin-bottom=0
    • #transport a: width=35px
    • #previews: border=none; margins=none; width=170px; float=right;
    background-color=black; padding-left/right=10px; padding=bottom=30px
    • #thumbnails: padding-top=30px
    • #picture: width=400px
    • #mainImageOutline: border=none; padding=0; background=black
    • #picture img: border=none
    • .selectedThumbnail: border-color=#ff2a00
    • .inFocus: border-color=#ff2a00
  4. save, file > preview in browser (opt+F12)

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=-20px
  6. save, file > preview in browser (opt+F12)

Making your own slideshow

  1. replace the contents of "slides_original" with your own images and generate a new gallery with Fireworks
  2. publish the updated site as a link from your personal process page for grading

BACK TO TOP
Last updated: 3/3/17 ■ Webmaster: Paul Young