Document

原文：zh.annas-archive.org/md5/20D0CB270D8B61AEC60988534ABD48EA

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

这本书在网络设计演变的激进发展时期出版。移动设计不再是事后的事情，而是建立网站的过程中不可或缺的部分。HTML5、CSS3 和 JavaScript 中的新功能已经超越了旧的动画和交互技术。本机视频已经取代了基于插件的媒体。此外，新的 HTML5 和 CSS3 工具已经在从表单设计到图形样式的各个方面带来了翻天覆地的变化。

Dreamweaver CS6 解决了这些新需求，本书向您展示了如何充分利用新功能，并如何重新利用已有的 Dreamweaver 功能来解决新的设计挑战。

对于初次接触 Dreamweaver 的读者，本书提供了一个扎实而简洁的介绍，介绍了创建尖端和稳定网站的基本构建模块。对于有经验的 Dreamweaver 设计师，本书详细解释了如何充分利用 CS6 中提供的新功能，特别关注 jQuery Mobile 中设计移动站点的新功能以及生成应用程序的新功能。

本书首先教您如何使用最新技术和方法（HTML5、CSS3 和 JavaScript）在 Dreamweaver 中创建网页。它演示了如何创建或自定义具有 HTML5 布局的页面，并向这些页面添加 HTML5 本机音频和视频。然后，您将学习如何使用 Dreamweaver 向网页添加 CSS3 效果，并有时超越 Dreamweaver 中可用的功能。

本书的后几章着重于移动设计。本书介绍了 Dreamweaver CS6 的响应式设计工具，以调整显示以匹配用户的设备，学习如何构建基于 jQuery 的 Web 应用程序，以及学习如何将这些 Web 应用程序转换为独立运行的应用程序，无需浏览器。完成后，您将学会使用 Dreamweaver 的最新功能进行 Web 和移动开发的多种技术。

本书涵盖的内容

第一章，“使用 Dreamweaver CS6 创建站点和页面”，提供了对 Dreamweaver CS6 的简要概述和介绍，包括定义站点、创建 HTML5 页面、使用属性检查器应用标签、定义链接、插入图像、链接到外部样式表以及使用 ID 和 class div 标签设计页面。

第二章，“使用 HTML5 进行页面结构”，探讨了如何依靠 HTML5 中的新的标准化语义页面结构元素（<header>、<nav>、<article>、<section>、<aside>和<footer>）构建网页。

第三章，“使用表单收集数据”，涵盖了为导航生成客户端（JavaScript）表单，使用 Spry 验证字段定义表单，将 HTML5 参数应用于表单字段，为表单添加样式以及将表单与真实的服务器应用程序连接。

第四章，“应用 CSS3 效果和变换”，涵盖了阴影、边框半径和不透明度；使用 CSS3 变换进行设计；以及使用 CSS3 和 Dreamweaver 动画工具创建动画。

第五章，“嵌入 HTML5 本机音频和视频”，讲述了准备、嵌入和测试本机音频和视频。

第六章，“使用媒体查询实现响应式设计”，讨论了定义样式表以自定义在笔记本电脑、平板电脑和智能手机上的显示。

第七章，“使用 jQuery Mobile 创建移动页面”，讲述了如何基于 jQuery Mobile 创建页面，这些页面在移动设备上特别有效，可访问，引人入胜，并且具有动画效果。

第八章，“增强移动站点”，讨论了添加布局网格、可折叠块和移动友好表单。

第九章，“使用 ThemeRoller 自定义主题”，涵盖了在 Dreamweaver CS6 中应用 jQuery Mobile 主题、使用 ThemeRoller 自定义主题以及应用自定义主题。

第十章，“使用 PhoneGap 构建应用程序”，深入探讨了使用 Dreamweaver 6 中的新工具为 iOS（iPhone，iPod Touch 和 iPad）和 Android 设备发布移动应用程序。

阅读本书需要什么

为了更有效地阅读本书，您需要访问 Dreamweaver CS6 或更高版本。但是，本书包括提示和注释，以便使用早期版本 Dreamweaver 的设计师，甚至是直到第 3 版的设计师，利用 Adobe 提供的工具来创建基于 HTML5 和 CSS3 的网站。

这本书是为谁写的

这本书适合有经验的 Dreamweaver 网页设计师，他们希望迁移到 HTML5 和 jQuery。它还针对新手网页设计师，他们想要全面了解最新的网页设计工具和功能。虽然主要关注 Dreamweaver CS6，但本书包括对使用旧版本 Dreamweaver 的读者有价值的内容，并提供了安装 Adobe 的 HTML5 Pack 版本的说明，以更新这些软件包。

约定

在这本书中，您会发现许多不同类型信息的文本样式。以下是一些样式的例子，以及它们的含义解释。

文本中的代码词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 用户名会显示如下：“因为这将是一个单页站点，index.html文件名将在浏览器中输入站点的 URL 时打开页面。”

代码块设置如下：

  <div data-role="collapsible" data-collapsed="true">
	  <h3>Header</h3>
    <p>Content</p>
  </div>

新术语和重要单词以粗体显示。屏幕上看到的单词，例如菜单或对话框中的单词，会以这样的方式出现在文本中：“这样做会打开选择 图像 来源对话框。”

注意

警告或重要说明以这样的方式出现在一个框中。

提示

提示和技巧会以这样的方式出现。

第一章：使用 Dreamweaver CS6 创建站点和页面

本书以压缩的方式涵盖了 Dreamweaver CS6 中可用的整个尖端和高级功能范围。我们重点介绍了 HTML5 中的新功能，这些功能可以结构化内容并使其更易访问，CSS3 样式可以为元素添加转换（如旋转）和效果（如圆角），以及使用 HTML5 媒体查询和 jQuery Mobile 进行移动设计。Dreamweaver CS6 提供了实现所有这些功能的重要工具。

我们很快就会谈到这个。但首先，在本章中，重温（对于那些刚接触 Dreamweaver 的人来说，理解）一些最基本的工具对于在 Dreamweaver 中提高生产力是很重要的。这样做有两个目的：它提供了对 Dreamweaver CS6 基础知识的快速概述，可能更重要的是，它让我们都遵循协议，保护本书中要涵盖的其他所有内容的完整性。

在本章中，我们将：

• 定义 Dreamweaver 站点

• 创建 HTML5 页面

• 将元素应用到文本

• 定义链接

• 插入图像

• 创建 CSS 文件并将 HTML 页面链接到这些样式表

• 定义和应用页面设计的 ID 和类 Div 样式

定义 Dreamweaver 站点

在 Dreamweaver 中做的每件事都要求您首先创建一个 Dreamweaver 站点。没有 Dreamweaver 站点，Dreamweaver 中的任何功能都无法正常工作。

为什么这样做？基本上，这是因为您在本书学习构建的网页涉及数十个文件。数十个？真的吗？好吧，数一下：一些 JavaScript 文件，链接到内部和外部页面，嵌入的音频、视频和图像，链接到 CSS 文件，以及使用 iFrame 技术嵌入其他页面的内容。我们已经有数十个了！

如果这些文件之间的任何关系或链接出现故障——例如文件被移动、重命名或删除——我们的页面就会崩溃。但是，如果我们在（并遵循）Dreamweaver 站点中工作，Dreamweaver 会跟踪所有网页中的所有文件，例如嵌入的图像文件和视频剪辑，以及链接到其他网页，并确保所有这些文件协同工作。

Dreamweaver 站点还提供了管理本地（预览）站点和站点的在线远程版本之间文件传输的工具。

定义本地站点

所有这一切都始于为您用 Dreamweaver 管理的每个网站定义一个单独的（仅一个）Dreamweaver 站点。我们在这里使用站点斜体和大写字母来强调我们不是在谈论在“网站”中组织文件，而是在定义一个非常特定的 Dreamweaver 东西——一个站点。

从 Dreamweaver 的任何界面中执行这个操作的最简单方法是通过站点菜单。定义站点的第一（也是唯一必要的）步骤是在您自己的计算机上创建一个本地版本；与远程（在线）服务器的连接可以稍后再进行。

在定义 Dreamweaver 站点之前，在您的计算机上创建一个文件夹（您的桌面是一个方便的地方），作为站点的根文件夹。在命名该文件夹时避免使用空格或特殊字符（即，使用daves-website而不是Dave's Website!）。

要定义本地站点，请按照以下步骤：

1. 启动 Dreamweaver CS6 后，选择站点 | 新建站点。站点设置对话框将打开。

2. 在站点名称字段中，输入任何内容，以帮助您将此站点与其他站点区分开。在使用空格或特殊字符方面没有限制。

3. 在本地站点文件夹字段中，使用浏览文件夹图标找到您创建的文件夹，作为您站点的根文件夹。

上面的截图显示了如何为 Dreamweaver 站点创建根文件夹。

1. 单击浏览文件夹图标后，选择根文件夹对话框将打开。导航到您的根文件夹，然后单击选择。这将返回您到站点设置对话框。

2. 单击保存以完成本地站点的定义：

上一张屏幕截图显示了一个 Dreamweaver 站点，其中定义了本地站点文件夹文件。

我们将很快返回到我们的本地站点，并看看如何使用它，但首先让我们步行一下如何为我们的站点定义远程连接。

定义远程站点

大多数网站都是为在互联网上公开发布而设计的。它们托管在能够实现这一点的服务器上；这些服务器主机很容易找到（一个可靠的价格和功能列表在reviews.cnet.com/web-hosting-plans/）。

在您可以为 Dreamweaver CS6 定义远程服务器的链接之前，您需要先签约远程托管。这个托管服务将为您提供三个基本信息——FTP 地址、用户名和密码。有些托管设置还包括一个定义的根目录。当您签约托管时，请记录这些信息，或者如果您现在将该服务器纳入 Dreamweaver 站点中，请查找您当前托管服务的登录信息。

有了您的 FTP 地址、用户名和密码，接下来的步骤将介绍为 Dreamweaver 站点定义远程连接所需的内容。或者不要。请记住，在您自己的计算机上构建站点并不需要远程站点，您几乎可以在本书中的所有内容中工作而不需要远程连接。

要为 Dreamweaver 站点定义远程连接，请按照以下步骤操作：

1. 启动 Dreamweaver CS6，选择站点 | 管理站点。这将打开管理站点对话框，顺便说一句，您可以使用这种技术（管理站点）来编辑 Dreamweaver 站点定义中的任何内容，而不仅仅是远程连接。

2. 在管理站点对话框中，双击您的站点列表中的站点，再次打开站点设置对话框。

3. 在站点设置对话框的左侧类别列表中，选择服务器。

4. 单击添加新服务器（+）按钮。另一个名为**站点设置…**的对话框打开。

上一张屏幕截图显示了一个新的服务器连接被添加到站点定义中。

1. 在服务器名称字段中，输入任何有助于您记住您正在连接的服务器的文本。

2. 在FTP 地址字段中，输入您的托管管理员提供的 FTP 地址，在用户名字段中输入提供的用户名，在密码字段中输入您的密码。大多数站点使用端口 21，所以除非得到站点管理员的指示，否则不要更改端口字段中的默认值。

3. 选择使用被动 FTP和使用 FTP 性能优化复选框可以有助于避免连接故障。要查看这些选项，请展开站点设置…对话框的更多选项部分。在 Dreamweaver CS6 中，默认情况下这些复选框是选中的。

上一张屏幕截图说明了一个已定义的远程连接。

1. Web URL字段是根据您在FTP 地址字段中输入的内容自动填写的。这些信息被 Dreamweaver 用于诸如其内置的链接检查功能之类的工具，但与定义站点的过程无关，更多地起到了分散注意力的作用。如果您愿意，可以用您网站的实际 URL 替换生成的 URL。

2. 先不要单击保存。首先，单击测试按钮。如果出现错误消息，请与您的站点托管公司检查您的 FTP 地址、登录凭据和密码（并确保您已连接到互联网）。当测试按钮产生一条消息说您已成功连接到您的 Web 服务器时，单击保存。

上一张屏幕截图说明了一个成功测试的远程连接。

1. 在本地和远程站点之间传输文件

前面的屏幕截图说明了本地和远程视图之间的切换。

在定义了 Dreamweaver 站点之后，您可以在“文件”面板中查看本地或远程站点的文件。与 Dreamweaver 中的任何其他面板一样，您可以通过“窗口”菜单查看或隐藏“文件”面板。

保存远程连接后，“站点设置…”对话框会再次出现。再次单击“保存”。然后，在“管理站点”对话框中单击“完成”按钮。您的站点现在已经定义好了！

“文件”工具栏中的第二个下拉菜单在四个视图之间切换，其中两个与大多数设计师相关，另外两个对大多数设计师来说是神秘的。前两个选项在本地或远程站点的文件之间切换。“测试服务器”选项用于后端编程脚本，用于管理数据，“存储库视图”选项用于存储代码片段。

当您单击“连接到远程服务器”按钮时，您可以使用“文件”面板查看远程站点中的文件。您可以通过单击“文件”面板工具栏最右侧的“展开/折叠”图标来分割“文件”面板：

您可以将文件从本地拖动到“文件”面板的远程侧，或使用“获取文件”（向下箭头）或“放置文件”（向上箭头）符号分别下载或上传您的文件。

在前面的屏幕截图中，按下了“连接到远程服务器”按钮，并悬停在“折叠/展开”按钮上；这使我们可以在展开时在本地和远程视图之间切换，或者在折叠时只查看本地或远程视图。

“文件”面板顶部的工具栏中有两个下拉菜单。使用第一个下拉菜单选择 Dreamweaver 站点。如果只有一个站点，那么默认情况下将选择该站点。

创建 HTML5 页面

有了一个定义好的站点，你就可以在 Dreamweaver 中创建 HTML5 页面。HTML5 是 HTML 的当前标准，也是最广泛支持的 HTML 版本，包括旧版浏览器。HTML5 中有一些旧版浏览器不支持的新功能，但是使用旧版浏览器查看现代网站的访问者会产生最少的错误消息。因此，HTML5 是 Dreamweaver CS6 中网页的默认文档类型。

按照以下步骤在 Dreamweaver CS6 中创建一个新的 HTML5 页面：

1. 从 Dreamweaver 的主菜单中选择“文件”|“新”。将出现“新建文档”对话框。

2. 从左侧列中选择“空白页面”。在“页面类型”列中，选择“HTML”。在“布局”列中，选择“”。将“HTML 5”保留为“文档类型”下拉菜单中的设置。单击“创建”按钮生成一个新页面。

Dreamweaver CS6 附带了预设计的 HTML5 页面布局，一个用于两列页面，一个用于三列页面。这些都是有用的，并且有很好的文档记录，但是在这个对 Dreamweaver CS6 的简要介绍中，我们将不得不匆匆忙忙地跳过它们，直接开始从头开始构建 HTML5 页面。

1. 新页面在 Dreamweaver 的“设计”窗口中打开。我们不会探索“设计”窗口中的每个选项，但会确定关键选项：

• 文档工具栏左上角的“代码”、“分割”和“设计”按钮在代码编辑器、屏幕分割的代码编辑器和所见即所得页面之间切换，或者只是所见即所得视图。大多数人会发现“分割”视图最有效，因为它可以快速访问所见即所得设计工具，还可以访问代码。

• 当实时视图切换打开时，显示页面更像在浏览器中的样子（例如，有助于查看链接在浏览器中的外观）。但您不能在实时视图打开时进行编辑。

• 在浏览器中预览/调试按钮提供了在任何已安装的浏览器中快速预览您的页面的功能。

• 文件管理按钮允许您直接从设计视图上传打开的页面，而无需使用文件面板。

• WC3 验证按钮访问工具来测试您的代码。

• 刷新按钮更新设计视图以匹配新代码。

• 标题字段定义了出现在浏览器标题栏中的页面标题。

上述截图说明了文档工具栏中的一些关键工具。

1. 选择文件 | 保存来保存您的文件。使用小写字母和数字，不要使用空格或特殊字符（除了 _ 或-），以确保您的文件和链接不会损坏，并且可以在浏览器中打开。

• 第一次保存文件时，另存为对话框会打开。

• 使用另存为对话框中的站点根目录按钮快速导航到 Dreamweaver 站点的根文件夹。对于较小的站点，您可以直接将所有文件保存在此文件夹中。对于更复杂的站点，您可以在此文件夹中创建子文件夹。

• 为任何文件夹定义主页的最广泛支持的方法是将其命名为index.html。

• 使用.htm或.html作为文件扩展名，但避免同时使用两者，以防止由于具有相同名称和不同扩展名的两个文件而导致混乱。

• 当您在另存为字段中输入有效的文件名后，点击保存。

上述截图说明了将 HTML5 页面保存为具有index.html文件名的网站主页。

创建文本内容

Dreamweaver 文档窗口中一个有价值且提高生产力的功能是设计视图（或分割视图的设计侧）作为一个功能性的文字处理器。您可以在这里使用标准的编辑工具来撰写文本。

也就是说，更有可能你会从网页或文字处理文档中复制文本内容。

根据文本的来源，Dreamweaver 提供了一组选项，用于将文本粘贴到文档窗口中。这些选项可以通过选择编辑 | 特殊粘贴来访问。使用试错法找到最适合将复制的文本粘贴到文档窗口中的选项（从最简约的仅文本到保留更多格式的选项）。

将复制的文本粘贴到 Dreamweaver 页面中

应用标题

应该使用 HTML 文本元素（标签）—标题、段落和列表—来表示内容的优先级。CSS 样式（我们很快会介绍）用于定义这些元素的外观。

一般来说，h1元素应用于页面上最重要的标题，h2应用于次要标题，依此类推。

通过单击段落中的任意位置，并从属性检查器的格式下拉菜单中选择标题元素来应用标题元素（如果不可见，选择窗口 | 属性）。

上述截图说明了将h3标签应用于选定的文本行。

添加段落、列表和链接

默认情况下，您在文档窗口中输入的内容会添加段落标签以应用段落格式（包括段落之间的间距）。您可以从属性检查器中的格式下拉菜单中应用段落标签到选定的段落。

通过单击属性检查器中的这两个图标之一，将有序（编号）或无序（项目符号）列表应用于选定的文本。

在上面的屏幕截图中，在文档窗口中应用了无序列表和列表标签。

通过在属性检查器的链接字段中输入 URL（包括http://www部分），可以为所选文本分配链接。从目标下拉菜单中选择**_blank**，以在新的浏览器窗口（或标签，取决于用户的配置）中打开链接。在标题字段中输入悬停在链接上时将显示的标题文本。

