Graphics Programs Reference
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
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
4. Scroll down, if necessary, to view the entire Accordion widget. See Figure 8-2.
Accordion widget in the contact.html page
click to insert the Spr y
the page heading
and the co n tact form
Accordion widge t
5. Save the page. The Copy Dependent Files dialog box opens, indicating that you
to the site.
6. Click the OK button. The SpryAssets folder and its content are added to the site.