Dreamweaver CS6: The Missing Manual

Tabbed Panels

Some website visitors are loath to scroll; if they don’t see what they want when a page first loads, they move on. Because of this, some web designers divide long passages of information into multiple pages so that each page presents small, easy-to-digest chunks. Of course, that means building several pages instead of just one, and it forces visitors to click through (and wait for) a series of pages. The Spry Tabbed Panels widget provide an alternative (see Figure 13-1). Instead of creating one long page, or several smaller pages, you organize information into blocks, and drop them into separate tabbed panels. That way, your content is always front and center, and your guests can easily visit different sections of your site by clicking a tab.

Figure 13-1. Organize your page’s content into easily accessible panels with the Spry Tabbed Panels widget. Clicking a tab opens a new panel’s worth of information without the browser having to load a new page.

Adding a Tabbed Panel

You can place Spry tabbed panels anywhere on a web page. But since the tabs form a single horizontal row, you need enough space to accommodate all the tabs. Unless you have only a couple of tabs with one-word text labels, you should place the tabbed panels in a fairly wide space, such as the main column of a web page or across the entire width of the page. To do so, follow these steps:

1. In the document window, ...