How to Create a Spry Slide Show in Dreamweaver CS4

Silver iphone 11 and 11 pro.jpg

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.

  • GIF or JPEG image files

1 Start Adobe Dreamweaver CS4

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 Position

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 Insert your cursor in the Content1 panel

Insert your cursor in the Content1 panel. Remove the Content1 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 Content2 panel.

4 Select tab 1

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 Test your slide show

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.

  • 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.

Mark Stansberry has been a technical and business writer over for 15 years. He has been published in leading technical and business publications such as "Red Herring," "EDN" and "BCC Research." His present writing focus is on computer applications programming, graphic design automation, 3D linear perspective and fractal technology. Stansberry has a Bachelor of Science in electrical engineering from San Jose State University.

×