Dynamic Learning Dreamweaver CS3
Page 2

Spry Widgets and the Spry framework for Ajax

QuarkXPress 6.5 and 7 have a number of built-in web tools. To learn more, click here to read X-Ray Magazine v3n5: Web Forms Part Two (PDF download).

Asynchronous JavaScript and XML (AJAX) is a popular combination of technologies used to create highly interactive web applications, or Rich Internet applications (RIAs). The Spry framework for Ajax is a JavaScript library for web designers that enhances user interactivity through navigation and form components as well as XML data-driven objects. Users of all levels can add visual effects, create intuitive menus, and develop within the Spry framework without having to climb the steep learning curve normally required to create these advanced features from scratch.

The Insert bar features a new Spry Widgets category with XML data-driven objects, self-validating form components, and enhanced navigation items, such as drop-down and accordion-style menus that you can easily customize and format with CSS (Cascading Style Sheets).

The new Spry Widgets section of the Insert bar.

To view and customize a navigation bar created using the new Spry Widgets pane, follow these steps:

Launch Dreamweaver CS3.

 

Choose File > Open, or press the Open button on the Welcome Screen.

 

When the Open dialog box appears, navigate to the dw01lessons folder and select SpryWidgets.html. Press Open.

Preview the document by choosing File > Preview in Browser, or by pressing the Preview/Debug in browser button in the Document toolbar. Choose the default web browser or pick from a list of browsers installed on your computer. The document will open in a browser window. You can roll over the menu elements to see them expand to reveal more menus.

A customized Spry menu bar with pop-up submenus.

If you are using Internet Explorer on the Windows platform, you may need to select the Allow Blocked Content option under the toolbar and press OK. This is a security feature in this browser which prevents the external javascript file used in this widget from automatically running.

Close the browser and return to the document in Dreamweaver. Customizing Spry menus is easy. In the Document window, click on the tab at the top of the menu that reads Spry Menu Bar: MenuBar1. In the Property inspector at the bottom of your screen, locate and select Your Links in the first column to expand the menu.

Select the entire menu by its label; you can view and modify all of the menu options in the Property inspector.

In the Property inspector, Link 1, Link 2, and Link 3 represent locations in the menu where you can place any links you want. Select Link 1. In the text field labeled Text, enter the words Adobe Dreamweaver.

Use the Property inspector to create a link on your page.

In the text field labeled Link, type http://www.adobe.com/dreamweaver in place of the pound sign (#). Press Enter (Windows) or Return (Mac OS) to commit the change.

Choose File > Save to save the page, and preview the new changes you made by choosing File > Preview in Browser or by pressing the Preview/Debug in browser button in the Document toolbar. The new link you added appears when you move the cursor over Your Links; you can now click the link to jump to the Adobe site.

The method is the same to customize the other two links — try it to see how easy it is to create interactive menus to navigate around your web site or other web sites.

Close the browser and return to Dreamweaver. Choose File > Close to close the document.

See spry effects in action!

Use the accompanying video to gain a better understanding of how to use some of the features shown in this lesson. Click here to open the Dynamic_Learning_DW_CS3.swf file to view the video training file for this lesson.

 

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | PDF Version

If you enjoy our articles, click here to subscribe.
Free JavaScripts provided by The JavaScript Source

©2007 AGI. All rights reserved. Reprinted with permission.