Adobe Spry Tutorial

Adobe Spry Tutorial thumbnail
Adobe Spry makes pages interactive.

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.

  1. Add Spry

    • Some knowlege of web design is necessary.
      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.
      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.
      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

Related Searches:

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

Comments

You May Also Like

  • How to Add Pictures to Spry Menus

    Click the "Start" button in Windows, and select "Adobe Dreamweaver CS3" from the "All Programs" menu.

  • Dreamweaver Spry Tutorial

    With Dreamweaver's Spry tabbed panel widget, you can condense websites considerably. For example, a 10-page website can be condensed to just one...

  • How to Add Spry Drop Downs

    Adobe Dreamweaver is an application that allows designers to create websites with dynamic features, such as adding drop-down menus to the website's...

  • What Is a Spry Dataset?

    A Spry Data Set lets you set up a website supplying interactive data to the user based on selections made while viewing...

  • How to Validate a Text Area With Dreamweaver Spry Form Widgets

    You can rename the form widget using the Property inspector instead of the generic name like sprytextarea1. Dreamweaver adds the widget name...

  • A Tutorial to Create a Form in DreamWeaver

    Adobe Dreamweaver is one of the most popular web editing tools. It's WYSIWYG (What You See Is What You Get) design view...

  • Spry Widget Tips

    Spry Widgets, a feature in the Adobe Dreamweaver Web Development program, versions CS3 and CS4, automatically generates JavaScript and Cascading Style Sheet...

  • How to Change the Look of a Spry Menu

    The Spry Menu was one of the Spry Widget elements added to Dreamweaver in the CS3 version. CS4 includes 16 different Widgets...

  • Who Uses Spry?

    Spry was an American brand of vegetable shortening owned by Lever Brothers (now Unilever) and most popular between the 1930s and '50s....

  • Dreamweaver Navigation Bar Tutorial

    A popular HyperText Markup Language (HTML) text editor is the Dreamweaver application. This software program allows users to design and create professional...

Related Ads

Featured