Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

Quick Panels and Menu Bars from Dreamweaver's Spry Widgets

David Karlins unveils Dreamweaver CS3's new secret weapon: Spry widgets. With these powerful quick-creation devices, you can whip up tabbed pages or menu bars in your web pages in a snap.
Like this article? We recommend

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.

Spry widgets essentially combine JavaScript and Cascading Style Sheets (CSS) to allow developers to embed and customize interactive objects in web pages. At this point, veteran Dreamweaver designers will exclaim, "Dreamweaver Behaviors have always done that!"

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

Before I walk you through the process of creating a couple of the most exciting of the new Spry widgets in Dreamweaver, a caveat: They’re kinda complex. It won’t be possible to "start from scratch" in relation to the things you need to understand to use Spry widgets. Most of the JavaScript stuff required to make these widgets work is generated behind the scenes, so there’s no need to cram and learn JavaScript. But you do need to know the basics of applying CSS if you want to do anything with widgets beyond creating the default set.

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.
  • Spry widgets generate lots of CSS styles and JavaScript files, and these files are saved every time you save a page with 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.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.