Adobe has fulfilled its promise to Creative Cloud subscribers by releasing an exclusive update to Dreamweaver CS6. If you have a subscription to the Creative Cloud and haven’t yet installed the update, you can get it by going to the Help menu and selecting Updates. I like a lot of the new features, most of which improve support for HTML5 elements. But I don’t like the changes made to the way form elements are created.
What’s happened is that the Input Tag Accessibility Attributes dialog box has been removed, so the input element is inserted on its own without creating a label. Adobe’s rationale for doing so is to simplify the workflow by reducing the number of dialog boxes that appear. In one sense, this is a laudable idea, but the handling of labels for input elements has been poorly thought out. The Input Tag Accessibility Attributes dialog box prompted you to add an ID and label to the element before it was created. As a result, Dreamweaver inserted something like this:
<label for="firstname">First Name: </label><input id="firstname" type="text" name="firstname">
Now, what you get is just this:
<input id="textfield" name="textfield">
You need to change the name in the Property inspector, and then add the label manually. Changing the name in the Property inspector isn’t a problem, because you’re probably going to make other changes there. However, the Label icon is right at the bottom of the Insert panel, and it either wraps the input element in
<label> tags (not ideal from the accessibility point of view), or it inserts an empty pair of tags and leaves the focus in Code view. I’ve discussed these problems with Adobe at length, and they agree that the workflow needs to be improved. It’s a real pity that they couldn’t do so before the update was released.
That complaint apart, what’s in this update?
If you’ve adopted HTML5 or are thinking of doing so, there’s a lot to like. Some of the old cruft has been removed from the Insert panel/bar to make room for HTML5 elements. HTML5 video and canvas get pride of place in the Common category. Frames and tables have been given the boot from the Layout category, which is now home to HTML5 semantic elements, such as
<article>. There’s a new Media category that has options for Edge Animate compositions, and HTML5 video and audio, as well as Flash movies and video.
Close integration with Edge Animate makes inserting an animation a breeze. It’s a two-step process. First you zip up all the assets for the animation in Edge Animate by publishing it as an OAM file. Then you choose where you want to insert it in a page in Dreamweaver, and Dreamweaver imports everything and upacks it automatically into a dedicated folder. Inserting HTML5 video and audio is also quick and easy. As long as you use the same basic filename for all formats, Dreamweaver detects all of your source files when you select just one. For example, if you have files called
myvideo.ogv, you need select only one of them, and Dreamweaver automatically creates
<source> elements with the correct MIME types for all of them.
The big news for Mac users is that Dreamweaver now has a Live Search field at the top of the Files panel. This hooks into Spotlight, the native Mac search engine, to search for matching filenames and text within files in the currently selected site. A pop-up panel displays the results, which are continually refined as you type the search value. The panel has separate sections for matching filenames and matches within text. Both sections display a maximum of 10 results, but you can access all matches within text by clicking Find All to open the Results panel. Live Search is exclusive to the Mac version of Dreamweaver. It’s not clear whether there are plans to develop a similar feature for Windows, because it relies on Spotlight.
Another bonus for Mac users—at least those who own a MacBook Pro with retina display—is that this version of Dreamweaver is optimized for high-pixel-density displays. As a result, icons and other features are displayed crisply.
console.log() to the Site Reports panel.
Overall, I think this is a good update for Dreamweaver, but I think it’s a pity it has been spoiled by the poor workflow in forms. I have created an hour-long video workshop explaining all the new features for video2brain. I’ll post details of when it’s available.