Adobe Dreamweaver CS5 HTML5 Pack

Adobe is pleased to make a technology preview available of the Adobe® Dreamweaver® CS5 HTML5 Pack extension.

This extension provides initial support for HTML5 and CSS3 in Adobe Dreamweaver CS5, and helps you easily create HTML5 pages and CSS3 styles. It also includes updates and WebKit improvements for Design View and Live View rendering.

While HTML5 and CSS3 will not be finalized for some time, the extension provides support for a set of currently-implemented features.

Download and Discuss

This extension enhances Dreamweaver CS5 in the following ways:

Introduces the Multiscreen Preview panel , allowing for Live View display on 3 different screen sizes, with Media Query support. (Window > Multiscreen Preview)
Adds code hinting for the HTML5 Tag Library with new tags, attributes, and properties.
Updates code hinting for new attributes and values in existing HTML tags.
Adds code hinting for the following CSS3 specifications: 2D/3D Transformations; Animations; Background and Border; Basic User Interface; Line Layout; Marquee; Media Queries; MultiColumn; Ruby; Text; and Transitions.
Updates Live View to support <video> and <audio>. (Requires Quicktime installation.)
Improved rendering for CSS3 in Live View.
Adds HTML5 starter layouts to the New Document Dialog box.
Offers better rendering for new tags in Design View.

Note: We have also released an extension for Dreamweaver CS3 and CS4 users that includes the code hinting functionality. The extension is available on the Dreamweaver Exchange.

Getting Started

Follow these steps to get started with the HTML5 Pack:

Download the HTML5 Pack extension
Ensure that you have Dreamweaver CS5 installed. A free trial of Dreamweaver CS5 is available.
If you don't have the Adobe Extension Manager installed, you’ll need to download and install it now (or use your CS5 installer).
Install the extension by double clicking it or in the Extension Manager, browse to the extension on your machine.
Restart Dreamweaver CS5.
Multi-screen Preview can be found at Window > Multiscreen Preview or the button on the Document toolbar.
Start creating HTML5 and CSS3 content in Dreamweaver using this extension
Ask questions and share your feedback in the HTML5 Pack forum

Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Terms of Use.

Community

Below you'll find references and links to help you participate in the Dreamweaver community.

Online Forum

Ask questions and discuss ideas with other Dreamweaver users in the Labs forums.

Visit the HTML5 Pack forum

Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Terms of Use.

Adobe Developer Connection

Learn more about Dreamweaver in the Adobe Developer Connection.

Resources

If you want to learn more about releases on Labs as well as other Adobe technologies, visiting a user group or connecting with an Adobe Community Expert is a great place to start.

FAQ

What is the HTML5 Pack?: This is an extension to Dreamweaver CS5 that enables code hinting for HTML5 and CSS3 elements. It also includes updates and WebKit improvements for Design View and Live View rendering.
Who should try the HTML5 pack?: This extension is for users that want to try out the latest in web development technologies.
Do I need to have Dreamweaver CS5 to use this extension?: Yes. Due to differing versions of WebKit built into Dreamweaver CS4 and Dreamweaver CS5, this extension is not backwards compatible.
Why not support all of the CSS3 specs?: HTML5 and CSS3 are still works in progress. While some of the specs are finished or stable, many are still under development or have no current browser support. We might revise the hinting in the future as the specifications gel into recommendations. We chose the specs that were stable or that have some level of browser implementation.
What about -moz and -webkit hinting?: For this release, we added some basic hinting for Mozilla, Opera and Webkit CSS extensions. While not complete, these hints are included to allow developers to try out commonly used properties like box-shadow and border-radius. Let us know if you would like more support for these properties.
Where can I post issues and comments?: Please use the HTML5 Pack forum to ask questions and post issues/comments.
Why was the functionality and features of HTML5 not part of Adobe Dreamweaver CS5 at ship?: During the planning and development of Dreamweaver CS5, future browser support for the evolving HTML5 and CSS3 specifications was uncertain, and we did not foresee any compatibility issues in the CS5 time frame. While the official specifications are still not yet complete, they are now supported to varying degrees by a number of different desktop browsers – and more importantly by all smartphones using Webkit-based browsers (e.g. iPhone, Android, Nokia WRT, Blackberry OS). Given the recent surge of interest around HTML5, DW’s compatibility with HTML5 and CSS3 is being updated immediately so you can begin exploring their potential as quickly as possible.
Why is Dreamweaver CS5 using Adobe Labs for this technology release?: Our objective is to get new functionality in the hands of web designers and developers as soon as early as possible. The Dreamweaver product team and Adobe continues its support for the evolving web standards and this technology release on Adobe Labs provides a platform for feedback that we can incorporate into future releases of Dreamweaver.
Why does Design View not render HTML5 correctly?: Live View in Dreamweaver CS5 provides a better visualization for the functionality that is available in browsers supporting the latest HTML5 spec.
Why does the CS3/4 version only have code hinting?: Due to changes made in the core product, only the code hinting is fully backwards compatible.
What is included in the feature set for the HTML5 extension?

Multiscreen Preview
Add Media Queries
LiveView update to enable support for Audio & Video tags
LiveView supports text-shadow on Win and Mac
LiveView supports box-shadow on Mac
Tag Libraries support for HTML5
Code Hinting for HTML5 & CSS3
CSS3/HTML5 Starter Layouts (2)
Code Hints for common –webkit, -moz, and –o properties
English only

System Requirements

Dreamweaver CS5 is required. The Dreamweaver CS5 system requirements are available on Adobe.com.

Extension Manager CS5 is also required for installing the extension.

The extension for CS3 or CS4 requires a version appropriate Extension Manager.

Release Notes

This release of the HTML5 Pack is Technology Preview software and is designed for evaluation purposes only. The software contained is not final; but, many portions of the technology are fully implemented and ready for you to try and discuss.

There are some workflows that are not yet supported fully, including issues with some Site Root relative pathing and Live View. This extension is intended as a Technology Preview and is a starting point for HTML5 support.

We value your feedback on workflows and features you would like to see. Some issues we are currently aware of are:

When using the HTML5 Starter Layouts, be sure to set the doctype to HTML5. The proper doc type is already in the page, but a different setting for the doctype will overwrite it.
CSS3 Box-shadow is not supported on Windows.
Design View does not support Media Queries or CSS3 properties.
Add Media Queries cannot be added while in Live View with dynamic pages.
Site Root relative paths are not yet supported.
Cannot add Media Queries to Templates and Template instances.
HTML5 tags do not show up in the New CSS Rule dialog.
CSS3 properties do not appear in the CSS Panel.
@font-face is not supported.
Refreshing the Multiscreen Preview will refresh the current page in Dreamweaver, not the file shown in the File field.