How to Make Scrolling Images in Dreamweaver CS5

By Sara Williams

The scrolling images effect is also known as a “slider” or “slideshow” effect. You can create the same effect using a few images and one jQuery script. Inside Dreamweaver CS5, you will add any number of photos, so long as they are all sized the same. Cascading Style Sheet (CSS) code stacks these images together so only one shows at a time, and then the script cycles them.

Create the HTML

Step 1

Open Dreamweaver and click on “HTML” under “Create New” to start your Web page. Press “Ctrl+Shift+S” on your keyboard to save your new file.

Step 2

Press “Ctrl+Alt+I” on your keyboard to insert the first image. Insert every image you want to scroll on the page, one after another. All images should be the same width and height. At this point, you have nothing else to do with the images.

Step 3

Click on the first image and then click on each of the other images while holding down the “Shift” key. You should have all images selected. Press “Ctrl+E” on your keyboard and select “div” from the list of tags. Click “Insert” on the “Tag Chooser” screen to insert the div, which will wrap around the images. Check the code in either “Code” or “Split” view and make sure it looks similar to this:

CarBeachBuilding

Step 4

Go to “Split” view and click on the “

” tag. Add a class name to the tag:

Style the Images

Step 1

Right-click on the selected images in the “Design” panel and select “CSS Styles” and then “New...” Select “Class” as your selector type and add the name “scroll.” Click “OK” to continue.

Step 2

Select “Box” from the “Category” list and set a width and height equal to the dimensions of one image. Keep “Same for all” checked for both “Padding” and “Margin,” then make each equal to zero. Click “OK” to add the code.

Step 3

Right-click anywhere and select “CSS Styles” and “New...” again. Write your selector as follows:.scroll imgSelect “Combo” from the selector types at the top of the window. Click the “OK” button to continue. Select “Positioning” under the category list and set “Top” and “Left” to zero. Click “OK” to add the new CSS code.

Add the jQuery Cycle Plugin

Step 1

Download the jQuery Cycle plugin from jQuery.Malsup.com. Rather than downloading straight to your computer like a regular file, the download link will load the source code in your browser. Press “Ctrl+A” and “Ctrl+C” to copy the entire code. Open Notepad and paste the code in to the blank file. Save it as “jcycle.js” in the same folder as your Web page.

Step 2

Go to the “Insert” panel and select “Script.” Click the “folder” icon next to the “Source” field and select your copy of the jQuery Cycle script from there. Click “OK” to insert the script in your Web page. Go to “Code” view, highlight and cut the “

Step 4

Add a new pair of “