在上面的屏幕截图中，定义了一个将在新浏览器窗口中打开的链接；同时，应用了链接标题。

您还可以使用位于链接字段右侧的浏览文件图标，浏览并链接到 Dreamweaver 站点中的文件。

插入图像

如果您已经将图像保存并准备好用于 Web，您可以通过单击文档窗口来定义插入点，并选择插入 | 图像来嵌入它们。选择图像源对话框会出现。导航到并选择您的图像文件，然后单击打开以插入图像。这样做时，图像标签可访问性属性对话框会出现。在替代文本字段中输入文本，这些文本将对禁用图像或视力受损的用户可访问。长描述字段可用于链接到描述图像的 HTML 页面，当您的网站的主要受众是无法查看图像的用户时。

在上面的屏幕截图中，为图像定义了替代文本。

您还可以从任何来源复制和粘贴艺术品到 Dreamweaver 文档窗口中。粘贴复制的图像会启动图像优化对话框。预设下拉菜单提供了清晰解释的选项，用于将图像转换为可用的网页友好图像格式之一。选择一个并单击确定以插入并启动保存网页图像对话框。

上面的屏幕截图说明了如何为粘贴的图像选择文件格式。

在保存网页图像对话框中，在另存为字段中输入文件名（除了-或 _)，不要有空格或特殊字符。单击保存以保存图像，如下图所示：

链接到样式表

快速浏览了创建带有文本、图像、标题、列表和链接的 HTML5 网页所需的基本技术之后，让我们转向更加简洁的定义和将该页面链接到外部 CSS 样式表的调查。

外部层叠样式表（CSS）文件已经成为格式化网页内容的标准方式已经有一段时间了，取代了以前的网页设计演变过程中的步骤，比如使用数据表格进行页面设计，或者使用 HTML 属性（例如，color=red）进行格式化。

当我们使用与不同类型内容相关联的新 HTML5 元素（如文章、标题、页脚和侧边栏）来构建页面内容时，我们将在下一章中返回到将样式和 HTML 结合起来设计页面。在这里，我们将简单地建立创建和链接样式表的基本技术。

创建和链接到外部样式表

一个基本的网站，甚至是一个大型网站，通常可以使用一个外部样式表链接到数百甚至数千个页面。将样式组织在外部样式表中允许全局更新——当样式表中的页面背景发生变化时，整个网站的背景也会发生变化。

要创建样式表，请按照以下步骤进行：

1. 从 Dreamweaver 的主菜单中选择文件 | 新建。新建文档对话框会出现。

2. 在左列中，选择空白。

3. 在页面类型列中，选择CSS。

4. 单击创建。一个新的 CSS 文件将打开，其中包含一个@charset声明，用于支持最广泛的字符集，以及一个指示这是 CSS 文件的注释。

5. 通过选择文件 | 保存来保存文件。您的样式表文件可以有一个简单的名称，比如style.css（一如既往，避免使用空格、大写字母或特殊字符）。在另存为对话框的另存为字段中输入文件名，并单击保存来保存文件，如下面的截图所示：

将样式表链接到 HTML 文件

要将 CSS 文件链接到 HTML 页面，首先确保 HTML 页面在文档窗口中打开。

请注意，在保存文件后，您可以在文档工具栏上方的选项卡栏中在 CSS 文件和打开的 HTML 文件之间切换（您可以使用这些选项卡在打开的文件之间切换）：

按照以下步骤将 CSS 文件链接到打开的 HTML 页面：

1. 打开 HTML 文件，查看CSS 样式面板（窗口 | CSS 样式）。

2. 单击CSS 样式面板底部的附加样式表图标。附加外部样式表对话框将打开。

3. 使用浏览按钮导航到并选择您的 CSS 文件，然后单击附加外部样式表对话框中的确定来将 CSS 文件链接到您打开的 HTML 页面。

4. 链接的 CSS 文件现在显示在CSS 样式面板中（确保在CSS 样式面板顶部选择所有标签，而不是当前标签）。

定义 Body 标签的样式

任何网页中最具定义性的元素就是<body>标签，因为它控制着所有可见的页面内容。随着样式表的增长，更具体的标签将覆盖body标签的样式，但是您应用于body标签的样式设置了页面的默认外观。因此，让我们以 Dreamweaver 中如何定义样式为例。

要定义带有字体、字体颜色和页面背景颜色的body样式，请按照以下步骤操作：

1. 在CSS 样式面板中，单击面板底部的新建 CSS 规则图标；新建 CSS 规则对话框将打开。

2. 从选择器类型下拉菜单中选择标签。

3. 从选择器名称下拉菜单中选择body。

4. 在规则定义下拉菜单中，选择您链接的样式表。

5. 单击确定打开规则定义对话框。

6. 在类型类别中，从字体系列下拉菜单中选择一个字体系列。

7. 从类型类别的其他下拉菜单和样本中选择其他字体参数和值。

上面的截图说明了为 body 元素定义字体系列。

1. 在CSS 规则定义…对话框的背景类别中，选择一个背景颜色。

2. 单击应用预览您的设置。

3. 单击确定应用您的设置。

一旦定义，样式可以在CSS 样式面板的底部进行调整。在下面的截图中显示了这一点，在CSS 样式面板中编辑了font-family属性：

定义包装器 ID 样式

在“包装”我们在 Dreamweaver CS6 中对基本页面构建技术进行压缩探索/回顾之前，让我们将“包装器”div标签应用于限制页面宽度并创建与页面本身不同的单独页面背景。

虽然我们在下一章中创建的 HTML5 样式将让我们有机会深入探讨 CSS 的页面设计，但是 HTML5 并不带有“包装器”元素，我们必须自己创建。

我们应用的技术是将所有页面内容包含在一个称为Div标签的特殊标记中。Div 标签将内容分成不同的部分，如果没有与它们关联的样式，它们就无法发挥作用。

Dreamweaver 彻底简化了在页面中包裹包装器div标签的过程。要做到这一点，只需按照以下步骤：

1. 打开 HTML 文件，并将光标放在分割视图的设计侧上，选择编辑 | 全选以选择所有页面内容。

2. 选择所有页面内容，然后选择Insert | Layout Object | Div tag。Insert Div Tag对话框将打开。

3. 将Insert下拉菜单保留为Wrap Around the Selection。

4. 在ID字段中输入wrapper，然后单击New CSS Rule按钮。New CSS Rule对话框将打开；以下屏幕截图说明了如何使用Insert Div Tag对话框来创建ID样式：

5. 在New CSS Rule对话框中，只需单击OK。**CSS Rule Definition…**对话框将打开。

6. 在Box类别中，在Width字段中输入950以将页面宽度限制为标准的 960 像素大小（我们将使用填充来填补缺失的十个像素）。

7. 在对话框的Padding部分，输入值5（px）。

8. 在对话框的Margin部分，取消Same for All复选框的选中，并在Left和Right边距中输入Auto以使 wrapper 居中。

在前面的屏幕截图中，正在为名为wrapper的 ID 样式定义宽度、填充和边距。

1. 在Background类别中，为 wrapper 定义一个与body标签的背景颜色不同的独特背景颜色。

2. 单击OK以应用 wrapper。

总结

在本书的第一章中，我们完成了对在 Dreamweaver CS6 中工作的基本和基础技术的压缩调查。这些包括定义和在 Dreamweaver Site 中工作，构建 HTML5 页面，并链接 CSS 样式表文件。

我们还介绍了定义 ID div标签样式和在容器div标签中布局页面内容的过程。这是现代网页设计的基本构建块。

在下一章中，我们将学习在 Dreamweaver 中构建网页，依赖于 HTML5 容器标签，这些标签使页面内容结构更加合理和易于设计，并优化页面内容以便搜索引擎索引。

第二章：使用 HTML5 进行页面结构

在本书的第一章中，我们看到了在 Dreamweaver CS6 中工作的基本和基础技术的简要概述：在定义的 Dreamweaver 站点中工作，构建 HTML5 页面，链接 CSS 样式表文件，并在<div>容器标签中限制页面内容。

在本章中，我们将学习如何在 Dreamweaver 中使用 HTML5 容器标签构建网页。通过学习这些，我们将完成以下四件事：

• 仅依赖于 HTML5 布局构建页面布局将磨练我们使用这些新工具进行页面设计的技能，并在 Dreamweaver 中引入 HTML5 代码提示

• 依赖于标准化和定义的 HTML5 布局元素（而不是自定义的、不规则实现的div标签）简化了页面设计

• 实际上，有重要的现实场景，仅依赖于 HTML5 布局元素构建页面是设计页面的最佳方式（例如，在为 iPhone 或 iPad 设计页面时）

• 在 HTML5 布局元素中组织页面内容除了设计考虑之外还有功能上的优势。在构建 HTML5 页面时，我们将研究这些优势。

在使用 HTML5 布局元素构建页面的过程中，我们将探讨依赖于 HTML5 的四个优势。

在构建任何专业质量网站的基础技术中，重温或至少强化以下两个基础技术是很重要的：

1. 在没有首先定义 Dreamweaver 站点之前不要做任何事情。如果您当前没有在定义的站点中工作，请查看第一章，在 Dreamweaver CS6 中创建站点和页面。

2. 其次，虽然不是很重要但仍然很基础：我们总是使用外部样式表。这允许我们定义的样式在整个网站上全局应用，并且使得更新网站成为可能。当我们开始在 CSS 样式面板中协调样式并使用 HTML5 元素构建页面时，我会提醒您，并在必要时引导您完成确保所有样式保存到外部样式表的步骤。

有了这个预览和警示提醒，让我们开始使用 HTML5 布局元素创建页面。

使用 HTML5 构建页面

HTML5 引入了一种新的方法，并开辟了组织页面内容的新和直观的技术。在 HTML 出现之前，我们有标签来分配标题级别（H1… H6），段落标签，列表标签和其他主要定义内容如何显示的元素。

当我们将内容组织到容器或框中时，我们只能依靠自己。因此开发人员创建了自己的 ID 和类样式集 - 一次在 HTML 文件中使用一次的 ID 样式（比如包装器样式），以及在页面上多次使用的类样式（比如定义图片/标题框的样式）。

HTML5 标准化了用于组织页面内容的元素。关键的 HTML5 结构元素如下：

• <header>

• <nav>

• <article>

• <section>

• <aside>

• <footer>

这些元素的名称基本上是不言自明的。<header>元素定义页面顶部的页眉内容，<footer>元素定义页脚内容。<nav>元素定义导航内容。<article>标签定义页面内不同的文章或连贯的内容块，更大或更长的文章可以被细分为部分。<aside>元素定义应嵌入<article>或<section>元素中的侧边栏内容。

还有其他 HTML5 元素可以定义日期、时间和地址等内容。

使用 HTML5 元素构建页面的结构被称为语义标记，因为这些标记元素实际上描述了标签内的内容类型。使用 HTML5 语义标记可以实现两件事：

• 对于开发人员，HTML5 元素消除了创建一整套单独定义的<div>标签样式的需要。

• 对于用户来说，HTML5 元素的优势基本上归结为搜索引擎优化。通过清晰地界定内容是什么（标题、日期、导航栏、文章等），HTML5 元素帮助搜索引擎识别您的内容并使其可访问。

HTML5 结构元素

让我们继续探索在 Dreamweaver CS6 中使用 HTML5 构建页面的过程。现在，我们将逐步介绍构建相当复杂的 HTML5 页面所涉及的步骤。

第一步是警告浏览器我们正在呈现 HTML5 内容，为此，我们需要在我们的 HTML5 代码顶部指示这是一个 HTML5 页面。至于那些回应“嗯，那是什么？”的浏览器——我将在本章末尾解释如何解决这个挑战。但首先，使用以下步骤从头开始创建一个新的 HTML5 页面：

1. 定义了 Dreamweaver 站点后，选择文件 | 新建。在新建文档对话框中，从对话框左侧的类别列表中选择空白页面。在页面类型列中选择HTML。在布局列中选择****。

2. 布局 CSS弹出窗口设置为创建新文件。记住，我们将把样式保存到外部样式表中。如果您已经有一个用于 HTML 布局的 CSS 文件，您可以选择链接到现有文件，然后选择您现有的与 HTML5 相关的 CSS 文件作为页面的样式文件。

3. 从文档类型弹出窗口中选择HTML 5，如果尚未选择，如下图所示：

上面的屏幕截图显示了在新建文档对话框中生成新的 HTML5 页面。

1. 单击创建生成空白页面。

在文档窗口的设计视图中出现了一个空白页面。在分割视图中，我们可以看到生成了以下基本代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

分解 HTML5 页面代码

让我们快速浏览一下这个基本代码，以便了解情况。

<!DOCTYPE HTML>和<html>标签在某种程度上是 HTML 先前版本的遗留物，并不是 HTML5 浏览器实际上需要的。这段代码在考虑非 HTML5 浏览器时可能会有用，我们很快就会进行检查。顺便说一句，HTML5 的<!DOCTYPE>声明不区分大小写。

还有关于 HTML5 的<!DOCTYPE>声明的另一个有趣之处。通过告诉浏览器我们正在以 HTML5 结构化我们的内容，我们也在告诉旧版浏览器在执行规则时要更宽松一些，比如不需要在每个段落元素结尾加上</p>。因此，我们避免了令人讨厌和不必要的浏览器错误消息。

回到我们生成的代码：

<head>和</head>标签标记了不在页面上显示的头部内容，但作为浏览器的指令。

在这种情况下，<head>元素内的内容标识出当前最广泛适用的字符集UTF-8。这个字符集允许显示来自多种语言的字符。

我们为页面创建的所有内容都将放在<body>和</body>标签内。因此，我们在为页面创建 CSS 样式时的第一步将是为</body>标签定义一些基本属性。

最后，将此页面保存为 HTML 文件。选择文件 | 保存。在另存为对话框中，确保位置弹出窗口中选择的文件夹是您的 Dreamweaver 站点文件夹（或该文件夹内的子文件夹）。给文件命名，例如html5_test，然后单击保存。

上面的屏幕截图显示了如何保存 HTML5 页面。

趁热打铁，在文档工具栏的标题框中输入一个描述性标题。定期重新保存。

前面的屏幕截图显示了如何定义页面标题。

使用 HTML5 结构元素

通过使用基本的网页编码设置了我们的 HTML5 文档后，现在可以创建和格式化 HTML5 布局元素，以确定页面的外观。

基本的 HTML5 页面布局如下屏幕截图所示。它展示了页面的某种层次结构。所有内容都受到传统包装器div标签的限制（大小）。在其中，页面有一个页眉，一个页脚和article元素。section元素存在于article元素中。

还要注意，nav元素（包含导航内容）可以放在另一个元素内（如页眉或页脚）或在任何 HTML5 语义布局元素外。并且，aside元素可以放在article或section元素内。

前面的屏幕截图显示了一个 HTML5 页面布局。

使用代码提示

我不会掩饰，Dreamweaver CS6 基本上放弃了对 HTML5 页面结构的所见即所得支持。在这个阶段，我们大多数人都使用 Dreamweaver 的分割视图，而 Dreamweaver 的代码视图（在分割视图中占据半个屏幕）具有有用的代码提示，可以帮助创建 HTML5 页面结构。当您在代码视图中开始输入 HTML5 元素时，从<开始，Dreamweaver 会提示您一组以您输入的字母开头的标签。例如，输入<he会产生代码提示，您可以从中选择**<>header**并按下Enter键（Windows）或Return键（Mac）来放置代码。

Dreamweaver 为 HTML5 语义布局元素提供代码提示，如下面的屏幕截图所示：

要关闭（定义结束）HTML5 布局元素，只需键入</。这样做时，Dreamweaver 会自动输入打开元素的关闭代码。

当我们在本章的其余部分中讨论定义不同的 HTML5 布局元素所涉及的编码时，您可以在分割视图中输入必要的代码，利用代码提示，并在分割视图的设计视图中查看结果。

添加页眉，导航和标题组

<header>元素用于组织放在页面顶部的所有内容。在<header>元素中，您可能会包括<nav>内容，如下一个屏幕截图所示。

而且，您可能会包括标准（传统）的 HTML 标签，如标题和链接。

因此，<nav>内容——页面顶部的链接——在放置在页面顶部时包含在<header>元素中。放在侧边栏中的导航元素也被包含在<nav>元素中，但由于在这种情况下它们不是页眉的一部分，它们没有包含在<header>元素中。

在<header>元素中，与标签（<h1>，<h2>等）或类<div>标签相关的 CSS 样式可以用来提供额外的格式规则，以确定内容的显示方式。

为了更容易对页眉中的内容进行分类，HTML5 包括<hgroup>元素。<hgroup>内容的正式要求是，它应该至少包括一个标题标签（<h1>，<h2>，<h3>，<h4>，<h5>或<h6>）。

这个概念是，标题内容，如副标题，替代标题或标语，都应该在页眉中进行分组以便轻松访问。例如，在下一个屏幕截图中，两行标题已经包裹在<hgroup>元素中。但是导航内容，虽然是页眉的一部分，但没有包含在<hgroup>元素中。

在下面的代码中，一个<h1>标题和一个<h2>标题，以及一个带有自己的<h5>标题（和三个占位符链接）的<nav>元素，都是<header>元素的一部分：

<header>
<hgroup>
<h1>Page header</h1>
<h2>Header 2 </h2>
</hgroup>
<nav><h5>Navigate: <a href="#">link 1</a> | <a href="#">link 2</a> | <a href="#">link 3</a></h5>
</nav>
</header>

以下截图展示了这在 Dreamweaver 的分割视图中的样子（在分割视图的设计视图一侧打开实时视图）。

创建文章和章节

如果您像我一样以写作为生，您会学会将内容组织成块和子块，概念和子概念，想法和更详细的想法等等。以这种方式组织内容的基本规则是，如果您创建一个子部分，您必须创建两个子部分。否则，创建一个子部分就没有意义。

与我们在 HTML5 布局中不断重复的统一主题一致，在 HTML5 页面中，需要将内容分解时，将其分解为所谓的文章。而在文章内需要明确的子部分时，这些子部分就是章节。

当您创建一个 CSS 文件来匹配您的 HTML 布局元素时，您可能会为文章和章节指定特定的格式。例如，您可能选择缩进章节内容或在其后放置一个独特的背景。

前面示例中<article>和<section>元素的代码，包括占位文本和标题如下：

