How to Make a Website (DW)/ Step 7- Make a Media Portfolio Page/Design Option: Using Fireworks to Create a Slide Show

From WSU Technology Knowledge Base
Jump to: navigation, search
Recommended: For a slide show that will integrate with the recommended media portfolio web page, use the Fireworks option ("no Flash plugin required") as shown in the example below.

Steps for Creating a Slideshow

  1. Select Commands > Create Slideshow.
    Fireworks logo.jpg
  2. Click the Add An Album button (the plus sign) next to Albums.
  3. Choose the image files to include in the slide show and click OK.
  4. Fill in the AlbumBook Properties and the Album Properties.
  5. Select each of the panels on the right to configure the slide show properties.
  6. Choose the location for the completed slide show in the Export Options panel.
  7. After configuring all of the slide show settings, click Create.
  8. (Optional) To display the slide show in your browser, select the Launch Slideshow In Browser option, and then click Done.

Example of Slideshow "Player - Black (Flash plugin not required)"

Fireworks slide show 01.png

Settings for

  • In the dialog choose "Player - Black (Flash plugin not required).
    NOTE: the background color can be changed in Dreamweaver.
  • Check the box for auto-play on start-up
  • Select the Folder(s) and highlight the file(s) you want to include by browsing for them
  • Enter captions for the images if you do not wish to use the file names
  • Apply changes to other panels as you wish, including the Export Panel shown below where you may choose:
  • Size of the thumbs
  • Size of the slide show image
  • And can click to Create the slide....
Fireworks slide show 02.png


Installation of the Fireworks Slide Show

  1. Open the folder containing your slide show.
  2. Rename the file "index.html" to "media.lbi"
    NOTE: you will be advised that you are changing the file extension to .lbi; this is OK.
  3. Place all of the contents of this folder into the "root" folder of your web site on your computer.
  4. Open or refresh Dreamweaver and open the file "media.lbi"
  5. Open Page Properties of "media.lbi"
    — Change the font color in Appearance (CSS) to black (#000)
    — Change the background color to white (#fff).
    — Save the file and close it.

    NOTE: this slide show defaults to a flush-left alignment and cannot be modified.

  6. Open the file "mediaportfolio.html"
    — Delete rows/cells below the menu.
    — Click to place your insertion point below the table.
    — Use the Assets Panel to find the "media.lbi" file and insert it under the table. It will appear in the view in code with a message that seems off-kilter ("This page requires JavaScript. Please enable JavaScript...."); this message will not appear on the web page.
  7. Save the file and test it in a browser.

Other Resources

Design Options for Media Portfolios

Steps to make a website in Dreamweaver