Review: The Best New Features in Dreamweaver CS4

Today Adobe announces its new Creative Suite CS4, which includes web tools Dreamweaver, Photoshop, and Flash and several more. It’s available from the Adobe Store.

For the past few months I’ve been working with Adobe and Peachpit Press on the upcoming version of Dreamweaver CS4 Classroom in a Book. I’ve helped Adobe update the book by writing some lessons and revising others. I’ve spent all that time working with the beta versions of Dreamweaver CS4. But today is the end of the beta. Today Adobe is making as much splash as possible about its new software.

You may have been trying out the beta version yourself. Feel free to chime in with your favorite features, too. Here are what I consider the best new features in the Dreamweaver part of CS4.

Features discussed:

  • Photoshop SmartObjects
  • New Spry Widgets
  • Live view and Live code
  • Code Navigator
  • HTML and CSS buttons in the Properties panel
  • Vertical and Horizontal Split Views
  • The CSS Interface

Photoshop SmartObjects

One of my favorite features in Dreamweaver CS4 is Photoshop SmartObjects. The SmartObject is connected to a Photoshop PSD file that can be used and modified on various pages as a web image. SmartObjects from a single PSD file can be used in multiple instances in a web site. Each instance can be modified and still remain connected to the originial PSD image.

Here’s a bit about how it works. Start with a page that has been saved. Select Insert > Image or drag and drop a PSD file onto the page. The Image Preview Dialog will appear. Here you can select the file format you want, crop, set quality and make other image optimization choices.

the preview dialog

The image appears on the Dreamweaver page with a SmartObject badge in the upper left corner. The badge will notify you that the image is in sync with the original Photoshop image, or out of sync.

In sync

The image above shows a badge indicating “in sync”.

Out of Sync

The image above show an image “out of Sync.” When the image is out of sync, it means that the image has been modified, either in Dreamweaver or in Photoshop. Perhaps you scaled the image in Dreamweaver to be smaller than the original Photoshop object.

You have several choices in Dreamweaver when your image is out of sync. You can see them by right-clicking (Ctrl-Click on Mac) on the image to see the menu.

smartobject menu

If you select “Update from Original” the web image will be re-rendered in the selected size and optimized for that placement. You can select “Reset Size to Original” and the image will return to its original size.

If you modify the image in Photoshop, the changes are made automatically in Dreamweaver when you save in Photoshop. When a SmartObject has been modified in Photoshop, you see a red arrow at the bottom of the web image in Dreamweaver. If you choose “Update from Original” now, the image contents will update, but NOT the size being used in a particular instance of the SmartObject. So, for example, if you are using a single PSD image in a thumbnail, a sidebar graphic, and a footer graphic, each will retain its size settings while updating its contents.

You can also work on SmartObjects by accessing them in the Assets panel. Using this method, you can choose “Update from Original” when an image was changed in Photoshop and all the SmartObjects will be updated at once, rather than going through the Dreamweaver pages where the SmartObjects were placed one by one.

When SmartObjects are used in Templates, updating the template’s dependent pages will update the images.

New Spry Widgets

There are several new Spry widgets. The Spry Tooltip widget is similar to a title attribute in a tag, except this tooltip has a style sheet and a JavaScript file that you can customize attached to it. Create the text in Dreamweaver where you want to add the tooltip. In the following example, I highlighted the acronym STEM. In the Spry category of the Insert bar, select the Spry Tooltip icon. In the classic workspace layout of the Insert bar, it’s the last Spry icon on the right. (Dreamweaver CS4 now has other Workspace choices for the Insert bar, but they take up a lot more space on the page than the classic horizontal Insert bar display. If you use a big monitor or two monitors, you may like the newer Workspace arrangements.)

tooltip icon

The term gets wrapped in a span tag in the code that will trigger the tooltip. A div containing the tooltip contents (hidden by the CSS until needed) is also added to the page. In Design view, you see a blue box with the Spry Tooltip label where you type the content that you want to appear in the tooltip. Note that the box for the tooltip contents would normally appear at the very bottom of the page, which you might have to scroll to find. It’s near the example sentence here because that’s the entire content of the example page.

type the content

Save the page. Dreamweaver will notify you that there are two dependent files needed. Click OK and the files will be added to a folder called SpryAssets at the site root level. You can set some properties for the tooltip using the Property inspector. Click on the blue tooltip label to see the tooltip Property inspector. For example, you can set horizontal offset and mouse behavior in the Property inpector, get rid of the generic ID name or add effects. If you look at Code view, you’ll see a JavaScript operator that Dreamweaver inserts at the end of the page. This is in addition to the JavaScript file that is saved to the SpryAssets folder.