<article>
<h3>First article</h3>
<p>First article content ....</p>
<p>more content....</p>
<section>
<h3>1st section heading</h3>
<p>1st section content</p>
</section>
<section>
<h3>2nd section heading</h3>
<p>2nd section content</p></section>
</article>

或者，您可能选择不对文章和章节应用特定的 CSS 规则，而只是将内容包装在<article>和<section>元素中，以便组织内容，同时依赖于<body>标签、<p>（段落）标签或您在 Dreamweaver 中定义的自定义类样式来格式化文章和章节内容。

添加侧边栏内容

侧边栏保留用于依赖于文章或文章部分中存在的内容的侧边栏内容。例如，<aside>元素并不打算作为导航内容的容器（导航内容应该由前面讨论过的<nav>元素标识并包装）。

鉴于侧边栏内容通常被格式化为侧边栏，与<aside>元素的使用通常相关联的是一种特定的样式：Float。CSS 的Float属性将容器移动到左侧（float:left）或右侧（float:right），并使其他内容围绕容器流动。当我们在本章末尾为我们的 HTML5 语义布局元素定义 CSS 样式时，我们一定会确保浮动我们的<aside>元素样式。

创建页脚

HTML5 页面布局的最后一部分通常是<footer>元素。与所有 HTML5 布局元素一样，<footer>元素有内容分配。页脚通常包括站点内容作者信息、法律声明（如版权信息）等。

HTML5 布局模板

以下代码包含了到目前为止讨论的所有 HTML5 语义布局元素。请随意复制并粘贴到 Dreamweaver 的分割视图的代码一侧，并用它来实验和熟悉 HTML5 页面结构。

这段代码将为我们的旅程提供一个很好的基础，以便对 HTML5 元素进行 CSS 样式的实验：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 test</title>
<link href="html5_layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>Page header</h1>
<h2>Header 2 </h2>
</hgroup>
<nav>
<h5>Navigate: <a href="#">link 1</a> | <a href="#">link 2</a> | <a href="#">link 3</a></h5>
</nav>
</header>
<article>
<h3>First article</h3>
<p>First article content ....</p>
<p>more content....</p>
<section>
<h3>1st section heading</h3>
<aside>
<p>Sidebar content</p>
<figure>
<p><img src="img/Wikipedia-logo.png" height="150" width="150"></p>
<figcaption>Caption </figcaption>
</figure>
</aside>
<p>1st section content</p>
</section>
<section>
<h3>2nd section heading</h3>
<p>2nd section content</p>
</section>
<h3>Second article</h3>
<p>Second article content ....</p>
<p>more content....</p>
<section>
<h3>1st section heading</h3>
<p>1st section content</p>
</section>
<section>
<h3>2nd section heading</h3>
<p>2nd section content</p>
</section>
</article>
<footer>
<h5>Footer content </h5>
<address>Contact us at <a href="http://www.website.us" target="_blank">www.website.us</a>
</address>
</footer>
</div>
</body>
</html>

这个代码示例包括一个我们尚未探讨的元数据元素——<figure>元素。我觉得我应该把它放到代码中以保持事情的有序和简单，但现在让我们继续探索这个和其他 HTML5 元数据元素。

添加元数据

到目前为止，我们已经探讨的 HTML5 布局元素具有——正如我们所看到的——双重功能：它们作为可样式化的元素，可以控制内容的显示方式，并且它们为可访问性组织内容。这些 HTML5 元素可以被视为元数据。

HTML5 布局元素的样式和内容维度都在不断发展，但它们已经成为设计页面和传递内容的工具。我们之前探讨的例子，即在 iPhone 上轻松选择文章或文章部分进行复制，让人可以略知一二，这很可能在不久的将来会发展。

除了迄今为止探讨的关键布局元素之外，还值得简要注意一些 HTML5 元素，它们的主要作用是索引内容（尽管它们也可以用于应用样式）。

定义地址

访问网站的访客通常最先寻找的是联系信息，例如 URL（如果页面不是站点的主页）、电子邮件地址，或者如果他或她正在寻找最热门的地下俱乐部或最近的高评价的烤肉串摊，物理地址。

<address>元素可以放置在任何其他 HTML5 语义布局元素中，例如<article>元素，如果它提供了文章的作者（或主题）的联系信息。或者，如果它提供整个页面的联系信息，则可以将<address>元素与（放置在）<footer>元素相关联。

数字和标题

<figure>和<figcaption>元素直观地标识了一个图和一个相关的标题。再次，将这些元素分配给内容有助于内容聚合器和索引程序（如搜索引擎）解释您的页面内容并使其更易访问。您还可以使用这些元素来设置图形和/或标题的样式。

例如，<figure>元素可以包裹图像和标题（<figcaption>）。

指示日期和时间

说到使用 HTML5 元素传达内容，有不同的 HTML5 元素与不同类型的时间和日期信息相关联。

<time>元素用于标记即将到来的事件的时间和日期。它并不打算定义对日期和时间的每个引用。例如，在写历史文章时，您不会使用<time>元素来引用不同历史事件的日期。

<time>元素可用于设置特定时间，如下 HTML5 代码所示：

The show starts at <time>12:00</time>.

或者，日期和时间信息可以在文本中使用datetime参数进行编码，如下行代码所示：

<time datetime="2012-01-01">all night jam session!</time>

时间和日期的格式是：YYYY-MM-DDThh:mm:ssTZD，其中TZD是时区。

您不太可能使用<time>元素作为样式工具。相反，最好用于标记日期和时间。

为 HTML5 页面结构创建 CSS 文件

与我们的 HTML5 文件一起，设计师创建并使用 CSS 文件来组织和管理页面中的所有样式。因此，让我们现在创建该 CSS 文件，并在此过程中添加一行，使我们的 HTML5 页面与所有当前浏览器和大多数旧浏览器兼容。

要做到这一点，请执行以下步骤：

1. 导航到文件 | 新建，在新建文档对话框中，选择左侧的空白页类别，以及CSS从页面类型类别。单击创建以生成并打开新的 CSS 文件。

前面的屏幕截图显示了生成新的 CSS 文件。

1. 文件以代码视图打开。我们将在CSS 样式面板中对其进行编辑，因此——除了作为学习经验——我们不需要再查看此页面。但是我们需要保存它。导航到文件 | 保存，并给文件命名为html5_layout.css之类的名称。确保在在哪里弹出窗口中选择了站点文件夹，并单击保存，如下图所示：

前面的屏幕截图显示了保存 CSS 文件。

1. 在文档窗口顶部的选项卡栏中，切换回您创建的 HTML 文件。

2. 查看CSS 样式面板（如果不可见，请导航到窗口 | CSS 样式），并单击如下屏幕截图中所示的附加样式表图标：

3. 附加外部样式表对话框出现。使用浏览按钮导航到刚刚创建的 CSS 文件，并单击确定以附加样式表。CSS 文件出现在CSS 文件面板中（在CSS 样式面板中使用全部选项卡作为标准，除非您正在对特定样式进行一些侦查工作，这可能需要当前选项卡）。您还将在代码视图中看到对 CSS 文件的链接。

分配块属性

接下来，我们将添加一个单个属性，使大多数浏览器能够解释 HTML5 元素，即使它们不符合 HTML5 标准。在这里，我们将重新访问我们在上一章中注意到的技术，即 Dreamweaver CS6 的 HTML5 布局使用display:block CSS 属性来防止 HTML5 布局在非 HTML5 浏览器中折叠。

要做到这一点，请执行以下步骤：

1. 单击CSS 样式面板底部的新 CSS 规则图标—它就在前面的图标所示的附加样式表图标的右侧。新 CSS 规则对话框出现。

2. 在新 CSS 规则对话框中，从第一个弹出菜单中选择复合。我们正在创建一个将应用于多个 HTML5 布局元素的规则。这些是我们希望在非 HTML5 浏览器中查看时防止折叠的 HTML5 标签。

3. 在选择或输入选择器名称字段中，输入header。实际上，我们希望将我们正在处理的规则应用于其他 HTML5 元素，但我们很快会添加这些。在对话框的规则定义部分，确保选择了您附加的 CSS 文件（默认情况下会选择）。单击确定。

4. 在标题的 CSS 规则定义对话框中，选择块类别，从显示弹出菜单中选择块，如下图所示，然后单击确定：

前面的屏幕截图显示了定义块显示的过程。

1. 当您展开链接到页面的 CSS 样式文件时，header样式将出现在CSS 样式面板中。您可以看到CSS 样式面板中与header样式相关联的display属性具有block属性。

2. 我们希望扩展分配给此display:block属性的 HTML5 元素列表。这样做的长而慢的方法是为每个额外的元素重复我们迄今为止已经遍历的步骤。要以快速简便的方式做到这一点，请在CSS 样式面板的上半部分的标题行中单击一次，并编辑元素列表以包括<address>、<article>、<footer>、<nav>和<section>元素。在输入它们时，使用逗号（“,”）分隔额外的元素。这些是我们希望在非 HTML5 浏览器中查看时防止折叠的 HTML5 标签。CSS 样式面板现在应该看起来像以下的屏幕截图：

前面的屏幕截图显示了将块显示分配给多个 HTML5 语义布局标记的过程。

通过上述步骤，我们告诉大多数非 HTML5 浏览器将我们基本的 HTML5 构建块元素保持在它们自己的独立水平行中，这样它们就不会被挤在一起。

定义样式

我不会在这里无聊地重复在 Dreamweaver CS6 中定义链接样式表中的基本技术。我们在第一章中以一种压缩的方式进行了回顾，使用 Dreamweaver CS6 创建站点和页面，并且在之前的步骤中在我们的链接 CSS 文件中定义了一个（复合）样式。

简而言之，通过单击CSS Styles面板底部的New CSS Rule图标，可以向链接的样式表中添加新的 CSS 样式定义。我们将创建的所有样式都是标签类型样式，因为它们适用于 HTML5 语义元素（标签）。

您可以使用CSS Styles面板以这种方式定义以下样式。或者，您可以在刚刚创建的复合样式之后，将以下代码输入（或复制）到您的 CSS 样式表中：

@charset "UTF-8";
/* CSS Document */
header , address, article, footer, nav, section{
  display: block;
}
header {

color: #FFF;
  background-color: #CCC;
}
footer {
  color: #000;
  background-color: #FFF;
}
article {
  color: #000;
}
aside {
  float: right;
  width: 200px;
  border: thin solid #FFF;
  background-color: #999;
  padding: 10px;
  margin: 10px;
}
figure {
  background-color: #CCC;
  margin: 10px;
  padding: 10px;
  float: right;
  width: 160px;
  height: 180px;
}
section {
  padding: 0px;
}

注意

关于我们创建的 CSS 的一些说明：我们使用非常简约的背景和文本颜色（灰色调加上白色和黑色），既是为了表达极简主义的审美观点，也是为了保持我们的项目简单。

<aside>元素上的float属性将侧边栏框与页面的右侧对齐，使内容围绕在其右侧。额外的填充和边距同时强制实现了侧边内容与框的边框之间以及框本身与围绕它的内容之间的间距。

同样，分配给<figure>元素的float和margin属性将使包含图像和标题的框与页面的右侧对齐。

将文章部分的margin设置为零可以防止内容进一步缩进，超出从<article>和<section>元素分配的边距继承的缩进。

解决 HTML5 兼容性挑战

在撰写本书时，HTML5 仍在不断发展。这意味着什么？从历史的角度来看，这意味着 HTML5 的标准仍在系统化，尽管已经达到了一个临界质量，大多数 HTML5 术语的含义和影响已经得到了广泛认可，浏览器要么支持 HTML5，要么正在朝着这个方向发展。

对于开发人员来说，这意味着当我们探索使用 HTML5 的节省时间和减轻压力的功能来构建网页时，我们必须意识到并补偿一些浏览器不支持 HTML5 的一些方面。

主要是支持顽固的 Internet Explorer 社区，特别是被微软抛弃的较旧版本的 IE 用户，微软并未为大多数用户提供升级选项。

为了不让这些用户无法访问 HTML5 页面，开发人员采用了 HTML5 Shiv 脚本，并将其链接到设计师的链接。这个 JavaScript 允许 IE8 识别 HTML5 的语义结构标签。

要将 HTML5 Shiv JavaScript 添加到页面中，请在页面的<head>元素中插入以下代码：

<!--[if lt IE 9]><script src="img/html5.js"></script><![endif]-->

总结

在本章中，我们探讨了在 Dreamweaver 中使用 HTML5 语义布局元素来构建页面。我们看到这些元素既可以作为设计容器，也可以作为内容标识符。我们还看到，对于一些环境来说，整个页面可以仅使用一些基本的 HTML 标签加上 HTML 布局元素来构建。

在下一章中，我们将探讨 Dreamweaver CS6 强大的工具，用于生成经过验证的表单。

第三章：使用表单收集数据

在现代网络中由 Facebook 主导的世界中，数据收集变得高度不透明。当您在社交媒体上分享有关一个垂危朋友的亲密想法时，那些敏感的个人数据就变成了一个商品，被售给了花店和书店的营销人员，当您在社交媒体环境中赞一个乐队时，您（往往是不知情的）注册了在该乐队在您所在城市或镇附近演出时获取门票优惠的服务，等等。

我对在线“注册”技术的不透明度进行了严厉批评，以表明一个观点。作为建立自己网站的人，您可以选择使数据收集变得自愿、有意识和透明。有意识地为您的电子通讯、公告、特别优惠等注册的人，毕竟更有可能比那些不是有意识要求的人更愿意接收您的邮件，而这些邮件是由他们在 Facebook、亚马逊等平台上的活动生成的。

那么，您如何从访客那里收集信息呢？一个词：表单。表单可以是与访客互动的重要、动态的方式。

以下是一些表单为您的网站增值的示例：

• 一个让访客在您的网站上分享他们的投诉、建议和积极经历的反馈表单（这是您用来推广您的网站、信息、产品、事业或内容的素材）。

• 一个让访客有意识地获取您的通讯、推文、特别优惠和信息爆炸的注册表单。

• 一个销售产品的订单表格。

• 一个让您网站内容易于访问的搜索框。我将在本章末尾向您展示如何设置搜索框。

Dreamweaver CS6 具有强大的工具，用于构建引人入胜、易于访问的表单。我在 Dreamweaver 中一直觉得缺少的是一种将这些表单连接到后端服务器工具的方法，这些工具处理提交的数据。虽然对这些连接的全面探讨略微超出了本书的范围，但我将在本章末尾提供一些基本解决方案和有关连接表单到后端数据管理脚本和资源的其他工具和资源的提示。

使用 JavaScript 捕获客户端表单管理

Dreamweaver 生成表单，但不管理表单数据。通常，从表单收集的数据会发送到服务器，那里一系列脚本和数据库将这些数据转换为已处理的订单、提交的投诉、电子邮件列表注册或搜索查询。在服务器上处理数据的脚本有时被称为服务器端脚本。

但是，有些表单数据是在不发送到服务器的情况下收集和管理的。相反，提交的数据是使用在用户浏览器中运行的 JavaScript 来管理的。由此类客户端脚本处理的数据永远不会发送到服务器。

最广泛使用的客户端表单是跳转菜单——用于导航的下拉菜单。Dreamweaver 允许您轻松生成跳转菜单，在探索向服务器发送数据的构建表单之前，让我们快速看一下如何在 Dreamweaver 中构建客户端跳转菜单，并编辑生成的使表单工作的 JavaScript。

创建跳转菜单

在创建跳转菜单之前，您需要准备一个您希望使用该菜单访问的 URL 列表。我会暂停一会儿，让您收集您的列表…好了？这是一本书，所以您可以简单地将这个地方加为书签（在您的 Kindle 或 iPad 上很容易做到，但如果您在读印刷书籍，只需稍微折弯一下页面即可标记这个地方）。

除了构思跳转菜单，您在生成菜单之前需要具备以下条件：

• 您需要在一个定义好的 Dreamweaver 网站中工作。如果这不是您熟悉的，可以回到第一章，使用 Dreamweaver CS6 创建网站和页面，并深入了解 Dreamweaver 网站的概念以及为什么它是您在 Dreamweaver 中进行的一切工作的基本第一步。

• 您需要在已保存的网页中工作。

在 Dreamweaver 站点和已保存的 HTML5 页面中工作，可以确保在跳转菜单中生成的任何链接都能正常工作。

准备好列表、定义站点并保存页面后，执行以下步骤在 Dreamweaver CS6 中创建跳转菜单：

1. 在页面的设计视图中，选择插入 | 表单 | 跳转菜单。插入跳转菜单对话框将打开。

2. 对话框打开时，第一个菜单项被选中。通常，跳转菜单中的第一项不是选项，而是标签，用于标识菜单，例如转到…。在这种情况下，当选中时转到 URL字段为空，如下面的屏幕截图所示：

3. 使用添加项目（+）图标将项目添加到菜单中。使用浏览…按钮在 Dreamweaver 站点中搜索并添加文件链接。或者，在当选中时，转到 URL字段中输入完整的 URL，如下面的屏幕截图所示：

4. 使用添加项目（+）图标将其他项目添加到菜单中。使用删除项目（-）图标删除所选项目，如下面的屏幕截图所示：

5. 使用将项目上移和将项目下移箭头按钮重新排列列表的顺序（是否按字母顺序排列？），如下面的屏幕截图所示：

6. 完成定义跳转菜单后，点击确定生成菜单。您可以在实时视图中测试菜单，如下面的屏幕截图所示：

编辑跳转菜单 JavaScript

Dreamweaver 提供两种编辑生成的跳转菜单内容的方式——属性检查器和行为面板。让我们快速看看每种方法的工作原理。

要激活属性检查器，如果它不可见，导航到窗口 | 属性。当单击任何元素（包括跳转菜单）时，属性检查器将成为一个上下文敏感的编辑工具。在这种情况下，最初选择下拉菜单允许您更改菜单中默认显示的选项，列表值…按钮打开列表值对话框。列表值对话框具有您从跳转菜单对话框中识别的工具，用于添加、删除和重新排序菜单选项，如下面的屏幕截图所示：

编辑跳转菜单内容的另一种技术不太容易访问，但提供了使用浏览按钮在 Dreamweaver 站点中定位并链接到文件的选项。要访问该选项，选择窗口 | 行为，并在文档窗口的设计视图中单击跳转菜单，如下面的屏幕截图所示：

