HTML5 Pack for Dreamweaver CS5——HTML5开发工具

下载地址:http://www.xyhtml5.com/html5-development-tools.html

出了5.5这个补丁不建议再用,会影响自动排版的规则!

Dreamweaver CS5和HTML5 Pack

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

HTML5 代码提示

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

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

CSS3 支持和代码提示

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

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

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

Multiscreen Preview (File > 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 布局。

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

Design 视图中更好的显示

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