Life & Style tutorial: Build a spry widget art gallery

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 tag, beginning with , which appears in purple. Delete these lines, and in their place, paste the code that you’ve just copied. When you’re done, head back to Design View.

08. We’ll now give each panel in the gallery a unique identifier. Click the Gallery panel’s eye icon to expand it. If the Gallery panel is already expanded, expand one of the other panels, then click on the Gallery’s eye icon. Clicking the eye simultaneously expands and selects the container for the panel. To give the panel a unique identifier, type ‘gallery’ into the Div ID field on the Property inspector. Next, select the first robot panel in the same way, and type ‘robot1’ into its Div ID field. Do the same for the remaining robot panels, naming each sequentially; ‘robot2’, ‘robot3’, and so on.

09. Next we’ll adjust the CSS that controls the widget. You can completely customize your widget however you like – but I’ll show you the settings I’ve used here. In the CSS Styles panel, make sure All is selected at the top, and that SpryAccordion.css is expanded; then double-click on .Accordion. In the CSS Rule Definition dialog box that appears, set Font to Verdana, the Size to 11px, and Colour to white. In the Background category, set Background Colour to white. In the Box category, set Width to 500px, uncheck Same For All under Margin, and set Top to 30px; then click OK.

10. Now we’ll set up a background graphic in Photoshop that will be used for the panel tabs. Open TabBackground. psd; then in Photoshop’s Layers panel, create a new layer and place it below the Tab Background layer. Next, fill your new layer with a Web Safe colour (I used #999999). You can use any Web Safe colour you like, just be sure to match it up in to your CSS rule in the coming steps. Finally, save the graphic as TabBackground.gif in your site folder.

11. With the background GIF saved, we’re ready to drop it into the CSS rule that controls the tabs in our accordion. In the CSS Styles panel, double-click on .AccordionPanelTab; then in the Background category, set Background Colour to the same Web Safe colour you’d used back in Photoshop. Next click Browse beside Background Image, and nagivate to and select TabBackground.gif. From the Repeat menu, choose No-Repeat, then set Horizontal Position to 475px.

12. If you wish, you can continue customizing the CSS rules that control the accordion. For example, double- click on .AccordionPanelContent; then in the Block category, set the Text Align to Center. This will centre all the content that appears in the accordion’s panels. In the Positioning category, change Height to 300px to increase each panel’s height. Also, set Overflow to Hidden to remove any scrollbars that may appear inside the panels. Click OK when you’re done.

13. You can also control the panel tabs whenever they’re in focus or even rolled over. The CSS rules .AccordionPanelOpen .AccordionPanelTab, .AccordionFocused .AccordionPanelTab, and .AccordionFocused, .AccordionPanelOpen, and .AccordionPanelTab all handle rollovers and focus. As with any other CSS rule controlling your widget, you can set whatever options you’d like for each. Here, I set each of these style’s background colours to the same colour I’d used for my TabBackground graphic back in Photoshop.

14. You can continue adjusting CSS rules and even create your own for use within your gallery widget. For example, you may want to redefine HTML’s # element to better control your graphics, set hyperlink formatting, set a background colour for your page, and so on. You can also add in any additional page content around your widget, like graphics and text. You may wish to drop the gallery widget into a specific area in your layout, or you may choose to centre the widget in your page.

15. The final step to get the gallery widget to function is to adjust the JavaScript that runs the widget. Thankfully, there’s no messing around with code here. In the tutorial sample files, you’ll find a file called SpryAccordion.js. Drag this file into the SpryAssets folder that Dreamweaver created for you in your site folder. When prompted, replace the existing JavaScript file in the SpryAssets folder. The SpryAccordion.js file that you just moved has been adjusted so that your gallery widget will function correctly. Go ahead and refresh your browser and see how your site looks.