在行为面板中选择跳转菜单（技术上来说，是标签检查器选项卡中的行为选项卡），在右侧列中双击跳转菜单，以重新打开跳转菜单对话框。此选项可以在跳转菜单上进行全功能编辑，基本上是复制原始的跳转菜单对话框。

快速浏览了基于 JavaScript 的表单以及如何在 Dreamweaver 中编辑它们，让我们转向更强大的表单类型——将数据发送到服务器的表单。

定义表单和表单操作

表单由表单和表单元素组成。表单元素是将所有表单元素收集起来并发送到某个地方的信封。因此，表单最重要的定义元素是表单操作。表单操作定义了表单数据发送的位置。

正如本章前面提到的，Dreamweaver 为表单设计了前端，但没有提供易于访问的选项来将表单数据链接到收集和管理该数据的后端系统。

注意

请注意，Adobe 提供了一个用于管理服务器端数据的软件包——Business Catalyst。Business Catalyst 的工具和功能对非专业的后端管理员来说并不特别易用，对于大多数自由职业者和小规模开发人员来说，这项服务的成本与其他管理表单数据的选择不具竞争力。

在本章结束时，我将提供一些捕获表单数据的基本技术，并指向其他资源。但在这里，让我们使用处理表单数据的最简单和最基本的技术：将表单数据发送到用户的电子邮件客户端的电子邮件地址。这不是一种优雅的技术，但是 a）它有效，并且可以用于更简单的表单处理挑战，比如收集反馈；b）它将作为表单处理的一种占位符，直到我们在本章结束时回到这个概念。

执行以下步骤插入一个将收集的内容发送到用户的电子邮件客户端的表单：

1. 单击打开的已保存文档的设计视图，设置表单将出现的位置。

2. 导航到插入 | 表单 | 表单。

3. 单击确定嵌入表单。表单将以红色框的形式出现在设计视图中。当您选择表单（单击红色框）时，属性检查器将显示表单属性，如下图所示：

4. 要将表单数据发送到电子邮件地址，请在Action字段中输入mailto:mail@mail.com，将实际的电子邮件地址替换为占位符电子邮件地址。

5. 在Enctype字段（编码类型的缩写）中输入text/plain。

6. 将Method选项保留为默认的POST。这是大多数表单数据的发送方式。

有了定义的表单，现在可以添加表单字段和按钮了。

使用 Spry 验证生成表单字段

验证意味着在提交到服务器（或发送到电子邮件地址）之前测试表单数据。这是一件有价值的事情。例如，如果您的表单收集电子通讯订阅的电子邮件地址，人们提交表单而没有电子邮件地址是不行的。除此之外，验证可以查看输入到电子邮件地址字段中的字符，并验证该字段中的内容至少看起来像是一个电子邮件地址。

基本上有三种验证表单数据的技术，如下：

• 服务器端脚本可以在数据发送到服务器后验证内容。

• HTML5 提供了一些验证工具，但它们甚至在一些流行浏览器的更新版本中也没有得到普遍支持。

• JavaScript 验证脚本可以在浏览器中测试数据。

最后一个选项是在 Dreamweaver 中创建的最可靠、最快速、最简单的方式。在接下来的步骤中，我们将使用 Dreamweaver 的 Spry JavaScript 和 HTML 库插入具有内置 JavaScript 验证的字段。

创建一个经过验证的文本字段

文本字段是表单的基础，收集各种文本，如姓名、电话号码、帐号、地址和电子邮件地址（稍后会详细介绍）。

注意

冒着听起来非常冗余的风险，让我再次强调在定义的 Dreamweaver 站点和保存的 HTML 文件中创建经过验证的字段的重要性。现在这一点尤为重要，因为我们正在生成将链接到我们页面的 JavaScript 文件，如果这些链接损坏，表单将无法工作。

文本字段最常见的验证类型是将其设置为必填。执行以下步骤在表单中插入一个必填文本字段：

1. 导航到插入 | 表单 | Spry 验证文本字段。将显示输入标签可访问性属性对话框。

2. ID字段生成与表单字段相关的 ID 样式。此属性用于使某些环境中的表单对残疾人更具可访问性，并且还允许您定义适用于表单字段的 ID 样式。输入一个没有空格或特殊字符的 ID 样式。

3. 标签字段生成一个标签，用于标识字段，并且易于残疾网站用户使用的软件读取。输入一个标签（标签可以包含特殊字符和空格），如下图所示。对话框中的其他字段可以保持默认设置，因此单击确定，如下图所示，生成表单：

4. 可以通过单击设计视图中的表单字段本身并在属性检查器中进行编辑来定义表单字段属性。在字符宽度字段中输入一个值，以定义字段将显示的宽度（以字符为单位）。在最大字符字段中输入一个值，以定义用户可以在字段中输入的最大字符数，如下图所示：

5. 通过单击字段上方的（水绿色）Spry TextField选项卡来定义验证规则。默认情况下，我们的名称字段是必填的。您可以通过在最大字符或最小字符字段中输入最大或最小字符数来添加验证规则。并且，默认情况下，当用户提交表单时，字段会进行验证。您还可以通过选中模糊和更改复选框来在用户离开字段时强制验证（这两个选项在不同的浏览环境中实现类似的功能）。

6. 您可以通过在预览状态下拉列表中尝试不同选项来预览字段对有效或无效输入的响应。预览下方的区域显示了用户在未填写必填字段的情况下尝试提交表单的结果，如下所示：

7. 在定义字段和验证规则后，单击设计视图中表单字段末尾放置插入点，并按Enter或Return键创建新的表单字段的新行。

创建经过验证的电子邮件字段

创建经过验证的电子邮件字段与创建文本字段类似，只是您将设置验证规则以检测（并且仅接受）看起来像电子邮件地址的输入。

要做到这一点，单击电子邮件地址表单字段的（水绿色）Spry TextField选项卡，并从属性检查器中的类型下拉菜单中选择电子邮件地址。并且，在属性检查器的右侧选择强制模式复选框，如下图所示：

从类型下拉列表中的选项可以看出，Dreamweaver 可以为不同类型的文本输入生成一整套验证脚本，从电话号码到信用卡。

添加其他字段

插入 | 表单中的子菜单包括生成其他类型的经过验证的表单字段的选项。其中最重要的是：

• 复选框: 用于是或否选择，用户可以选择或取消选择选项。

• 选择: 用于在表单中创建带有选项的下拉菜单。

• 单选按钮组: 用于创建用户只能选择一个选项的选项集。例如，允许用户选择一种（仅一种）信用卡类型。

这些额外的经过验证的表单字段在我们讨论文本字段选项时已经很明显。它们在下面的屏幕截图中有所说明（从上到下：复选框、选择菜单和单选按钮组）：

添加提交和重置按钮

没有提交按钮，用户输入的内容实际上不会去任何地方。表单中的提交按钮会启动表单操作。因此，如果我们在这里应用形式逻辑的规则，最好确保我们的表单有一个提交按钮。

通过导航到插入 | 表单 | 按钮来添加一个提交按钮。输入标签可访问性属性对话框将出现，但只需单击确定，以创建提交按钮，而不必担心此对话框中的选项。表单上将出现一个提交按钮。

重置按钮很方便，但并非必需。它们将表单“重置”为其原始（空）状态。要创建重置按钮，请插入第二个按钮。在表单中选择该按钮，然后在属性检查器中选择重置表单单选按钮，如下截图所示：

使用 HTML5 提示

正如本章前面提到的，浏览器对 HTML5 表单元素和属性的支持仍在进行中。因此，我建议不要使用对表单工作至关重要的 HTML5 表单属性，例如验证属性。

但 HTML5 占位符是一个好主意。它们在表单字段内部用文本提示用户，随着用户输入内容，文本会消失。如果用户的环境不支持 HTML5 表单占位符，他们仍然可以依靠表单标签来帮助他们弄清楚要输入到表单字段中的内容。

可以向文本输入添加占位符参数。不幸的是，Dreamweaver CS6 在设计视图中没有定义占位符文本的选项，但我们可以在代码视图中进行。要做到这一点，请执行以下步骤：

1. 从 Dreamweaver 的文档窗口中选择分割视图。

2. 在分割视图的设计侧面点击表单字段，以在分割视图的代码侧面找到代码，如下截图所示：

3. 在input标签的末尾添加placeholder="占位符文本"（用真实文本替换“占位符文本”），如下截图所示：

您可以在实时视图中预览占位文本，在分割视图的设计侧面。

为表单设计 CSS

在本书的前两章中，我们建立了一个框架，依赖外部 CSS 样式表文件为 HTML 元素（如标题、段落和链接）提供格式，并提供可以应用于div标签以设计页面的特殊 ID 和类样式。

这个原则如何适用于自定义表单输入？简短的答案是：您可以为不同的表单元素创建样式。长答案是：好吧，我们现在将逐步介绍如何做到这一点。

以下是可以应用 CSS 样式以自定义表单外观的关键 HTML 元素：

• <form>元素样式定义了整个表单的外观。

• <input>元素样式定义了输入字段（如文本字段）的外观。

• 可以为具有与其关联的 ID 的样式定义特定的 ID 样式（这是我们在本章前面讨论过的一种技术，当我向您展示如何在输入标签可访问性属性对话框中为文本字段分配 ID 时）。

为表单元素创建样式表

让我们逐步介绍在新的链接 CSS 文件中定义每个样式的过程。我们将其命名为form.css。

1. 与往常一样，从已保存的 HTML 页面开始，在定义的 Dreamweaver 站点中查看CSS 样式面板（窗口 | CSS 样式）。单击面板底部的新建 CSS 规则（+）图标，如下截图所示：

注意

请注意，如果您正在使用包含 Spry 验证小部件的表单，您的CSS 样式面板将链接到定义这些小部件元素的 CSS 文件，用于为验证错误消息的背景颜色和字体等样式。

1. 在新建 CSS 选择器规则对话框中，选择以下内容：

• 从选择器类型下拉列表中选择标签

• 从选择器名称下拉列表中选择form

• 从规则定义下拉列表中选择**(新样式表文件)**

1. 点击确定开始定义新文件和样式，如下图所示：

2. 在另存样式表文件为对话框中，点击站点根目录按钮，将文件保存在 Dreamweaver 站点的根文件夹中。在另存为字段中输入form.css。点击保存。CSS 规则定义对话框出现。

3. 您可能希望为表单样式定义背景颜色。在CSS 规则定义对话框的背景类别中执行此操作（从背景颜色样本中选择颜色）。

4. 您还可以为表单定义宽度，以限制其不要延伸到整个页面（或包含元素）的宽度。在框类别的宽度字段中输入宽度（例如 600 像素）。此外，在框类别中，尝试为表单定义 10 像素的填充和 10 像素的边距。

5. 尝试为表单定义边框。您随时可以点击CSS 规则定义对话框中的应用按钮来测试您的样式，如下图所示：

6. 在CSS 规则定义对话框中微调表单样式后，点击确定保存并应用您的样式。

7. 导航到文件 | 全部保存以保存您的网页和带有更改的 CSS 文件。

为表单元素创建样式

与为<form>元素定义样式的方式相同，您可以为<input>元素创建新样式。唯一的区别是，一旦您为表单创建了 CSS 文件（form.css），您将希望将所有与表单相关的样式保存到该 CSS 文件中。我将为您提供以下步骤：

1. 切换到文档窗口中的实时视图，以更准确地预览您即将定义的样式。

2. 点击面板底部的新建 CSS 规则（+）图标。新建 CSS 选择器规则对话框打开，选择以下内容：

• 从选择器类型下拉列表中选择标签

• 从选择器名称下拉列表中选择输入

• 从规则定义下拉列表中选择form.css

1. 点击确定开始定义新样式。

2. CSS 规则定义对话框出现。您可以继续进行-为输入字段定义样式属性，并点击应用以查看它们在设计视图中的外观，如下图所示：

3. 为输入字段定义样式后，点击确定。

为表单创建 ID 样式

到目前为止，我们创建的样式适用于元素的每个实例。例如，我们的表单样式属性（背景颜色，宽度等）将适用于每个表单。我们的输入样式属性适用于每个输入元素（名称和电子邮件字段以及提交和重置按钮）。

如何定义仅适用于特定元素的样式？一种技巧是使用与我们生成 Spry 验证字段时创建的字段相关联的 ID。

执行以下步骤，使用 ID 样式为我们生成的 ID 元素之一创建 ID 样式：

1. 点击面板底部的新建 CSS 规则（+）图标。新建 CSS 选择器规则对话框打开，选择以下内容：

• 从选择器类型下拉列表中选择ID

• 从选择器名称下拉列表中选择名称

• 从规则定义下拉列表中选择form.css

1. 点击确定打开CSS 规则定义对话框。

2. 为name ID 元素定义自定义样式，通过单击应用来测试您的样式，如下截图所示：

3. 单击确定以定义name ID 元素的样式。

4. 导航到文件 | 全部保存以保存对 HTML 和 CSS 文件的更改。

对表单样式的思考

在我们在这里探索的框架中，我们正在使用我们自己设计的表单。在“现实生活”中，特别是在更复杂的专业项目中，表单的 HTML 将由构建后端脚本和管理表单输入的数据库的团队提供。

但我想强调的是，您仍然可以创建自定义 CSS 文件和样式，以自定义这些表单的外观。因此，您从 Google 获取的搜索引擎的表单 HTML，从www.TheSiteWizard.com获取的用于管理反馈的表单 HTML，以及从电子商务插件包获取的表单 HTML，都可以使用您自己的 CSS 进行自定义。通过这种方式，表单可以集成到您为网站打造的吸引人的外观和感觉中。

真实世界的表单处理

虽然我强调 Adobe 没有提供一个可访问且价格合理的管理表单数据的框架，但有大量在线资源，其中许多是免费的，可以轻松插入 Dreamweaver 网站。在结束本章之前，我想通过一个FreeFind 框的示例来引导您。

我选择了这个例子，因为很少有网站不使用搜索框，而且安装（和自定义）Freefind 搜索框是免费且非常简单的。

为了使其工作，您只需要一个托管在远程服务器上的实时网站。设置其中一个有点复杂。有关如何执行此操作的建议，请参阅本书的第一章中的定义远程站点部分，使用 Dreamweaver CS6 创建站点和页面。

以下一系列步骤借鉴了本章早些时候介绍的技术，因此，如果您直接跳到本书中的这一点来安装搜索框，最好先跳到本章的开头了解表单和表单样式的基础知识。

因此，在这种情况下，执行以下步骤将搜索框添加到您的网站：

1. 导航到文件 | 新建，并通过执行以下步骤创建一个将容纳您的搜索框的新页面：

2. 在新建文档对话框的左侧列中，选择空白页面。

3. 在页面类型列中选择HTML。

4. 在布局列中选择****。

5. 单击创建以生成新页面。

6. 在文档工具栏的标题区域中，键入搜索本站点

7. 将页面保存在名为search.html的站点根文件夹中。

8. 使用CSS 样式面板中的附加样式表图标将form.css样式链接到此页面。您将使用本章早期为注册表单创建的相同一组样式。

9. 在浏览器中，转到www.freefind.com。要注册搜索框，请执行以下步骤：

10. 输入您的姓名，电子邮件，并单击即时注册按钮。您将收到发送到您电子邮件地址的登录信息。

11. 使用发送到您电子邮件地址的登录信息登录到您的 FreeFind 帐户。登录过程将直接带您到您的搜索框的控制窗口。

12. FreeFind 提供价格合理且无广告的选项，但您可以使用免费版本来尝试表单和样式，因此无需订阅任何特殊计划。

13. 单击控制窗口中的HTML选项卡，如下截图所示：

1. 要复制并粘贴搜索框的 HTML，请执行以下步骤：

2. 为了保持简单，我们将使用搜索框的第一个选项，1.网站搜索框-带有高级搜索选项的链接。

3. 单击该选项下方的链接，该链接显示获取 HTML 并将其粘贴到您的页面中。HTML 显示在一个框中，如下面的屏幕截图所示：

4. 单击代码内部，并将其复制到剪贴板。

5. 切换回您打开的 Dreamweaver HTML 文件（search.html）。在拆分视图的代码视图中，单击以在<body>标签的末尾放置插入点，然后按Enter或Return键创建新的代码行。

6. 粘贴来自 FreeFind 的复制 HTML，并在设计视图的拆分视图的实时视图中查看结果，如下面的屏幕截图所示：

7. FreeFind 代码中充斥着表格格式。如果愿意，您可以在拆分视图的代码视图中删除该代码，或者只是接受它。但更重要的是，您可以使用我们在本书中探讨过的属性检查器和其他编辑技术来自定义表单。我让您将本章作为我们所涵盖内容的实际应用，并且作为加强您对格式化表单的信心和技能的“测试”来审查。

• 将搜索字段的宽度更改为 48 个字符，最大字符更改为 60

• 添加此占位文本：搜索字符串在此处

• 添加重置按钮

• 只要您不更改表单字段名称或删除它们（包括在浏览器中不显示但允许 FreeFind 搜索框功能的隐藏表单字段），您可以编辑表单的 HTML 和 CSS，如下面的屏幕截图所示（在实时视图中）：

• 通过使用您的form.css样式表，您可以使 FreeFind 搜索框看起来和其他网站中的表单感觉一样。

FreeFind 示例比您从第三方获取的一些表单要简单。但是生成表单的基本技术，将该表单粘贴到 Dreamweaver 中，编辑表单 HTML（不删除或重命名任何表单字段），并应用自定义样式… 这对于您从任何地方获取的任何表单都适用。

总结

在本章中，我们探索了 Dreamweaver CS6 用于生成经过验证的表单的强大工具。为此，我们调用了 Spry 框架-一组小部件，它结合了 HTML、CSS 和 JavaScript，以将不同类型的交互应用于网页。在本书的后面几章中，我们将多次回顾 Dreamweaver CS6 中的 Spry 小部件集。

我们还学会了使用 Dreamweaver 生成的 JavaScript 创建一个简单的跳转菜单。因此，从不同的方向，我们开始探索 Dreamweaver 与表单相关的 JavaScript 功能。

然后，我们超越了 Dreamweaver 对表单的处理-具体是向具有提示文本的字段添加占位符属性。我们不得不进入代码视图来做到这一点，因为 Dreamweaver 对 HTML5 的新属性的支持很少。

最后，您通过一个真实的示例来连接表单与后端脚本和数据库系统。FreeFind 搜索示例相对简单，但它包含了您需要处理的所有元素，以便将任何后端服务器提供的表单嵌入 Dreamweaver CS6 站点。在这方面，我想强调自定义 CSS 在使嵌入的表单看起来和感觉像我们网站的其余部分中的动态作用。我们将在下一章中更深入地讨论 CSS 格式。

