Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map

This work is licensed under a Creative Commons License.

The Easy Way to Add Dynamic Elements to Web Sites

This tutorial takes you step-by-step through adding and modifying a Spry Menu Bar in Dreamweaver CS3.

By  Dave Sawyer McFarland
Wednesday, July 11, 2007

Until recently, you probably only used the word "spry" to describe an aging yet still nimble person. But Dreamweaver CS3 introduced the world to a new meaning of the word: an exciting set of tools based on Adobe's Spry Framework for Ajax. Spry is a set of JavaScript files that let you easily add dynamic elements, such as drop-down navigation menus, tabbed panels, and interactive data tables, to a Web page. The Spry framework isn't actually a part of Dreamweaver -- it's a separate Adobe project. However, Dreamweaver CS3 includes a friendly user interface for adding many Spry-driven page elements (called "widgets").

One of Dreamweaver CS3's most useful widgets is the Spry Menu Bar (Figure 1). The Spry Menu Bar provides a way to include lots of links in a compact space. Each menu button can include an additional pop-up menu, and each button on one of those pop-up menus can have yet another pop-up menu. So in addition to the main navigation buttons, the Spry menu bar supports two levels of pop-up submenus.

Figure 1. Dreamweaver CS3's new Spry Menu Bar lets you create interactive navigation bars with up to two levels of pop-up sub menus.

With Spry menu bars, you don't ever have to worry about the complex JavaScript required to make pop-up menus pop. But while Dreamweaver makes it easy to insert a Spry Menu Bar, you still need to be familiar with the new interface for modifying the menu bar, and understand the long list of CSS styles that make the menu bar look good, so you can change its appearance to match your site's design.

Adding a Spry Menu Bar to a Web page is a three-step process. First, you tell Dreamweaver to insert the menu bar, which adds a JavaScript file and a CSS file to your site and adds HTML to create a "starter menu" of links. Second, you edit the menu Dreamweaver inserted by changing the text of the menu buttons, and adding new menu options and links to other pages on your site. Finally, you modify the CSS that Dreamweaver supplies to match the look of your site.

This tutorial will take you step-by-step through adding and modifying a Spry Menu Bar.

Insert a Spry Menu Bar
Adding a Spry Menu Bar to a Web page is a snap. To follow along with these instructions, download the folder below, then double-click on the folder to uncompress its files:

Home | Audio | DIY | Guitar | iPods | Music | Links | Site Map | Contact


Creative Commons License