A Web Developer Looks Into Dreamweaver CS4: In Depth
Introduction to Dreamweaver for Web DevelopersIn this continuing series I am taking a look at some of the most popular web design software packages in use today. In this article well take a look at some of the more interesting, and yes, more complex features of Dreamweaver CS4.
Web WidgetsIn Dreamweaver speak, Web Widgets are actually third party UIs like the Yahoo User Interface Library, YUI for short. How widgets work is really quite simple. First, you must go out and find an installer for the widgets that you want to use. Adobe provides you an easy starting point with the Dreamweaver Web Widgets Exchange. Here you will find widgets that do all sorts of things. Be aware, not all widgets work on both Windows and Mac and not all are free. There are also several Spry Web Widgets that come with Dreamweaver that dont require any installation.
Installing a widget is fairly simple. Dreamweaver Web Widgets require installer files with the .mxp or .mxi extensions. When you download either of those file types your browser should allow you to open with Dreamweaver CS4 by default. Click open and the installation should happen automatically. Its that easy.
Once you have your new widget you just need to add it to your page. I chose to download and test the Spry Rating widget because it is part of the Spry framework that comes with Dreamweaver and, most importantly, it was free. Once you get a new widget installed it should appear in the Insert window, possibly under a new category. Find the widget you like then just drag it on to your Design View.
Tip: Unless you work on a small monitor always use Split View to see both Code View and Design View at the same time. It will save time and clicking.
Your page is now the proud owner of a new widget. You can modify the widget to suit your needs. If you take a look at the code view you should be able to see the markup for your widget. Just click on the widget in Design View and Dreamweaver will highlight the markup in Code View. You can also see the widget in action by clicking the Live View button.
Tip: If you want to see how the code changes as you use the widget you can also click the Live Code button while in Live View and see the code change as you interact with the widget. This combination can be very handy when trying to figure out exactly how a widget works.
Code NavigatorThis is a very handy feature, especially if you are planning on using Web Widgets that have their own unique CSS style definitions. Code Navigator does take a bit of getting used to, though. A good way to learn about Code Navigator is to drag the Spry Menu onto a page and play around with it. Menus are about as straight forward as they come and the Spry Menu drops onto the page with multiple items already loaded into it.
In order to see the best that Code Navigator has to offer, suppose you are adding the menu to your page for navigation. The first thing you want to do is change the background color on hover. However, this is your first time using the menu and you have no idea where that style is defined.
Dataset WizardThis is an interesting feature for those who dont know and have the need to learn about using databases like Access or MySql. Instead of connecting to a database for your data you can use HTML or XML as the data source. The Dataset Wizard is built in to the Spry framework which comes with Dreamweaver which you can drag and drop from the Spry category of the Insert window.
The wizard allows you to pull data from anything structured on a HTML page like tables, divs, lists, etc. You can then define the data columns and then build a custom presentation for the data or choose from presentation options already included in the Spry framework.
While this is an interesting feature it is extremely limited in scope. Its ideal for extracting content as data from static HTML pages. However, with the highly interactive nature of todays web youll quickly outgrow this type of data binding. After all, who wants to manually update static web pages when you could use a complete database that allows you to insert, update, select and delete data? In the long run your time would be better spent learning how to use a real database rather than the Dataset Wizard unless you plan to only work on the simplest of websites.