Creating Spry Elements and Alternate Style Sheets - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 442

Inserting a Spry Widget
You will add the Accordion widget in the contact.html page to provide the user with
detailed driving directions to the fest from two highways without increasing the length of
the page. You will then modify the styles of the Accordion widget to fi t the look and feel
of the NextBest Fest site. In this case, the Spry element is both useful and aesthetically
cohesive.

To insert the Accordion widget in the contact.html page:

◗

1. Reset the Dreamweaver workspace to the default Designer layout, open the
NextBest Fest site you modified in Tutorial 7 , and then open the contact.html
page in Design view.

◗

2. Click in the blank line below the page heading and above the dotted red line
indicating the form area.

◗

3. In the Spry category of the Insert panel, click the Spry Accordion button. The
Accordion widget is inserted in the blank line, and its properties appear in the
Property inspector.

◗

4. Scroll down, if necessary, to view the entire Accordion widget. See Figure 8-2.

Figure 8-2 Accordion widget in the contact.html page

click to insert the Spr y
Accordion widget Accordion widget

inserted between
the page heading
and the co n tact form

Accordion widge t
properties

◗

5. Save the page. The Copy Dependent Files dialog box opens, indicating that you
need to copy the files that contain the widget's JavaScript and the CSS style sheet
to the site.

◗

6. Click the OK button. The SpryAssets folder and its content are added to the site.