About Spry widgets
A Spry widget is a page element that provides a richer user experience by enabling user interaction. A Spry widget comprises the following parts:
- Widget structure
- An HTML code block that defines the structural composition of the widget.
- Widget behavior
- JavaScript that controls how the widget responds to user-initiated events.
- Widget styling
- CSS that specifies the appearance of the widget.
The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript. You can easily insert these widgets—the code is HTML and CSS at its simplest—and then style the widget. The behaviors in the framework include functionality that lets users show or hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more.
Each widget in the Spry framework is associated with unique CSS and JavaScript files. The CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality. When you insert a widget by using the Dreamweaver interface, Dreamweaver automatically links these files to your page so that your widget contains functionality and styling.
The CSS and JavaScript files associated with a given widget are named after the widget, so it’s easy for you to know which files correspond to which widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js). When you insert a widget in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves the corresponding JavaScript and CSS files to that location.
Spry widgets resources and tutorials
The following on-line resources provide more information on customizing Spry widgets.
Insert a Spry widget
Select Insert > Spry, and
select the widget to insert.When you insert a widget, Dreamweaver automatically includes the necessary Spry JavaScript and CSS files in your site when you save the page.
Select a Spry widget
- Hold the mouse pointer over the widget until you see the widget’s blue tabbed outline.
- Click the widget’s tab at the upper-left corner of the widget.
Edit a Spry widget
Select the widget to edit and make your
changes in the Property inspector (Window > Properties).For details on making changes to specific widgets, see the appropriate sections for each widget.
Style a Spry widget
Locate the appropriate CSS file for
the widget in the SpryAssets folder of your site, and edit the CSS
according to your preferences.For details on styling specific widgets, see the appropriate customization sections for each widget.
You
can also format a Spry widget by editing styles in the CSS panel,
just as you would for any other styled element on the page.Get more widgets
There are many more web widgets available than the Spry widgets that install with Dreamweaver. The Adobe Exchangeprovides web widgets that have been developed by other creative professionals.
Choose Browse for Web Widgets from the Extend
Dreamweaver menu 
in the
Application bar.For a video overview from the Dreamweaver engineering team about working with web widgets, see www.adobe.com/go/dw10widgets.
Change the default Spry assets folder
When you insert a Spry widget, data set, or effect in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves the corresponding JavaScript and CSS files to that location. You can change the default location where Dreamweaver saves Spry assets if you prefer to save them somewhere else.
- Select Sites > Manage Sites.
- Select your site in the Manage Sites dialog box and click Edit.
- In the Site Setup dialog box, expand Advanced Settings and select the Spry category.
- Enter a path to the folder you want to use for Spry assets and click OK. You can also click the folder icon to browse to a location.
