How to Use Spry

Spry is a feature added to Adobe Dreamweaver CS3. It simplifies inserting interactive elements on a Web page without using other programs. Spry consists of "Widgets." Although there are 13 widgets, 5 of these deal with advanced techniques. The remaining 8 are the ones in general use for Web page development. There are 4 widgets validating user input and 4 display widgets. Validation widgets are Text Field, Text Area, Checkbox and Select (drop down menu). Display widgets are Menu Bar, Tabbed or Collapsible Panels, and Accordion. Since the process is very similar for each, this illustration uses just one example.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Adobe Dreamweaver CS3

1. Create a new Web HTML page by choosing this from the initial display list when Dreamweaver opens. Immediately assign a file name and save the page by clicking on "File," Save As."

2. 
   Spry Menu Bar; screen shot by Charles Anderson

   Click on "Insert," scroll down the drop-down list and select "Spry Menu Bar." Choose either a horizontal or a vertical format on the next screen. This brings up a default menu bar with 4 items. Add additional ones if needed in the Menu Bar properties.

3. Substitute your own menu text in the "Text" section of Properties at that bottom of the screen. Modify each first level menu this way, adding additional sub- and sub-sub menus as needed.

4. 
   Enhanced Spry Menu ; screen shot by Charles Anderson

   Make limited changes in the appearance of menu sections by clicking on each item and editing the Properties section such as size, font style (bold, italic or alignment) and color. Edit more details by clicking on "Modify," "CSS Styles" and locating the over-all element you want to edit in the style list.

5. Click "File," Save." Use Dreamweaver's preview in browser feature to check your work, and then upload ("Put") not only the Web page but also all files listed under the CSS and Spry Assets folders.

Tips & Warnings

• Although the menu items appear spread across or down the design window, when on an active Web server, only the first level is visible until the user rolls the mouse across the items as shown in the second image here. Since this image is a live Web shot, the three levels are expanded.
• You must save a Web page before you can add a Spry widget. The process of creating these small tools generates many CSS styles and Javascript files. To work on a live Web page, you must upload the Web document and the folders containing all these additional files.

References

• Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques; David Karlins; 2007

Resources

• Spry Widget Workshop