- Introducing Spry Widgets
- Creating and Formatting Tabbed Panels
- Creating Menu Bars with Spry
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating and Formatting Tabbed Panels
Tabbed panels transform a single web page into a series of tabbed panels that look like distinct web pages to a visitor. Tabbed panels are one way to create an easily navigable web site.
To insert tabbed panels in a web page, follow these steps:
- In the Dreamweaver document window, save your web page in progress. Remember: Before you create any Spry widget, you have to save the current web page.
- Place the cursor where you want the tabbed panels to appear (usually at the top of a page) and choose Insert > Spry > Spry Tabbed Panels. By default, a tabbed panel with two tabs appears.
- Enter content in a tabbed panel by clicking the desired tab. The selected tab displays a blue outline. Click in the Content area below the tab, and enter the content for that tab (see Figure 1). Tab content can consist of anything you would place on a regular web page, including text and images.
)
Figure 1 Entering content in a tabbed panel.
After creating a tabbed panel widget, you can add (or delete) tabbed panels in the Property inspector.
By default, tabbed panels are named Tab 1, Tab 2, and so on. You’ll probably want to give the tabs names that reflect the actual content of the tab; for example, Home, Contact Info, About Us, or the like. To change the name of a tabbed panel, double-click the current label (for example, Tab 1), and type a new label.
In addition to adding and deleting tabs, you can shuffle the order of tabbed panels in the Property inspector, using the up and down buttons (see Figure 2).
)
Figure 2 Use these buttons to change the order of tabbed panels.
I mentioned earlier that you need to tinker with CSS properties to control much of how Spry widgets look. You use CSS to control fonts, background colors, and other formatting attributes of the tabbed panels.
To format elements of the tab such as background and text color, select the CSS Styles panel (choose Window > CSS Styles), and view the styles for SpryTabbedPanels.css. When you expand this CSS file in the CSS Styles panel, a set of class styles appears in the panel. In the lower part of the CSS Styles panel, you can change the properties of any style you select in the top part of the panel.
To change the background color for unselected tabs, click the .TabbedPanelsTab style in the CSS Styles panel, and choose a background color from the background-color property (see Figure 3).
)
Figure 3 Changing the background color for tabbed panels.
You also use the CSS Styles panel to format text in tabs, change the background colors in tabs, or change the width of tabs in the Property inspector. To change these and other formatting elements of a tabbed panel or of individual tabs, you edit the CSS styles associated with these tabbed panel elements.
Let’s walk through a few more examples of formatting elements of a tabbed panel using CSS:
- To change the background color displayed by the tabs when the mouse pointer hovers over a tab, choose the .TabbedPanelsTabHover style in the CSS Styles panel, and choose a background color from the background-color property.
- You also can change the background color for a selected tab. Choose the .TabbedPanels TabSelected style in the CSS Styles panel, and choose a background color from the background-color property.
- To change the background color for a tab’s content area, select that tab in the Document window, choose the .TabbedPanelsContentGroup style in the CSS Styles panel, and choose a background color from the background-color property.
Now that you know how to edit a few frequently changed elements of a panel style, you can experiment with other properties on your own.
Formatting the content of tabbed panels is easy. You do this the same way you would format (or edit) text or images in a regular Dreamweaver document.