Enhanced HTML5 Pack for Dreamweaver CS5
The HTML5 Pack for Dreamweaver CS5 is an extension that adds support for HTML5 and CSS3 in Dreamweaver. This article provides a brief overview of HTML5 and CSS3, and outlines the new features available in Dreamweaver once the extension has been installed. For a video demonstration that shows you how to work with the HTML5 Pack in Dreamweaver, see Introducing the Dreamweaver CS5 HTML5 Pack on Adobe TV.
HTML5 is the 5th major revision of the World Wide Web Consortium’s core language, Hypertext Markup Language (HTML). As the Web has continued to evolve, so too have the demands on the Web’s primary language, and what it gives web professionals the ability to do. HTML5 takes into account the many advances that have taken place in the web community over the years, including the explosive growth of dynamic websites and web applications, as well as the proliferation of video and interactivity. As is the goal of any major revision, HTML5 seeks to improve the experiences of web designers and developers who have, over the years, had to rely on less-than-optimal methods for producing the pages they want to produce.
Similarly, the advance of CSS3, the next iteration of CSS, alongside HTML5 promises to improve both the development and viewing of web experiences. CSS3 introduces many new kinds of selectors and properties that let you do much more with styling web content. Additionally, CSS3 has broken up the CSS specification into separate modules—as opposed to the single large specification that currently exists for CSS2. This new spec format allows for the updating of different parts of the specification individually as needed, resulting in a more timely and flexible evolution for the specification as a whole.
Although the HTML5 and CSS3 specs are still being finalized, HTML5 and CSS3 can be used with any browser that currently supports them. Most recent versions of the leading browsers (Safari, Firefox, Opera, Internet Explorer, Chrome), support at least some (a few support many) HTML5 and CSS3 features.
DREAMWEAVER CS5 AND THE HTML5 PACK
The following features and support are now available in Dreamweaver CS5 when you install the HTML5 Pack:
HTML5 code hinting
HTML5 code hinting now works like any other code hinting in Dreamweaver. In Code view, start typing the tag you’re interested in, and Dreamweaver provides the code hint for you.
Figure 1. Hinting the new <canvas> tag in Dreamweaver CS5.
In addition to hinting new HTML5 tags, Dreamweaver also provides new attribute and value code hints for existing tags (for example, new attributes and values for the input tag).
CSS3 support and code hinting
In addition to HTML5 code hinting, the HTML5 Pack adds CSS3 code hinting to Dreamweaver CS5. The new code hinting does not support every CSS3 selector and property, but rather those that are currently most complete in the W3C spec.
Additionally, the extension includes basic support for some -moz, -webkit and -o CSS properties.
Multiscreen Preview and Media Query support
Multiscreen Preview (File > Multiscreen Preview) lets you preview the page you’re editing as it would appear on three different screen sizes: phone size, tablet size, and desktop.
Figure 2. The Multiscreen Preview panel.
The phone, tablet, and desktop dimensions used for previewing are set to default sizes, but you can easily adjust these sizes by clicking the Viewport Sizes button in the Multiscreen Preview panel.
Once you know the dimensions of the devices you want to target, you can specify different styles for different-sized devices by adding media queries to your HTML page. To add media queries, click the Add Media Queries button in the Multiscreen Preview dialog box. The ability to add and read media queries through the visual interface is a significant advance for Dreamweaver CS5. With different media queries, you can specify what your page will look like on phones, tablet devices, and standard desktop browsers.
Video and audio tag support in Live view
Video and audio tags are new HTML5 tags that enable the playing of video and audio files directly in the browser without the requirement of an external plug-in or player. In essence, with HTML5, the browser becomes the player. This functionality requires QuickTime installation.
Webkit—the rendering engine for Live view—has been updated so that video and audio can play in Live view when tagged appropriately. Additionally, some (not all) CSS3 properties will render in Live view.
HTML5 starter layouts
The extension installs two new layouts that use HTML5 syntax, making it easier for you to get started with HTML5 layouts.
Figure 3. HTML5 starter layouts with new HTML5 syntax.
The layouts are available from the New Document dialog box (File > New), along with the other CSS layouts.
Better rendering in Design view
Traditionally, when Dreamweaver doesn’t recognize a tag, it simply ignores it, leaving an imperfect idea in Design view of what your design will ultimately look like. For HTML5 tags, Design view has been improved so that the area occupied by the related content is blocked out, giving you a better idea of how that content affects the rest of your page’s layout.
CONCLUSION
With the Dreamweaver HTML5 pack, you can start creating HTML5- and CSS3-compliant pages that update your website and optimize viewing on the latest handheld devices. With multiscreen preview and media query support, Dreamweaver allows you to see, test, and edit what your web pages will look like on mobile phones, tablets, and desktops simultaneously.
Download
HTML5 Pack for Dreamweaver CS5
Download extension
ShareThisTags: and desktop, creating HTML5- and CSS3-compliant, Dreamweaver CS5, DREAMWEAVER CS5 AND THE HTML5, Dreamweaver cs5 video demonstration, html, HTML5 and CSS3, HTML5 and CSS3 features, HTML5 Pack, HTML5 syntax, Introducing the Dreamweaver CS5, modules, new features in Dreamweaver, optimize, tablet, The phone, usage HTML5 and CSS3, web designers and developers, web professionals
June 28th, 2010 at 2:24 pm
I found this website by on a fluke when I was exploring on Google then I came onto your site. I have to speakyour web site is very cool I really loveyour theme! don’t have any free time at the current instantto look through your website web sitebut I have bookmarked it.
June 30th, 2010 at 4:43 pm
This may be off-topic, but how about changing the theme every now and then? Maybe not if it won’t look right though. My own computer has about 1000 wallpapers that randomly rotate every 15 minutes, lol. Can’t sit still I guess. Good post though, thanks.
I don’t even use Google translate anymore, there’s free software that will do it for you faster and better.
Thanks,
T. Johns
July 2nd, 2010 at 10:44 am
could’nt help your link john, stick around maybe some other time. liked your keywords hope it would help my seo
July 2nd, 2010 at 10:50 am
great than you
July 15th, 2010 at 4:24 am
I want to quote your post in my blog. It can?
And you et an account on Twitter?
July 15th, 2010 at 5:21 am
Thanks for sharing, really cool site
August 25th, 2010 at 7:08 am
much appreciated lots, I am obliged to say your site is excellent!