Operation Manual

400
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
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.
More Help topics
“Understanding Cascading Style Sheets” on page 116
Spry widgets resources and tutorials
The following on-line resources provide more information on customizing Spry widgets.
Spry widget samples
Customizing Spry Menu Bars in Dreamweaver
Spry Validation widgets (video tutorial)
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.
Note: You can also insert Spry widgets by using the Spry category in the Insert panel.
Select a Spry widget
1 Hold the mouse pointer over the widget until you see the widget’s blue tabbed outline.
2 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.