Adobe Spry Tutorial
Adobe Spry consists of JavaScript libraries that add interactive functionality to a website. Spry includes data, widgets and effects. Browser plug-ins are not necessary for Spry to work properly. Just about anyone can add features such as drop-down menus and forms.
-
Add Spry
-
Some knowlege of web design is necessary. Open Adobe Dreamweaver CS3. Create a new .html document by selecting "File" and "New." Place your cursor after the "<head>" tag in your document. Select "Insert" and then "Spry Menu Bar." Choose between horizontal or vertical.
Rename
-
The target attribute specifies where to open a linked page: in a new window, in the same window or within a frameset. Open the "Property" inspector. Select "Item 1" in the first column. Rename the text by clicking in the field, then backspacing and typing in the title of your choice in the "Text" field. Rename, add or delete additional field titles. You can also link the navigation bar, title the items or add a target attribute.
-
Sub-menus
-
Sub-menus open when the main text is clicked. Rename the sub-menu title fields. Delete items by using the "Backspace" key. Click the "Plus" symbol to add new menu items. You can rename fields by clicking in the design panel. Choose "File" and then "Save."
CSS
-
"Preview in Browser" will allow you to view your page before publishing. Select "Preview in Browser" in the "File" menu. You may go back into Dreamweaver and change the colors, text styles and other cascading style sheet (CSS) elements. For more information, read the help file or visit the Adobe Video Workshop tutorials online (see References).
-
References
Resources
- Photo Credit web, internet image by Paul Laroque from Fotolia.com illustration with personal computer and diagram image by Alexander Potapov from Fotolia.com right on target image by Pix by Marti from Fotolia.com various menu buttons - isolated on white image by Jaroslav Machacek from Fotolia.com aqua web image by Ruslana Stovner from Fotolia.com