Adobe released the last version of its premiere Web design software, Dreamweaver Creative Suite 3 (CS3), in April 2007. Now, only a year and a half later, the company has already introduced a brand new version, Dreamweaver CS4. Savvy Web page designers are probably asking themselves “Is this update worth it?”
In two words: You betcha.
I’ve been using Dreamweaver since 1999, well before Adobe bought Macromedia in 2005. I’ve used this tool to design my own personal Web site, design and maintain Web sites for others professionally, and collaborate internationally with large teams on large sites. I have sought a reasonable replacement for this handy tool over the years — I prefer not to rely on a single product from a single vendor, and it is a bit pricey — but I’ve always come back to Dreamweaver for its versatility and power. Nothing else comes close.
Why would you want to upgrade to CS4? Because there are a lot of important new features and changes in this update.
Backward compatibility.
One of Dreamweaver’s strengths has always been its new versions’ backward compatibility. CS4 doesn’t disappoint in this regard — I tried it out with sites designed almost 20 years ago, and they could still be modified with today’s version. Updating the sites to take advantage of some of the new design features, such as AJAX and Spry technology, was painless and a breeze.
Database connections.
Another strength is the increased ease and power CS4 offers in working with both Access and MySQL databases. I use databases to provide secure and level differentiated access to different portions of my Web site. I also use them for user authentication — checking the validity of a log-in ID/password — and to store information such as user type, access level, date of access and so on.
The procedure is similar for either database type: create a local copy of the database, upload it to your server, create a database connection (usually called a data source name or DSN), then establish a logical connection between the two of them. Done. Now the contents of the database are available from Dreamweaver with simple SQL calls.
Web page simulation.
While a Web page is being built, a designer typically uploads the page multiple times to check out its functionality with a variety of browsers, usually including Internet Explorer, Firefox, Safari and so on. CS4 has made Live View an important integral part of the development cycle as an optional interim step.
Dreamweaver CS4 offers a lot of important and useful new features and changes.
CS4 Live View utilizes the Safari rendering engine, probably the most “universal” browser rendering engine. With Live View turned on, I could make my changes to the page and see the results immediately in Live View as they would appear in a browser. Live View provides quick and easy access to the source code through CS4’s improved Code View facility, which let me directly add, edit and modify the nitty-gritty code. I found little need to upload the page time and time again; it’s the other side of the WYSIWYG universe.
Although CS4 makes it far easier to preview in many different browsers to see an entirely accurate rendering in a given browser, you must actually use that browser.
First, because individual browser updates happen all the time, making it nearly impossible for Live View to keep up — for example, Firefox, Safari and SeaMonkey have all been updated at least once since CS4 was released, but the CS4 version of Live View has not been updated to match. And some oddball browsers might not be recognized by Live View and may require some hand-tweaking.
CSS.
CS4 makes extensive use of Cascading Style Sheets. Although CSS usage was strongly encouraged in CS3, CS4 basically requires its usage for such things as exact placement of page elements, font decorations and table bordering. You can also choose to use CSS for such functions as the placement of alert boxes (previously, sophisticated users needed to use third-party or homegrown tools for this type of interface manipulation).
I’m not a fan of CSS particularly, and find it breaks the tried-and-true WYSIWYG paradigm, frequently destroying the chain of thought important to me as a page designer. In other words, having to use CSS gets in the way of the process of smooth HTML coding. Its use does, however, make considerable sense if you want to use the Spry and Web Widgets features now a part of CS4. This is not your grandfather’s Web anymore.
AJAX.
Spry, Adobe’s framework for AJAX, was previously introduced in CS3 and has been considerably expanded in CS4. The JavaScript library offers many new Web widgets that offer a richer interface, such as the Accordion (which provides animated access to much more information than limited screen real estate would normally provide), various tab tools, slider controls and nifty horizontal/vertical menus.
One widget in particular I found useful was the ToolTips widget — tool tips (those useful pop-ups that materialize when you hover your mouse over an icon) are often neglected or given an afterthought status in design efforts. Adding appropriate tool tips to any item is now trivial to accomplish, a painless way to provide a professional look and feel.
Datasets.
Datasets provide a means of addressing tabular data — HTML or XML tables, for example — with a simple handle. The dataset can then be used easily as a data source. Things get interesting when the flexibility of the Document Object Model (DOM) is considered. Recall that changes to the rendered page through the DOM are instantaneous and require no additional overhead. This provides for real-time manipulation of the rendered image.
Finally, CS4 provides for moderate to strong typing of these data sources — allowing, for example, a column in a table to be considered a numerical type or a date type and to be sorted in either ascending or descending order.
Forms.
I found my ability to do simple and frequently required forms-related tasks, such as field confirmation — useful for confirmation of password entry accuracy, for example — without having to do any actual coding to be quite a time saver. Point-and-Click Whenever Possible seems to have been a design philosophy for CS4, one I wholeheartedly agree with after years of repetitive coding.
File management.
Something new in CS4 that makes life a lot easier for page designers is efficient management of the various components making up a modern Web page. These include not only CSS files, but graphics files (such as GIFs, TIFFs and JPEGs), template files and language files, including VBScript, JavaScript and PHP.
Another plus: CS4 provides a Related Files toolbar that offers access to all component portions of the Web page. Simply by clicking on the component name, that component is modifiable/editable while maintaining the main page in Design Mode.
Also new in CS4 is a very handy Code Navigator, providing immediate and easy editable access to relevant code.
CS4 has a real killer management feature: If, while you’re in Design Mode, you enter Live View, activate a feature and then “freeze” that view, all affiliated aspects of that code can be examined/modified and then the effects of that modification can be further examined. With complicated CSS snippets and intertwined HTML events such as mouse moves and interacting clicks, the ability to quickly expose the germane code fragments is a true time saver and productivity booster.
Taking a page from the IntelliSense autocompletion feature in Microsoft Visual Studio, CS4 provides what Adobe calls “Code Hinting,” whereby a drop-down box of suggested syntax options appears as you type in code. This substantially cuts down on typos and misspellings of variable names — a problem that plagues me more frequently than I care to admit.
User interface.
There are dramatic and substantial changes to the user interface in CS4. The work environment, in its entirety, is now considered a “Workspace,” and can be extensively modified and customized.
Each Workspace can be uniquely named, saved, modified and later recalled. Additionally, there are many canned workspaces already available, categorically presented by type, such as “Designer,” “Coder” or “Application Developer Plus.” A dual-screen type is even available.
I found that it was useful to have different workspaces for different Web sites, depending on each site’s different needs. It was easy to switch from one workspace to another.
Dreamweaver CS4’s redesigned user interface can be configured by “panels” — groups of customizable and related functions. Panels can be grouped together, resized or reduced down to mere icons, providing a near-infinite customizable interface. Additionally, the individual panels can be docked/undocked.
One of the more interesting new features in CS4 is what Adobe calls “InContext Editing,” whereby areas designated by the designer can be modified/edited by the user. For example, users can change to a different view of a table on the Web site. No need to install special tools, set up FTP accounts or play message tag with confused users; this gives end users the ability to modify Web pages on the fly as they wish. Cool stuff.
Finally, Adobe CS4 provides easy access to and incorporates key technology from the downloadable Yahoo User Interface. YUI tools can be used as general-purpose tools or for easier access to facilities offered on the Yahoo site. CS4 makes it easier to incorporate that code, which is changeable/readable-writable.
What’s missing. CS4 removed some of the lesser used, but resource-intensive, items from its feature list, including Timelines, Flash Buttons and Flash Text, JSP and ASP.NET Server Behaviors and Record Sets, Layout Mode and a site’s Site Map. Some have been replaced with more modern versions that function similarly but with considerably less overhead. For example, the Flash Buttons and Flash Text features were typically built as Flash movies. The equivalent are now built directly into CS4 with little overhead. Good riddance, I say!
With a purchase price of $399 and an upgrade price of $199 from any previous version of Dreamweaver, this release of Dreamweaver is a must-have. There’s also a fully functional trial version available.
As for me, I immediately updated to CS4 as soon as I could. The enhancements over earlier releases, including CS3, are too compelling to be ignored — so I didn’t. The upgrade price makes this an absolute no-brainer. There’s a reason to consider this the latest and greatest version of CS4: Because it is.
Ross Greenberg is a longtime Dreamweaver fan, having used this tool to create Web pages since before it was called Dreamweaver.