Adding Spry effects in Adobe Dreamweaver CS6
Like widgets and behaviours, spry effects are another great way of adding engaging devices to your website that convey information in a non linear fashion.Â They work similar to widgets in that they're easy to install and can be fully customized to your liking.
With spry effects you can easily insert tabbed options, accordion effects, collapsible panels, form elements and simple tool tips. In this article we'll take a look at how to add these effects and what they look like.
To add your first spry effect, place your cursor where you want the effect to be included in your code and then locate the Spry option under Insert at the top of Dreamweaver CS6:
In here you'll see a list of several spry options you can add to your page. Here are some screenshots of what the basic effects looks like.
Spry Menu Bar – An easy way of adding a standard menu bar to your website. You have the option of inserting either a horizontal or vertical menu.
Spry Tabbed Panels – Tabbed panels are a great way to include more information on your page without making the page look too content heavy. You can add as many tabs as you want for the user to cycle through and can include anything you would have on a regular site such as images, video, tables, forms, etc.
Spry Accordion – Similar to tabbed panels, accordions are another useful way of organizing lots of content on websites instead of having a long page full of text and other content.
Spry Collapsible Panels – Collapsible panels hide and show information depending on when the tab is clicked. These are usually used to provide additional information about something such as a product.
Spry Validation Options â€“ Spry also contains a series of validation options you can use to build a form quickly and easily in Dreamweaver. These work similar to the other form options we covered in an earlier article and help to validate user inputed content.