Dreamweaver CS4: A Powerful Tool for an Imperfect World

With the just-released Dreamweaver CS4, Adobe has conceded that web design has moved on. No longer are designers content to limit themselves to what can be built with WYSIWYG tools; instead, Dreamweaver CS4 shifts focus to providing powerful tools for code-savvy front-end designers like you and me! With the WebKit rendering engine at its core, Dreamweaver CS4 embraces best practice in every aspect of client-side design. If only it went as far on the server side.

Up to and including Dreamweaver CS3, the program was clearly conceived to protect web designers from all the scary code that goes into building a site. It let you generate HTML markup using toolbar buttons and property inspectors instead of tags and attributes. It let you style that markup using wizards and panels instead of CSS rules and properties. The Code View was there if you needed it, but the program did its best to make sure you didn’t.

In recent years, this had become a losing battle as more and more designers needed to take control of their code. It didn’t just matter what the finished product looked like; designers had started to care about what the code looked like too. Dreamweaver’s helpful attempts to hide code behind simple tools became a hindrance more than a help.

Clearly, Adobe has been paying attention. Although the WYSIWYG Design View is still there, as are the panels and wizards, Dreamweaver CS4 adds support for a whole new way of working—one that is largely code-oriented.

Open an HTML (or PHP, ColdFusion, JSP, ASP, ASP.NET) file in Dreamweaver CS4, and the new Related Files bar instantly displays every other code file in your site that is used to display that page in a browser (or assemble it on the server). Switch on the Live Preview, and instead of the dumb WYSIWYG view of your page, you’ll see the fully-rendered page with all server-side and JavaScript-powered features intact.

Powered by the open source WebKit engine at the heart of browsers like Safari and Google Chrome, the Live Preview is not merely a preview, but a code navigation tool: double-click any element on the page, and the code panel will jump to the HTML code responsible for generating it. If that code is contained in another file, that file is automatically selected in the Related Files bar so that you can edit it without leaving the main file (or its Live Preview) behind!

It gets better: Alt-click (⌘⌥-click on the Mac) any element in the Live Preview, and up pops the Code Navigator with a breakdown of the CSS rules that contribute to the element’s appearance! Click any of these to jump straight to the relevant line of code, where you can make adjustments and watch the Live Preview update instantly.

How the Other Half Lives

With its emphasis on hardcore front-end coding, Dreamweaver CS4 deserves the attention of an entire generation of web designers who thought they had outgrown it. For the first time in many years, Dreamweaver is once again a tool for developers on the leading edge—not those left behind.

That isn’t to say Dreamweaver CS4 is perfect. As it embraces and empowers the current generation of front-end coders, leading-edge server side developers are left in the dust. Near as I can tell, this is due to a fundamental assumption in the application: that the URL structure of your site corresponds to its file structure.

In a simpler time, every distinct page design on your site was represented by an HTML file—or a server-side script file that generated HTML. If you wanted to view that page in a browser, you typed the file’s name in the URL. If you wanted to edit the page, you opened the file in Dreamweaver.

I don’t know about you, but I haven’t built a site that way in a few years. These days, sites are built using powerful server-side frameworks, which dynamically translate URLs into actions to be taken, data to be queried, or—in some cases—HTML view templates to be displayed. In such systems, the names of the files responsible for generating HTML pages usually have little in common with the URLs used to request them. For example, the URL path /article/12/page/3 might map to a template file named /templates/article.tpl.

Out of the box, Dreamweaver cannot deal with this kind of codebase. If you open (say) a PHP script that actually handles browser requests, Dreamweaver’s Related Files bar will not be able to find any of the HTML, CSS, or JavaScript code that make up the pages of your site. If you open up an HTML template, Dreamweaver’s Live View will not be able to figure out the right URL to request to get a page that uses that template.

Watch that First Step…

Dreamweaver has always been a tool for an imperfect world. In previous versions, it aimed to support developers stuck in the old way of doing things who shied away from the code that went into the sites they built.

With CS4, Dreamweaver has taken one step out of the ocean and onto the dry land of modern web development. It recognizes that today’s leading developers care about code, and want tools that help them write it, not hide it from them. If you have the luxury of working on static sites, preparing initial mockups for later integration with server-side code, or if you too have only taken the first step into modern web development, Dreamweaver CS4 could be the perfect tool for you. Sadly, I’ll have to wait for Adobe to plant both feet firmly in the now.

It’s a shame, really. Dreamweaver CS4’s front-end coding tools are so powerful that I wish every web developer could use them! I can honestly say that it has been nearly ten years since I would have considered using Dreamweaver myself, but I really want to use Dreamweaver CS4.

Perhaps this gap is something that could be bridged with a slick Dreamweaver extension. Call it the Live URL Mapper. With it, developers could configure the URLs that Live Preview used to request HTML template files, and the static resources (image, CSS and JavaScript files) they referenced. Whether this is possible depends on how extensible Dreamweaver CS4’s Live Preview mechanism is under to hood.

If not, developers using today’s cutting edge server-side frameworks will have to wait for Dreamweaver CS5. With such a strong set of client-side tools, it only makes sense for Adobe to turn its focus to the world of modern server-side frameworks. If Adobe does anywhere near as good a job there as it has supporting modern front-end development, it will turn a lot of heads—including mine.