Dreamweaver CS5: 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 forces visitors to click through (and wait for) a series of pages. Spry Tabbed Panels provides an alternative (see Figure 13-1). Instead of creating one long page, or several smaller pages, you can organize information into separate tabbed panels. That way, your content is always front and center, and your visitors can easily access different sections by clicking a tab above each panel.

Adding a Tabbed Panel

You can place Spry tabbed panels anywhere on a web page. But since the tabs form a single row at the top of the group of panels, you need enough horizontal space to accommodate all the tabs (see Formatting Tabbed Panels for an exception to this limitation). 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. Just follow these steps:

1. In the document window, click where you wish to insert the panels.

   For example, inside a div tag (Float Layout Basics).

2. Choose Insert→Spry→Spry Tabbed Panels, or, on the Insert panel’s Spry category, click one of the Spry Tabbed Panel’s buttons (see Figure 13-2 ...