使用 HTML5 Pack for Dreamweaver CS5

HTML5 Pack for Dreamweaver CS5 是一个扩展，它在 Dreamweaver 中添加对 HTML5 和 CSS3 的支持。本文简要概述 HTML5 和 CSS3，介绍安装这个扩展之后在 Dreamweaver 中可以使用的新特性。

Adobe TV 上的 Introducing the Dreamweaver CS5 HTML5 Pack 是一个演示视频，演示如何在 Dreamweaver 中使用 HTML5 Pack。

需求

为了从本文获得最大的收益，需要安装以下软件和文件：

Dreamweaver CS5

• Try
• 试用
• Buy
• 购买

HTML5 Pack for Dreamweaver CS5

• Download extension
• 下载扩展

HTML5和CSS3

HTML5 是 World Wide Web Consortium 的核心语言 Hypertext Markup Language (HTML) 的第 5 个主要修订版。随着 Web 的持续发展，对这种主要 Web 语言以及它向 web 专业人员提供的功能的要求也越来越多。HTML5 考虑到了 web 社区近几年发生的许多变化，包括动态的网站和应用程序快速增加，以及视频和交互功能的普及。多年来，web 设计者和开发人员不得不依靠并非最优的方法开发自己需要的页面。与其他主要修订版一样，HTML5 的目标也是改进 web 设计者和开发人员的体验。

同样，下一代 CSS 语言 CSS3 的出现是为了与 HTML5 一起改进 web 的开发和浏览体验。CSS3 引入了许多新的选择器和属性，让开发人员可以通过在 web 内容上应用样式实现更多功能。另外，CSS3 把 CSS 规范划分成单独的模块，而不是像 CSS2 那样采用单一大规范的形式。这种新的规范形式允许根据需要分别更新规范的不同部分，有助于更及时、更灵活地发展规范。

尽管 HTML5 和 CSS3 规范还没有最终完成，但是在当前支持它们的浏览器中可以使用它们。先进浏览器（Safari、Firefox、Opera、Internet Explorer、Chrome）的最新版本至少支持一部分（某些浏览器支持许多）HTML5 和 CSS3 特性。

Dreamweaver CS5和HTML5 Pack

安装 HTML5 Pack 之后，可以在 Dreamweaver CS5 中使用以下特性和支持：

HTML5 代码提示

HTML5 代码提示与 Dreamweaver 中的其他代码提示相似。在 Code 视图中，开始输入感兴趣的标记，Dreamweaver 会提供代码提示。

图 1. 在 Dreamweaver CS5 中提示新的<canvas>标记

除了提示新的 HTML5 标记之外，Dreamweaver 还为现有标记提供新属性和值代码提示（例如，input 标记的新属性和值）。

CSS3 支持和代码提示

除了 HTML5 代码提示之外，HTML5 Pack 还在 Dreamweaver CS5 中添加 CSS3 代码提示。新的代码提示并不支持每个 CSS3 选择器和属性，而是只支持 W3C 规范中当前完成的选择器和属性。

另外，这个扩展包含对 –moz、-webkit 和 -o CSS 属性的基本支持。

多屏幕预览和媒体查询支持

Multiscreen Preview (File > Multiscreen Preview) 可以按三种不同的屏幕大小预览正在编辑的页面：手机大小、书写板大小和桌面。

图 2. Multiscreen Preview 面板

预览所用的手机、书写板和桌面尺寸设置为默认大小，但是可以通过单击 Multiscreen Preview 面板中的 Viewport Sizes 按钮方便地调整这些大小。

确定目标设备的尺寸之后，可以通过在 HTML 页面中添加媒体查询为不同大小的设备指定不同的样式。通过单击 Multiscreen Preview 对话框中的 Add Media Queries 按钮添加媒体查询。通过图形化界面添加和读取媒体查询的功能是对 Dreamweaver CS5 的重大改进。通过使用不同的媒体查询，可以让页面在手机、书写板设备和标准桌面浏览器中显示不同的外观。

Live 视图中的 video 和 audio 标记支持

video 和 audio 标记是新的 HTML5 标记，可以用它们在浏览器中直接播放视频和音频文件，而不需要外部插件或播放器。从本质上说，有了 HTML5，浏览器就变成了播放器。这个功能需要安装 QuickTime。

Webkit（Live 视图的显示引擎）已经更新了，如果有适当的标记，就可以在 Live 视图中播放视频和音频。另外，Live 视图中会显示一些（并非所有）CSS3 属性。

HTML5 初学者布局

这个扩展安装两个使用 HTML5 语法的新布局，让开发人员更容易开始使用 HTML5 布局。

图 3. 使用 HTML5 新语法的 HTML5 初学者布局

可以通过 New Document 对话框 (File > New) 使用这些布局和其他 CSS 布局。

Design 视图中更好的显示

在过去，当 Dreamweaver 无法识别某个标记时，会简单地忽略它，这导致 Design 视图无法准确地反映设计的最终效果。对于 HTML5 标记，Design 视图已经改进了，它会留出相关内容占据的区域，让您能够更好地了解此内容如何影响页面布局的其余部分。

结束语

有了 Dreamweaver HTML5 Pack，就可以开始创建符合 HTML5 和 CSS3 规范的页面，这些页面会改变您的网站并优化在最新手持设备上的浏览体验。有了多屏幕预览和媒体查询支持，就可以使用 Dreamweaver 同时查看、测试和编辑网页在手机、书写板和桌面上的效果。

关于作者

Jon Michael Varese 是 Adobe 的资深技术作家，是 Dreamweaver 方面的主要作家。他为 Dreamweaver、Fireworks、FreeHand、Flash 和 ColdFusion 编写过 web 和印刷文档。除了编写 web 教程之外，他当前正在攻读 19 世纪英国文学博士学位。

http://www.infoq.com/cn/vendorcontent/show.action?vcr=997