How to Create a Slide Show With Dreamweaver

Techwalla may earn compensation through affiliate links in this story. Learn more about our affiliate and product review process here.
Slideshows are a common website interface used to highlight recent content.
Image Credit: Miriam2009/iStock/Getty Images

Dreamweaver is Adobe's professional Web-development software and provides a range of functions for building Web pages. These functions range from back-end database integration to JavaScript slide-shows that change images at fixed intervals. Dreamweaver's standardized JavaScript lets website developers create slideshows without having to dig into the code directly. While the Web element called a "slideshow" shares the same name as a deck of PowerPoint slides, Dreamweaver's output is standard HTML viewable in any Web browser.


Step 1

Launch Dreamweaver and open the website project from the "File" menu. Navigate to the page of your website project where the slideshow will be integrated.

Video of the Day

Step 2

Click "Insert," then "Layer" from the top layer menu. This will open a dialog box; click "Image" for the type of layer in that box.


Step 3

Click "Browse" and navigate to your images directory. Select your first layer's image -- this will be the first slide displayed in the slideshow. You can also point to other HTML pages rather than images; this is one way to integrate text and clickable links in your website slideshow.


Step 4

Repeat the previous two steps, adding a new layer and appropriate content for each slide you'll want displayed. Because the JavaScript used to display the slideshow in the Web browser will pre-fetch all of the content, you'll probably want to keep slideshows to no more than six or seven elements so that the Web page loads in a reasonable time.



Step 5

Click "Window," then "Timeline" from the top layer menu. A timeline editor will appear. Enter a duration for each image in the layer set you created. Select the first image you want shown, right-click on the timeline entry for it and select "Add Keyframe."

Step 6

Select a layer/image combination for the keyframe selected and repeat this procedure for each layer and image you want in your timeline.

Step 7

Click "OK" to save your settings.




Report an Issue

screenshot of the current page

Screenshot loading...