Make a Dreamweaver Spry Widget Work as a Library Item

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. It’s a time saving tool for Dreamweaver users.

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

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.

menubar

Then 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 that a submenu is present.

copy dependent files

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 the document head, you see a script and a link element that connect your page to the dependent files in the SpryAssets folder.

link and script elements in head

If you scroll down to the very bottom of the document in Code View, you find a JavaScript function call.
script at bottom of page

To make the menubar into a Library item, you must ensure that any page into which you insert the Library item also has both the script and stylesheet link that you see in the document head, and the JavaScript function call that you see at the bottom of the page.

If you are creating your site using a Dreamweaver template, you can add these two items to your template, and they will appear on every page you make. The menubar could also be added to your pages as part of a template instead of as a Library item. In that scenario, the template page would already include the dependent files links and the function call script.

If you are not using a Dreamweaver template 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.

ADDENDUM: Related video

2 thoughts on “Make a Dreamweaver Spry Widget Work as a Library Item

  1. Are you talking about making a custom blog template or customizing the default Dreamweaver page templates? I can tell you where to find the latter. Although you can produce blog templates with DW–for example the PHP templates for WordPress–I haven’t seen a book about that.

Leave a Reply