How to Use Spry Widgets in Library Items or SSI

Library items are reusable snippets of code that can be added to pages in Adobe Dreamweaver. A single copy of the Library item is used on numerous pages. When the Library item is updated, all the instances of that code on all the pages in the site are also updated. SSI is a server side include. HTML snippets are added to your page as it loads on the server. Both are time-saving tools for Dreamweaver users. Here is how to use it.

Difficulty:

Moderately Challenging

Instructions

Things You'll Need

• Adobe Dreamweaver Software

1. Using the Dreamweaver Spry widgets as Library items or as SSIs presents some challenges. It can be done, but you must pay attention to all the elements involved in making the Spry widget work.

2. For this example, assume you want to insert a Spry menu bar into your page. Insert it into the appropriate spot in your Dreamweaver document.

3. Save the page. You are informed that dependent files must be saved as well. These files are the JavaScript and CSS files that make the menubar work. They also include the small arrow graphics that indicate a submenu is present.

4. When saved, the dependent files are stored in your site in a folder called Spry Assets.

   If you look at your document in Code view, you will see two other items that are added to your page in addition to the nested list for the menubar. In the document head, you see a script and a link element that connect your page to the dependent files in the SpryAssets folder.

5. Scroll down to the very bottom of the document in Code View, and you will find a JavaScript function call.

   (See my link in Resources below, which will show you how to find all of these parts in Dreamweaver).

6. To make the menubar into a Library item or SSI, you must ensure that any page into which you insert the Library item or the include also has both the script and stylesheet link that you see in the document head, and also the JavaScript function call that you see at the bottom of the page. Otherwise the Spry widget won't work.

7. To make the widget work as a Library item, add the menubar HTML to your page as a Library item. Then you must link to the files in the Spry Assets folder manually. You can add a link to the CSS using the CSS panel. The script link can be made using Insert > HTML > Script Objects > Script. The easiest way to include the JavaScript function call from the bottom of the page is to copy those lines of code into the code that goes into the snippet you save as a Library item.

8. To use the widget as an SSI, create includes for the menubar HTML, the JavaScript at the bottom of the page and the script and link elements in the document head.

Tips & Warnings

• If you are creating your site using a Dreamweaver template, you can add the head elements and the JavaScript for the Spry widget to your template, and they will appear on every page you make.

Resources

• My Video of Added Code