How to create a spry slide show in dreamweaver cs4

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to create a spry slide show in dreamweaver cs4
You can make a slide show with Dreamweaver. (projector ready for presentation image by Dmitry Goygel-Sokol from

Slide shows can be created in Dreamweaver in just a few minutes using CS4 Spry widgets. In CS4, you can make a slide show with the tabbed panels, collapsible panels or accordion Spry widget. The selection of which widget to use will depend on what layout presentation best fits your needs. The tabbed panels Spry widget does a good job that will fill the needs of most.

Skill level:

Things you need

  • GIF or JPEG image files

Show MoreHide


  1. 1

    Start Adobe Dreamweaver CS4. Select "HTML" located underneath the "Create New" category on the splash screen that appears. Select "File>Save As." Save the file as "slideshow."

  2. 2

    Position your cursor on the page where you want your tabbed panels widget to appear. Press enter to move the location downward. Select "Insert>Spry>Spry Tabbed Panels" from the main menu. Observe that a tabbed panels widget is on the screen with two tabs named "tab1" and "tab2" and two content panels named "Content1" and "Content2."

  3. 3

    Insert your cursor in the Content 1 panel. Remove the Content 1 text. Select "Insert>Image" from the main menu. Browse your directories for an image file to insert. Select an image file that has been formatted as a GIF or JPEG file. Select "OK." Press OK again when the "Image Tag Accessibility Attributes" appears. Repeat the picture insertion process for the Content 2 panel.

  4. 4

    Select tab 1. Position your cursor in the tab 1 tab, delete the tab 1 heading and type into the tab a new name. Use the name, "Slide One", for this example. Repeat the procedure for the remaining tab. Name the other tab "Slide Two."

  5. 5

    Test your slide show. Position your cursor over the Slide One tab. Click the "eye icon" when it appears. Check that the image appears that you placed in the Slide One content box appears. Do the same with the Slide Two tab. Select "File>Preview in Browser>IExplore". Select the Slide One and Slide Two tabs in turn and check to see if the associated image you placed appears when each tab is selected.

Tips and warnings

  • You can change the order of your slides within the property inspector. Select "Spry Tabbed Panels" icon just above your tabbed panels widget. Select the down arrow called "Move panel down in list" or the up arrow called "Move panel up in list." The name of the arrow should appear in a tool tip if you roll over these arrows. You can also delete and add new slides with the "plus" and "minus" icons.
  • If you want advanced Spry Slide Show widgets that don't require significant coding and design, you can use Spry UI widgets. However, these widgets are only available for Dreamweaver CS5.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.