eHow launches Android app: Get the best of eHow on the go.

How To

How to Use Dreamweaver CS3 Spry Tabbed Panels

Contributor
By Virginia DeBolt
eHow Contributing Writer
(3 Ratings)

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. Step 1
    The default appearance
    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. Step 2
    This icon in the Insert bar is for Spry Tabbed Panels.
    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. Step 3
    The Spry widget on the page
    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. Step 4
    Change the number of tabs with the Property inspector.
    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. Step 5
    Change the tab text in the document window.
    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. Step 6
    Use CSS to change appearance.
    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. Step 7
    Comments in the CSS are helpful.
    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. Step 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.

Post a Comment

Post a Comment
  • Have you done this? Click here to let us know.
I Did This

Related Ads

Internet
Virginia DeBolt,

Meet Virginia DeBolt eHow's Internet Expert.

Get Free Internet Newsletters

Copyright © 1999-2009 eHow, Inc. Use of this web site constitutes acceptance of the eHow Terms of Use and Privacy Policy.   en-US Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.

Demand Media
eHow_eHow Technology and Electronics