HTML5 Extension in Dreamweaver CS5

Adobe Dreamweaver CS5 comes with a HTML5 Pack. The extension allows to use HMTL5 and CSS3 code structures in your web sites.  Since both the languages are not fully standardized the extension supports the currently implemented features.

The main enhancements of the HTML5 extension are:

  • Integration of the Multiscreen Preview panel, that provides the visualization of a web page through the Live View display on 3 different screen sizes. Adds a Media Query support. You can run the functionality through Window -> Multiscreen Preview.

Multiscreen Preview

The Media Queries allow you to visualize the web page in a different way depending on the appliance which is used to open it. In this way you will be able to set the proper dimensions and the corresponding CSS code for the web pages visualization through a mobile phone, a tablet and a desktop computer.

  • Supports code hinting for the corresponding HTML5 syntax.

HTML5 Code Hinting

  • Supports code hinting for the CSS3 selectors and properties completed in the W3C specifications.

CSS3 Code Hinting

Also, provides improved rendering for CSS3 in the Live View mode.

  • Provides video and audio tags support for Live View (Requires Quicktime).
  • Comes with HTML5 starter layouts. They can be opened through the New Document Dialog box.

HTML5 Starter Layout

Detailed introduction of the major Adobe Dreamweaver CS5 HTML5 Pack features can be viewed in the following video tutorial:

The SiteGround.com video content presented here requires a more recent version of the Adobe Flash Player. If you are you using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by downloading here.

The extension can be downloaded from:

http://labs.adobe.com/downloads/html5pack.html

You will need the Adobe CS5 Extension Manager in order to integrate the extension in your Adobe DreamWeaver CS5 software. You can get it from the following URL:

http://www.adobe.com/exchange/em_download/

Download the archive file, unzip it and run the executable file. Once the manager is installed proceed with the HTML5 Pack integration.

To install the Adobe Dreamweaver CS5 HTML5 Pack click on the downloaded Adobe Extension archive. The Adobe Extension Manager will be opened and the HTML5 extension will be installed. Restart your Adobe Dreamweaver CS5 software in order to see the integrated extension.

Dreamweaver is a trademark of Adobe Systems Inc. SiteGround is not affiliated with or endorsed by the Dreamweaver Project or its trademark owners.