使用 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

HTML5 Pack for Dreamweaver CS5

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 方面的主要作家。他为 DreamweaverFireworksFreeHandFlash ColdFusion 编写过 web 和印刷文档。除了编写 web 教程之外,他当前正在攻读 19 世纪英国文学博士学位。

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

你可能感兴趣的:(Dreamweaver)