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.
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
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.
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.
SitePoint WordPress Restaurant Theme
SitePoint WordPress Ecommerce Theme
SitePoint WordPress Portfolio Theme
ECMAScript 2015: A SitePoint Anthology
Jump Start Git
- 1 Choosing between React and Angular: An in-Depth Comparison
- 2 Quick Tip: How to Style React Components with styled-components
- 3 Five Techniques to Lazy Load Images for Website Performance
- 4 Quick Tip: How to Build Your Custom Theme for Telescope Nova
- 5 How Did You Get Started? A Look at the Best & Worst Web Design Tools