A Web Developer Looks Into Dreamweaver CS4: In Depth

By Curtis Dicken

Introduction to Dreamweaver for Web Developers

In this continuing series I am taking a look at some of the most popular web design software packages in use today. In this article we’ll take a look at some of the more interesting, and yes, more complex features of Dreamweaver CS4.

Web Widgets

In Dreamweaver speak, Web Widgets are actually third party UI’s 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 don’t 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. It’s 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 Navigator

This 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.

First, switch to Live View and then hover your pointer over any menu item. Next, hit the F6 key to freeze the JavaScript. Now you should be able to right-click (Win) or option-click (Mac) and select Code Navigator. A small pop-up window should then appear telling you everything you wanted to know about the state of your menu item. From there you should be able to discern what style you are looking to change. If you double click on the style, Dreamweaver will open up the appropriate CSS file and take you right to the definition so that you can change it. This feature significantly reduces the detective work that you would otherwise have to do with a new Web Widget or any other code for that matter.

Dataset Wizard

This is an interesting feature for those who don’t 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. It’s ideal for extracting content as data from static HTML pages. However, with the highly interactive nature of today’s web you’ll 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.

Related Files

The Related Files feature is actually just a bar that lists all of the files that are related to the page that you are currently working on. For example, your page may have a link to a server side include file (SSI), a cascading style sheet (CSS), and a JavaScript library. Dreamweaver will pick up on each of those links and display them in the Related Files bar. So, instead of going to a file navigation view and finding your way to your CSS file you can one-click and start editing. This is another productivity plus for Dreamweaver.


The Dreamweaver version I tested is version CS4 running on Windows Vista. There are plenty of great features packed into Dreamweaver to help you be more efficient and productive in your web design efforts. Dreamweaver gets high marks for its number of unique features, productivity focus and technology integration. It gets a good mark for a fairly intuitive user interface. It gets only average marks for data-related functionality. Overall, Dreamweaver CS4 is a very complete package that would enhance most web designers’ toolkits. Dreamweaver CS4 has a 30 day trial download if you want to check it out. Happy designing!

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date