Dreamweaver CS3 Spry (AJAX) Tutorial

An exciting new feature in Dreamweaver CS3 is the easy insersion of AJAX components called Spry. View Demo

If you are a beginner you might be interested in the Dreamweaver CS3 Tutorial.

  1. To insert a Spry object simply go to Insert > Spry >
  2. Select the option of choice
    insert spry

  3. Customize the Spry object in the Properties Panel

  4. When you save the page Dreamweaver will automatically add some javascript and css files in a folder called "SpryAssets" within your site. These will also need to be uploaded to your hosting server when you make the page live.

    spry assets
  5. To change the colors you will need to edit the relevant css style in the relevant css stylesheet.

Try out the Spry Menu Bar (which you can use for your menu - horizontal or vertical), Tabbed Panel, Accordian and Collapsible Panel for some cool functionality in your website.

Spry Menu Bar

spry menu bar

To get the Spry Properties, select the blue highlighted name of the spry (see image above) and check the Properties Panel, then customise the Spry properties.

spry menubar properties

Click the + and - signs to add and delete menu items at each level (1st box has main menu items, 2nd box as submenu items etc.)

Spry Tabbed Panels

Spry Tabbed Panels

Spry Tabbed Panels Properties

Spry Accordian

Spry Accordian

Spry Accordian Properties

Spry Collapsible Panel

Spry Collapsible Panel

Spry Collapsible Panel Properties

Check out the result in your browser - it is really cool!!

Go to Flash CS3 Tutorial >>


Dreamweaver is part of Creative Suite 3 Web Standard
Streamline web design, development, and maintenance. Order Now!


God Loves You! "For God so loved the world that he gave his one and only Son (Lord Jesus Christ),
that whoever believes in him shall not perish but have eternal life." - John 3:16, Bible