WORKING WITH SPRY SLIDE SHOW WIDGETS

Continuing from my earlier posts, I am going to create my second page of my website and call it photogallery.html for my texartisancakes.com website and create a customized slide show. (See earlier posts for lessons 1-10)

So far, I have created the home page of my website. Now I am ready to make my second page called Photo Gallery.  In this tutorial, I am going to show you how to create your second page, and prepare for your slide show by customizing an Adobe Spry Widget in the Widget browser!
 

Overview: I am going create the second page of my website called Photo Gallery and customize a slide-show with a filmstrip by using Adobe Spry Widgets.

(Double-click images to make them bigger.)

Lesson 11
How to create your second page and acquire and save a slide show widget to my widgets:

1. Open the index.html that you have already created.
2. Save as - photogallery.html. (see figure 11.0)
3. From the menu bar, click on the extended dreamweaver icon (the little icon that looks like the cog of a wheel.) Then click on Widget Browser. (see figure 11.1)
4. In the Widget Browser, click Adobe Exchange, then scroll down and double-click on Spry Image Slide show with Filmstrip. (see figure 11.2)
5. Here you can preview the widget. In the bottom right corner click, add to my widgets. Then click on go to my widgets. (see figure 11.3 and 11.4)

figure 11.0

 



figure 11.1

 

figure 11.2

 

figure 11.3

 

figure 11.4

Lesson 12
How to customize the slideshow widget to match your site:

1. Within the my widgets window, click on Spry Image Slideshow with Filmstrip. (see figure 12.0)
2. Select default, and configure. (see figure 12.1)
3. Give your widget a name and save. Double-click on your newly created widget to start editing it . (see figure 12.2)
4. Click on the titles toolbar and change the name of your slide show, the font, and the color of your text to suit your needs.  (see figure 12.3)
5. Click on the frame and viewport tool bar to change the background colors to match your color scheme.  (see figure 12.4)
6. Next we are going to size the slide show to fit in our .content area.  To get the size of the area in Dreamweaver, look at the CSS definition rule for .content. Notice under box, the width is set to 780 pixels.  I know that the width of my slide-show needs to be 780 pixels total to fit nicely inside the content area. (see figure 12.5)
7. Accounting for the 1 pixel width border on the left and right side, (780 px - 2 px = 778px)set the background area width to 778 pixels. (see figure 12.6)
8. Click on the filmstrip and thumbnails tool bar to change the background colors to match your color scheme.
9. Click save preset. (see figure 12.7)

figure 12.0

figure 12.1

 

 figure 12.2

 

 figure 12.3

 

 figure 12.4

 

figure 12.5

 

figure 12.6

 

figure 12.7