Free code

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:

spry1

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.

spry2

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.

spry3

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.

spry4

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.

collap
Spry Tooltips – Tooltips are a simple way of adding more information about something on your page when a user hovers over it.

spry5
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.

spry5b

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:

spry6

spry7

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.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image