Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Simulate Multiple Pages with Tabbed Panels

Three Spry widgets — Tabbed Panels, Accordion, and Collapsible Panels — all accomplish similar tasks. You use them to create sections within an HTML page that “open” and “shut” based on user clicks. All three are defined in a similar way.

To insert tabbed panels into a web page (and, of course, this should be a page saved to a Dreamweaver site), follow these steps:

1

Choose Insert→Spry→Spry Tabbed Panels.

When you insert a Spry Tabbed Panels widget, a two-panel tabbed panel is generated. (A set of tabbed panels is shown here.)

2

Define the properties of the panel in the Properties Inspector.

To add new tabs or delete them: Click the + sign to add a tab, or delete a tab by selecting it and clicking the – sign.

To reorder the tabs: Use the Up and Down triangles in the Properties Inspector, as shown.

To change the tabbed panel that is selected, by default, when a page opens: Change the Default Panel selection in the Properties Inspector.

3

Edit the content of the tabs and the panels in the Document window.

Click and type right in any of the tabs themselves to edit the content of tabs.

To open a panel for editing, hover over the tab of the panel in the Document window, and click the “eye” icon that appears.

4

Edit the appearance of the tabs (the colors, borders, and background colors, among other attributes) by editing the SpryTabbedPanels.css style sheet file in the CSS Styles panel.

As with other Spry widgets, a substantial style sheet enables the JavaScript.

   
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.