Example of a “Simple” Dreamweaver Extension or ‘One more reason to hate Dreamweaver’

I normally stay away from Dreamweaver, mostly because of a personal dislike, but also beacause if a client wants to use Dreamweaver (because they want to be able to edit their own site), it’s likely they’ll get in over their head and then “Design View” will gunk up the code. I prefer using a CMS (usually WordPress), partly because it can lower the clients expectations for the types of changes they can make and also because it can limit the design mess-ups they’ll make with updates.

But occasionally, Dreamweaver is still appropriate. When a project’s budget (or lack thereof) makes a CMS out of reach, and if the client has a basic knowledge of HTML, designing templates and creating a style guide for updating the site can work (well).

This is the approach that I took when working with the Zea Mays Printmaking director & members. They already had a basic design planned out and some sense of the functionality that they were looking for, but little knowledge of the CSS & JavaScript that would be necessary to make it all work.

After setting up the initial templates, developing a site map, and making plans for maintaining the site, we realized that there was one area where updating the site would be a problem: adding images/slides to the online galleries (powered by the jQuery Cycle Plugin). The specificity of the formatting for these “chunks of code” was too much to try to document and then trust that it wouldn’t break the next time someone added or deleted an image from one of the galleries.

But, since we’re using Dreamweaver for this project, I was able to write a simple extension that adds an “Insert Slide” button for each type of slideshow on the site. It took a lot of looking to find any useful examples, and in the end, the only really useful reference was the hefty Extending Dreamweaver 8 PDF and this tutorial: Making a Simple, Useful Extension from DreamweaverFAQ.com.

The extensions that I wrote ask for specific information about the artwork (slide) that is being adding to the gallery (slideshow) and then inserts the new slide wherever the users’ cursor is currently in the document. I thought about having the extension insert the slide at the beginning or end of the file by default, but quickly realized that that would: (1) take a long time to figure out; and (2) mean that the user couldn’t easily control the order of the slideshow. This meant that I could make the simplest type of extension: a “simple command” extension. According the documentation:

Commands are HTML files. The BODY section of a command file can contain an HTML form that accepts options for the command (for example, how a table should be sorted and by which column). The HEAD section of a command file contains JavaScript functions that process form input from the BODY section and control what edits are made to the user’s document.

… Dreamweaver automatically adds any files that are inside the Configuration/Commands folder to the bottom of the Commands menu.

Writing these extensions took much longer than they should have, mostly because the Dreamweaver documentation was sparse and I couldn’t much in the way of examples online. So! The HTML of the extensions I wrote are available on GitHub:

/Applications/Adobe Dreamweaver CS4/configuration/Objects/Common/Insert Flat File Slide.html

/Applications/Adobe Dreamweaver CS4/configuration/Objects/Common/Insert Member Gallery Slide.html

Feel free to use, abuse, and improve them.