| advertisement |
When designing and developing a website, to increase functionality or interactivity, we often use alot of widgets. A widget is usually a combination of HTML, CSS and JavaScript code used to build a complex web componentlike accordions, slideshows, tabbed panels, light windows etc. The code for many widgets is open source and freely available on the internet. So once you get proficient in using them, generally you have to download their ZIP files, tweak and configure them yourself and fit them into your website. Sometimes this isn't a very easy task, because of their external dependencies and need to be configured.
But now using the Adobe Dreamweaver Widget Browser in Dreamweaver CS5, the entire process can be simplified tenfold. It can catagorise and display any widget uploaded to the Adobe Axchange. They can be sorted by name, author, rating, number of downloads, date posted etc.
Let us illustrate this by using the jQuery UI Accordion Widget. Start the Widget Browser and click preview to see a preview of the widget on your page. You can change and edit the code of the widget manually as well while inserting it. Before customising and using a widget though you will need to import it into your My Widgets set. The Widget will then be downloaded and stored locally on your computer.
From My Widgets choose the widget and go through the existing presets which are the customised configurations for the widget. You can configure it further by creating your own preset. The properties can be adjusted in the properties group. Now back on the My Widgets panel click the Save Widget Files button to create an HTML file with the widget and the selected configuration along with all the dependent files necessary to run the widget.
The Widgets are available in Dreamweaver after they have been added to the My Widgets List from the Adobe Widget Browser. They can then be put into HTML pages in Dreamweaver by going to the insert panel and selecting them from the Widgets Category. Dreamweaver will then insert the widget with the selected preset and copy the dependent files to the local root folder.