File Under: HTML5, Software

Adobe Adds HTML5 Creation Tools to Dreamweaver

Dreamweaver CS5

SAN FRANCISCO — Adobe will begin shipping a package of HTML5 web design tools for Dreamweaver, the company says.

The HTML5 Pack for Dreamweaver will available for download on Adobe Labs some time on Wednesday. It will be a free download for anyone who owns Dreamweaver Creative Suite 5, and Adobe will roll it into an automatic update for Dreamweaver once the add-on pack has been thoroughly tested.

The add-on pack gives Dreamweaver CS5 the ability to provide code hints for HTML5 elements and CSS3 styles when building pages in the text-based Code View window. Adobe is also adding a few starter layouts for people building HTML5 pages from scratch. More layouts will be added later.

Dreamweaver’s Live View mode — which uses the same WebKit rendering engine as Safari and the Android browser to preview web pages — is also getting an update. The Live View window will now be able to render pages built with HTML5 and CSS3, so developers coding native video and audio playback to their pages will be able to preview those pages in Dreamweaver.

The announcement was made during the Google I/O, the developer conference taking place here this week. Adobe CTO Kevin Lynch spoke as part of the morning keynote at I/O. Lynch hinted at this release earlier in May when he appeared at the Web 2.0 Expo developer conference and announced that Adobe would soon be shipping more tools for HTML5 content creation.

The release comes soon after Apple began encouraging developers to create web apps in HTML5 rather than rely on Adobe’s Flash Player to deliver videos, audio clips and animations. Apple’s iPad and iPhone famously don’t support Flash, so Adobe’s push towards giving designers new tools for building HTML5 web apps will help the company maintain its foothold on a web where Flash is becoming less attractive.

Dreamweaver Creative Suite 5 was released this spring. But it’s one of the oldest WYSIWYG web editors out there, and any web developer with knowledge of HTML5 and CSS3 has had the ability to use Dreamweaver’s Code View to build pages using the emerging standards for years. These new tools make the workflow easier though, allowing developers to take advantage of Dreamweaver’s helpful code hinting and to preview changes right inside the app, instead of uploading the files to the web to view their changes in a browser.

Lynch demonstrated a couple of other things, too. He showed how you can make a rich advertisement in Dreamweaver using CSS3 transforms and HTML5 animations. This will be especially handy for anyone wanting to create an ad for Apple’s iAd platform, which will be totally HTML5-based.

Also added to Dreamweaver in the HTML5 pack is a tool that lets you see what your pages will look like on multiple devices with different size screens all at once. It’s a preview pane with several windows — one for a desktop browser, one for mobiles, one for a tablet and so on. The preview tool uses dynamic stylesheet swapping, so you see your layout change instantly based on which device you’re viewing it on.

Of course, that’s extremely useful for anyone creating a website that’s going to be deployed on mobiles and iPads. Oh yes, and Android tablets — whenever they show up.

See Also: