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 Tooltips – Tooltips are a simple way of adding more information about something on your page when a user hovers over it.
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.
When you insert a spry effect into your project, Dreamweaver will let you know that it's placing some new Javascript files in your root folder. Make sure to leave these where they as moving them can cause errors with your effects. You'll also notice that Dreamweaver will add several new stylesheets to your site as well as some additional style information to your code. Adjusting these will enable you to tweak the color, size shape, font or any other adjustible parameter of your spry effect:
We suggest adding the various effects and testing them out on your page. It's a good idea to be careful of how many you use however: Using too many can sometimes cause errors with javascript and jquery. It's more common to use one or two effects tastefully throughout a website than to use multiple spry effects on one page. Just remember that anything you add can be completely customized to match the palette and style of your website.