tooltip property inspector

You’ll see a new CSS file in your CSS panel called SpryTooltip.css. Use this stylesheet to set colors and background color and other properties related to the appearance of the tooltip. The SpryTooltip.js file is also in the SpryAssets folder and can be modified.

There are other new Spry widgets in CS4, including several very handy ones for forms. Among the new Spry tools for forms is a password validation and password confirmation widgets, a radio button group widget, and a checkbox group widget.

Live View and Live Code

live view and live code

This item should probably be first, because it’s really cool. Notice the two new View buttons near the old faithful Code, Split and Design buttons? The Live View button lets you render the page right in Dreamweaver (using a webkit browser) that works like, well, a live view in a browser. Except it’s in Dreamweaver. Scripts run, Flash runs, links work, onMouseOver works. It’s live and it’s a big time saver. Of course, you can still preview in a variety of browsers in the same way as always.

Live Code lets you open any page of code that might be connected to a page in Dreamweaver, edit and save, and see the page change as you work.

Another change to note that you see in the preceeding image is that now all dependent files are listed across the top of document window and can be acted on in the document window merely by selecting them. In the image Source Code (the HTML page) is selected, but clicking on SpryTooltip.js or SpryTooltip.css would open them right there without having to find them in the Files panel.

Code Navigator

In Design view, you choose View > Code Navigator to see this new tool. In Code view, you see a little icon that looks like s ship’s wheel. code navigator icon Code Navigator connects you to all the code linked to a page, you can pull it up in a Dreamweaver window and edit it right there.

In Design view, it looks like this:

code navigator dialog

All the listed files are linked and clickable. It’s contextual. Click in the appropriate spot and you can see JavaScript links. In addition, if you hover over a CSS rule, but don’t click, you see all the properties for that selector. You can see code related to all of the following using Code Navigator:

  • CSS
  • server-side includes
  • JavaScript files
  • parent template files
  • library files
  • iframe source files

The HTML/CSS buttons in the Properties panel

A set of buttons that allow you to toggle between HTML properties and CSS properties in the Dreamweaver CS4 Properties panel is a great new feature. When an element in the document window is selected, or when a tag is selected from the Tag selector, you can choose which properties you want to view for the element. To see the HTML properties, click the button on the Property inspector that says HTML.

the html properties

To see the CSS properties for the same element, click the button for CSS. You can edit the rule using the edit button, if needed, or you can create a new rule if none exists.

css properties

It takes a bit of getting used to at first to remember to toggle between HTML and CSS depending on what you’re doing, but it is a great convenience.

Vertical and Horizontal Split Views

In Dreamweaver CS4 there are new ways to view both code and design or just code.

To view Code and Design, you can click the Split button that has been in use in Dreamweaver for several versions. But now, you can choose View > Split Vertically and see Code and Design side by side.

split vertical

As always, a change in one view is instantly changed in the other. When you make a change in the Code, you still have to click in the Design window to see the change take effect.

When viewing just the Code, you can also choose View > Split View or View > Split Vertically.

code split vertical

You can copy and paste from one window to another. Anything you change in one window is also immediately changed in the other. When you combine this with some of the other Code View tools, such as Collapse, it will make moving things or copying things in the code easier to do.

The CSS Interface

If you add a new element to a page and want to create a CSS rule for it, click the CSS button in the Property inspector. Or, choose ‘New CSS Rule’ from the Targeted Rule menu and click on the Edit Rule button.

The New CSS Rule dialog is quite different. The menu and description of Selector Type is much more accurate now. The “Advanced Selector” type is gone. The choices now include tag, class, id, and compound selector. Dreamweaver now uses the term ‘contextual selector’ to describe what they mean by Compound Selector. Dreamweaver still suggests a selector based on the selection in the document. It also offers you a detailed description of the specificity of that selector and allows you to either make the selector Less Specific or More Specific. You can also pick the location where the new rule will be saved.

There are other changes, not all big, but some nice refinements. If you get CS4 and start working you’ll notice and appreciate them, but they are not so significant as the ones I’ve described.

Technorati Tags:

Cross-posted at BlogHer.

2 thoughts on “Review: The Best New Features in Dreamweaver CS4

  1. Pingback: Dreamweaver CS4 Tutorials | Dr. Web Magazin

  2. Pingback: Guide to Web Design

Leave a Reply