Efficiency Scores in Dreamweaver CS4 Beta

Adobe released the Dreamweaver (DW) CS4 beta on labs.adobe.com last week (along with betas for Fireworks and Soundbooth). The beta is available until final release for anyone with a CS3 serial number. If you use DW regularly, go get the beta! You can run the beta while still running CS3. This is a huge release, especially in terms of workflow efficiencies, with strong attention to standards.
My workflow to date generally involves efficiency-garbling tool-switching. Here’s a breakdown:

  1. Dreamweaver (Find/Replace, FTP, Split View—seeing Design View while working in Code View, working on sites with DW templates/Contribute)
  2. Eclipse (JSEclipse, CFEclipse, PHP, synching with CVS)
  3. Firefox/ Firebug/ WebDev Toolbar (debugging & tweaking styles, testing standards & accessibility, debugging javascript)

Find-and-replace and ftp are hardly the main things for which DW is designed. That these are primary tasks for me in DW perhaps reflects the software’s (previous) focus on designers. CS4 represents strong attention to developer needs and workflow. It will be some time before I know if I can be as fast/effective with the new built-in tools for my tasks. I think it is likely that new features will reduce but not eliminate the need for round-tripping to more robust debugging tools. Nevertheless, it feels like someone was watching us work when they decided on a lot of the new functionality: hooray!

My Fave Efficiency Improvement Features

JavaScript Code Hints

screenshot of javascript hints
The javascript code-hinting is far more robust than in the past, dynamically generating hints based on user-defined functions and classes. It offers hints for primitive and DOM objects and identifies syntax errors with the error line number. I love that includes deprecation indicators. The error information is not nearly as robust as JSEclipse (Adobe’s free Eclipse plugin) or the Firefox Firebug extension, which describe likely syntax errors, undefined objects, etc. I hope the team will add JSEclipse code-highlighting such as highlighting every instance of an object or method when you select one instance, or marking the opening bracket when you click next to the closing bracket.


CS4 does not claim to offer a replacement for command line or 3rd party SVN tools, but it will certainly reduce the frequency of tool-switching. After establishing a site-wide connection to an SVN project, you can update, check in, revert, and mark conflicts resolved. Check in gives options to add, commit (with comments) and ignore. The revision history is available. You can compare to local, but you still need a 3rd party diff tool. There is an offline setting and you can do SSH connections (w?3rd party tool).

Live View, Live Code View, Split Code View

Live view rocks and is a leader on the tool-switching reducer train. Live View shows a browser-based (standards-based WebKit!) rendering of the code, including javascript events. You can alter the state of the page (e.g. click on a js-activating link), and see the resulting code changes. You can then make CSS changes to the state, watching the results as you go. Firebug has made this possible for a while, but still involves heading back to your editor to make the change you tested while in the browser. CS4 offers a vertical split view, which seems far more efficient and pleasing to use than the stacked horizontal split. Live view will also display results of server-side behaviors if the site is connected to a test server. The split code view is another gem: view different parts of the same document with the ability to scroll each part separately. (Changes can be made in either section.)

Related Files and Code Navigator

The related files feature and the code navigator each assist in navigating directly to relevant code in an external file.
screenshot of code navigator and related files in Dreamweaver
DW offers links to the external files (#1 in screenshot) it has determined to be related to the open file. While it will show links to some server side include (SSI) files, I don’t think it will recognize SSI files included via a dynamically generated path. The code navigator (#2) offers a display of the files and styles affecting a line of code, including CSS files & styles, js files, server-side include files, and DW template and library files. The navigator is a quick way to get to the right spot in a related file. With the cursor in a line of code or clicked in the area in question in Live View, invoke the code navigator (through keys, contextual click or the navigation wheel (#3). The code navigator will list the files and styles affecting the given area of the document. Hovering over a style will display the definition of the style. Clicking on a style (#4) will bring you right to that line in the external file: a clear time-reducer where it works. (So far it seems there are gaps in recognition of the full cascade. I have yet to fully investigate this: it may be styles linked through @import.)

Photoshop Integration

There are fun Photoshop integration improvements over the copy & paste from Photoshop to Dreamweaver introduced in CS3 (though copy & paste is still available). You can do insert › image and point to a psd document. An image preview dialog gives file format options and a crop tool. Save the image to your site files and DW will treat it as a “smart object:” one that maintains a connection to the PSD file (but not in the HTML code). In DW, you can resize the image and maintain the connection to the PSD file, without altering the original. In PS, you can change the file, e.g. altering layers, colors, filters, etc. then update the file in DW, maintaining the file format and size you previously set in DW. You can maintain a connection with multiple instances of the original— even in different sizes and crop areas.

Try It Out

If you have CS3, I strongly recommend downloading the beta. What are your favorite efficiency changes? Do you like the grayscale icons implemented to quiet the interface?

Submit a Comment

You must be logged in to post a comment.