Dreamweaver CS4 Goes “Live”


Dreamweaver CS4

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


Dreamweaver CS4 related files

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 workspaces

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.


Dreamweaver CS4 CSS Navigator

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!


Dreamweaver CS4 Live View

Live View in action. Click the image for a larger view.

Finally, Dreamweaver CS4 provides an accurate view of how a website will look and code when rendered on the Internet. Live View, when activated, displays webpages just as they will look online. This includes the population of any data from external and internal sources. Scripts will also become active, so if you have a page that relies on JavaScript or Spry widgets those will all be active in Live View. This is one of those game-changing upgrades that people will ooh and ahh over, and rightly so—Preview in Browser is okay, but with Live View it’s hard to go back to it! Live View not only displays webpages with full functionality, but you can interact with them too. Live View uses the WebKit HTML rendering engine, which is also used in Safari, the iPhone, Google Chrome and for rendering HTML e-mails within Apple Mail and Microsoft Entourage. Live View is a complete testing environment with the exception of emulating Internet Explorer, which uses a different rendering engine.


Dreamweaver CS4 Live Code

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.