Spry Layout Elements

Spry components are predefined controls that are provided by Dreamweaver to let you incorporate certain complex elements into your site with minimal work on your part.

In fact, you have already seen a number of Spry elements used on this site. For example, the menu panel on the front page is a Spry Menu Bar; the dynamic information panels on the course info pages are Spry Accordions; and the tabbed component in the fonts page is a Spry Tabbed Panel.

All of the Spry elements mentioned above are layout controls. There are other types of Spry control, for example for handling form data, but here we will only look at those controls concerned with navigation and layout.

Spry Assets

Behind the scenes Dreamweaver provides large chunks of JavaScript code and Cascading Style Sheet rules to make these components work. However, unless you want to make major modifications to these controls, you don't need to understand exactly how it all works. The most important thing to realize is that as soon as you add a Spry component into one of your pages, Dreamweaver creates a new folder in your site called SpryAssets where it will put all the code it needs to make your components work. This means that you should never tinker with any of the files in this folder unless your are very sure of your JavaScript and CSS skills.

Fortunately, modifying the CSS properties which determine the colours and sizes of the Spry control elements is very easy to do through the Dreamweaver CSS window. This means it is easy to integrate the controls into the look and feel of your site.

Adding a Spry Control

As usual in Dreamweaver, there are several ways of adding a Spry layout control to your page.

  1. For the Insert menu, select the Spry submenu and then the specific control you require.
  2. From the Layout tab in the Insert toolbar, select the appropriate control.
  3. From the Spry tab in the Insert toolbar, select the appropriate control.

The picture below shows the middle option - the four Spry controls for layout each have an orange flash beside them - hover the mouse to see the Dreamweaver tooltip:

Layout Tab Spry Menu Bar Spry Tabbed PanelsSpry AccordionSpry Collapsible Panel

The following pages describe each of the Spry layout controls in a bit more detail: