How to Use Dreamweaver CS3 Spry Tabbed 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 Tabbed Panels widget.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Dreamweaver software
• A partly complete web page or site

1. The default appearance

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

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

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

3. The Spry widget on the page

   The Spry widget will open on the page. When the spry object appears, there are two tabs and an area in which you add or paste content to replace the content placeholder. The tabs are simply named Tab 1 and Tab 2. (This image shows 3 tabs.)

4. Change the number of tabs 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 tab panels and change the order of the tabs.

5. Change the tab text in the document window.

   Change the labels on the tabs 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 tab label.

6. Use CSS to change appearance.

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

7. Comments in the CSS are helpful.

   If you have problems figuring out what all these styles do, double-click the name of the stylesheet (SpryTabbedPanels.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.

8. 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.