CAIRO BOOKS's Description
Web designers, web producers, and webmasters rely on one program above all
others to design, build, and manage professional websites: Adobe Dreamweaver.
It provides the tools you need to create everything from simple HTML pages to
database-driven PHP pages. But what makes Dreamweaver so versatile is also what
makes it difficult to learn. This bestselling guide offers you with clear,
jargon-free explanations to help you master this sophisticated program -- and
bring stunning, contemporary websites to life.
Written by veteran Dreamweaver teacher and author David McFarland,
Dreamweaver CS5: The Missing Manual takes you through site creation
step-by-step, from building your very first page to launching a
template-driven, fully interactive site. You'll hone your skills with the help
of hands-on, guided tutorials throughout the book. Learn how to control the
appearance of your web pages with CSS, from basic to advanced techniques Design
dynamic, database-driven websites, from blogs to product catalogs, and from
shopping carts to newsletter signup forms Add interactivity to your website
with ready-to-use JavaScript programs from Adobe's Spry Framework Effortlessly
control the many helper files that power your website and manage thousands of
pages Examine web page components and Dreamweaver's capabilities with the
book's "live examples"
Add Spry Tabbed Panels to Web Pages
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. 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:
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 web page.
1. In the document window, click where you wish to insert the panels. For
example, inside a div tag.
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).
You can find all the Spry goodies on the Insert panel’s Spry category (Figure
13-2, left); you’ll also find several Spry widgets (including tabbed panels)
listed under the Layout category (Figure 13-2, right), and other Spry buttons
grouped under other tabs (form validation Spry widgets appear under the Forms
tab, for example).
Figure 13-2. In the Insert panel, you can identify a Spry icon by the
starburst
in the button’s lower-right corner. It’s even easier to distinguish them from
other buttons if, from the Insert Panel’s category menu, you choose Color
Icons--this changes the drab gray starburst to a bright orange.
After you insert a tabbed panel, you see two tabs and two panels on the page
(Figure 13-3); in addition, a blue tab appears above the panels indicating the
Spry widget. The blue tab appears only in Dreamweaver’s Design view, not in a
guest’s web browser. It gives you an easy way to select the Spry widget and
access its properties in the Property inspector. Note : When you save a page
after inserting a Spry Tabbed Panel, Dreamweaver notifies you that it has added
two files to the site: a CSS file (SpryTabbedPanels.css) for formatting the
panel group, and a JavaScript file (SpryTabbedPanels.js) to make the panels
appear and disappear when visitors click the tabs. Dreamweaver saves both files
in the SpryAssets folder in your site’s root folder. Make sure you upload this
folder when you move your site onto your web server. productPanels . A
descriptive name helps you identify code related to the panel group if you work
in Code view to enhance or change the functionality of the panels.
Figure 13-3. Normally, when a browser downloads a page containing Spry
panels, it highlights the first
tab and panel. However, if you’d rather open another panel when the page
loads, select
the relevant tab’s name in the Property inspector’s “Default panel” menu.
4. Add additional panels.
If two panels aren’t enough for your needs, use the Property inspector to add
more. Above the list of tab names, click the + button (see Figure 13-3) to add
a new panel. To remove a panel, in the same list, click the name of a tab, and
then click the minus (-) button. You can also reorder the panels by selecting a
tab from the list, and then clicking the up or down arrow button. The up arrow
moves a panel to the left, while the down arrow moves a panel to the right.
Note : A Spry widget’s properties appear in the Property inspector only when
you select the widget. To do so, click the blue tab above the elements inside
the widget.