Article
About the Author
Alex Walker
Alex manages design and front end development for SitePoint.com and writes SitePoint's monthly design newsletter, the SitePoint Design View. He also maintains Pixel Perfect, SitePoint's Web Design Blog.
6 Things To Like About Dreamweaver CS4
5 ... 4 ... 3 ... 2 ... 1 ... Dreamweaver CS4 is GO!
Yes, Dreamweaver CS4 officially hit the shelves on Wednesday October 15th—not that many of us would actually purchase it from a shelf!
Although I'm sure there are people out there who upgrade as a matter of course, most of us need a handful of good reasons to reach into our pocket. The key question: What do I get for shelling out my hard-earned on the latest big green beast from Adobe?
1) UI/Workflow Improvements
The first thing you'll notice on opening the new Dreamweaver is Adobe have made some substantial changes to the user interface. Although the changes mean long-time users will need to reorientate themselves, most (but not quite all) changes are for the better.
Apart from inheriting all the grayscale cosmetic changes of Adobe's new look, the top quarter of the UI has been significantly streamlined. The title bar and main menu have been combined into a single bar, and the horizontal INSERT toolbar is now a vertical INSERT panel on the right-hand side of the screen.
Okay. So, what's the big win here?
Greater vertical workspace, allowing you to see more of your code or design without having to constantly rejig your screen. Frankly, it also feels more natural to me to be adding links, images, and DIVs from a panel rather than a vertical bar. The right-hand side is a place for keeping and organizing assets (for example, Files, Assets, Styles, Snippets), so placing your HTML elements amongst them makes perfect sense to me.
Adobe have also made the workspace selector more easily accessible by putting it in the top right-hand corner. This enables you to quickly switch between eight different modes optimized for designing, app development, and coding; there's even a workspace optimized for dual screen setups. Nice.
However, the new UI isn't entirely without issue. Soon after installing, I highlighted some text inside a paragraph and went to emphasize it. I pushed my trusty "I" button and a dialog box appeared asking me how I'd like my CSS applied.
Um ... no, I just want a plain old <em> tag, please—I'm marking this content up, not trying to style it.
Eventually, I figured out there are actually two property panels, each with its own "I" and "B" buttons: a CSS panel and a HTML panel. You can flip between these panels using the buttons in the lower left corner—if you find them.
Personally, I believe it's a blind spot and I suspect this will stump quite a few people. Maybe it's just me. Maybe tabs would work better. See what you think.
Even allowing for this (in my honest opinion) UI glitch, the new UI is a definite improvement on CS3.
2) The Related Files Toolbar
Adobe's new Related Files toolbar is a definite productivity winner. It's a simple concept. Dreamweaver scans through the document you open and automatically opens any linked files—for example, CSS, server-side includes, JavaScript, iFrames—in a new toolbar at the page top.
This is a serious productivity improver and you'll probably become dependent upon it without hours. I have only one slight query. As you can see from the image, the initial file you open is always listed on the tab, yet simply referred to as Source Code on the Related Files bar.
From a UI perspective, it seems a little strange to me to have Source Code sitting alongside real file names. But to be fair, I can't think of a significantly better solution off the top of my head.
3) Code Navigator
Users are funny old things. You nearly always learn more about what they want from watching—rather than asking—them. Adobe's development team watched their CS3 users and came to an interesting conclusion.
Very few regular users utilized the WYSIWYG pane to actually add or edit content. Instead, Design View was more often used as a navigation device, providing a visual method of jumping around your code—not unlike the Navigator panel in Photoshop. And I thought I was the only one who did that!
Adobe have catered to this usage pattern with the new Code Navigator feature.
Click on any item visible in Design View, wait a second, and a small icon of a ship's wheel will appear. Click on this wheel icon and you'll get an editable, fly-out window showing only the related code of your selected page element.
Now, if you think waiting for that little wheel to appear sounds irritating, you're right; happily, you can shortcut straight to the code fly-out by ALT-clicking (Command-Option-clicking on a Mac) anywhere on the screen.
This is a great feature. While modern, well-organized coding practices demand that we modularize our code into multiple-linked files, the day-to-day business of accessing those many files has become increasingly drawn out and difficult. Code Navigator brings all these disparate code blocks back to your fingertips; it lets you feel like you're working with a single, stand-alone page, without losing any of the benefits of modularity.