Operation Manual

402
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
The default HTML for the Accordion widget comprises an outer div tag that contains all of the panels, a div tag for
each panel, and a header
div and content div within the tag for each panel. An Accordion widget can contain any
number of individual panels. The HTML for the Accordion widget also includes
script tags in the head of the
document and after the accordion’s HTML markup.
For a more comprehensive explanation of how the Accordion widget works, including a full anatomy of the Accordion
widget’s code, see
www.adobe.com/go/learn_dw_spryaccordion.
For a tutorial on working with the Accordion widget, see www.adobe.com/go/vid0167.
Insert and edit the Accordion widget
Insert the Accordion widget
❖ Select Insert > Spry > Spry Accordion.
Note: You can also insert an Accordion widget by using the Spry category in the Insert panel.
Add a panel to an Accordion widget
1 Select an Accordion widget in the Document window.
2 Click the Panels Plus (+) button in the Property inspector (Window > Properties).
3 (Optional) Change the name of the panel by selecting the panel’s text in Design view and altering the text.
Delete a panel from an Accordion widget
1 Select an Accordion widget in the Document window.
2 In the Panels menu of the Property inspector (Window > Properties), select the name of the panel to delete, and
click the Minus (-) button.
Open a panel for editing
❖ Do one of the following:
• Move the mouse pointer over the tab of the panel to open it in Design view, and click the eye icon that appears at
the right of the tab.
• Select an Accordion widget in the Document window, and then click the name of the panel to edit it in the Panels
menu of the Property inspector (Window
> Properties).
Change the order of panels
1 Select an Accordion widget in the Document window.
2 In the Property inspector (Window > Properties), select the name of the Accordion panel you want to move.
3 Click the up or down arrows to move the panel up or down.
Customize the Accordion widget
Although the Property inspector enables you to make simple edits to an Accordion widget, it does not support
customized styling tasks. You can alter the CSS rules for the Accordion widget and create an accordion that is styled
to your liking.
For a quick reference on changing the colors of the Accordion widget, see David Powers’s Quick guide to styling Spry
tabbed panels, accordions, and collapsible panels.