HTML5 开发工具
HTML5开发工具
我们所说的HTML5开发工具，其实就是一个扩展(HTML5 Pack)，它在 Dreamweaver 中添加对 HTML5 和 CSS3 的支持。本文简要概述HTML5开发工具的安装，并且提供HTML5开发工具的相关软件和文件的下载，以及安装这个扩展之后在 Dreamweaver 中可以使用的新特性。
HTML5 Pack 具有多个版本，对应于Dreamweaver的多个版本，本文以 HTML5 Pack for Dreamweaver CS5 为例。
准备工作
需要下载安装以下软件和文件
组合二：
Adobe Dreamweaver CS5.5
HTML5 Pack for Dreamweaver CS5.5 官方下载
安装说明：
1. 首先下载安装Dreamweaver ，选择试用安装
2.下载 HTML5 Pack 扩展
此外：
本站的另外两篇文章分别提供了Dreamweaver 8.0简体中文版和DreamweaverCS5版的下载，有需要的，可在本站搜索框中进行搜索参考
Dreamweaver CS5和HTML5 Pack
安装 HTML5 Pack 之后，可以在 Dreamweaver CS5 中使用以下特性和支持：
（1）HTML5 代码提示
HTML5 代码提示与 Dreamweaver 中的其他代码提示相似。在 Code 视图中，开始输入感兴趣的标记，Dreamweaver 会提供代码提示。 除了提示新的 HTML5 标记之外，Dreamweaver 还为现有标记提供新属性和值代码提示（例如，input 标记的新属性和值）。
（2）CSS3 支持和代码提示
除了 HTML5 代码提示之外，HTML5 Pack 还在 Dreamweaver CS5 中添加 CSS3 代码提示。新的代码提示并不支持每个 CSS3 选择器和属性，而是只支持 W3C 规范中当前完成的选择器和属性。 另外，这个扩展包含对 –moz、-webkit 和 -o CSS 属性的基本支持。
（3）多屏幕预览和媒体查询支持
Multiscreen Preview (File > Multiscreen Preview) 可以按三种不同的屏幕大小预览正在编辑的页面：手机大小、书写板大小和桌面。 预览所用的手机、书写板和桌面尺寸设置为默认大小，但是可以通过单击 Multiscreen Preview 面板中的 Viewport Sizes 按钮方便地调整这些大小。 确定目标设备的尺寸之后，可以通过在 HTML 页面中添加媒体查询为不同大小的设备指定不同的样式。通过单击 Multiscreen Preview 对话框中的 Add Media Queries 按钮添加媒体查询。通过图形化界面添加和读取媒体查询的功能是对 Dreamweaver CS5 的重大改进。通过使用不同的媒体查询，可以让页面在手机、书写板设备和标准桌面浏览器中显示不同的外观。
（4）Live 视图中的 video 和 audio 标记支持
video 和 audio 标记是新的 HTML5 标记，可以用它们在浏览器中直接播放视频和音频文件，而不需要外部插件或播放器。从本质上说，有了 HTML5，浏览器就变成了播放器。这个功能需要安装 QuickTime。 Webkit（Live 视图的显示引擎）已经更新了，如果有适当的标记，就可以在 Live 视图中播放视频和音频。另外，Live 视图中会显示一些（并非所有）CSS3 属性。
（5）HTML5 初学者布局
这个扩展安装两个使用 HTML5 语法的新布局，让开发人员更容易开始使用 HTML5 布局。 可以通过 New Document 对话框 (File > New) 使用这些布局和其他 CSS 布局。 Design 视图中更好的显示在过去，当 Dreamweaver 无法识别某个标记时，会简单地忽略它，这导致 Design 视图无法准确地反映设计的最终效果。对于 HTML5 标记，Design 视图已经改进了，它会留出相关内容占据的区域，让您能够更好地了解此内容如何影响页面布局的其余部分。
结束语：
有了HTML5开发工具，就可以开始创建符合 HTML5 和 CSS3 规范的页面，这些页面会改变您的网站并优化在最新手持设备上的浏览体验。有了多屏幕预览和媒体查询支持，就可以使用 Dreamweaver 同时查看、测试和编辑网页在手机、书写板和桌面上的效果。
