Dreamweaver Update: HTML5 Goodness, but Forms Suffer

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 <header>, <nav>, and <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.mp4, myvideo.webm, and 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.

There are several other enhancements in both Windows and Mac versions. One particularly useful one is the ability to drag and drop files from Windows Explorer or Mac Finder into the Files panel. And JavaScript developers will be delighted to know that you can debug your scripts by outputting 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.

This entry was posted in Dreamweaver. Bookmark the permalink.

4 Responses to Dreamweaver Update: HTML5 Goodness, but Forms Suffer

  1. Hello,

    I am preparing to rework a website using Dreamweaver CS5 and purchased your online book, Getting Started with CSS for my Kindle. However, I cannot seem to find the link to the files you reference at the beginning of the book. Please advise!

    Thank you,

  2. David Powers says:

    Hi Leslie, Sorry for the delay in replying. The source files for Getting StartED with CSS can be downloaded from this location on the Apress website.

  3. Olakunle says:

    i need to lay my hands on the zip file containing the working file for your book “PHP solutions: Dynamic web design made easy” but http://www.friendsofed.com won’t let me in. When i try linking the site using the url supplied, all i kept getting is a dialog requesting for username and password. How do i ever access the resources of a site that doesn’t give me the first hand chance of signing up to have a user account that could be used to be a beneficiary of the site?

  4. David Powers says:

    Congratulations on finding your way to my website. Now make your way to http://foundationphp.com/phpsolutions/errata_2e.php, where you’ll find updates and corrections to the book, including a link to the page on the Apress website where you can find the download files.