Dreamweaver is probably one of the two flagship Macromedia applications now in its second iteration under the Adobe brand (Flash being the other). Adobe spent a great deal of resources making Flash CS4 Professional a radically different application from its predecessors, so I was interested to see what Dreamweaver CS4 would be like and how it would operate. I learned that Dreamweaver CS4 is not much different than Dreamweaver CS3, but it does have major changes including a couple wonderful new features that make it a far better application than before. Web designers should be excited!
External files and efficiency
You’ll see the Related Files bar for files with linked stylesheets, scripts and other external assets.
I use this feature quite a bit: Dreamweaver documents now show up with a Related Files bar under the document tab. This bar displays the names and links of all files related to the open document, including CSS stylesheets and script files. There is also a link to the Source Code, which displays the source code if you are viewing in Split or Code View. I cannot count the number of times I return to the stylesheet for any given document in order to perfect the CSS, and I immediately took to the Related Files tab for easy file switching. It’s a simple addition to Dreamweaver but it’s sometimes these little additions that make the most impact.
Dreamweaver CS4’s Workplace Switcher allows for quick and easy panel layout changes.
Also related to efficiency is the new interface, which is consistent across all CS4 applications including Dreamweaver. The Workplace Switcher is helpful and the new interface certainly feels like Adobe’s now (CS3 felt like it still belonged with Macromedia) but the placement of things like the Files panel has not changed much. Maybe the biggest difference is the Insert menu bar, which is now a panel by default (similar to the Properties panel in Flash CS4 Professional). You can change the panel back to a menu bar if you like. I am not a big fan of the CS4 interface but it does work well and it hasn’t affected my work one way or another.
The Code Navigator helps users drill down the CSS rules affecting elements.
One more new feature designed to improve efficiency is the Code Navigator, Alt-click (Windows) or Cmd-Opt-click (Mac) to bring up a window that lists the CSS rules at work where you clicked. From this window you can see exactly how CSS rules are cascaded and affecting the HTML elements, and you can also click each rule and edit them from within the window. It’s a useful tool when you need it but I find I’m using it mostly when something is wrong with my webpage and I can’t figure out which CSS rule is causing the problem. Otherwise, I usually jump to the stylesheet with the Related Files tab and make my edits there.
We’ll do it live!
Live Code in actionâ€”here the background is being changed to red while “live.”
Conversely, Live Code works with Live View to show how code is executed, including the results of user interaction. Things like rollovers, scripted code changes and Ajax real-time modifications are displayed in the Code pane. Code changes are important, though I don’t worry about them as much as the actual visual functionality. But if something isn’t working quite right, Live Code is a valuable debugging tool that shows you just what the browser is acting on at any given moment.