第四章：应用 CSS3 效果和变换

CSS3——样式表的当前版本——提供了轻松访问效果的途径，如投影阴影、圆角盒和不透明度（透明度）。此外，CSS3 引入了改变对象形状、位置、旋转和大小的变换。CSS3 效果和变换共同打开了网页更具动态性、更具吸引力、更少“盒子感”和更具互动性的大门。

通过改变对象的外观，使效果和变换可以在用户悬停或点击鼠标时变得交互。效果和变换，无论是否有动画，都比以前的工具更容易地为网页添加可访问的、引人注目的设计元素和动态效果。

CSS3 效果和变换是通过样式表定义的；因此，我们可以利用 Dreamweaver 的CSS 样式面板，避免大量手工编码来创建它们。

在本章中，我们将探索以下内容：

• 定义和应用 CSS3 变换：平移、缩放、旋转和倾斜

• 定义和应用 CSS3 效果：边框半径、阴影和不透明度

• 组合多个变换和效果

• 通过:hover伪类使 CSS3 变换和效果具有交互性

CSS3 中的新效果和变换

CSS3 效果，如阴影、圆角和不透明度，可以使网页更时尚、更温和、更具吸引力。当适度使用时（即不过度使用），它们可以使网页更具吸引力。

效果和变换可以，而且通常应该，结合起来产生引人注目的元素。例如，下面的文本既应用了倾斜变换，又应用了阴影效果：

过渡效果，如倾斜、旋转、缩放和平移（移动）对象，当与互动结合时尤其引人注目。例如，访问网站的访客在悬停在一个对象上时会感受到它的微妙而诱人的变化。

在 CSS3 之前，这些效果或过渡需要一些组合编码，并通过依赖（和编程）JavaScript 和用 Photoshop 效果替换图像（如阴影或轮廓）来嵌入 Flash 对象。这些其他工具是昂贵的，或者学习曲线很高。

在本章的过程中，我们将探索几种新的效果和 CSS3 中的新 2D（二维）变换。3D 变换超出了我们的调查范围；它们在浏览环境中的支持不如 2D 变换广泛，并且通常需要额外的脚本（通常是 JavaScript）才能使其生效。

本章的大部分内容将介绍如何创建特定的 CSS3 效果和变换。

兼容性挑战

CSS3 效果和过渡广泛支持，无需插件（如 JavaScript 或 Flash）。

另一方面，重要的是要强调 HTML5 和 CSS3 功能都还在不断发展中。在寻找描述浏览器中对 CSS3 支持状态的公式时，我遇到了“不规则标准化”的公式。我意识到这是个矛盾修饰法，但我的意思是，本章中创建的 CSS3 效果和变换在所有主要浏览器的当前版本中都得到支持（是的，这包括 Internet Explorer 9 以及桌面和移动版的 Safari、Firefox 和 Opera）。

然而，Safari、Firefox 和 Opera 都需要独特的代码前缀。例如，应用rotate变换以逆时针旋转一个盒子五度的类样式的 CSS3 代码可能如下所示：

rotate {
  transform: rotate(-5deg);
  -webkit-transform:rotate(-5deg);
  moz-transform:rotate(-5deg);
  o-transform:rotate(-5deg);
}

-webkit-前缀适用于 Safari 和其他遵循 WebKit 标准的浏览器（顺便说一句，这包括 Dreamweaver CS6 的实时视图）。-moz-前缀适用于 Mozilla Firefox。-o-前缀适用于 Opera 浏览器。通用的变换代码适用于“其他所有人”，包括不需要浏览器前缀来解释这个（或其他）效果的 Internet Explorer 9。

标准化编码的缺乏并不像看起来那么严重。在定义和应用效果和变换时，只需要一点冗余。

那么像较旧版本的 Internet Explorer 这样不支持 CSS3 效果和变换的浏览环境呢？对于这个挑战有一个简单的解决方案和一个困难的解决方案。困难的解决方案是拼凑 JavaScript 和其他编码解决方案，这些解决方案可以在网上找到，或者被设计用来模拟 CSS3 不支持的效果和变换。也就是说，您可以回到在 CSS3 出现之前需要使用的工具和技术，比如 JavaScript 和 Flash。

在大多数情况下，更简单、更明智的解决方案是以不需要浏览器支持效果的方式应用变换和效果，以便访问者吸收页面内容。例如，看看下面的屏幕截图中使用border-radius效果创建的圆角矩形：

如果有人使用较旧版本的 Internet Explorer，如 IE6，访问前面示例中的页面，他们将无法看到文本呈现为圆形（由border-radius效果定义）。体验不是那么吸引人，但他们仍然可以阅读文本，如下面的屏幕截图所示：

在深入研究如何应用变换和效果之前，让我们先反思一下使用这些 CSS3 功能来格式化我们到目前为止预览的示例所涉及的优势。在创建这些效果时，没有创建、伤害、虐待或更糟的 Flash 或 JavaScript。所需的只是一些 CSS 代码，我们在 Dreamweaver 的CSS 样式面板中生成。

也不需要使用“图像文本”，即保存为图像的文本，来创建这些效果。页面几乎可以立即加载，无需等待图像下载。在没有插件或图像的情况下，形状和格式几乎可以立即下载，而无需浏览器处理插件或下载的图像。

最后，文本仍然是可选择的。这意味着已应用变换或效果的文本仍然可以复制并粘贴到地图程序、日历事件中，或者作为文本链接进行选择，如下面的屏幕截图所示：

Dreamweaver CS6 中的 CSS3 样式

Dreamweaver CS6 提供了一些功能来定义和应用这些新的 CSS3 功能。虽然不是 Dreamweaver 中最强大的工具，但它们确实可以在不借助编码的情况下创建和应用新的 CSS3 技术。在编码是必要的情况下，Dreamweaver 通过代码提示来帮助。

在生成 CSS3 变换和效果时，基本上有两种选择：

• 如果我们在代码视图中输入 CSS 代码，Dreamweaver 将通过提供代码提示来帮助编码。例如，下面的屏幕截图显示了在代码视图中输入-moz-tran后提供的代码提示。样式表的代码提示提供了对transform-属性的简单访问。

注意

冗余的 CSS 代码

前面的屏幕截图显示了定义和应用 CSS3 变换和效果的一个持续维度的重要部分。您必须创建四个版本的代码，一个用于 Webkit（Safari），一个用于 Mozilla（Firefox），一个用于 Opera（在欧洲拥有大量用户的浏览器），以及一个通用版本（没有浏览器前缀），被 Internet Explorer 9 识别。我们将在本章中不久回到这个挑战。

• 另一个选项是在CSS 样式面板中生成 CSS3 效果和变换。这样做的缺点是，这些新的 CSS3 样式规则不会显示在CSS 规则定义对话框中，这通常是在 Dreamweaver 中定义 CSS 样式的最用户友好和直观的环境。

但是，您可以通过CSS 样式面板底部的添加属性链接输入 CSS3 效果和变换。Dreamweaver CS6（或安装了 HTML5 包的旧版本）将根据您在CSS 样式面板中输入的样式规则和参数生成 CSS 代码。通过这个选项，Dreamweaver 至少会在您尝试输入无效的 CSS3 规则时“破坏”您，如下面的屏幕截图所示（在下面的示例中，我应该输入-moz-transform，然后在CSS 样式面板的右侧列中定义skew变换）。

让我们坦率地说一会儿。在代码视图中依赖代码提示或使用 Dreamweaver 的CSS 样式面板这两种选项都无法达到我们在生成 CSS3 样式之前从 Dreamweaver CS6 获得的帮助水平。我们假设 Adobe 的人员正在像其他人一样努力赶上当前和新兴的网页设计工具。

我将让你决定使用哪种有用但有缺陷的技术来定义 CSS3 效果和样式，并且我将在本章的其余部分中说明这两种技术。

CSS3 效果

正如已经指出的，对 CSS3 效果和变换的支持是不规则的，仍在进行中。在这个框架内，四种可用的变换（scale，translate，rotate和skew）相对稳定并得到广泛支持。然而，效果的支持不一致，也不像有一个在各种浏览环境中支持的可用效果的“列表”（尽管有独特的编码前缀）。

部分原因是许多效果非常灵活。例如，text-shadow效果可以调整以产生轮廓类型。有时，您会听到人们提到“轮廓”效果，他们指的是调整text-shadow效果的参数以创建轮廓类型，如下面的屏幕截图所示：

根据迄今为止关于 CSS3 效果的灵活和开放性质的讨论，让我们来看看三种最有用的效果：opacity，border radius和shadow（用于框和文本）。

定义不透明度

CSS3 中的opacity效果允许您对对象应用不同程度的不透明度/透明度。语法如下：

opacity:x;

在前面的语法中，x是介于零和一之间的值。完全不透明（值为1）是正常的 - 应用不透明度的对象就像覆盖在其他所有东西上的盖子。完全透明（值为0）会使对象变得不可见。不透明度值为.6会使对象 60%不透明，依此类推。

尽管前面已经警告过，CSS3 效果必须针对不同的浏览器进行特定定义，但opacity效果是一个不需要为识别目标浏览器添加前缀的效果。

注意

简单还是复杂

使用 CSS3，实现不透明度（透明度）非常简单，或者说是无望的复杂，这取决于一个人的目标是什么。使用不透明度来创建一组具有各自分配的不透明度的各种元素的复杂叠加对象需要复杂的编码，并且并非所有浏览器都支持。

不透明度可以应用于标签（例如，定义图像如何显示的<img>标签）。更有效的是定义应用不透明度的类样式的技术。您可以通过以下步骤来实现：

1. 在CSS 样式面板中，单击面板底部的新 CSS 规则图标，启动新 CSS 规则对话框。从选择器类型弹出菜单中选择类，输入名称（不要有空格或特殊字符——semi_opaque会起作用），并从规则定义弹出菜单中选择您的外部样式表。然后单击确定。

2. CSS 规则定义对话框会打开。遗憾的是，正如之前讨论的那样，CSS3 效果无法在CSS 规则定义对话框中定义。因此，只需单击确定，在此阶段创建一个没有属性的新 CSS 规则。然而，新规则将出现在CSS 样式面板中，我们将在那里定义不透明度设置。

3. 在CSS 样式面板中选择您新创建的类样式后，单击CSS 样式面板底部的添加属性链接。在第一列中键入opacity，然后按Tab键移动到第二列。在第二列中，键入介于0（完全透明）和1（完全不透明）之间的值。例如，值.5定义了 50%的透明度，如下图所示：

定义了类样式后，您可以通过从属性检查器中选择类样式，将其应用于所选对象（例如图像）。

定义 CSS 类样式后，您可以通过属性检查器中的类下拉菜单将其应用于任何所选元素，如下图所示：

您可以在不同的浏览器中测试不透明度效果。虽然不是所有浏览器都支持不透明度，特别是旧版本的浏览器，但通常情况下，如果它起作用，它可以增强页面，但如果它不起作用，也不会丢失任何基本内容。以下截图显示了图像上方的文本。左侧的文本显示为完全不透明。右侧的文本显示为部分透明，允许访问者在文本后面看到一些页面背景。

边框半径

CSS3 border-radius效果用于定义圆角。

让我们立即进入一个示例，应用一个类样式，将 12 像素半径的圆角应用于一个 150 像素的正方形框，并在其周围应用黄色背景和粗实红线。在之前讨论创建应用不透明度效果的类样式时，我们使用了在CSS 样式面板中构建类样式的技术。这很有效，因为不透明度效果非常简单。在这里，让我们在 CSS 样式表中构建样式。假设您已经将外部样式表链接到 Dreamweaver 中打开的网页，您可以将以下代码添加到 CSS 文件中来定义border-radius类样式：

