Quick Panels and Menu Bars from Dreamweaver's Spry Widgets
Introducing Spry Widgets
Spry widgets are arguably the most dramatic addition to Dreamweaver CS3. The acquisition of Dreamweaver by Adobe opened the door to incorporating the Spry element that had been under development by Adobe—largely off the beaten path of web design, until these elements were added to Dreamweaver.
Yes and no.
In some cases, Spry widgets awkwardly overlap with some elements that are still available as Behaviors in Dreamweaver CS3. For example, using either a new Spry widget or an old Behavior, you can validate form data—that is, test the data to meet criteria (for instance, a ZIP code must be numbers, not letters). I probably wouldn’t have bothered to learn how to use the new Spry widget to validate form data, had I not been writing Adobe Dreamweaver CS3 HOW-TOs: 100 Essential Techniques. Since I had to test every feature of Dreamweaver, I explored the new Spry version of form data validation, and found it easier to use and more flexible than the old Behavior.
In this article, I’ll focus on a couple of the most dramatic and powerful Spry widgets included in Dreamweaver CS3: tabbed panels and menu bars.
- Tabbed panels allow you to place a set of tabs on a single web page that appear to open separate web pages. In reality, all the content is on a single web page, and is hidden or revealed depending on which panel is selected. It’s an intriguing concept—for instance, all in one page, you can design a site that appears to have five pages. (After you’ve experimented with or implemented tabbed panels, drop me an email message and let me know how they worked for you.)
- Menu bars (also known as flyout menus, pop-up menus, and so on) are highly useful navigation tools. They allow the designer to hide multiple navigation menu options in a tidy horizontal or vertical navigation bar. I used to buy a bunch of menu bar generators, and/or use Fireworks (also an Adobe product now) to design menu bars. So far, I’m finding that the menu bars available through the new Spry widget in Dreamweaver are flexible and powerful enough to manage whatever menu bars I need in designing sites.
Before We Dive In
As we go along in this article, I’ll do my best to provide quickie explanations of whatever CSS properties we’re defining, but it will be helpful if you have a basic familiarity with CSS styles, and custom class styles in particular.
Three Things to Remember
Here are three things to keep in mind when you create Spry widgets:
- The document must be saved before you insert a Spry widget.
- You control basic features of the Spry widget, such as text and links, in the Property inspector. But you format Spry widgets (elements such as font, text color, background color, and so on) in the CSS Styles panel, by editing the CSS style for the Spry widget.
With those three concepts in mind, I’ll walk you through the process of creating a tabbed panel.