Working With The Tabbed Panels Widget - Adobe 38040334 - Dreamweaver CS3 User Manual

Constrain the width of a collapsible panel
By default, the Collapsible Panel widget expands to fill available space. You can constrain the width of a Collapsible
Panel widget, however, by setting a width property for the collapsible panel container.
1 Locate the .CollapsiblePanel CSS rule by opening the SpryCollapsible Panel.css file. This rule defines properties
for the main container element of the Collapsible Panel widget.
You can also locate the rule by selecting the Collapsible Panel widget, and looking in the CSS Styles panel (Window
> CSS Styles). Make sure the panel is set to Current mode.
Add a width property and value to the rule, for example
2

Working with the Tabbed Panels widget

About the Tabbed Panels widget
A Tabbed Panels widget is a set of panels that can store content in a compact space. Site viewers hide or reveal the
content stored in the Tabbed Panels by clicking the tab of the panel they want to access. The panels of the widget
open accordingly as the visitor clicks different tabs. In a Tabbed Panels widget, only one content panel is open at a
given time. The following example shows a Tabbed Panels widget, with the third panel open:
A
C
A. Tab B. Content C. Tabbed Panels widget D. Tabbed panel
The HTML code for the Tabbed Panels widget comprises an outer
tabs, a to contain the content panels, and a
div
also includes script tags in the head of the document and after the Tabbed Panel widget's HTML markup.
For a more comprehensive explanation of how the Tabbed Panels widget works, including a full anatomy of the
widget's code, see www.adobe.com/go/learn_dw_sprytabbedpanels.
Insert the Tabbed Panels widget
❖
Select Insert > Spry > Spry Tabbed Panels.
Note: You can also insert a Tabbed Panels widget by using the Spry category in the Insert bar.
Add a panel to a Tabbed Panels widget
1 Select a Tabbed Panels widget in the Document window.
Click the Panels plus button in the Property inspector (Window > Properties).
2
3 (Optional) Change the tab name by selecting the tab's text in Design view and altering it.
width: 300px;
B
D
for each content panel. The HTML for the Tabbed Panels widget
div
September 4, 2007
.
tag that contains all of the panels, a list for the
div
DREAMWEAVER CS3 461
User Guide