Mix up HTML, CSS, JavaScript and Ajax without the pain. Geoff Blake shows you how Dreamweaver CS3 can create astounding widgets for designers without coding hell.

When I first discovered spry widgets in Dreamweaver CS3, the creative juices really started to flow. If you’re new to spry widgets, they are pre-build page elements that combine HTML, CSS, JavaScript, and Ajax – whoa, whoa, hold on a sec!

Before you moan and flip to a less complicated sounding article, let me say this: the great thing about widgets is that for us designers, spry widgets allow us to add a huge amount of interactivity to our pages with little effort, and little or no coding experience.

Our clients’ minds are blown at what we can pull off, and we remain mentally stable. The great thing about widgets is that they’re completely customizable.

In this tutorial, we’ll be doing something unique, which will yield some awesome results: We’re going to completely customize and revamp Dreamweaver’s Accordion widget and turn it into an interactive, user-driven image gallery, complete with formatting, and links to other panels in the accordion.

The great thing about the image gallery widget is that it’s expandable and completely customizable, meaning you can add as many image panels as you need, and completely control the widget formatting via CSS.

A few things before we begin. It’s a good idea to define a new site in Dreamweaver for this tutorial. Further, drop all the tutorial files that you’ve downloaded into your newly defined site folder.

Next, create a new blank page and save it in your site folder too. For this tutorial to work properly, your tutorial files and your new page will have to be saved in the same folder. Finally, make sure your new page is open in Dreamweaver.

01. To get started, choose Insert>Spry>Spry Accordion to place Dreamweaver’s default accordion spry widget on your page. Save and preview your page in your browser so you can see how this is going to work (just hit F12 on the PC or Opt+F12 on the Mac). If this is your first time saving the page, Dreamweaver will display a Copy Dependent Files dialog. Just click OK to continue. Know too that in your site folder, Dreamweaver creates a SpryAssets folder, which contains the necessary CSS and JavaScript files to run your widget.

02. In Dreamweaver, we’ll add some additional panels to the accordion. Make sure the accordion is selected by clicking on its edge (it will highlight in blue); then on the Property inspector, use the Add Panel button to add any additional panels. In this tutorial, we need a total of seven panels. Don’t worry about the panel order, we’ll be renaming them in a moment.

03. At the top of the accordion object, select and delete the text ‘Label 1’, and type in ‘Gallery’. This text appears on what’s called the Panel Tab. Next, select the text on the next Panel Tab down, delete it and type in ‘Robot 1’. Do so with the other panel tabs, naming them ‘Robot 2’, ‘Robot 3’, and so on.

04. Now we’ll create the thumbnail gallery. If the topmost Gallery panel isn’t expanded, bring your cursor over the Gallery Panel Tab’s right corner, then click the eye icon. With the Gallery panel expanded, remove the sample text, then insert a table to hold your thumbnail graphics. Even though CSS is our standard, sometimes a grid of rows and columns is the fastest way to go.

05. In the tutorial sample files, open RequiredCode. rtf and copy the code under the Hyperlinks to Graphic Panels heading. Click in the table’s first cell. Flip to Code View; then paste. This code inserts the first thumbnail, and links to a panel. In Design View; repeat for each table cell, adjusting your code accordingly. In the second cell, adjust the code so that it reads .openPanel(‘robot2’) and

06. Next, we’ll set up the remaining panels, which will hold the larger versions of each robot graphic. Back in RequiredCode.rtf, copy the code under the Hyperlinks Back to Gallery heading. Back in Dreamweaver, expand the Robot 1 panel by clicking on the panel’s eye icon and remove the text content. Next, switch to Code View and paste. Head back to Design View, then repeat these steps for each robot panel, adjusting your code for each. For example, the Robot 2 panel code would read .

07. There’s one final bit of code work we’ll have to do. In RequiredCode.rtf, copy the code under the Constructor heading; then head back into Dreamweaver’s Code View. At the very bottom of the page, you’ll see five lines of code just above the