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:
- Dreamweaver (Find/Replace, FTP, Split View—seeing Design View while working in Code View, working on sites with DW templates/Contribute)
- Eclipse (JSEclipse, CFEclipse, PHP, synching with CVS)
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
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
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.
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.)
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?