Monday 12 Nov 2007
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.
Jump to page : [ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]
Submit to:
