CS4 Dreamweaver Review

CS4 Premium

I decided I would purchase CS3 as the prices have come way down and I am making the big switch over to mac.  That means that my CS2 on my Windows box is pretty useless and I am starting over with a new server and files anyways. I am excited to receive my macbook pro and install the whole creative suite next week.

Part of my reason for not buying the CS4 suite has to do with there continuing to be bugs in the programs (that I’m sure Adobe will fix) but most importantly, CS3 is going to be an industry standard for a long time.

That being said, I am impressed by some of the changes made in Dreamweaver as described here. I look forward to working with the program in the future, as I am one who likes to get down in the code and not rely on the software to make the scripts and templates elegant and easy to read (because the software just can’t)

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.

related files bar

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.

live view

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!

code naigator

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.

originally posted on Sourfizz.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.