By James J. Maivald
Each time I take a look at an upgrade it is always with mixed feelings. First, there is the anticipation of Christmas morning, what new cool features will I find under the tree…er, menu structure…and what great new things will the program enable me to do now. Then, there is always a little fear or anxiety, usually centered around wondering whether any of my essential features—ones I use everyday—have been changed to the point that they are unusable or, worse yet, have been removed from the program altogether!
Finally, there’s the angst we all encounter once you’ve seen the changes about whether it’s worth the price to upgrade to the new version.
All in all, I think the outlook for Dreamweaver CS4 is a positive one overall. I don’t know how Adobe does it, but somehow they find features and tools to add to their programs that are really useful on one hand, yet don’t add a perception of bloat on the other. I can’t tell you how many times in the past I thought, “Boy, I sure wish this program could do so and so…” and then bam, the next version of the software can do it! Let’s take a quick tour of the program to see what cool new things Adobe added to Dreamweaver.
New user interface
One of the first things you’ll notice in CS4 are the changes to the interface. Changing the way a program looks or operates is always problematic; it’s guaranteed that if the changes are major you will anger users, but if the changes are merely cosmetic, people will wonder why they are paying for the upgrade in the first place. For CS4, you’d have to look carefully to find some of the changes, but you’ll find most of them welcome additions. For example, Windows users will immediately notice that the Title bar is missing. Although it sounds like an insignificant alteration, it means you now have an extra 50 pixels of screen real estate for your workspace.
Although the changes are more than cosmetic, they may be easy to find for those unfamiliar with the program. Here’s a quick key to the new features: 1. Title bar eliminated. 2. Workspace manager. 3. Related files interface. 4. Live View and Live Code. 5. New Insert Panel. 6. Vertical Code/Design Split. 7. Code Navigator.
The last few versions of Photoshop and InDesign, and the last couple versions of Illustrator, have all allowed users to create and save their workspaces. It was a great way to set up the programs for a specific function and then quickly reset them for other tasks. I use it a lot in Photoshop to switch between print (CMYK) and web design (RGB) workflows. Now, the ability to create, save and recall different workspaces has been beefed up in Dreamweaver and moved out of the Window menu. It’s now taking up prominent residence right on the main menu bar (application bar) in its own pull-down menu. You can choose from one of the eight default settings or create and save your own right in the menu.
Like Photoshop, InDesign and Illustrator, Dreamweaver features a more robust workspace manager that allows you to create, save and access different workspaces, quickly and easily.
Another change has moved the Insert bar from its familiar home above the CODE/SPLIT/DESIGN buttons to the panel dock on the right side of the program. The new Insert panel sports a few more buttons and one new category, but that’s not the reason for the move. The new location was necessitated more by the addition of the new Related File buttons, which are described below. The vertical display of the insert buttons now provides the room for description words to accompany the sometimes cryptic icons. But the new panel takes up a lot more space and will be less popular than other changes in the program. Luckily, Dreamweaver offers a “Classic” workspace option that relocates the Insert bar to its former home.
The Insert bar is now a panel. It was moved to make room for the Related Files interface, but now it takes up gobs more space than before. You can save some room by hiding the labels (shown above) or select the Classic workspace to return it to its original location.
Vertical Code Split
One of the handy features in Dreamweaver just got handier. The Split view allows you to view the HTML code at the same time as the design. Before, the two windows only split horizontally. CS4 now allows you to split the Code and Design views vertically, too. Although it seems a small thing, the feature actually got an ovation when I showed it to a group of Webmasters in August.
Split view now offers a vertical option, which has been a sure crowd pleaser.
Related Files and Code Navigator
Open any file and Dreamweaver displays all the files related or linked to its content above the document window. Click on any of the file names and the contents will be displayed in the document window.
Working hand in hand with related files is the new Code Navigator. This revolutionary feature instantly analyzes each code element in the file and automatically maps the relationships between it and specific CSS rules or other files that affect it. Code Navigator will be an indispensible tool for every designer enabling you to troubleshoot problem code in seconds instead of minutes or hours (or never). To access the Code Navigator just insert your cursor in any piece of code, right click and select Code Navigator from the context menu. You can also activate the feature by Alt-clicking on a specific element or by choosing the option from the View menu. Adobe realized that this would be a popular feature, so it sprinkled the Code Navigator icon around the interface so you don’t have to go very far to find it.
Live View and Live Code
Although Dreamweaver is considered a WYSIWYG Web design program, the program’s Design view has always left something to be desired, especially when viewing dynamic elements and certain types of formatting. Basically, these elements just didn’t display properly. The only way to check these items was to preview them in a browser, which wastes precious time in the work day. Live View is a new feature that promises to recoup this wasted time by allowing you to preview most CSS formatting and dynamic elements—Flash animations and Spry widgets, among others—live in the document window. It’s not perfect and doesn’t eliminate the need for testing your pages in the browser altogether, but it’s a great start. Simply click the Live View button and the document window renders the CSS and dynamic content as if it’s in a browser—your CSS-based roll-overs will operate, videos will play and database driven elements should operate properly. To return to normal, just click the Live View button again to toggle the display.
Live View will save hours of browser-based testing. Click the button and CSS-based formatting and dynamic elements will be rendered as they would in a true browser.
Along side Live View is another new feature called Live Code. Whenever Live View is activated, the Live Code option is available for selection. Press the button and a code window appears showing you the actual code updated with live data, which permits you to see how the actual data is structured and formatted in the layout. Together, Live View and Live Code will eliminate hours of time wasted loading and testing pages in your browser.
Adobe Photoshop Smart Objects
The release of CS3 introduced Dreamweaver users to tighter integration between the other Adobe products. It meant that you could use native PSD files directly in your Web layouts, and Dreamweaver would take care of the image optimization and saving of the file in GIF, JPG or PNG formats. CS4 ups the ante by allowing you to insert PSD images as Smart Objects. As you probably know, Smart Objects was introduced in CS2 and allows you to work with images in one application or workflow, while maintaining a live connection to the original image. That way, whenever a change is made to the original image, you can update the Smart Object in your Web page to maintain the most up-to-date content. It also allows you to continually adjust the size of the image without worrying about the loss of quality.
Using a Smart Object is no different than inserting any other type of image. Select Insert>Image, choose a PSD from the file structure (it doesn’t have to be within the Web site hierarchy) and click OK. Dreamweaver will open the PSD in the Image Preview dialog, where you can adjust its format, dimensions and even crop it. When you click OK, Dreamweaver saves the optimized version of the image in your site, while the original PSD is not affected. That’s a big help all by itself, but that’s not all. The real advantage to Smart Objects comes when you want to modify the image: Smart Objects allow you to change their dimensions, up or down, adjust the cropping or even remove it altogether, and when you click OK the JPEG or GIF will be updated and replaced in the layout!
Insert any PSD as a Smart Object in Dreamweaver to maintain a live connection to the original image. The icon visible at the upper left corner of the image means you can change the size, format and even cropping without adversely affecting image quality.
Improved CSS Support
Dreamweaver was one of the first HTML editors that fully adopted CSS formatting and each new version of the program has improved this support. CS4 is no exception. As the Code Navigator, Live View, Live Code and Related Files has improved the view and analysis of CSS code formatting, Dreamweaver has also improved the way you create CSS in the first place. A new option has been added to the New CSS Rule dialog called Compound. This formalizes what has been a feature of Dreamweaver for several versions, where the program automatically constructs compound CSS rules based on context. Two buttons have been added to the dialog to speed up the process by quickly editing the compound to make it more or less specific. The dialog also provides clearer descriptions of how the specific rule fits in the cascade.
Changes to the New CSS Rule dialog only scratch the surface of the improvements to CSS features in CS4.
CSS-based changes were made to the Property Inspector, too. Take a look and you will see HTML and CSS buttons that allow you to access appropriate formatting for each element within the layout. Rules can now be created, applied and edited directly from the Property Inspector.
HTML Data Sets
There is no HTML editor that I am aware of that allows you to create data-driven dynamic layouts easier than Dreamweaver. The UltraDev extension was incorporated into the program back in version 4 and Adobe’s Spry framework in CS3. But no matter how easy it is, there will be those for whom it is still too esoteric. CS4 provides the solution. Along with ASP, ColdFusion, PHP and XML, Dreamweaver now can use HTML tables as data sets, too. Gone is the learning curve for database design and development; gone is the arcane discussion of tag names and data structures. Now you can simply put the data you want in an HTML table and then connect multiple pages to it to drive your dynamic content.
Using an HTML data set can’t be any easier. Simply create a table and fill it with data—names, addresses, phone numbers, etc. Create and assign a unique id for the table and save the file in your site. Then, create a Spry Data Set. When the Spry Data Set dialog opens, choose HTML from the Select Data Type pull-down menu. A nice aspect of using HTML data sets is that you can save multiple tables in one file and access each independently. Once created, you can use an HTML data set almost identically as you use an XML-based data set. If nothing else, HTML data sets allow you to quickly display the same data in multiple ways. For example, show a list of contacts ordered by last name, then by company, and then by title. Never again will table data be considered locked away and dead.
Working with contributors or clients has always been difficult on the Web. How do you control access and versioning across an entire site and yet allow multiple users to contribute content? Previously, contributors had to purchase a full copy of Dreamweaver or Contribute to access the Web site. Besides the cost of the software this also required time and money to learn how to use it. In CS4, Dreamweaver has implemented a feature called InContext Editing that promises to simplify this process. InContext Editing allows you to insert Editable and Repeating regions in the Web page that can be accessed through an online service, where the content can be added or modified right in the browser, without the need of any special software or training. The service was not available for testing as of the date of this writing, but it looks like InContext Editing will be a highly useful service.
As InContent Editing promises to improve the coordination of clients and contributors, the integration of Subversion promises to improve the interaction with co-workers, too. An open-source versioning control system that’s been around since 2000, Subversion offers more robust management of online resources and powerful check-in/check-out features. The service was not available for testing as of the date of this writing.
Using HTML tables as a dynamic data source is as easy as one, two, three.
1. Select a page containing an HTML table and create a Spry Data Set.
2. Select an Insert option and apply the desired CSS formatting.
3. Click Done.
A nice aspect of using HTML data sets is that you can save multiple tables in one file and access each independently. Once created, you can use an HTML data set almost identically as you use an XML-based data set.
MIA (features missing in application)
As in most upgrades, some old features don’t make the cut. The following features have been removed from CS4 due to the lack of user interest and cost in maintaining:
- ASP.NET and JSP server behaviors and recordsets
- Flash buttons, elements (Image Viewer), and text
- Java Bean support
- Layout mode
- Site Map view
- Web services
After using the various beta versions of CS4 for the last few months, I can only say that it would be hard if not impossible to go back to a previous version. I have found innumerous uses for the Code Navigator, Compound CSS rule and Live View. I’m sure you’ll feel the same way.
James Maivald is a designer, consultant and Adobe Certified Expert and Instructor with over 25 years of experience in the graphic design industry. He is also an author of hundreds of magazine articles on graphic design and electronic publishing, as well as several books. He has an upcoming video on Dreamweaver (photoshopCAFE.com). www.DesktopDesign.cc