.box {
  background-color: yellow;
  height: 150px;
  width: 150px;
  border: thick solid red;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

我们在这里使用的代码使用-moz-前缀来支持 Firefox。以下截图显示了这个类样式应用于 Dreamweaver 中所选文本：

在浏览器中，前面的图像看起来像下面的截图：

一个有趣的技巧是尝试创建一个受影响的圆，使圆角半径值等于正方形框的高度（和宽度）的一半。下面的示例显示了效果，值从前面示例调整，使圆角半径为 75 像素，是原始正方形尺寸定义的一半。

阴影

投影阴影可能是图形设计中应用最广泛的效果。不要引用我说的话，但阴影确实是许多设计中无处不在的元素；现在，使用 CSS3 可以轻松地将它们应用于选定的对象。

有两种不同的阴影效果：box-shadow和text-shadow。它们的应用非常直观；box-shadow应用于框，text-shadow应用于文本。

box-shadow和text-shadow效果都可以用至少两个参数定义：x 偏移（垂直距离）和 y 偏移（水平距离）。除此之外，它们通常包括一个颜色（如果未指定颜色，则会出现浏览器默认颜色）和一个模糊参数（模糊渐变的厚度）。

x 和 y 偏移值可以是正数或负数。正值在文本右侧生成阴影，而负值在文本左侧生成阴影。对于 y 偏移值，正值在文本下方生成阴影，而负值在文本上方生成阴影。通常以像素为单位定义数值。

在检查这对框、文本和轮廓的作用之前，有必要注意多个阴影定义可以组合。例如，如果您希望在文本的下方和上方生成阴影（当您定义轮廓样式时会想要这样做），您可以组合两个甚至三个阴影定义，并将它们叠加在一起。

框阴影

如前所述，box-shadow效果通常用四个参数定义：偏移-x（水平距离）、偏移-y（垂直距离）、模糊（像素宽度）和阴影的颜色。

例如，以下代码定义了一个框阴影，水平和垂直偏移为 5 像素，模糊长度为 5 像素，灰色阴影，并且对于五种不同的浏览器，即 Chrome、Safari、Firefox（使用未加前缀的代码）、Internet Explorer 9 和 Opera。

.shadow {
  -webkit-box-shadow: 5px 5px 5px gray;
  -moz-box-shadow: 5px 5px 5px gray;
  box-shadow: 5px 5px 5px gray;
}

在CSS 样式面板中看起来是这样的（您可以在CSS 样式面板中定义类样式）。

文本阴影

text-shadow效果与box-shadow效果非常相似，只是应用于文本而不是框。而且，不像需要特殊前缀的box-shadow效果，text-shadow效果不需要供应商前缀。

text-shadow效果的参数与box-shadow效果的参数相同，您需要定义四个值：x 偏移、y 偏移、模糊距离和颜色。不需要创建三个版本的效果，以下 CSS 代码可以用于定义一个文本阴影，水平和垂直偏移为 5 像素，模糊值为 5，颜色为灰色：

.text_shadow {
  text-shadow: 5px 5px 5px gray;
}

前面示例中的text-shadow效果设置产生了以下效果：

创建文本轮廓

正如本章前面提到的，“文本轮廓"效果并不存在。但是使用text-shadow效果可以应用文本轮廓的方法。通常，这涉及将"轮廓"类型的文本颜色与页面背景匹配，然后定义一个特别细的黑色"阴影”，完全没有模糊，看起来像是轮廓。

创建有效的轮廓效果需要堆叠额外的定义参数，以便在应用样式的文本上方和下方以及右侧和左侧堆叠非常细的“阴影”。例如，当应用于白色页面背景上的文本时，以下类样式组合（堆叠）了三组不同的参数以创建轮廓效果。

.outline {
text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black; 
color: white;
}

这是在浏览器和CSS 样式面板中的效果。

提示

基本上，前面的代码生成了文本下方的一个细（1 像素）“阴影”，文本下方的第二个“阴影”，以及文本上方的一个（1 像素）厚的“阴影”。要获得更厚的轮廓，可以将像素值统一增加到 2 像素。

CSS3 转换

四个 CSS3 转换scale（调整大小）、translate（移动）、rotate和skew被应用于选定的内容作为效果。也就是说，它们改变了对象的显示或外观，但没有改变它们的基本属性。

这些转换使得可能呈现文本或图像的扭曲，而在 CSS3 出现之前，通常是通过图像来完成的——通过使用文本图像来呈现那些扭曲、旋转或缩放的文本。

与其超出我的书面沟通能力的极限，不如利用以下图示来说明这四个转换：

何时使用转换

skew和rotate转换可用于以引人入胜和独特的方式呈现文本或图像，同时保持用户选择（复制、粘贴、点击等）文本的能力。translate转换可用于将一个内容块放在另一个内容块上方（如前面的示例所示）。scale转换可用于拉伸或调整类型或图像。

提示

图像重叠时

当两个<div>标签重叠时，出现在前面的将是 z-index 值最高的一个。您可以在CSS 样式面板中设置 z-index。

在许多情况下，这些效果可以作为交互式动画很好地工作，访问者可以通过将鼠标悬停在对象上来触发变换。我们将探讨这种技术作为本章的最后一个元素。

与本章早些时候探讨的 CSS3 效果一样，过渡效果可以应用于各种标签，例如标题标签（<h1>、<h2>等）和图像（使用<img>标签）。或者更典型的是，定义类样式以应用这些过渡效果。

如何在 Dreamweaver CS6 中生成过渡编码

在检查定义转换所需的相对基本的语法之前，让我们重新审视我在本章早些时候试图激起的有关如何充分利用 Dreamweaver CS6 有限但有用的 CSS3 代码生成工具的两种可能方法的争议。

回顾和扩展选择：您不能在CSS 规则定义对话框中定义转换，但可以通过这种方式应用 CSS2（更早）样式——例如背景颜色、字体定义等规则。但是，在 Dreamweaver 的CSS 规则定义对话框中，我们将徒劳地搜索skew、scale、transform或rotate。因此，以下两个选择仍然存在：

• 在分割或代码视图中直接输入 CSS 文件中的 CSS 代码

• 使用CSS 样式面板的有限资源来定义转换

我会让你回到本章早些时候更详细的讨论中，逐步介绍如何在正在使用的 CSS 文件中输入代码或使用CSS 样式面板定义样式。但是这里有一个新因素需要检查：在CSS 样式面板中，您在定义转换参数方面会得到比在本章早些时候探讨的效果（如阴影）更多的帮助。

以下是额外帮助的工作方式：在向 CSS 样式 面板中的样式添加规则时，如果在 CSS 样式 面板底部输入其中一个变换选项（-webkit-transform，-moz-transform 或 -o transform），Dreamweaver 会在面板的第二列中提供一个弹出式帮助，其中包含各种变换选项，如下截图所示：

最重要的是，你必须决定哪种环境更适合你生成 CSS3 变换代码。在本章的其余部分探索特定的变换时，我会透露我的选择（只需在 代码 视图中输入代码）。但特别是当你开始熟悉 CSS3 变换代码时，你可能会发现 CSS 样式 面板中的弹出式帮助很有用。

使用缩放进行调整

缩放由两个参数定义，即 x 和 y。x 值定义了要增加的宽度（或者使用负值减少），y 值应用于高度。通常是乘数，因此 2 的值 = 200%，表示将尺寸加倍，而 .5 的值 = 50%，表示将尺寸减少到原始值的一半。

以下代码行应用了一个 scale 变换，使对象的宽度保持不变，但高度增加了 50%：

  -webkit-transform: scale(1,1.5);
  -moz-transform: scale(1,1.5);
  -o-transform: scale(1,1.5);
transform: scale(1,1.5);

以下是一个类样式的示例（称为 .scale），它包含了前面的代码，并定义了一个类样式，生成一个 125 像素的正方形框（在重新调整大小之前），可以进行缩放：

.scale {
  height: 125px;
  width: 125px;
  background-color: yellow;
  -webkit-transform: scale(1,1.5);
  -moz-transform: scale(1,1.5);
  -o-transform: scale(1,1.5);
   transform: scale(1,1.5);
  float: left;
  margin: 15px;
  padding:5px;
  border:1px solid #F00
}

注意

浮动框

在这个示例中，float 属性允许我们将一堆这样的框或类似的框排成一行。

使用 translate 移动

translate 变换将对象从页面上的位置移动。如前所述，这可以是一个有效的技术，使框，包括可选择文本的框，在页面上重叠。

translate 变换的语法与 scale 变换类似，不同之处在于第一个参数，即 x 值定义了对象向右移动的距离（如果使用负值，则向左移动），y 值定义了对象向下移动的距离（如果使用负值，则向上移动）。通常以像素为单位定义数值。

这是我们在前一节中作为 scale 变换示例使用的相同类样式，但是使用 translate 变换设置将对象向左移动 35 像素，向下移动 15 像素：

.translate {
  height: 125px;
  width: 125px;
  background-color: yellow;
  transform: translate(-35px,15px);
  -webkit-transform: translate(-35px,15px);
  -moz-transform: translate(-35px,15px);
  -o-transform: translate(-35px,15px);
  float: left;
  margin: 15px;
  padding:5px;
  border:1px solid #F00
}

应用旋转

rotate 变换可能是最简单的定义方式——只有一个称为旋转角度的参数。这个角度可以是正的（顺时针旋转）或负的（逆时针旋转）。

旋转对象 15 度顺时针的代码示例如下：

  transform: rotate(15deg);
  -webkit-transform:rotate(15deg);
  -moz-transform:rotate(15deg);
  -o-transform:rotate(15deg);

以下是一个旋转对象 15 度的类样式示例，与我们之前使用的示例的大小和其他属性相同：

.rotate {
  height: 125px;
  width: 125px;
  background-color: yellow;
  transform: rotate(15deg);
  -webkit-transform:rotate(15deg);
  -moz-transform:rotate(15deg);
  -o-transform:rotate(15deg);
  float: left;
  margin: 15px;
  padding:5px;
  border:1px solid #F00
}

注意

注意 - 为旋转（和扭曲）留出空间

当你旋转一个对象（或者，我们将看到，如果你扭曲它），对象将与附近的对象重叠。通常情况下（除非这种重叠是设计的一部分），这可以通过向对象样式添加足够大的外边距值来解决。

创建扭曲转换

skew 变换可能由两个用逗号分隔的参数定义。第一个参数定义了 x 轴（水平）以度为单位的变换，第二个值定义了垂直扭曲。如果你在两个轴中的一个上使用零作为值，结果将是一个平行四边形，如下截图所示：

以下是一个类标签的代码示例，应用了黄色背景、红色边框和我们之前示例的其他属性，将对象在框的轴上扭曲 15 度：

  transform: rotate(15deg);
  -webkit-transform:rotate(15deg);
  -moz-transform:rotate(15deg);
  -o-transform:rotate(15deg);

以下是一个类样式的示例，将对象旋转 15 度，与我们之前使用的示例的大小和其他属性相同：

.skew {
  height: 125px;
  width: 125px;
    background-color: yellow;
  transform: skew(15deg,15deg);
  -webkit-transform: skew(15deg,15deg);
  -moz-transform: skew(15deg,15deg);
  -o-transform: skew(15deg,15deg);
  float: left;
  margin: 25px;
  padding:5px;
  border:1px solid #F00;}

其他 CSS3 变换效果

除了我们在本章中探讨过的 CSS3 的二维（2D）变换效果之外，还有其他三维变换正在不断发展的支持状态。总的来说，除了 WebKit 集（SafariLimit）之外，一般没有任何浏览器支持它们，据我所知，目前它们并不适用于没有额外 JavaScript 来对其进行动画处理。

话虽如此，请继续关注。CSS3 变换的世界是一个不断运动和发展的世界，3D 变换可能会得到更广泛的支持，并且对开发者来说更加易用。

复合变换

您可以将多达四个变换组合成一个单一的变换规则。例如，要创建一个应用skew（在 x 和 y 轴上各 5 度）、scale（在 x 和 y 轴上各 1.5 倍）和rotate（45 度）的变换，以适用于 WebKit 浏览器的前缀，您可以使用以下代码：

-webkit-transform: skew(5deg,5deg) scale(1.5, 1.5) rotate(45deg);

由于变换往往会对对象应用相当激进的改变，而且skew和rotate会产生类似的效果，因此在单个对象中结合多个变换的美学和可访问性是有限的，但是可以实现。

互动效果和变换

在调查和走过创建和应用 CSS3 效果和变换的过程之后，我们现在转向这些新样式特性中最激动人心、最动态的方面之一：互动性。

所谓互动性，是指页面上的对象或元素对访问者的操作做出自己的反应。访问者悬停在一个对象上，该对象移动、调整大小、旋转、倾斜、产生阴影、变得半透明，或者经历其他一些变化。

有两种基本技术可以将互动性与效果和变换结合起来。一种是使用 JavaScript 并编写或生成与变换和效果相结合的代码。将 JavaScript 与效果和变换相结合可以是一种非常强大的技术，用于创建例如使用 Flash 可以生成的互动性。

另一种更加易用的技术是利用广泛支持且易于使用的:hover伪类。如果您熟悉为链接定义“悬停”状态的操作，当悬停在链接上时链接会呈现出独特的外观，那么您大致了解这将如何工作。我们将在接下来的章节中更详细地讨论这一点。

使用 JavaScript 的效果的限制

使用 JavaScript 创建互动效果和变换存在一些明显的限制，这超出了我们在本书中可以讨论的范围。首先，为了实现这种方法，需要了解 JavaScript，虽然这方面的知识可以在厚厚的书籍、大量的在线资源以及付费工具中获得，但这远远超出了我在本章甚至本书中可以涵盖的范围。此外，JavaScript 并不在所有浏览环境中得到普遍支持，而 HTML5 和 CSS3 的吸引力在于，通过适当考虑非 HTML5 环境，本书中探讨的几乎所有内容都将在任何浏览环境中工作，或者至少不会对任何浏览环境造成伤害。

Dreamweaver 的被低估但也被支持不足的用于生成 JavaScript 的工具，行为面板，不支持 CSS3 效果和变换，因此在结合 JavaScript 效果和变换方面目前还是无能为力的。

我们已经部分列举了结合 JavaScript 与 CSS3 效果和变换的缺点（和优点），因为您可能会在网络上遇到开发者在探索 CSS3 的前沿并将他们的工作与 JavaScript 结合的示例、模型和讨论。

使用:hover伪类进行互动

然而，还有一种更加易用的工具可以应用互动效果和变换：:hover伪类。

伪类是 CSS 修饰符，根据对象的状态定义网页对象的外观。它们最为人所知，并且最广泛地应用于链接的修饰符。

例如，网页上的未访问链接默认显示为蓝色下划线，访问过的链接显示为紫色下划线，活动链接显示为红色下划线。这些参数可以在 Dreamweaver 的CSS 样式面板中轻松更改。而且，它们在每个现代浏览器中甚至在旧版浏览器中都受到支持。

但除了:visited和:link :active伪类样式（伪类），还有另一种更动态的状态叫做:hover。这种可定义的状态适用于访问者在页面上悬停鼠标的任何东西。

通过将效果和变换应用于对象的悬停状态，您可以使其以一种定义的方式与访问者的鼠标操作进行交互。

在 Dreamweaver 中制作 CSS3 变换

现在让我们详细了解 CSS 变换和效果是如何与:hover伪类一起工作的。

基本概念是，你为希望在悬停时进行变换的对象定义一个:hover伪类。这个对象可以是 HTML 标签（如<img>）或<div>标签（类或 ID）。

例如，对于<img>标签，CSS 文件中的这行代码将定义一个scale变换，当悬停在图像上时，将高度和宽度增加 10%：

img:hover  {
  -webkit-transform: scale(1.1,1.1);
}

或者举个例子-一个 div 标签-以下代码将导致一个名为.box的类样式容器在悬停时旋转 45 度：

.box:hover {
  -webkit-transform:rotate(45deg)
}

产生以下效果：

示例-创建动画效果和变换

这个配方创建了一个类样式框，可以在页面上重复使用，当悬停时显示 CSS3 效果和 CSS3 变换。因此，这是一个易于适应的配方-您可以使用本章中的信息来替换我们将在配方中使用的不同效果和变换。

在我们的特定情况下，当悬停在盒子上时，我们将应用圆角并稍微放大盒子。

将各个部分放在适当的位置

在深入了解这个配方之前，您需要做好以下准备：您需要定义一个 Dreamweaver 网站。跳转到第一章使用 Dreamweaver CS6 创建站点和页面，并回顾那里有关创建 Dreamweaver 网站的讨论和步骤。

有了你定义的网站，你准备好了！我们需要的一切都在 Dreamweaver CS6 中。让我们首先设置我们需要的文件：

1. 导航到文件|新建以打开新建文档对话框。在类别列中选择空白页面，在页面类型列中选择HTML，在布局列中选择**。从文档类型弹出窗口中，选择HTML5**。此时附加 CSS 文件框应为空白。定义新文件后，点击创建以创建一个新的空白 Dreamweaver 页面。

2. 在文档工具栏的标题区域输入悬停。导航到文件|保存并分配一个文件名。让我们使用hover.html文件。

3. 接下来，我们将创建包含我们将使用的样式的 CSS 文件-特别是 CSS3 效果和变换样式。导航到文件|新建。新建文档对话框打开。

4. 在页面类型类别中选择CSS，然后点击创建按钮。保存 CSS 文件；使用文件名hover.css。打开一个空白的 CSS 页面。

5. 选择 HTML 文件。您可以在 Dreamweaver 文档窗口顶部的文件选项卡中执行此操作。或者为了避免任何可能的混淆（因为我们打开了两个名称相似的文件），点击窗口菜单，然后点击hover.html文件。

6. 在 HTML 页面中（您可以在三个视图中的任何一个中，但设计视图效果很好），导航到窗口|CSS 样式以显示CSS 样式面板（如果该面板不可见）。

7. 点击CSS 样式面板底部的附加样式表链接图标，并导航到并链接hover.css样式表文件。空白的样式表文件将出现在CSS 样式面板中。您可以看到到目前为止我们已经定义的所有元素，此时您的屏幕应该看起来像下面的屏幕截图所示：

8. 点击CSS 样式面板底部的新建 CSS 规则图标，打开新建 CSS 规则对话框。从选择器类型弹出菜单中选择类，在选择器名称框中键入box。在规则定义区域，如果尚未选择hover.css，请从规则定义弹出菜单中选择它。点击确定打开hover.css 中.box 的 CSS 规则定义对话框。

9. 在CSS 规则定义对话框的背景类别中，选择浅色背景颜色（如黄色）。在框类别中，应用以下规则，如下面的屏幕截图所示。但是不要点击确定！我们将接下来定义一个边框。

• 宽度：200 像素

• 高度：200 像素

• 浮动：左

• 填充：25（全部）

• 外边距：50（全部）

注意

关于设置的说明

我们正在创建一个 200 像素的正方形框，这是一个很好的大小，可以容纳侧边栏消息或图片和标题。我们将其浮动到左侧，以便其他内容可以在右侧围绕框进行包裹。大外边距和填充为可能扩展框或影响附近元素的空间提供了足够的灵活性。

1. 接下来，让我们创建一种有趣的边框。在CSS 规则定义对话框的边框类别中，将边框定义为虚线、粗、红色，如下面的屏幕截图所示。然后点击确定创建样式规则。

2. 现在让我们在页面上放置一个（或--你的选择--多个）这个类样式的实例。导航到插入 | 布局对象打开插入 Div 标签对话框。从类弹出菜单中选择box，然后点击确定。请注意，如果您希望将此框用作页面设计元素，可以重复执行此操作，如下面的屏幕截图所示。您还可以使用此图来仔细检查CSS 样式面板中.box类样式的规则。

使用悬停类样式来实现动画效果

现在我们可以定义:hover伪类样式，以实现对这个框的缩放和圆角效果。使用 Dreamweaver CS6 的CSS 样式面板和对话框，我们能够创建一个具有定义边框的大小浮动框。对于以下步骤中需要的 CSS3 样式，我们就没有那么幸运了。我们将使用CSS 样式面板定义样式，但必须自己输入 CSS3 样式代码，只能依靠 Dreamweaver CS6 的代码提示。

1. 点击CSS 样式面板底部的新建 CSS 规则图标，打开新建 CSS 规则对话框。从选择器类型弹出菜单中选择类，在选择器名称框中键入.box:hover。在规则定义区域，如果尚未选择hover.css，请从规则定义弹出菜单中选择它。点击确定打开hover.css 中.box:hover 的 CSS 规则定义对话框。

2. 由于我们需要的规则在CSS 规则定义对话框中不可用，因此点击确定在当前阶段保存样式.box:hover而不添加任何规则。

3. 导航到窗口 | hover.css以在 Dreamweaver 的代码视图中打开 CSS 样式文件。请参考以下代码，定义一个缩放过渡，将框的大小增加到一个显眼但不刺眼的 2%，并对框应用微妙的圆角。该代码使此效果对 Safari（-webkit）、IE9（通用）、Opera（-o）和 Firefox（-moz）用户可用。

针对.box:hover样式的代码如下：

.box:hover {
  -webkit-transform:scale(1.02);
  -webkit-border-radius: 10px;
  -transform:scale(1.02);
  -border-radius: 10px;
  -o-transform:scale(1.02);
  -o-border-radius: 10px;
  -moz-transform:scale(1.02);
  -moz-border-radius: 10px;
  }

1. 保存 CSS 文件（导航到文件 | 保存）。使用窗口菜单返回到hover.html页面。在浏览器的文件菜单中使用预览选项，在实时视图中测试效果和变换，以及其他浏览器。下面的截图显示了 Firefox 中的效果——中间的框显示为略大，并带有圆角。

再次强调，这是一个非常灵活的方法，可以作为创建与访问者交互的页面布局元素的基础。例如，您可以用rotate、skew甚至translate来替换scale，也可以用阴影或不透明度变化来替换border-radius效果。

总结

在本章中，我们涵盖了随着 CSS3 样式表标准的出现而可用的各种效果和变换。这些“标准”是不一致的，因此需要为不同的浏览器提供替代（前缀）规则。

这些变换和效果本身作为设计工具非常有用，当通过定义:hover伪类元素使其交互时，它们甚至更具动态设计因素，只有当对象被悬停时它们才会出现。

Dreamweaver CS6 提供了一个基本框架，用于定义和应用 CSS3 变换和效果。我们检查了 Dreamweaver 的有限的 CSS3 工具，比如在代码视图中使用代码提示的能力以及在CSS 样式面板中有用的变换提示。

在本书的下一章中，我们将探讨如何使用 HTML5 向网页添加“本地”音频和视频。本地音频和视频可以直接在浏览器中运行，无需插件播放器（如 Windows Media Player、QuickTime Player 或 Flash Player）。

第五章：嵌入 HTML5 本机音频和视频

在本章中，我们将介绍如何使用 HTML5 向网页添加音频和视频。在 Dreamweaver 中使用 HTML5 嵌入媒体的优势在于它不需要任何外部播放器才能工作。对于支持 HTML5 音频或视频元素的浏览器，本机媒体是在线呈现音频和视频的最优雅方式。

Dreamweaver 使添加 HTML5 音频相对轻松，无需对 HTML 编码有广泛的知识或担心。

本机媒体和兼容性

在我们开始使用 HTML5 嵌入媒体之前，让我们稍微退后一步，来看看整体情况。在 HTML5 之前，如果您想从网站上收听音频或观看视频，您必须通过某种浏览器插件来实现。该插件可能是 QuickTime Player（通常在 Mac 上）、Windows Media Player（通常在 Windows 计算机上）、Flash、硬件制造商提供的插件或其他程序。

由于用户使用插件（如 Windows Media Player 或 QuickTime Player）来听音频，网页设计师几乎无法控制用户在听音频时屏幕上显示的内容。HTML5 提供了所谓的本机音频（以及本机视频）。本机视频不需要插件。播放器和控件在不同的浏览环境中仍然有所不同，但是使用 HTML5，音频播放器是相对标准化的。

在呈现 HTML5 音频和视频时存在两个兼容性问题：1）访问者的浏览器必须符合 HTML5 标准；2）访问者的浏览器必须支持音频或视频保存的特定音频格式。因此，在介绍呈现 HTML5 音频的过程中，我们将探讨如何处理这两个兼容性问题。

当我们逐步介绍嵌入本机音频和视频的过程时，我将分别更详细地讨论音频和视频的兼容性问题。

奠定基础

在 Dreamweaver CS6 中支持 HTML5 音频和视频仍然有些原始。如果您使用 Creative Cloud 更新 Dreamweaver，则可以从插入菜单（或插入工具栏）中获得更多 HTML5 元素（包括音频和视频）。但是 Dreamweaver CS6（和 5.5）的所有版本都在代码（或分割）视图中提供有价值的代码提示，这是我们将采取的方法，因为它适用于任何 Dreamweaver CS6 环境。此外，了解audio和video标签的语法也是很有益的。

让我们快速回顾一下您在 Dreamweaver 中使用 HTML5 媒体所需的两个基本要素：

• 如果您还没有，请确保已定义 Dreamweaver 站点。这是一个必不可少的第一步。要了解如何定义站点，您可以查看本书的第一章使用 Dreamweaver CS6 创建站点和页面，以了解如何操作。

• 收集媒体文件。对于音频：MP3、OGG 和 WebM 格式的音频文件。对于视频：h.264（通常带有.mp4文件扩展名）、OGG 或 WebM。您将需要拥有视频文件的三个版本-h.264、OGG 和 WebM。您可以使用免费的Switch程序（www.nch.com.au/switch/index.html）将文件从一种音频格式转换为另一种。对于视频转换，您可以使用免费的Online-Convert程序，可在video.online-convert.com/下载。

介绍到此结束，让我们转向在 Dreamweaver 中嵌入本机 HTML5 音频和视频的具体过程。

准备本机音频

在我们可以将它们放在网站上之前，我们需要做的第一件事是使我们的音频文件准备好 HTML5。

在通过各种音频格式来确定哪种适用于哪种浏览器之前，让我先提供一个非常基本的音频压缩概述。

音频压缩

您可能对一些流行的音频格式如 MP3、WAV、AIFF 等有所了解。原始的未压缩音频文件，如 WAV（用于 Windows）和 AIFF（用于 Mac），提供了最高的在线音频音质。但这些文件非常大，对大多数用户来说下载速度太慢。另一方面，MP3 音频文件的文件大小要小得多。

在转换为 MP3 格式时，使用压缩算法来从文件中挤出额外的数据。对于大多数听众和大多数音频文件来说，MP3 的质量是足够的。因此，当我们谈论在线提供音频文件时，我们通常是指诸如 MP3 之类的压缩音频文件格式。另一种压缩文件格式是 OGG 格式。

浏览器对音频文件的支持

MP3 和 OGG 是两种最广泛使用的压缩音频格式。由于未压缩音频需要更长时间下载，压缩音频（MP3 和 OGG）几乎适用于所有可下载的音频。

哪种压缩音频格式在所有浏览器中都有效？不幸的是，两者都不在所有浏览器中有效。最受欢迎的五种浏览器——Internet Explorer、Firefox、Chrome、Safari 和 Opera——都支持 HTML5 音频，但不同的浏览器支持不同的格式。

支持哪些音频格式的浏览器会随时间而变化，但在撰写本章时，情况如下：

• Internet Explorer 9 及更高版本：MP3

• Firefox 4.0 及更高版本：OGG

• Google Chrome 6 及更高版本：两者

• Apple Safari 5 及更高版本：MP3

• Opera 10.6 及更高版本：OGG

W3Schools.com在www.w3schools.com/html/html5_audio.asp上保持着音频格式的浏览器支持的更新列表。但是，尽管我尽可能准确地预测未来，如果您想要达到绝大多数用户，您将需要同时提供 MP3 和 OGG 音频。

呈现 HTML5 音频的最可靠和“符合标准”的解决方案是提供 HTML5 压缩音频格式 MP3 和 OGG 的选项。这是我们将要探讨的解决方案。

在 Dreamweaver 网页中嵌入 HTML5 音频元素

一旦我们打好了基础，我们就可以开始了。使用以下步骤将音频元素嵌入到一个打开的 Dreamweaver HTML5 页面中：

1. 在分割视图的代码部分，将光标放在****标签后，然后按Enter（或 Mac 上的Return）创建一行新代码。

2. 开始键入<au，然后按Tab，HTML5 包将自动将其补全为<audio>标签的开头，如下面的截图所示：

3. 将光标放在单词audio后面，然后按下空格键。再次会出现一个弹出菜单。键入字母s，然后在列表中双击src。这是源代码，也就是文件的来源。

4. 当您选择src时，将会出现一个浏览链接。双击浏览链接打开选择文件对话框，如下面的截图所示：

5. 找到之前复制的音频文件，在我们的例子中是一个 MP3 文件（但也可能是 WAV 或 OGG）。通过双击选择该文件。

6. 您希望为这个音频添加一个控制器或播放器，所以我们将设置一个参数来显示一个。再次按下空格键，这次键入c，这在这种情况下将是用于控制。双击controls，然后当弹出框出现时，再次双击controls，如下面的截图所示：

7. 通过键入>来关闭开放的audio标签。

8. 最后，键入</，让 Dreamweaver 自动补全为</audio>，这将完成audio元素的闭合标签。

现在我们想要预览文件，这只能在 Safari 或 Opera 中进行，假设您选择了 MP3。要在 Safari 中预览，请导航到文件 | 在浏览器中预览 | Safari。它应该看起来像以下截图：

如果我们使用了 OGG 文件，我们可以做同样的步骤，但现在我们必须在 Firefox 中预览。

备用音频选项

所以现在您的页面上有音频了。但是还缺少两件事：

• 首先，您的音频播放器没有太多特殊功能。

• 其次，并非所有访问网站的人都能访问音频文件。由于我们之前确定，不是所有支持 HTML5 的浏览器都支持相同的音频文件格式，因此您应该为不同的浏览环境提供不同的 HTML5 支持的音频格式选项。

让我们从提供备用音频文件格式的挑战开始。正如我们所指出的，一些符合 HTML5 标准的浏览环境支持 MP3 文件格式，其他支持 OGG 格式，剩下的支持 WebM。

因此，我们可以通过提供第二个源文件使我们的音频更易访问。这样，符合 HTML5 标准的浏览器可以找到并播放与该浏览器相匹配的文件格式。

为此，我们将改变之前创建的 HTML，以将播放器控制代码与音频源代码分开。代码看起来类似于以下代码块：

<audio controls="controls">
   <source src="img/audio.ogg" type="audio/ogg" />
   <source src="img/audio.mp3" type="audio/mpeg" />
</audio>

在上述代码中，您将audio.ogg或audio.mp3替换为您自己的音频文件名。

对于那些浏览器无法解释 HTML5 的用户，比如使用较旧版本的 Internet Explorer 或较旧浏览器的用户，我们将希望提供另一种访问音频的方法。为此，我们可以创建一个链接到我们的音频文件。如果这样做，当链接被点击时，音频文件将在自己的浏览器用户中打开。然后浏览器将使用插件播放器，如 QuickTime、Flash 或 Windows Media 来播放音频文件。这并不是最优雅的解决方案，但它会起作用。

为此，我们可以在我们刚刚探索的 HTML 中添加一行代码。这行代码创建的文本将出现在不解释（支持）HTML5<audio>标签的浏览器中，并且可以链接到一个页面，该页面以 QuickTime、Windows Media 或 FLV 等传统格式呈现音频。

代码看起来类似于以下内容：

<audio controls="controls">
  <source src="img/sound.ogg" type="audio/ogg" />
  <source src="img/sound.mp3" type="audio/mpeg" />
Your browser does not support the HTML5 audio element but you can hear the audio file <a href="sound.html">here</a>.
</audio>

代码的最后一行，以Your browser…开头，链接到一个 HTML 页面（sound.html），该页面可用于呈现在较旧浏览器上的插件软件中播放的传统音频格式。

添加播放参数

现在（几乎）每个人都可以访问我们的音频，让我们看看我们可以使用哪些其他参数来为我们的audio元素添加功能。

当我们在定义我们的源文件中添加了代码controls="controls"时，我们添加了一个控制参数。如果您在测试时在 Safari 中使用控制器，您已经发现这个控制器可以让我们播放、暂停、静音和重新启动我们的 MP3。我们还可以使用进度条或快进/快退功能在音轨中移动。

有四个重要的 HTML5 音频参数我们可能想要使用。要启用这些参数中的每一个，我们将想要使用 HTML5 代码提示，就像我们之前启用控件一样：

• controls：此属性在音频播放器中显示控件，以启动、暂停、停止或更改音量。

• loop：这会重复播放音频文件，或者循环播放。要启用循环播放，将光标放在代码controls="controls"之后，按下空格键以激活代码提示。输入l，然后双击loop以添加loop代码。

• autoplay：这会在有人打开页面时立即开始播放音频文件，而不是观看者必须按下播放按钮，就像我们在控制器上所做的那样。您可以同时启用loop和autoplay。要使音频自动播放，请将光标放在代码controls="controls"之后，按空格键以激活代码提示。双击autoplay以添加代码autoplay =""。对于自动播放音频文件，您不需要在代码中的引号之间放任何内容，就像我们在controls和loop中所做的那样。只需添加代码即可启用它，如下面的屏幕截图所示：

注意

移动设备（包括 iOS 苹果设备）和某些版本的 Android 移动操作系统不支持autoplay，这就需要包括controls。

• preload：此属性在打开页面时开始下载音频文件，而不必点击播放。如果我们使用autoplay，这就不相关了，因为它无论如何都会立即加载，但是当我们不使用autoplay时，它允许访问者在点击播放时更快地启动音频文件。我建议不要使用此选项，因为它会延迟在许多移动环境中打开页面。如果要预加载音轨，只需将光标放在代码controls="controls"之后，按空格键以激活代码提示。键入p，然后双击preload，然后双击auto以添加代码preload="auto"。

• preload属性还有另外两个可能的变量：none和metadata。none变量明确指定不预加载文件，而metadata指定仅预加载元数据信息（例如，音频文件的歌曲标题、作者等信息）。

您可以同时启用多个参数。只需在代码controls="controls"之后每次按下空格键以激活 HTML5 代码提示，然后重复其他代码。因此，您可以有一个自动播放和循环的音轨，例如。

记住，要根据您拥有的音频和访问者对您网站的偏好来选择最合适的内容。请记住，许多访问者不希望在他们进入网站的主页时自动播放声音。他们可能正在工作，或者可能不希望开启声音。除非是他们期望有声音的链接页面，否则对于您的访问者来说，让音频成为他们可以选择打开的内容，而不是他们必须选择关闭的内容，更加体贴。

嵌入 HTML5 音频

在接下来的部分中，我们将逐步介绍如何使用 HTML5 音频元素嵌入 MP3 音频文件，并为那些浏览器不支持 HTML5 的访问者提供选项。我假设您正在 Dreamweaver 网站上工作，并且已经打开了一个文件，保存为 HTML5 网页（首先保存文件非常重要，以确保与音频文件的链接的完整性）。而且，您已经准备好要嵌入的 MP3 音频文件。

将这些部分放在一起，这些步骤将起作用：

1. 在 Dreamweaver 文档窗口中，切换到分割视图，在分割视图的代码侧，单击要创建新代码行的位置。这可以是在<body>和</body>标签之间的任何位置。

2. 开始输入<audio>。在过程中输入几个字母后，您可以按Tab键来完成元素的开头。然后按下空格键。

3. 双击src，如图所示。将出现一个浏览链接：

4. 双击浏览链接以打开选择文件对话框，然后导航到并选择 MP3 音频文件。

5. 再次按下空格键，并在出现的代码提示中双击controls。然后在下一个代码提示中再次双击controls。

6. 键入</，Dreamweaver 将完成关闭元素</audio>。

7. 现在，为了支持非 HTML 浏览器，在您的网页上添加一行文本，其中包含一个链接，链接到您刚刚使用 HTML5 <audio>标签嵌入的音频文件。要做到这一点，找到一个插入点（在分割视图的代码侧面点击鼠标，就在关闭音频元素的</audio>代码之前）。键入一个闭合的尖括号（>）来完成元素。然后键入Listen to the audio file作为常规 HTML 文本，并使用属性检查器将音频文件链接到您使用 HTML5 <audio>标签嵌入的文本。

提示

此代码为支持 HTML5 的浏览器提供了无缝的 HTML5 音频，可以处理 MP3 文件，并为其他所有人提供了 MP3 文件的链接。

嵌入本机视频

接下来，我们将学习如何使用 HTML5 和 Dreamweaver 向网页添加不同类型的视频。

在线视频正在经历一场彻底的演变。这些变化可以非常简要地总结为以下几点：您不再需要插件播放器。Dreamweaver 为嵌入本机视频（所谓的因为它在本机浏览器环境中播放，无需插件）提供了有限但有价值的支持。

我们将通过几个步骤学习如何使用 HTML5 视频元素：

• 理解本机视频的概念，以及它与网络视频发展的早期演变步骤有关，还有哪种视频格式适用于哪种浏览器。

• 创建 HTML5 就绪的数字视频文件。

• 使用<video>标签在 Dreamweaver 中嵌入视频。

• 为不兼容 HTML5 的浏览器提供替代选项。

• 定义额外的视频显示参数。

提示

我们需要完成这些步骤，以确保我们网站中包含的 HTML5 视频在每个浏览环境中都能正常工作。

HTML5 视频和 Dreamweaver

要理解当今呈现在线视频的挑战，将事物框架化为迄今为止网络视频的演变是很有启发性的。首先，旧的网络视频仍然是一个问题，旧的浏览器也是一个问题。我们必须解决在支持当前标准的新浏览器和不支持的旧浏览器中呈现视频的挑战。

此外，没有对竞争在线视频格式的当前相当疯狂的状态进行锚定，就很难理解这一切是如何出现的。

为了解决所有这些问题，将新兴的在线视频分为三个阶段是有用的。

早期视频格式

在线视频的第一个阶段的特点是不同的、不兼容的视频格式和播放器的扩散。苹果的 QuickTime 视频在 QuickTime 播放器中播放，该播放器随苹果的 Safari 浏览器一起提供。微软的 Internet Explorer 播放各种微软视频格式，如 AVI 或 WMF。通常，网页设计师在网站中包含 QuickTime 视频，期望只有 Mac 用户能够看到视频，或者包含 Windows Media 格式，如 WMV 或 AVI，期望只有安装了适当更新的 Windows Media Player 的用户能够处理视频。在这个阶段，其他格式，如 RealMedia 的视频和播放器，在一段时间内也获得了一定的影响力。

在早期阶段，缺乏单一的在线视频格式是影响网络视频的边缘化因素之一。此外，缺乏大量使用高速连接的用户使在线视频变得不那么吸引人。在笔记本电脑和数字设备上显示低质量的视频和音频也是另一个因素。网络视频从今天的网站的组成部分，以及相应缺乏高质量的在线视频内容，使网络视频成为网页设计中的边缘元素。

从文化和技术上讲，网络视频在这一点上是一种“局外人”，需要长时间等待下载，并向用户解释如何观看视频，正如我在 2002 年为喜马拉雅集市创建的以下网站所示：

在 HTML 和 Dreamweaver 技术方面，<embed>标签用于在页面上放置视频。这个标签允许设计师对播放器控件和其他参数（如autoplay）进行一些控制，但视频的播放方式（以及是否播放）主要由用户的浏览器定义，以及他/她在该浏览器中安装的插件。

Flash 视频（FLV）

在我们这里划分的在线视频演变的第二阶段标志着视频融入到每种网站的每个领域中。

视频进入网络主流的一个关键因素是 Adobe 的 Flash Video（FLV）格式的出现和 Flash Player 的广泛接受。FLV 以高度压缩的形式呈现视频，大大减小了文件大小（通常比 QuickTime 小一半），同时保持良好的视频和音频质量。

FLV 文件需要 Flash Player，但在这个 Web 的阶段，几乎每个人都安装了 Flash Player。特别是在 CS4 和 CS5 中，Dreamweaver 包括了漂亮、可定制的基于菜单驱动的 Flash Player 设计工具。Dreamweaver 设计师可以在嵌入 Flash 视频时从各种 Flash 播放器皮肤中进行选择。下面的截图显示了一个极简主义的播放器皮肤：

与 FLV 的崛起和对 Flash Player 的几乎普遍支持相交汇的是高速互联网连接的可用性和视频内容的大量增加。YouTube 的即时流行，其中包括 FLV 视频，是这些现象的表达和推动力。这些发展，仍然是网络视频的一个重要元素，将网络视频从边缘转变为主流。

在 HTML 和 Dreamweaver 方面，FLV 将被嵌入页面中使用<object>标签。但视频播放器的外观以及参数的属性（如自动播放或循环）是在 Dreamweaver 的文档窗口中的属性面板中为所选的 FLV 视频定义的。

使用 FLV 视频的主要缺点是它不受 iPhone、iPod Touch 或 iPad（或 iPod）的支持。接下来我将解释这种情况是如何发展的，以及对使用视频的网页设计师的影响。

苹果设备和网络视频

在线视频的参数，以 Flash Video 作为凝聚元素，似乎是明确的、相对稳定的，并且被全球接受。直到…2010 年 4 月，史蒂夫·乔布斯发表了《关于 Flash 的想法》。这封信的核心是阐明并永久确立了苹果公司的立场，即它永远不会在其 i 设备上支持 Flash Player：

“移动时代是关于低功耗设备、触摸界面和开放网络标准的，这些都是 Flash 的短板。提供其内容给苹果移动设备的媒体机构的大量增加表明，Flash 不再是观看视频或消费任何类型的网络内容的必要条件。”

这个决定是在乔布斯宣布之际做出的，尽管如此，例如在 Hulu 和 YouTube 等网站上，大部分在线视频仍然是 Flash Video。试图观看这些网站上的视频的人通常会收到如下截图中所示的消息：

苹果公司全力支持h.264格式来打包压缩视频。这种格式本质上使用了与 Flash Video 相同的压缩技术，但它是通过浏览器而不是插件播放器来适应播放器的显示和控制。

撇开这个决定的权力政治和经济维度不谈，基本的技术和设计问题是苹果不希望在其数字设备上扩展有限的能源资源在 Flash Player 上，并且苹果认为视频播放器应该是“本地的”，而不是像 Flash Player 中那样在每个操作系统和浏览器上看起来基本相同的全球跨平台界面。

在苹果宣布之后的一年内，提供在线视频的关键群体已经开始向本机视频倾斜。但 FLV 仍然广泛分布在网上。因此，使用 Dreamweaver 的网页设计师面临着嵌入本机视频的挑战。

准备本机视频文件

本机视频是以 HTML5 的<video>元素（标签）呈现的。在本章中，我们的任务就是实现这一点，并很快我们将探讨 Dreamweaver 中用于嵌入视频的工具。

在我们做到这一点之前，让我们确定开发者在提供本机视频时面临的两个主要挑战。一个是不只有一个本机视频格式，而是有三种。第二个挑战是旧版本的 Internet Explorer（8 及更早版本）不支持 HTML5 的<video>元素。

本机视频格式

三种最广泛支持的本机视频格式是：MP4（h.264），由 Safari 支持；Theora OGG，由 Mozilla Firefox 支持的开源视频格式；以及 WebM，由 Google Chrome、Opera 支持，并据报道很快也会在 Firefox 中支持。

以下是当前支持哪种视频格式的浏览器的更详细的分析：

• Ogg：Firefox，Chrome，Opera 10.5+

• h.264（MP4）：Internet Explorer 9+，Safari，旧版本的 Chrome，苹果移动设备，安卓设备

• WebM：Chrome 6+，Opera 10.6+

但请记住，所有这些都是一个不断变化的目标。

正如你所看到的，没有一种视频格式被所有主要浏览器支持。特别是，Firefox 和 Chrome（在浏览器市场上占有相当大的份额）不支持h.264视频格式。

我们将通过提供具有相同参数（位置、播放器控制显示等）的备用视频来解决这一挑战。

不支持 HTML5 的浏览器

提供备用视频格式将解决我们的本机视频在所有 HTML5 浏览器中显示的问题。但是旧版本的 Internet Explorer（IE 9 之前）不支持 HTML5！

在讨论嵌入本机视频的细节时，我们将为不支持 HTML5 的浏览器构建备用支持。我们将通过制作 FLV 格式的视频版本来实现这一点。

为每种情况准备 HTML5 视频

如果你选择只提供 Web 上可用的一种流行视频格式，你将排除很大一部分人观看你的视频。例如，如果你选择在苹果移动设备上支持的h.264格式，那么大约 30%的用户无法在 Firefox 上观看该视频。相反，如果你提供 Flash 视频（FLV），你的视频可以在 Firefox 中观看，但不能被 5%的在 i 设备上浏览网页的用户观看。

因此，我们的挑战是提供快速下载、压缩的网络视频，在每个浏览器（或至少是每个重要的浏览环境）中都得到支持。

没问题！在本章结束时，你将能够在 Dreamweaver 中做到这一点。

为 Web 压缩视频

让我们回到之前讨论的网络视频发展。链条中的一个关键环节是为网络视频开发强大、有效的压缩技术。简要解释一下这是如何工作的可能会有所帮助。

视频动画——无论是数字的还是老式的模拟（比如电影）——都是以帧的形式呈现的。每秒显示的帧数越多，动画就越流畅。

视频压缩通过合理化帧数据保存的方式来减小数字视频的大小，而不是减少帧数。例如，假设你有一个人在背景下说话的视频。也许在整个视频中背景都没有变化。视频压缩软件通过组织用于描绘背景的数据的方式来紧缩呈现该视频所需的数字数据，这样就不必为视频的每一帧重复这些数据。

注意

我在这里使用了一个非常简单的例子来帮助阐明一个观点，但这个观点更广泛地适用于更复杂背景的视频。而且，作为一个一般的经验法则，压缩可以将文件大小减少约一半，同时保持原始质量。

在典型的工作流程中，您可能会从 QuickTime 的 MOV 格式（或 Microsoft 的 AVI 格式）开始处理视频文件。这些视频直接来自视频摄像机，或者来自视频编辑软件，都是未经压缩的。它们可以直接在线呈现，除非：

• 它们是不必要的大，会使下载时间翻倍。

• 除非浏览器添加了插件，否则并非所有浏览器都支持它们，而我们正试图摆脱这一点

因此，在您或其他人以无压缩格式创建视频之后，为了准备将该视频用于 Web，过程中的关键一步是对其进行压缩。

视频压缩-开源和专有

在 Web 上使用的四种最流行的压缩数字视频格式大致分为两组：开源和专有。专有格式是有所有权和许可的，而开源格式对公众免费。

WebM 和 Ogg Theora 是免费的开源视频格式。要创建它们，您可以使用各种免费编码程序。

Flash Video (FLV)和 h.264 不是开源的，而是专有的。要生成它们，我们可以使用 Adobe Media Encoder。

虽然创建原始无压缩视频的四个额外（压缩）版本（来自 QuickTime 或 Windows Media 格式）有点麻烦，但是可以做到。

使用开源工具将视频转换为 Web 格式

有许多免费可下载的应用程序，可以将您的（原始的）QuickTime 或 Windows Media 文件转换为压缩的 Theora OGG 或 WebM。

注意

我目前正在使用一个叫做Miro Video Converter的应用程序（www.mirovideoconverter.com），这是一个不错的，免费可下载的应用程序。

无论您最终使用哪个免费视频压缩应用程序，该过程都包括两个步骤：将视频添加到缓存以进行转换，并选择输出格式（例如h.264），如下面的屏幕截图所示（在这种情况下是使用 Miro Video Converter）：

当然，这两个一般步骤将根据您最终使用的开源视频转换程序而有所不同。一般来说，这些免费视频压缩应用程序非常简单。它们不提供编辑、调整大小或调整压缩视频质量的选项。因此，我建议使用它们来转换您的 Web 视频的开源版本（Theora OGG 和 WebM），而不是 Flash 视频（FLV）和 h.264（MP4）版本的视频。

为此，我建议利用几乎每个 Creative Suite 版本都附带的 Adobe Media Encoder。

Dreamweaver 网站管理 HTML5 视频

现在，经过探讨了为 HTML5 准备视频的过程，让我们简要地看一下如何准备充分利用 Dreamweaver 在这个过程中的优势。

Dreamweaver 在嵌入 HTML5 视频方面有两种方式。一种方式是，Dreamweaver 将提供有用的代码提示，以便更轻松地创建我们需要的 HTML5 代码。

但 Dreamweaver 在这个过程中的另一个价值在于，网站管理工具将跟踪我们需要的所有文件，最重要的是，维护我们在嵌入视频和其他文件（CSS，可能的 JavaScript，嵌入式图像等）之间创建的链接的完整性，以便在浏览器中正确地运行我们的页面。

因此，作为一个关键的下一步，请确保您正在使用 Dreamweaver 网站。正如我们在之前的章节中所讨论的，我们将在这里以三个简单的步骤回顾涉及其中的基本知识：

1. 如果您没有在定义的 Dreamweaver 站点中工作，请导航到 Site | New Site。在 Site Setup 对话框中，为您的新站点命名并定义一个本地站点文件夹。这样可以定义一个 Dreamweaver 站点。在 Dreamweaver 网页中嵌入 HTML5 视频并不需要定义站点的服务器元素，但是定义本地站点是必要的。

2. 现在创建一个新文件，并将其保存在您定义的站点中。为此，导航到 File | New 以打开 New Document 对话框。在 Category 列中选择 Blank Page，在 Page Type 列中选择 HTML，在 Layout 列中选择 。从 Doc Type 弹出菜单中选择 HTML5。单击 Create 创建一个新的空白 Dreamweaver 页面。

3. 为了避免 Untitled 页面标题，输入 Document 窗口中的 Title 区域中的标题（可以是任何描述性文本）是一个很好的管理方式。

4. 导航到 File | Save 并分配一个文件名。

提示

通过保存文件，我们将能够使用相对路径链接视频。

定义 HTML5 的 元素

一旦您准备好了 Dreamweaver 站点，并创建了视频的 h.264、OGG、WebM 和 FLV 版本，您就拥有了嵌入本机 HTML5 视频和为不支持 HTML5 的浏览器提供替代方案所需的所有元素。

在接下来的步骤中，您将完成在 HTML5 网页中放置视频的过程。

遗憾的是，我们无法在 Design 视图中进行这项操作。Dreamweaver 没有用于嵌入 HTML5 本机视频的 Design 视图菜单选项。但是我们可以利用 Dreamweaver Document 窗口中的两个有用功能：Code hinting 和 Split view。代码提示将帮助我们生成所需的 HTML5 代码，而分割视图将允许我们在创建视频时预览访问者可能看到视频的一些可能方式。

先决条件

为了复习和重申这些事项，您在创建 Dreamweaver 中的 HTML5 视频之前需要以下准备：

• 您应该已经准备好了您视频的 h.264（mp4）；Theora（OGG）；WebM（webm）和 Flash 视频（FLV）版本。您可以选择为前三种 HTML5 兼容格式中的一种或多种提供支持。如果您为 h.264 和 OGG 提供支持，几乎可以覆盖所有现代浏览器。

• 您必须创建一个 Dreamweaver 站点，并在 Dreamweaver Document 窗口中保存为 HTML5 文件的打开页面。在 Split 视图中查看页面。

• 将所有视频文件复制到您定义的站点文件夹中的一个文件夹中。如果您将视频文件保存在其他位置，Dreamweaver 将提示您在站点文件夹中创建视频的副本，但在此阶段将视频文件的副本创建在站点文件夹中可以节省步骤并简化操作。

定义 元素

在保存的 HTML5 页面中，在开头的 <body> 标签后放置光标。如果您要在已有内容的页面中嵌入视频，请将插入点放在视频应出现的位置。

1. 输入 <vi，代码提示将显示 <video> 标签。

2. 按下 Tab 键完成 <video> 标签的开始。

3. 使用代码提示来添加高度、宽度和控件参数。高度和宽度的值可以与您的视频的原始值匹配，也可以更大或更小。如果值大于原始视频，视频的分辨率将会降低。包括 controls 参数会显示播放器控件（播放、暂停、停止和音量）。生成的代码如下：

<video width="xxxpx" height="yyypx" controls>

（其中 xxx 是视频的宽度，yyy 是高度）

由于我们将支持多种视频格式，我们在这里通过输入关闭了 video 标签。

定义视频属性

HTML5 视频控制器通常显示播放按钮、暂停按钮和静音按钮，以及一个滑块（一个可移动的拇指的水平条，用于在视频播放中向后或向前滚动）。此外，默认情况下，HTML5 视频控件仅在用户将鼠标指针悬停在视频上或视频开始播放时显示。

最重要的视频参数是height、width和controls。controls参数显示这些播放器控件。height和width值后面跟着测量单位，几乎总是像素。

还有其他有用的 HTML5 视频参数，如下所示：

• Audio=muted 在视频开始播放时关闭音量

• Autoplay=autoplay 自动启动视频

• Loop=loop 重复播放视频

• Preload=preload 在页面打开时加载视频，甚至在播放之前

• Poster=[filename]（其中filename是 PNG 图像文件）在视频播放之前显示艺术品

提示

iOS 设置：iPad 无法自动播放 HTML5 视频，苹果不允许其在 iOS 设备上自动播放，因此如果您的受众包括这些设备上的访问者，则不要依赖自动播放。此外，预加载适用于台式机和笔记本电脑，但对移动设备来说资源消耗太大。

尽管准备 HTML5 视频通常意味着呈现多个视频源文件，但其他属性可以一起为它们定义。此外，通常情况下，这就是您想要做的，因为无论访问者查看哪种视频文件格式，视频大小、自动播放状态等属性都是相同的。

这些参数都受代码提示支持，我们将在本章末尾的示例中详细探讨其工作原理。

定义视频源

每个视频源都需要一行单独的 HTML5 代码。这些代码是在 Dreamweaver（安装了 HTML5 包的任何版本）中通过代码提示生成的。

要开始定义视频源，输入<sour，代码提示会建议<source>标签。按下Tab键完成代码。按下空格键。输入sr，代码提示会建议<src>。然后按下Tab键。会出现一个浏览链接。

要查找源视频文件，请双击代码提示提供的浏览链接，以打开选择文件对话框。

然后，转到您从 Media Encoder 导出到 Dreamweaver 站点文件夹的 h.264 视频文件。双击该文件以选择它。

非 HTML5 环境的备用视频

Internet Explorer 9 包括 HTML5 视频支持。然而，许多人仍在较旧版本的 Internet Explorer（IE 8、7 和 6）中观看在线视频。因此，重要的是提供不需要 HTML5 支持的在线视频的替代访问方式。

为了做到这一点，您可以添加一行代码，提供一个 FLV 文件的链接。这行代码应该在<video>标签的参数集的末尾，就在</video>闭合标签之前。以下示例中包含了这行代码。

将所有内容整合在一起

我们将逐步介绍在本章末尾嵌入 HTML5 视频的示例，该示例使用了所有重要的<video>标签参数，并整合了所有三种 HTML5 视频格式，并为非 HTML5 浏览器提供了可访问性。

然而，作为一个简短的课程，以下代码显示了一个带有控件的 320 x 240 视频，包括所有三种 HTML5 视频格式，以及一个供使用较旧版本 IE 的人观看 FLV 视频的选项：

<video width="320px" height="240px" controls> 
<source src="img/on_record.mp4"> 
<source src="img/on_record.theora.ogv"> 
<source src="img/on_record.webm"> 
<a href="Video/on_record_1.flv">Click to watch this video using Flash Player</a>
</video>

测试 HTML5 视频页面

在我们探索 HTML5 视频的过程中，很明显，以 HTML5 呈现在线视频存在重大的兼容性问题。视频是否真的能在各种浏览环境中播放，从 iPad 到 Windows 机器上的 Internet Explorer 6.0？

如果您提供了所有三种 HTML5 视频格式选项，并包括指向 Flash 视频页面的链接，以供不支持 HTML5 视频的访问者使用，您的视频应该可以在任何环境中播放。

在实时视图中预览视频

在 Dreamweaver 中测试视频有两种选项。其中一种是通过导航到文件 | 在浏览器中预览来找到的，它简单地在您自己计算机上安装的浏览器中打开您的页面。这对于在您已经安装的浏览器中测试视频非常有效和有用。

在 Safari 和其他遵循 Webkit 标准的浏览器中（包括苹果移动设备），查看视频是否有效的更快方法是简单地在实时视图中查看和测试视频。如果您在分割视图中工作（这几乎是在 Dreamweaver 中使用 HTML5 视频的必要条件），您可以单击实时视图按钮，并在分割视图的代码侧面看到（和编辑）代码的同时测试您的视频。

嵌入 HTML5 视频

以下示例逐步介绍了使 HTML5 视频在所有三种可用的压缩视频格式中可用所需的一切，以及为较旧版本的 Internet Explorer（6-8 版本）提供 FLV 选项。

与本书中的所有示例一样，第一步是确保您已经定义了 Dreamweaver 网站。有了这个，就可以在站点中创建并保存一个名为video.html的页面。

此处的示例代码使用了我上传到 Vimeo 频道的真实视频文件（NYC 日落）。您可以使用此进行实验。如果您这样做，请通过单击视频的下载按钮从 Vimeo 下载它。

然后，通过使用 Micro Converter 将下载的 h.264（nyc_sunset_424x320.mp4）视频转换为 OGG 和 WebM 的多个版本（有关如何执行此操作的提示，请参见本章的使用开源工具将视频转换为 Web 格式部分）。

将三个视频文件保存在名为video的文件夹中，该文件夹位于站点根文件夹内。

定义了您的站点，保存了一个 HTML5 页面（video.html），并且在站点的视频文件夹中有（下载的）mp4/h.264 视频和（转换的）OGG 和 WebM 视频后，您可以进行以下步骤：

1. 在 Dreamweaver 的文档窗口中，切换到分割视图，在分割视图的代码侧面中，单击您希望创建新代码行的位置。这可以是在<body>和</body>标签之间的任何位置。由于我们正在处理一个全新的文档，请将光标放在第一个<body>标签之后，然后按Enter（Windows）或Return（Mac）创建新的代码行。

2. 开始输入<video元素。在此过程中输入几个字母后，您可以按Tab键来完成元素的开始部分。

3. 添加一个名为controls的视频参数以显示控件。

4. 通过输入>来关闭<video>标签，并按Return创建新的代码行。

5. 通过输入</video>来关闭视频元素。

6. 在打开的video标签之后，但在关闭的video标签之前，使用以下代码行定义第一个视频源：

<source src="img/ nyc_sunset_424x320.mp4">

1. 在这个阶段，您可以在分割视图的设计侧面中的实时视图中看到（和听到！）视频，如下面的屏幕截图所示：

2. 在新的代码行中，输入 HTML5 代码以定义 Theora OGG 视频作为第二个视频源：

<source src="img/video nyc_sunset_424x320.ogv"> 

1. 您可以通过在 Google Chrome 中预览页面来测试第二行代码。如果您安装了该浏览器，可以测试这个。当前版本的 Chrome 不支持 h.264 视频，因此不会识别.mp4文件，但会识别.ogv（OGG）文件。

2. 添加定义第三个视频源的代码行：

<source src="img/nyc_sunset_424x320.webm">

1. 在新的代码行上，只需输入：点击这里观看视频。选择单词这里，并使用插入超链接对话框来定义一个链接到vimeo.com/22366228的链接，该链接将在新的浏览器窗口中打开（从目标弹出窗口中选择**_blank**）。

提示

最后这个链接是我们为那些不支持任何 HTML5 视频的非常老旧的浏览器用户提供的“救援”选项。他们可以在 Vimeo 上观看视频。

1. 随意使用文本或样式装饰页面。或者不用。保存你的文件。如果你可以访问 IE 6、7 或 8，你可以测试非 HTML 版本，或者你可以使用 Adobe BrowserLab 进行测试（文件 | 在浏览器中预览 | Adobe BrowserLab）

我们示例项目的完整代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
</head>
<body>
<video controls>
<source src="img/nyc_sunset_424x320.mp4">
<source src="img/nyc_sunset_424x320.ogv">
<source src="img/nyc_sunset_424x320.webm">
Click <a href="http://vimeo.com/22366228" target="_blank">here</a> to watch the video
</video>
</body>
</html>

总结

在本章中，我们探讨了创建和呈现 HTML5 音频和视频的过程。我们研究了 HTML5 支持的不断发展、不同和竞争的音频和视频压缩选项。此外，我们注意到需要通过创建一个在 HTML5 之前的浏览环境中可以使用的 FLV 文件来呈现我们的视频。

然后，我们使用 Dreamweaver 的工具来嵌入 HTML5 视频。这些工具本质上是代码提示，可以帮助编写 HTML5 <video> 标签及其属性，并且 Live View 可以在编写代码时预览至少 Webkit（Safari）版本的视频。

除了 Dreamweaver 菜单选项的限制外，我们还探讨了使用代码视图来输入我们自己的 HTML5 音频和视频元素。

在下一章中，我们将看到如何在 Dreamweaver 中使用媒体查询。通过这样做，我们将开始涉及本书可能的主要重点，也是今天网页设计师面临的最重要和最激动人心的挑战之一：创建在全尺寸（笔记本/台式机）环境和移动设备（智能手机）中都具有吸引力、诱人和可访问性的网页。