How to Use Dreamweaver CS3 Spry Accordion Panels

Dreamweaver CS3 comes equipped with functions labeled Spry, which are a WYSIWYG way to add AJAX to a web page. They automatically provide you with HTML, CSS and JavaScripts to perform certain interactive functions. In this article you'll learn how to use the Spry Accordion Panels widget.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Dreamweaver CS3 software
• A partly complete web page or site

1. 
   The default appearance

   Accordion panels provide a way to use a small piece of web page real estate to contain several "panels" of information that the user moves between. You can put images, text and other content on the panels. This image shows a default accordion panel before customization.

2. 
   This icon in the Insert bar is for Spry Accordion Panels.

   Place the cursor on your document in the position where you want to insert the accordion panels. Click the Accordion Panel icon in the Spry category on the Insert bar.

3. The Spry widget will open on the page. When the Spry object appears, there are two labels and one content area visible. The lables are simply named Label 1 and Lable 2. The content area is numbered to match the corresponding label. See the image in Step 3.

4. 
   Add or remove panels with the Property inspector.

   When the blue outline highlighting the Spry object is present in the document window, you can use the Property inspector to customize the widget. Here you insert or remove accordion panels and change the order of the panels.

5. 
   Change the label text in the document window.

   Change the labels on the panels by highlighting them in the document window. You'll see the eye indicating which tab is visible, plus you'll be able to change the wording on the label. Note the new label at the arrow in the image.

6. 
   Click the eye to edit a content panel.

   To add content to a panel, run your mouse over the right side of the panel label area to reveal an eye symbol. Click the eye to open up the content panel for editing.

7. 
   Change appearance using CSS

   To customize the appearance of the widget, use CSS. When you inserted the Accordion Panel, Dreamweaver automatically generated a stylesheet and some JavaScripts and inserted them in your site. Find the Spry Accordion styles in your CSS styles panel. You can edit these styles to change colors, widths and other appearance features of the tabbed panels.

8. 
   Detailed comments in the stylesheet

   If you have problems figuring out what all these styles do, double-click the name of the stylesheet (SpryAccordion.css) and open the CSS page. You'll see that it is lavishly commented to help you understand what each style rule is for and to see what can be changed.

9. When you've finished inserting the content for each panel and have made any changes to the CSS, you're ready to upload the new page. Be sure to upload all the HTML, CSS and JavaScript files related to making the Spry widget function properly.

Tips & Warnings

• After you've competed the customization of the Tabbed Panels, go through the stylesheet and delete the comments before you upload the CSS to the server. This will save bandwidth.