Dreamweaver-CS6-移动和-Web-开发-使用-HTML5-CSS3-和-jQueryMobile-全-

Dreamweaver CS6 移动和 Web 开发：使用 HTML5 CSS3 和 jQueryMobile（全）

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

第六章：使用媒体查询进行响应式设计

这是一个多媒体世界。人们通过各种媒体与网络内容进行体验和互动，从网站的大屏幕投影到手持设备。这给网页设计师带来了特定的挑战。

其中一个挑战是设计页面，使其在不同大小的设备上都能够访问、吸引人并且功能正常。一个页面，内容居中，左右两侧有侧边栏，文本围绕图像流动，在笔记本电脑上可能很吸引人，但在 iPhone 上可能是一团糟。

随着 HTML5 和 CSS3 的出现，可以设计页面来检测查看设备的大小（视口），并呈现为该设备定制的独特页面布局。因此，例如，您可以为页面创建三种不同的视图——一个用于智能手机，一个用于平板电脑，一个用于全尺寸显示器。这种方法被称为响应式设计。实现它的 CSS3 技术是媒体查询。

在本章中，我们将学习如何在 Dreamweaver 中设计页面，检测媒体视口并使用 Dreamweaver 生成的媒体查询，为访问者的查看环境呈现适当的页面设计。

在这样做的同时，我们将：

• 使用 Dreamweaver 的多屏预览窗口预览网站在不同视口中的外观

• 为特定设备自定义多屏预览

• 使用 Dreamweaver 的媒体查询为不同大小的查看设备创建多种样式

多媒体网络世界的网页设计

正如本章介绍中所指出的，最近一段时间以来，人们通过各种媒体与网站进行互动的方式呈现出爆炸式增长，特别是智能手机和平板电脑越来越多地定义了浏览体验。此外，正如所指出的，适合的网页设计可能对于宽屏体验是必要的，但在小屏幕上通常是不合适的，过于混乱，或者在小屏幕上根本无法正常工作。

解决方案是媒体查询——这是 CSS3 中引入的新的 CSS 样式表元素。但在我们研究 CSS3 中的新媒体特性之前，了解导致 CSS3 媒体查询开发的基本演变路径将是有帮助的。这个背景对于理解涉及的概念以及在当前浏览环境中设计（存在新兴但尚未解决的标准冲突）的广泛媒体的需求是有用的。我们将在本章末尾看到这是如何在现实生活中发挥作用的，当我们研究创建媒体查询的特定挑战时，例如，检测苹果 iPhone。

媒体查询的工作原理

让我们来看一个例子。如果你在笔记本电脑宽度的浏览器窗口中打开波士顿环球报（报纸）网站（www.bostonglobe.com/），你会看到一个三栏页面布局（继续，我会等你检查；或者只需查看以下示例）。

三栏布局在笔记本电脑上效果很好。但在较小的视口中，设计会调整以呈现为两栏内容，如下面的截图所示：

两栏布局与三栏布局是同一个 HTML 页面。两个页面的内容（文本、图像、媒体等）是相同的。环球报的工作人员不必为平板电脑或智能手机构建单独的主页。但是一个媒体查询已经链接了一个不同的 CSS 文件，在较窄的视口中显示。

媒体查询的简史

回顾一下，目前（CSS3 之前）的 CSS 版本已经可以检测媒体，并根据媒体启用不同的样式表。此外，Dreamweaver CS6（也适用于 CS5.5、CS5 和之前的版本）为这些功能提供了非常好的直观支持。

在 Dreamweaver 中的工作方式是，当你在 Dreamweaver 的文档窗口中打开一个网页时，点击CSS 样式面板底部的附加样式表图标，附加外部样式表对话框就会出现。

对话框中的媒体弹出窗口允许你附加一个专门设计用于打印、听觉（由读者软件朗读）、盲文、手持设备和其他“传统”输出选项的样式表，以及较新的基于 CSS3 的选项。在 CSS3 之前，手持设备选项如下截图所示是可用的：

因此，总结演变路径，检测媒体并为该媒体提供自定义样式并不是 HTML5 及其伴侣 CSS3 的新功能，Dreamweaver CS6 中也支持这些功能。在 Dreamweaver 中已经可以检测并同步具有定义媒体的样式。

然而，相对较新的是检测并为特定屏幕尺寸提供定义的样式表的能力。这一新功能为特定媒体的定制页面设计打开了新的可能性。

HTML5、CSS3 和媒体查询

使用 HTML5 和 CSS3，媒体查询已经得到了扩展。我们现在可以定义各种选择样式表应用于查看环境的条件，包括方向（手机、平板等是纵向[上下]还是横向[侧向]视图）、设备是否显示颜色、查看区域的形状，以及最有价值的是查看区域的宽度和高度。

所有这些选项都提供了为不同的查看环境创建自定义样式表的多种可能性。实际上，它们打开了一个非常庞大的可能性数组。但对于大多数设计师来说，简单地创建三个适当的样式表，一个用于笔记本/台式机查看，一个用于手机，一个用于平板电脑，就足够了。

为了定义在某个环境中显示哪个样式表，HTML5 和 CSS3 允许我们使用if-then语句。因此，例如，如果我们正在为平板电脑分配样式表，我们可能会指定，如果查看区域的宽度大于手机的宽度，但小于笔记本屏幕的宽度，我们希望应用平板电脑样式表。

为移动设备和平板电脑设计样式

虽然在本书的使命范围内，对于为不同媒体创建样式的审美维度进行全面探讨是不可能的，但值得注意的是，在为移动设备设计样式时，有一些基本的“应该”和“不应该”。

稍后在本章中，我将提供更详细的移动设备样式建议，但总的来说，挑战是：简化。一般来说，这意味着对你的页面应用以下许多或所有的调整：

• 较小的边距

• 更大（更易读）的字体

• 更简单的背景；没有图像背景

• 没有侧边栏或浮动内容（其他内容环绕的内容）

• 通常没有定义页面宽度的容器

注意

在线设计建议：如果你在网上搜索“移动设备的 css”，你会找到成千上万篇文章，其中包含不同的观点和建议，用于设计可以轻松在手持设备上访问的网页。

媒体查询与 jQuery Mobile 和应用程序

在转向使用媒体查询构建具有响应式设计的页面的技术维度之前，让我简要比较和对比一下媒体查询和另外两种用于在全屏和移动设备上显示内容的可用选项。

一个选项是应用程序。应用程序是用高级编程语言创建的完整的计算机程序。Dreamweaver CS6 包括了与在线 PhoneGap 资源连接和生成应用程序的新工具。我们在本书的最后一章第十章中对这个过程进行了比较深入的介绍，使用 PhoneGap 构建应用程序。

第二个选项是 jQuery Mobile 站点。jQuery Mobile 站点是基于 JavaScript 的。但是，正如我们将在本书后面看到的那样，您不需要了解 JavaScript 就可以构建 jQuery Mobile 站点。jQuery Mobile 站点和具有移动友好设计的媒体查询站点之间的主要区别在于，jQuery Mobile 站点需要不同的内容，而媒体查询站点只是使用不同的样式表重新包装相同的内容。

您应该使用哪种方法，媒体查询还是 JavaScript？这是一个判断。我在这里可以提供建议的是，媒体查询提供了创建和维护站点的移动版本的最简单方式。

使用 Multiscreen Preview 进行预览

Dreamweaver 的 Multiscreen Preview 提供了一个即时（虽然不精确）的预览，显示网页在三种不同的视图环境中的外观。

要在Multiscreen Preview中查看打开的网页，可以转到View | Toolbars | Document，或者从Document窗口菜单中转到Window | Multiscreen Preview。这样做时，Multiscreen Preview窗口会打开，并显示三个视图，如下截图所示：

Multiscreen Preview 是一种实时预览。您不能在那里编辑内容，只能预览页面在浏览器中的外观。然而，正如我们将看到的那样，您可以编辑与每个视图相关联的样式表，并在 Multiscreen Preview 中观察效果。

Multiscreen Preview窗口中的三个预设视口尺寸提供了一组相当广泛的屏幕尺寸，用于预览打开页面在智能手机、平板电脑和桌面（或屏幕宽度为 1024 像素或更多的全尺寸笔记本电脑）上的外观。这些宽度设置是一种很好的、一般的预览方式，可以预览页面在不同媒体中的外观。

另一方面，如果您正在为特定的视图环境进行设计，可以自定义这些设置。要做到这一点，点击Multiscreen Preview窗口右上角的Viewport Sizes按钮。这将打开Viewport Sizes对话框。您可以通过更改Width或Height框中的值，并点击OK来更改三个可用视图中的任何一个的宽度（以及手机和平板电脑的高度）。

在Viewport Sizes对话框中，您可能进行的最有用的调整实际上可能是Phone预览的高度。通过将该值稍微增加，您可以更好地了解页面在具有更长视图屏幕的智能手机上的外观。在下面的截图中，Phone预览窗口的高度正在更改为480像素：

当您首次预览页面时，您很可能不会喜欢手机和平板电脑预览窗口中的外观。此时，您可以选择以下两种方法：

• 选择不担心页面在移动设备上的外观和功能，假设这个移动设备是一个很快就会消失的过时潮流

• 您可以使用 Dreamweaver 生成媒体查询，以在移动设备上呈现更具吸引力、易访问的内容

假设您选择了后者，让我们继续探讨如何为手机和平板电脑显示创建样式表，并在适当的环境中应用这些样式表。

在 Dreamweaver CS6 中生成媒体查询

有许多有效的方法和可能的协议可用于在 Dreamweaver CS6 中生成媒体查询的样式集。在介绍一个有效方法之前，让我们先了解一下我们试图实现的目标。

注意

与 Dreamweaver CS5.5 相比，CS6 中创建媒体查询的工具有所增强；因此，使用旧版本 Dreamweaver 的读者会发现下面探讨的一些选项不可用。

基本上，我们需要三套样式表——一个用于手机，一个用于平板电脑，一个用于全尺寸显示器。因为在这一点上，全尺寸显示器仍然是以某种标准方式查看网页内容的，“标准”，而手机和平板电脑的样式可能会更简单，因此有意义的是首先创建一个全尺寸页面的样式表。

换句话说，第一步是创建一个基本的 CSS 样式表，使其在全尺寸台式机或笔记本电脑显示器上打开页面时能够很好地工作。然后，可以生成简化布局的页面变体，适用于手机和平板电脑。

构建备用样式表

正如前面提到的，从样式和可访问性的角度来看，从“全尺寸”网页样式开始，然后构建适用于手机和平板电脑的样式变体是有意义的。

还有一个使用该工作流程的技术原因。请记住，所有三个 CSS 样式表文件将为同一个页面提供样式规则。这意味着所有三个备用 CSS 文件都必须为同一组 HTML 元素和标签提供规则。

例如，如果一个<div>标签在页面上定义了一个主容器，三种媒体（手机、平板和台式机）的样式表都必须定义<div>标签应该如何显示。手机 CSS 的规则可能包括较窄的宽度、更简单的背景颜色和其他属性。但是，关键是所有三个样式表都必须为这个主容器div标签定义规则。对于所有的布局元素，无论是 HTML5 布局元素、<div>标签还是两者的组合，都必须如此。

准备生成媒体查询

准备生成媒体查询的一个有效协议是准备好三个可分配给不同媒体的 CSS 文件。

一个简单的准备工作协议如下：

1. 为您的页面创建一个适用于台式机或笔记本电脑尺寸显示器的基本 CSS 文件。如果您正在从 Dreamweaver CS6 的 HTML5 布局生成页面，您可以使用相应布局附带的 CSS 文件作为“主”布局。

2. 使用文件名如full-size.css保存“主”CSS 文件，然后再保存两次，使用两个不同的文件名（如tablet.css和smartphone.css），创建三个相同的样式表。或者，如果您只想提供两个选项（并且让平板用户看到全尺寸样式），只需保存两个版本的 CSS 文件——full-size.css和smartphone.css。

3. 保存备用样式表后，您可以在多屏预览菜单中自定义它们。

有了三个备用 CSS 文件可供分配和编辑，您就可以开始定义媒体查询了。接下来我们将介绍这个过程。

为不同媒体分配样式

利用 Dreamweaver 构建媒体查询的最佳方式是在多屏预览模式下工作。请记住，这意味着我们在调整样式时不会编辑内容。但这种限制是我们完全可以接受的，事实上，作为一种一般方法，调整内容和样式应该被视为不同的过程。

因此，我们的情景是我们已经为打开的网页打开了多屏预览。并且我们已经准备好了三个不同的 CSS 文件——就像本章稍早讨论的“3 步”协议中所指出的那样。

在 Dreamweaver 站点中至少保存两个 CSS 文件，并在多屏预览中打开网页后，按照以下步骤为每个视图定义自定义样式：

1. 单击媒体查询按钮打开媒体查询对话框。

2. 在编写媒体查询到区域，选择此文档选项。站点范围的媒体查询文件选项较为棘手；它涉及 Dreamweaver 更改所有页面中的代码，并且不太可靠。

3. 保留“强制设备报告实际宽度”复选框选中。这可以克服当不同设备以扭曲其实际宽度的方式定义“像素”时可能引起的混乱。在“媒体查询”对话框中的初始选择应该如下所示：

4. 单击“+”图标添加样式表。所选样式表的“属性”区域变为活动状态：

• 在“描述”字段中，输入描述样式的文本（这是为了你自己的利益，而不是公开展示）。

• 在“最小宽度”字段中，输入一个值，定义了该样式将显示的最窄视口，无论在何处都适用。如果你为智能手机定义 CSS 样式，你不需要任何最小宽度，因为该样式将适用于任何大小的视口。

• 在“最大宽度”字段中，输入一个值，定义了该样式将显示的最宽视口，无论在何处都适用。如果你为全尺寸浏览器定义 CSS 样式，你不需要任何最大宽度，因为该样式将适用于任何大小的视口。

• 在“CSS 文件”区域使用“选择文件”图标导航到并选择一个样式表文件，该文件将适用于符合定义条件的视口，如下面的屏幕截图所示：

1. 重复步骤 4，为媒体查询添加其他样式表。所有相关的样式将如下屏幕截图所示列出：

2. 单击“确定”关闭“媒体查询”对话框，并在“多屏预览”窗口中看到应用了你的媒体查询，如下所示：

3. 在任何时候，你都可以通过选择“窗口”菜单中的“多屏预览”来切换进入或退出“多屏预览”。

为媒体查询格式化 CSS 文件

通过为网页定义媒体查询，我们可以交互地创建和调整每个目标浏览环境的样式。要做到这一点，重新打开页面的多屏预览。

“等等！”你可能会惊叹道，“当多屏预览窗口像文档窗口中的实时视图一样锁定任何内容编辑时，我怎么能编辑页面呢？”。这是一个值得思考的问题，但在这里我们只会编辑 CSS 样式，而不是页面内容。我们可以在“多屏预览”中做到这一点。

要在“多屏预览”中编辑样式，查看“CSS 样式”面板（“窗口”|“CSS 样式”）。附加的样式以及帮助我们记住哪种样式是哪种的括号注释显示在“CSS 样式”面板的上半部分。

你可以通过在“CSS 样式”面板的上半部分点击样式名称旁边的三角形来展开任何这些样式。在下面的屏幕截图中，mobile.css样式被展开。点击样式中的样式规则（在这种情况下是body标签样式的font参数）会在“CSS 样式”面板的下半部分显示该样式的参数。

调整移动设备的 CSS

正如之前指出的，为移动设备设计样式的艺术，嗯，就是一种艺术。而且，正如之前建议的，有大量在线资源对手机和平板样式的包含内容提出意见和建议。但在强调移动设备样式的一些广泛认可的元素之前，重要的是要发出警告：不要从任何样式表文件中删除样式规则。

我们为媒体查询创建三种备用样式表的协议始于一个样式表，从中创建了两个副本。这些样式表以相同的样式规则集“诞生”。

更改这些样式规则的参数是可以的，也是必要的。您可以在手机样式中对容器、文本、背景等进行不同的格式设置。但请记住，您的三种样式都必须与相同的 HTML 文件相匹配，使用相同的 CSS 样式名称来定义格式和布局标签和元素。

至于移动设备的样式，以下技术是广泛适用的：

• 保持字体较大。

• 保持链接易于找到。在全尺寸的网页中，带下划线的链接已经过时，但在手机上很有帮助。

• 在容器中使用较大的边距和/或填充，以便大而粗的手指在手机屏幕上轻松选择小内容。

• 避免使用侧边栏（不要使用float属性）。

• 在手机样式中使用visibility: hidden来隐藏非必要的元素。在下面的屏幕截图中，已经将手机样式中的visibility设置为hidden，并将标题的高度减小为 1 像素，以便出于美观原因创建一条细线间距，这样它就不会占据智能手机屏幕上的宝贵空间。

下面的屏幕截图显示了在多屏预览中应用到同一页面的三个样式表。平板电脑视图只需要进行了一些调整，基本上是减小了布局元素（主容器、侧边栏和标题）的宽度。手机样式需要更多的试验和错误实验，包括删除所有float属性和减小不同元素的宽度。每个样式表也应用了不同的颜色方案，手机样式应用了非常基本的颜色方案（黑色和白色）。

就像减肥产品的广告中所说的，“你的结果可能会有所不同。”这意味着，为手机调整样式表确实需要一些试验和错误。但基本规则仍然是：简单。通常，消除浮动（使内容不出现在第二列中）是第一步。

为智能手机定义媒体查询

在这个例子中，我们将逐步介绍如何使用 Dreamweaver 灵活且非常有用的三列 HTML5 布局。我们将创建一个媒体查询，以在更适合手机的布局中显示这两列内容，而不需要列或侧边栏。

一如既往，起始假设是您正在 Dreamweaver 网站中工作（如果没有，请参阅第一章, 使用 Dreamweaver CS6 创建站点和页面）。有了定义的站点，以下步骤将为您的手机页面生成一个漂亮、适当的极简布局：

1. 转到文件|新建。在新建文档对话框中，选择空白页类别。从页面类型列中选择HTML，并从布局列中选择第一个 HTML5 布局，2 列固定，居中。在新建文档对话框中，将布局 CSS弹出选择保留在创建新文件。确保附加 CSS 文件框中没有选择任何文件（如果有，请使用垃圾桶图标将其删除）。设置好这些设置后，点击创建。

2. 另存样式表文件为对话框打开。将保存的样式表名称更改为fullsize.css，然后点击保存将样式表保存到您站点的文件夹中。

3. 网页在 Dreamweaver文档窗口中打开。让我们对内容进行两次编辑：

• 删除www.adobe.com/go/adc_css_layouts链接。该链接过长，特别是对于手机来说。如果（在现实生活中）我们想要链接到一个具有很长 URL 的网站，我们可以通过转到插入|超链接来将链接分配给更短的文本。

• 在标题区域，键入全尺寸...还是手机？。

1. 转到文件|保存，将编辑后的 HTML 页面保存为2_views.html。

2. 接下来，我们将创建一个 CSS 文件，用于在移动设备上显示内容。转到文件 | 新建。在新建文档对话框中，从页面类型列表中选择CSS，然后单击创建按钮。转到文件 | 保存，将新的空白 CSS 文件保存为mobile.css。将原始的fullsize.css文件中的所有代码复制并粘贴到新的mobile.css文件中。接下来我们将编辑这些样式。

3. 返回到文档窗口中的2_views.html页面。您可以通过单击文档窗口顶部的文件选项卡栏中的文件，或者使用窗口菜单来执行此操作。

4. 转到窗口 | 多屏预览；在多屏预览中单击媒体查询按钮以打开媒体查询对话框。

5. 对于平板电脑和全尺寸计算机，为了举例，我们将简单地显示已附加的 CSS 文件（fullsize.css）。单击+图标添加样式表。属性区域将激活新样式表：

• 在描述字段中输入全尺寸。

• 在最小宽度字段中输入960。此样式将仅应用于宽度至少为 960 像素的视口。

• 将最大宽度字段留空。因为我们正在为全尺寸浏览器定义 CSS 样式，所以不希望设置最大宽度；无论视口有多宽，都将应用此样式。

• 在CSS 文件区域使用选择文件图标导航并选择fullsize.css样式表文件，该文件将应用于符合定义条件的视口。

1. 对于智能手机，我们将显示在第五步中创建的mobile.css文件。单击“+”图标添加样式表。属性区域将激活新样式表。

• 在描述字段中输入移动。

• 将最小宽度字段留空。此样式将应用于宽度小于 960 像素的视口。

• 在最大宽度字段中输入960。因为我们正在为手机定义 CSS 样式，所以不希望此样式表在宽度大于 960 像素的视口中显示。

• 在CSS 文件区域使用选择文件图标导航并选择mobile.css样式表文件，该文件将应用于符合定义条件的视口。

1. 在多屏预览中查看页面布局；全屏视口的布局还不错。但是页面布局和颜色在移动设备上效果不佳。让我们在页面的移动版本中进行一些调整，如下所示：

• 将body标签的字体大小更改为150%，为移动设备提供更大的文本，如下所示：

• 我们希望在我们的移动样式的每个样式规则中删除所有width和float参数。这些width和float参数会创建列，以及内容不会填满页面的整个宽度，使得在移动电话上显示变得不可访问和不吸引人。浏览mobile.css样式表中的每个样式，并单击width或float参数的左侧以将该代码转换为注释，如下所示：

• 考虑调整颜色方案，以在移动电话用户遇到不同照明条件（包括明亮、户外和阳光）下使页面更易于阅读和导航。以下示例显示导航元素分配了更高的对比度：

1. 就是这样！我们还可以进行更多微调，但要记住，在为移动设备设计时，少即是多。退出多屏预览（转到窗口 | 多屏预览取消选择此视图）。保存对 CSS 的更改后的页面。

调查替代方法

在本章中，我们专注于使用 Dreamweaver 的多屏预览窗口和媒体查询对话框创建媒体查询。

另一种定义媒体查询的方法是在单个 CSS 文件中创建它们。这种方法的优点是所有视口的样式都在同一个 CSS 文件中。缺点是这会使 CSS 文件变得两倍、三倍，甚至四倍（或更多）的长，臃肿且难以编辑。总的来说，我认为在大多数情况下，我们迄今为止采取的方法更容易管理，但由于 Dreamweaver 包含一个使用单 CSS 文件方法的大型模板，让我们看看这是如何运作的。

在 CSS 文件中定义媒体查询的语法是：

@media only screen and (value)

值可以包括 max-width、min-width 或两者兼有。

在此示例中，body标签的背景颜色在480像素或更少的视口上为黄色，在481像素或更多的视口上为绿色：

@media only screen and (max-width: 480px) 
{
body {  background-color: yellow;}
}

@media only screen and (min-width: 481px) 
{
body {background-color: green;}
}

正如我所指出的，Dreamweaver CS6 包含一个庞大而复杂的示例页面，其中包括在同一 CSS 文件中为多个视口定义样式的 CSS 文件，以及 JavaScript。

再次强调，Dreamweaver 的流体网格布局是一个具体（且复杂）的示例，例如，使用在单个 CSS 文件中为多个视口定义样式的媒体查询技术。

与所有 Dreamweaver 示例页面一样，您可以将此页面用于教育和灵感；它有很好的文档（除了 JavaScript）。如果您有兴趣查看此示例，请转到文件 | 新流体网格布局，并在新文档对话框中探索此页面示例的选项。

总结

HTML 和 CSS 的旧版本允许媒体查询识别包括打印机、盲文阅读器和音频阅读器在内的输出设备。CSS3 的新添加允许媒体查询检测屏幕大小（以像素为单位）以及浏览环境的其他更神秘的属性。

Dreamweaver CS6 的多屏预览和媒体查询对话框共同工作，预览和编辑同一 HTML 页面内容在智能手机、平板电脑和全尺寸监视器上的显示方式。

在本书的下一章中，我们将开始探索创建移动友好网站的不同方法：jQuery Mobile。jQuery Mobile 方法为移动网站提供了更动态、更有吸引力的样式，但正如您将在第七章中看到的那样，使用 jQuery Mobile 创建移动页面，它需要为全尺寸和移动站点分别提供内容。

第七章：使用 jQuery Mobile 创建移动页面

作为网页设计顾问，我经常花时间研究统计趋势-谁在使用网络？做什么？在什么浏览环境中？但您可能不需要我的研究摘要，就知道使用移动设备的人在数量和影响上构成了网络活动的动态因素。我将分享一个统计数据，这是我从许多调查中整理出来的：随着我们的书的这一版本付印，大约一半的网站访问将来自移动设备。在娱乐和餐厅等类别中，使用移动设备进行网页浏览的数量已经是压倒性的。

他们是用网页浏览器做这个吗？还是应用程序？两者都有。但在游戏的这个阶段，移动网站为开发人员提供了一种更加可访问的技术。您可以并且将会使用 jQuery Mobile 创建完全移动设备友好的网站，看起来和感觉像应用程序，但不需要涉及构建应用程序的高级编码。

这不是我们第一次面对为多种媒体设计的挑战。在第六章中，我们开始探讨使用 HTML5 的媒体查询构建的页面，以呈现相同的内容，但在全尺寸、移动和平板尺寸的页面上具有不同的样式。在第五章中，我们探讨了使用 HTML5 音频和视频在网页中嵌入移动设备友好（非 Flash）的视频。

jQuery Mobile 页面提供了一种更激进的方法来创建移动设备友好的内容，而不仅仅是使用媒体查询和移动设备友好的视频。jQuery Mobile 页面涉及为移动设备创建不同、独特的内容（通常是更短、更压缩的内容），并以与面向台式电脑和笔记本电脑用户的网站截然不同的方式呈现该内容。我们将在下面探讨这意味着什么。

本章涵盖以下主题：

• 移动设备设计-概述

• 应用程序和移动页面

• 移动网络的三个组成部分：HTML5、CSS 和 jQuery Mobile

• 在 Dreamweaver 中使用 jQuery Mobile

• 从起始页生成移动设备就绪页面

• 自定义移动设备起始页内容

• 添加“页面”

• 自定义移动页面 CSS

移动页面-概述

设计移动网站所涉及的原则可以归结为一个词：简单。

移动网站的设计必须简单。人们在小型设备上查看和与它们交互。正因为如此，在笔记本电脑或台式电脑上效果良好的列、侧边栏和复杂背景在移动设备上是不吸引人和不可访问的。

在设计移动设备时，“简单”的第二个维度是，网站不能装满插件（如 Flash）、服务器端脚本（如 PHP）或复杂的导航方案。这些功能中的一些在某些移动设备上受到支持（Flash 在某些 Android 操作系统的版本中受到支持），但大多数不受支持。此外，移动设备的处理能力、电池寿命和其他限制有限，这让我们回到了关键词：简单。

一方面是笔记本电脑和台式电脑，另一方面是移动设备，它们具有完全不同的界面特点。显然，在大多数情况下，台式电脑/笔记本电脑的视口（屏幕）更宽。因此，多列页面布局不仅可能，而且通常是必要的，以呈现吸引人的内容。这在手机上并不是这样，甚至在大型平板电脑上也不是这样。

台式电脑和笔记本电脑配有鼠标或某种可以悬停在对象上的悬停设备；移动设备配有可以调整大小或滚动的触摸屏。

花些时间在全尺寸视口和移动设备上检查您喜欢的网站。您会发现，专业设计的网站有一个单独的移动页面，考虑到了这些因素。例如，YouTube 在笔记本电脑上呈现多列网格，并利用悬停来允许用户在页面上悬停在元素上时获取弹出内容。

另一方面，如果您在 iPhone 上访问 YouTube，您将体验到一个不依赖悬停的单列网站。

移动页面、应用程序和 jQuery Mobile

在本章的介绍中，我简要指出了使用响应式设计（媒体查询）、jQuery Mobile 和应用程序来呈现移动可访问页面之间的关系。让我稍微扩展一下：

• 响应式设计是从开发的角度来看，实现移动友好内容的最简单方法，因为使用这种方法，您可以在所有页面上使用相同的内容，只需呈现不同的页面布局。

• jQuery Mobile 需要更多的工作，因为它涉及为移动页面提供不同于全屏访问者所提供的内容。另一方面，jQuery Mobile 网站有许多优势，比如：

• 它们下载速度更快

• 它们为移动用户提供了引人入胜的动画和互动

• 它们允许使用特殊的、适合移动设备的导航元素

• 它们启用在小屏幕上更好地工作的表单元素。

注意

本章的其余部分将带您了解它是如何工作的

• 应用程序看起来和操作起来很像 jQuery Mobile 页面，但是它们需要另一个层次的专业知识和资源来进行创建和维护。应用程序是用 Objective-C 编程语言或其他复杂的编程语言编写的。我们将在本书的最后一章深入探讨 PhoneGap。

虽然应用程序开发对于具有相对无限开发资源的主要机构或其主要目标是在 iTunes 上出售应用程序的人是有意义的，但绝大多数网站最适合使用响应式设计或 jQuery Mobile。

什么是 jQuery Mobile？

jQuery 是一个基于 JavaScript 的对象库。JavaScript 在任何浏览器或操作系统中都可以工作。它是一个开源（免费）软件。

好吧，JavaScript 是什么？库又是什么？

JavaScript 是一种客户端脚本语言。也就是说，它是一种在浏览器中运行的创建动画和互动的编程语言（“客户端”更多或多少是一个技术术语，表示浏览器）。另一种说法是：JavaScript（几乎总是）在用户的计算机上运行，而不是在服务器上。

JavaScript 一直是 Dreamweaver 的一部分，就像 Dreamweaver 存在一样。相当被遗弃的行为面板生成 JavaScript。Spry 小部件（在较早版本的 Dreamweaver 中引入）是基于 JavaScript 的。在网页设计的另一个维度中，也就是在 Dreamweaver 之外，jQuery 已经发展成为一组相对易于访问的可定制的 JavaScript 对象。现在当我说相对易于访问时，我的意思是通过 jQuery 库实现 JavaScript 仍然需要编辑 JavaScript 代码。

在我们这里使用这个词的语境中，库通常是 HTML、CSS 和编程语言的组合。从这些库中得到的是一组文件：一个或多个 HTML 文件，一个或多个 CSS 文件，以及一个或多个程序文件，用于为 HTML 和 CSS 添加动画和互动。这些文件一起工作——您需要 HTML、CSS 和程序脚本来使库元素工作。

随着移动设备的出现，出现了一个独特的 JavaScript 库——jQuery Mobile，其中包含一组在设计移动设备时特别有用的对象。

从 Dreamweaver 起始页创建移动页面

在 Dreamweaver 的设计视图中有一小部分非常重要的 jQuery Mobile 对象。它们不需要编码！其中最常用的对象已经捆绑到一个非常方便的可定制的起始页面集中。在本章中，我们将使用这些起始页创建页面，检查它们，并自定义控制这些页面的内容和外观的 HTML 和 CSS。

Dreamweaver 中的移动起始页中的 jQuery 对象本身是不可定制的。在这方面，它们与 Dreamweaver 中的 Spry 小部件有些不同，您通常可以自定义其中一些 JavaScript 本身。但正如我们将看到的，这不会是一个大问题，因为您可以通过编辑与 jQuery Mobile 对象相关的 HTML 和 CSS 来完成大部分您可以想象的自定义。

这是如何工作的？Dreamweaver 设置了工具，使我们能够自定义 jQuery Mobile 对象，而不必担心底层发生了什么。但作为非常基本的基础，了解 JavaScript（这适用于 Spry 和 jQuery Mobile 对象）是如何在 HTML 对象（例如标签，通常包括div标签）上工作的，或者在定义的 CSS 样式属性上工作的，这是有帮助的。

例如，当单击（或在移动设备上轻触）时，jQuery 对象可能会更改其背景颜色。但是，这些颜色——无论是之前还是之后——都是在关联的 CSS 规则中定义的，可以在CSS 样式面板中访问到。此外，该对象中的内容（文本、图像、媒体）是由您在 Dreamweaver 的设计视图中创建的 HTML 定义的。

Dreamweaver 带有三个基于 jQuery Mobile 的起始页面：jQuery Mobile（CDN）、jQuery Mobile（本地）和带有主题的 jQuery Mobile（本地）。您可以通过导航到文件 | 新建，并在左侧列中从示例中选择页面，在示例文件夹列中从移动起始页中选择这些选项，以打开新文档对话框。

jQuery Mobile 示例页面有哪三个选项？

• jQuery Mobile（CDN）使用存储和分发通过专门提供 jQuery Mobile 的中央分发网络（CDN）的 JavaScript 和 CSS 的版本。这是在 jQuery Mobile 中构建页面最可靠和稳定的方式，因为中心分发的文件不会被您的任何操作损坏。此外，随着 JavaScript 和 CSS 文件的新版本推出，您可以更新到它们的链接。缺点是，除非您在线，否则无法在 Dreamweaver 中工作于您的 jQuery Mobile 站点。

• jQuery Mobile（本地）使用 Dreamweaver 提供的 JavaScript 和 CSS 版本。这些文件更容易损坏，因为它们存储在您的计算机上（并上传到您的服务器）。但是，在您没有互联网访问权限的情况下，您可以在 Dreamweaver 中使用它们来开发 jQuery Mobile 站点。

• 带有主题的 jQuery Mobile（本地）选项是 Dreamweaver CS6 中的新功能，是 Adobe 为了更容易编辑 jQuery Mobile 站点的主题而尝试的。主题是定义字体、颜色和其他样式选项的必需 CSS 部分。我的经验是使用其他选项更容易和可靠，并且您可以避免使用此选项。但是当我们在第九章中详细探讨自定义主题时，我们将回到这些问题。

提示

在大多数情况下，使用jQuery Mobile（CDN）选项开始创建新的 jQuery Mobile 站点。

在新文档对话框中单击创建按钮后，基于 jQuery Mobile 的网页将在 Dreamweaver 文档窗口中打开。

分割视图中的移动页面

编辑和预览 jQuery Mobile 页面提出了一个特定的挑战：您无法真正看到页面的外观，而不进入实时视图，因为使页面工作的 jQuery Mobile 应用程序不会显示在实时视图中。但另一方面，您无法在打开实时视图的情况下在设计视图中编辑 jQuery Mobile 页面的内容。

处理这个挑战有两个选项：

• 您可以在“实时”视图中来回切换，关闭（编辑页面）或打开（查看页面）

• 您可以在“设计”窗口中保持“实时”视图打开，并在“代码”视图中进行编辑

在本书中，我们将使用并结合这两种技术。为此，最有用的是在分割视图中检查页面，有两个原因。在分割视图中，您既可以检查 HTML 代码，又可以看到页面预览，就像在浏览器中看到的那样。此外，您可以在较窄的预览窗口中查看页面，这将更接近模拟移动设备中页面的外观。

在为移动设备设计时，利用“设计”半部分的“分割”视图底部的“窗口大小”弹出窗口特别有用，并将“预览”窗口的大小更改为480像素宽——这个尺寸对应许多流行的移动设备。在 Dreamweaver 的（底部）状态栏中使用“窗口大小”弹出窗口来执行此操作。

或者，您可以在状态栏中使用预设的大小按钮，用于移动设备、平板电脑或桌面大小的窗口：

在实时视图中预览 jQuery Mobile 页面

当您探索由任何 jQuery Mobile 起始页面生成的模板页面时，您会立即注意到与您在 Dreamweaver 中使用的其他页面非常不同的一点；直到您打开实时视图（单击“文档”工具栏中的“实时视图”按钮），几乎没有任何格式可见。尝试来回切换，打开和关闭实时视图，查看关闭实时视图时显示和不显示的内容。

自定义移动页面内容

基本上，您可以像自定义任何起始页面生成的内容一样自定义 jQuery Mobile 页面内容。起始页面带有模板内容，您可以用自己的真实内容替换它。

简单吗？有点。正如我们所指出的，jQuery Mobile 页面中内容和布局之间的间隙顺序不同。换句话说，关闭实时视图后，没有任何东西与其外观接近。然而，您无法在实时视图中编辑内容。

HTML5 数据角色属性

与 jQuery Mobile 脚本相关的 div 标签可以作为移动设备中的不同类型的元素，包括看起来和行为像页面的元素。这是通过在 HTML5 标签中实现数据角色属性，然后定义与每个数据角色相匹配的 CSS（样式表）规则来完成的。

通常情况下，这是 Dreamweaver 中起始页面的情况，jQuery Mobile 页面是使用以下四个数据角色组织和布局的：

• 页面

• 页眉

• 内容

• 页脚

数据角色页面

在 HTML 页面中组织页面内容的基本框架是使用具有“数据角色页面”属性的div标签。换句话说，在单个 HTML 页面中，通常使用div标签的data-role创建多个“页面”。

如果您查看 Dreamweaver jQuery Mobile 起始页生成的代码和页面布局，您会看到在实时视图中看起来像“页面”的实际上是div data-role页面：

将内容组织成实际上是带有 HTML5 属性data-role的div标签，可以让人们浏览起来感觉和表现得像网页。但是这些div标签，就像页面一样，允许访问者在不必等待浏览器加载新页面的情况下来回跳转“页面”。使用这样的data-page div标签对于如何最好地利用移动设备上的小空间来呈现大量内容至关重要。

人们通过在移动设备上轻触、拖动或以其他方式导航来在data-role页面之间导航，从本质上来说是显示或隐藏不同的“页面”。您可以通过在 Dreamweaver 的实时视图中浏览 jQuery Mobile 起始页面中的“页面”来熟悉这是如何工作的。使用 Dreamweaver文档窗口工具栏中的返回按钮来模拟移动浏览设备中的返回按钮：

定制页面内容

现在您已经了解了 jQuery Mobile 页面在 HTML 页面中的组织和功能，定制起始页面中“页面”的内容将会非常自然地进行。处理这个过程的一种方法是忽略其他一切，只是用自己的内容替换 jQuery“页面”中的内容。然后，在实时视图中尝试内容，查看其流程，并根据需要编辑、移动、分割和修改内容。

使用您自己的内容替换每个页面的页眉、内容和页脚。在每个生成的页面中识别此代码：

<div data-role="page" id="page2">
  <div data-role="header">
 <h1>Page Two</h1>
  </div><div data-role="content">
 Content 
</div>  
<div data-role="footer">
 <h4>Page Footer</h4>
  </div>
</div>

用任何 HTML5 内容替换代码中突出显示的行中的内容。

提示

记住：在您的 jQuery Mobile 页面中只使用 HTML5 内容。避免使用 Flash 等插件。此外，避免服务器端包含内容——使用服务器端脚本将数据提供到页面中——如果您使用这种方式。服务器端实时数据不是我们在本书中要探讨的内容，但如果您使用 PHP 脚本，那在 jQuery Mobile 页面中是行不通的。基本规则是：坚持使用 HTML、CSS 和 JavaScript 内容。

此外，虽然我主张最大限度地利用 Dreamweaver 中的设计视图，部分原因是 jQuery Mobile 页面中内容和格式之间的巨大差距，但我不得不承认，我通常会在分割视图的代码侧创建 HTML 内容，并在设计侧打开实时视图。

为不同的数据角色定制内容

一般来说，定制“页面”的内容的过程将包括浏览和定制页面的页眉、内容和页脚部分。

jQuery Mobile 页面还使用listview数据角色来组织一组链接。这些链接——一般来说——是 HTML 页面中到其他数据角色“页面”的链接。更常规的 HTML 术语来说，这些是指向命名锚点的链接。通过检查起始页面附带的默认（内部）列表视图链接集，您可以看到它们是如何设置的。正如您将看到的，默认情况下，它们链接到#page2、#page3和#page4；您可以复制并粘贴这些链接以创建更多链接到更多“页面”。我们将在下面详细探讨这个过程。

添加新的 jQuery Mobile 页面和对象

jQuery Mobile 起始页面带有四个页面和四个页面的链接。这是一个不错的数字，但如果您想要五个、六个或七个页面呢？

如果您需要添加更多“页面”，可以复制、粘贴并轻微编辑（更改页面编号）定义每个“页面”的 HTML 代码部分。在定制内容时，切换实时视图的开关，以查看页面在浏览器中或作为应用程序时的外观，使用窗口大小弹出窗口定义预览环境。

在复制和粘贴以创建新页面时，您需要做以下事情：

在页面顶部的列表中复制并粘贴一个链接，并更改xxx。因此，例如，当您创建第五个页面时，该代码将添加到第四个页面之后的列表中，如下所示：

<li><a href="#page4">Page Four</a></li>

       <li><a href="#page5">Page Five</a></li>

正如您所看到的，列表中复制的代码中有两处更改。

您需要通过复制和粘贴生成的page4来创建一个新页面，并创建一个page5。选择并复制定义page4的代码。

然后将该代码粘贴到page4的data-role属性的结束</div>标记之后。将id值更改为page5。

显然，您将希望在新页面的页眉、内容和页脚部分创建自定义内容。但是，为了使您在页面顶部列表中创建的链接起作用，您还需要确保更改页面 ID 以匹配您在页面顶部列表中定义的href链接。

Dreamweaver 有一个菜单选项用于添加新页面。要使用该选项，导航到插入 | jQuery Mobile | 页面。jQuery Mobile Page对话框将出现，并提示您在最后一个现有页面后添加一个页面。复选框选项允许您在页面上包括页眉和页脚（或不包括）：

我想在介绍此对话框选项之前向您展示代码，这样您就能更好地了解发生了什么，但是在这样做之后，我鼓励您使用对话框以节省时间。

使用主题样式

jQuery Mobile 库中的 CSS 文件有五种主题样式。稍微技术一点，这五种主题样式都内置在单个 CSS 文件中。它们的名称分别是a、b、c、d和e。这些主题样式中的每一个都为页面背景和字体颜色提供了不同的、适合移动设备的（高对比度）颜色方案。

简而言之，这意味着您不会像为普通网页那样通过编辑 CSS 来为 jQuery Mobile 页面应用样式。相反，您需要更改 HTML，将五种主题样式中的一种应用于页面上的任何元素。

被限制在五种主题样式中有点束缚吗？是的。但我们将在第九章中解决这个问题，通过创建我们自己的自定义主题样式。首先，让我们熟悉一下应用主题样式。

应用主题

在 jQuery Mobile 中，“主题”到底是什么？jQuery Mobile CSS 文件中内置了主题：a、b、c、d和e。再次强调，这些不是单独的 CSS 样式表文件；它们是 CSS 文件中的主题（有时称为样式），每个主题都有不同的颜色方案。

您可以使用 HTML5 中的data-theme属性来定义应用于任何元素的 jQuery Mobile 主题。您可以使用jQuery Mobile Swatches面板为任何选定的元素分配一个主题样式。

通过导航到窗口 | jQuery Mobile Swatches来查看面板。单击页面中的任何元素，然后单击一个样式来将该颜色方案分配给该元素。顺便说一句，这在打开实时视图时也可以使用。

您可以手动编写主题。例如，要将主题e应用于具有page ID 的页面，请使用以下代码：

<div data-role="page" id="page" data-theme="e">

或者举个例子，如果您希望将主题a应用于页面上的内容元素，请使用以下代码：

<div data-role="content" data-theme="a">

编辑 jQuery Mobile 页面中的 CSS

由于 jQuery Mobile 页面中的大部分格式依赖于作为 jQuery Mobile 库一部分的中央 CSS 文件，因此您定义自定义 CSS 的选项非常有限。使 jQuery Mobile 页面工作的 CSS 文件非常复杂，包含数百种 CSS 样式。编辑该样式表文件可能会破坏整个包，并使您的 jQuery Mobile 页面无法正常工作。

如果您是高级 CSS 编码人员，可以将自己的 CSS 样式附加到 jQuery Mobile 软件包中提供的文件中。但同样，通过使用自定义 jQuery Mobile 主题，可以实现高度定制化，这是我们将在本书的第九章中探讨的内容，使用 ThemeRoller 自定义主题。

话虽如此，如果您确实想要“深入了解”，这里有一些关于为 jQuery Mobile 页面创建自己的 CSS 样式的建议：

• 您可以识别和编辑div标签的样式-主要是class样式-以重新格式化内容容器和其他对象。

• 您可以在 CSS 对话框中识别和编辑元素（标记）规则。例如，您可以重新定义标题和段落标记。

• 在应用前述两种方法时，您可以借鉴并应用第二章中探讨的技术，使用 HTML5 进行页面结构，只是您还必须额外考虑 jQuery Mobile 页面中的许多对象（class样式）具有每个五个主题的特定规则。

有了这三条建议，精通 CSS 编码的读者可能想要创建自己的 CSS 样式，以增强 jQuery Mobile 包中提供的样式。

示例-使用 jQuery Mobile 对象构建移动网页

为了回顾和强化本章中的概念，并为您提供一组快速步骤来创建自己的 jQuery Mobile 页面，让我们通过一个示例来演示。

与 Dreamweaver CS6 中的所有操作一样，前提是您正在一个定义好的 Dreamweaver 站点上工作。我称我的站点为jqm，但无论如何，如果创建站点，如果过程的基本性质不清楚，请查看第一章中的内容，使用 Dreamweaver CS6 创建站点和页面，并创建站点。

1. 通过导航到文件 | 新建来创建一个新的 jQuery Mobile 页面。

2. 在新建文档对话框中，选择类别列中的示例中的页面，示例文件夹列中的Mobile Starters，以及示例页面列中的jQuery Mobile（CDN）。然后单击创建。

3. 将页面保存为index.html。

4. 通过选择分割视图，将设计视图窗口大小设置为480像素宽和800像素高，并查看您的CSS 样式面板，设置一个方便的工作空间。

5. 向您的 jQuery Mobile 网站添加第五个页面元素。要将该页面插入到站点的末尾，请在代码视图中单击以将插入点放置在关闭的</body>标记之前。

6. 通过导航到插入 | jQuery Mobile | 页面来插入新的页面元素。jQuery Mobile 页面对话框将显示，并提示您添加第五页。保持选中复选框选项，以在页面上包括页眉和页脚。

7. 即使 Dreamweaver 添加了第五个页面元素，您仍然需要从主页创建到该元素的链接。在 jQuery Mobile 网站的主页上复制并粘贴第四页链接。将链接文本更改为第五页，并在属性检查器中将链接更改为#page5。

8. 为每个页面自定义页面内容。需要一些示例灵感吗？前往维基百科的濒危物种页面，将其中一些文本（和图片）复制粘贴到各个页面中。当您从维基百科（或其他来源）复制和粘贴文本时，导航到编辑 | 特殊粘贴以启用特殊粘贴对话框，并选择仅文本选项，以避免在将文本粘贴到 Dreamweaver 中时复制链接和样式。

9. 检查您主页元素上的链接是否有效。如果您为四种濒危物种设置了页面，主页应该有指向每个页面的链接。并确保在页脚中适当地标明维基百科的来源。

10. 在实时视图中测试您的网站。单击主页元素上的每个链接应该打开四个附加页面元素中的一个。

11. 确保jQuery Mobile Swatches面板是打开的（如果没有，请导航到窗口 | jQuery Mobile Swatches）。

12. 在打开实时视图的情况下，系统地逐个选择元素并为每个元素应用主题颜色。

13. 保存您的页面并导航到文件 | 在浏览器中预览。在浏览器中测试您的页面。在开发环境（笔记本电脑或台式电脑）中测试浏览器虽然不能完全复制移动体验，但它提供了一个足够好的测试环境。

摘要

在本章中，我们介绍了在 Dreamweaver CS6 中创建完整 jQuery Mobile 页面的基本元素。这些“页面”是两个层面的页面。在一个层面上，它们是使用 HTML5 的常规 HTML 页面（结合了通过 jQuery Mobile 提供的 CSS 和 JavaScript）。在另一个层面上，这个 HTML 页面有 jQuery 数据页面，基本上是页面中的页面。这种技术允许我们创建一个移动网页，访问者可以在不必等待其移动设备加载其他页面的情况下进行导航。

为了创建这个 jQuery Mobile 页面（带有一组数据页面），我们依赖 Dreamweaver 的起始页面。这个页面包括许多最常用的 jQuery Mobile 元素。还有其他有用的 jQuery Mobile 页面元素，我们将在下一章中探讨。

您可以像编辑任何 HTML5 页面一样编辑 jQuery Mobile 页面的内容。因此，在前几章中掌握定制 HTML5 页面内容的基本技术所付出的所有努力都在这里得到了回报。然而，由于页面格式和导航在很大程度上依赖于 JavaScript（特别是 jQuery Mobile 库中的脚本），您需要更多地依赖实时视图来查看页面与普通 HTML5 页面的外观差异。

在 jQuery Mobile 中，编辑样式受到限制，因为 jQuery Mobile 页面涉及许多 CSS 规则，jQuery Mobile CSS 是按主题组织的。在本章中，您学会了应用主题样式。在第九章中，我们将探讨如何创建自定义主题。

在本章中，您学会了创建基本的 jQuery Mobile 页面，为创建非常复杂的 jQuery Mobile 站点奠定了基础。在下一章中，我们将探讨创建更复杂的 jQuery Mobile 页面的其他工具。

第八章：增强移动站点

在第七章中，使用 jQuery Mobile 创建移动页面，我们介绍了在 Dreamweaver 中构建 jQuery Mobile 站点所需的基本步骤。在这个过程中，我们专注于向 jQuery Mobile HTML 页面添加页面元素，并构建链接到这些页面的列表视图。

通过这样做，我们涵盖了构建功能性 jQuery Mobile 站点所需的大部分内容。您可以使用移动设备浏览网络，并找到许多仅依赖于 jQuery Mobile 页面元素和列表视图的专业级站点。事实上，拿出您最近的移动设备稍微浏览一下可能是值得的。您会欣赏到基本列表视图对于 jQuery Mobile 站点的重要性——类似于以下截图中为旧金山纪事报所示的内容：

然而，移动页面设计不仅仅是列表视图！还有其他方式可以在移动设备上提供页面内容。您可以设计带有网格（列）的页面。您还可以使用可扩展块，允许用户在垂直方向展开或收缩以呈现内容。

如果您进行更多的移动浏览，您会发现一些具有可展开/可折叠元素形式的站点。例如，Google 新闻使用可展开元素来显示（或者默认情况下隐藏）新闻故事的更多来源。

此外，还有一个挑战，即为移动设备构建真正具有吸引力和可访问性的表单，而不会让用户因为被迫尝试用指甲点击微小的复选框或单选按钮而感到烦恼，而是提供易于在智能手机上轻击的漂亮大表单元素。

我们将在本章中解决所有这些挑战；以下是本章涵盖的主题：

• 插入布局网格

• 使用可折叠块设计移动页面

• 添加 jQuery 表单对象

• 使用可折叠块和表单构建一个网页友好的站点

插入布局网格

与为全尺寸视口设计的页面相比，为移动设备设计的页面中，列的作用要小得多。

如果您允许文本行横跨全尺寸浏览器中 960 像素页面的整个宽度，那么文本将很难阅读。因此，出于这个原因和其他原因，两列或三列布局通常是在全尺寸浏览环境中使内容具有吸引力和可访问性的最佳方式。

然而，移动视口是不同的：移动电话的视口宽度不大，甚至平板电脑的屏幕也比笔记本电脑窄。尽管如此，在移动友好的页面中，设计页面内容以列的方式是非常有用的。在这种情况下，工具就是 jQuery 网格。网格允许您轻松地将列构建到 jQuery Mobile 页面元素中，如下菜单所示：

表格、div 标签和网格

长久以来，或者至少有几年，表格是网页设计页面布局技术的主要内容。有创意的设计师改编了原本用于呈现数据行和列的东西，以在网页上布局内容。

我们现在已经过了那个时代。相反，全尺寸网页是使用div标签设计的，这是我们在第一章中探讨过的内容，特别是在使用 ID 和类 div 样式进行布局部分。表格仍然存在；使用表格设计的旧网站仍然在线。如今，表格已经被 ID 和类div标签样式取代，因为后者是设计页面的更强大和灵活的方式。

那么在移动页面布局中使用表格呢？嗯，这种技术在 jQuery Mobile 中得到支持。但我们在 jQuery 页面中不使用表格进行页面布局的原因与我们在全尺寸页面设计中不使用它们的原因相同：表格笨重，难以应用全局样式，难以更新，并且不支持许多div容器支持的属性。也就是说，表格设计爱好者请注意：您可以在 jQuery Mobile 页面中使用表格设计页面布局。

我们能否使用在 HTML 中为我们服务良好的老式<div>标签来布置页面内容的列？是的。但我们必须以一种特殊的方式来实现这一点，以便实现 jQuery Mobile 中如此宝贵的格式化、动画和交互。我将在一会儿向您介绍这是如何工作的。

在 jQuery Mobile 页面中设计列布局的最灵活、标准的方法是使用网格。标准的 jQuery Mobile CSS 文件带有一组定义的类样式，称为ui-block和ui-grid。此外，这些样式有两套，一套用于两列布局，另一套用于三列布局。

Dreamweaver 的 jQuery Mobile 小部件为布局网格的生成做了非常完整的工作，可以生成各种各样的网格，包括可定义的列数和行数。请记住，当您生成这样的网格时，您是在为某种相对较窄的视口设计，并且希望在生成多少列（和行）时保持克制。

但是，从设计的角度来看，您可以在技术上放松。Dreamweaver 中的布局网格小部件将相当复杂的 2 列和 3 列网格组合在一起，以创建四、五、六列甚至更多列的网格，如果您选择这样做的话。

在 Dreamweaver 中生成网格

要在 jQuery Mobile 页面中生成布局网格，请确保插入点位于content div data-role 中。一种简单的方法是选择在创建 jQuery Mobile“页面”时生成的代码中的文本内容，并将其替换为布局网格，或者将光标放在content占位符文本之后。

然后，导航到插入 | jQuery Mobile | 布局网格。jQuery Mobile 布局网格对话框将打开。选择行和列的值，然后单击确定生成布局网格，如下截图所示：

定义布局网格的样式

jQuery Mobile 布局网格使用两个类样式——.ui-grid-a用于两列网格，.ui-grid-b用于三列网格。如前所述，Dreamweaver 将从jQuery Mobile 布局网格对话框中生成 HTML，以串联这两个网格的组合，以创建超过三列的网格。此外，Dreamweaver 生成.ui-grid类样式来定义特定的块格式。

重点是？通过编辑.ui-grid和.ui-block类样式的属性，您可以定义布局网格元素的外观。

在这样做时，避免编辑网格或块的宽度，或者边距、填充或边框尺寸。更改这些属性将破坏生成的布局。但您可以编辑背景颜色和图像。

让我们看看这是如何工作的。

.ui-grid-a类样式（定义了两列网格）可以被本地网格类样式覆盖。但这并不会带来太多的格式自由度，因为网格本身只提供了容纳两个块的框架。

要编辑左侧块（.ui-block-a）的外观，请按以下步骤操作：

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

2. 在选择器类型字段中，选择类。

3. 在选择器名称字段中，输入.ui-block-a。

4. 在规则定义框中，选择仅限本文档。

5. 单击确定关闭对话框，并打开.ui-block-a的CSS 规则定义对话框。

6. 在背景颜色字段中，选择一个背景颜色。

7. 在框类别中，输入高度为200px。

8. 单击确定以定义此本地样式，并在实时视图中检查效果，并在CSS 样式面板中检查样式规则。

让我们反思发生了什么以及为什么。.ui-block-a类样式的许多属性，定义了网格内左侧块的外观，作为使 jQuery Mobile 正常工作的通用 CSS 样式文件的一部分是固定的。在 Dreamweaver 中生成新的 jQuery Mobile 页面时，我们链接到了该 CSS 文件。

但是，.ui-block-a类样式的一些属性是不固定的，我们可以在仅适用于我们的 HTML 页面的本地样式表中进行编辑。background-color和height是我们可以编辑的两个属性，并提供了一种自定义网格外观的方法。

当然，我们也可以将相同的技术应用于定义了网格内右侧块的.ui-block-b类样式，如下面的屏幕截图所示：

格式化的网格和块有多大用处？它们越来越有用，因为越来越多的移动设计师正在使用 jQuery Mobile 为较大和中等尺寸的平板电脑创建多列布局。块和网格为 jQuery Mobile 中的列布局提供了最灵活、可访问的工具。

使用可折叠块设计移动页面

正如您在上一章中看到的（第七章，“使用 jQuery Mobile 创建移动页面”），jQuery Mobile 页面本质上创建了从页面到页面的导航感觉，同时依靠 JavaScript 来实际显示和隐藏内容。这是在 Dreamweaver 中生成的示例 jQuery Mobile 页面中使用的技术。

可展开块的操作原理类似——根据访问者的操作来显示和隐藏内容。但是，对于可展开面板，这是通过页面的部分出现扩展或收缩来实现的，如下面的屏幕截图所示：

构建可折叠块

与其他 jQuery Mobile 对象一样，可折叠面板需要一个 jQuery Mobile 页面的框架。因此，实现它们的第一步是创建一个 jQuery Mobile 页面。这可以通过导航到插入 | jQuery Mobile | 页面来完成。我们在本章的前面已经探讨了在 Dreamweaver 中生成 jQuery Mobile 页面的选项。

一旦您生成了一个带有所有相关 CSS 和 JavaScript 文件的 jQuery Mobile 页面，您就可以定义可折叠面板。通过设置插入点来完成这一操作（在分割视图的代码侧上最容易完成，同时打开实时视图）。

导航到插入 | jQuery Mobile | 可折叠块。没有对话框出现，Dreamweaver 会为块内的三个可折叠部分生成 HTML 代码。

在上一章的起始页面和本章的布局网格以及您在 HTML5 和 CSS 方面的背景知识的基础上，您已经构思了我们将如何自定义可折叠块的外观和内容。我们可以通过使用 jQuery Mobile 数据主题集和自定义 CSS 样式的组合来更改格式。此外，我们可以通过编辑 HTML 来更改内容，包括复制和粘贴可折叠块。

更改初始块状态

整个可折叠元素集由以下代码定义：

<div data-role="collapsible-set">

在可折叠集的开头和结尾的<div>标签之间是单独的可展开块：

<div data-role="collapsible" data-collapsed="true"> </div>

或者默认情况下在页面打开时展开的块，使用以下代码定义：

<div data-role="collapsible">

默认情况下，打开页面时，三个可展开部分中的第一个部分会展开，其他两个部分会折叠。将data-collapsed="true"参数添加到最初打开的面板会在页面打开时将其更改为折叠状态。

此外，从面板中相反地移除data-collapsed="true"会使其在页面打开时显示为展开状态。

更改块数据主题和样式

我们可以向任何数据块添加data-theme参数。例如，将<div data-role="collapsible">更改为<div data-role="collapsible" data-theme="e">会将数据主题e（黄色和红色配色方案）应用于该块，如下截图所示：

显然，对于默认的主题颜色方案，您可以做的事情有相当严格的限制。不用担心，在下一章中，我们将探索自定义主题。

与可折叠面板相关的 CSS 样式可以在CSS 样式面板中进行自定义。这些样式通常以.ul-collapsible开头。

例如，.ui-collapsible-contain样式控制展开块的内容的许多属性，如下截图所示：

提示

在更改.ul-collapsible类样式的尺寸时要小心。避免更改填充、边距和边框，因为这些参数的混乱可能会破坏可折叠的列。您可以自定义字体、颜色、字体大小、背景颜色和其他属性。而且，我们将在下一章中探索主题自定义的整个世界。

编辑可折叠块 HTML

根据您的倾向，您可以在设计视图中编辑可折叠块的内容，关闭实时视图，或者在实时视图中，通过编辑分割视图的代码一侧来编辑内容。在任何情况下，您只需添加 HTML 标签（如标题、段落标签、有序或无序列表等），以及文本、图像和媒体。

如果您在分割视图的代码一侧编辑内容，请定期单击文档工具栏中的刷新按钮以更新视图的设计一侧。

在游戏的这个阶段，您已经自己找出了如何向集合添加可折叠块的一部分解决方案：只需复制、粘贴和编辑现有块。

提示

既然你问了（我读懂了你的心思），是的，您可以在可折叠块内嵌入可折叠块。但是，请记住，保持移动页面布局相当简单是重点，所以，俗话说，当为移动设备组织内容时，少即是多。

添加 jQuery 表单对象

在移动设备环境中填写表单的体验与在笔记本电脑或台式机上填写表单的体验大不相同。没有鼠标，甚至（通常）没有Tab键在表单字段之间导航。大手指和弹出菜单中的微小选项不搭配。

在全尺寸浏览器中可能正常工作的表单在移动设备上可能会非常不友好和不方便。以苹果的商店定位器（如下截图所示）为例，它对移动用户设计不佳，需要移动用户调用他们令人沮丧的键盘来输入邮政编码到一个小小的文本字段中：

解决这个挑战的部分解决方案是，移动设备通常会将表单字段转换为更易访问的元素。例如，选择菜单中的选项在点击时可能会显示得更大，这样更容易进行选择。我刚才批评的同样是苹果表单，它有一个更好的选择产品的选项——一个下拉菜单，更容易在移动设备和像我这样的粗手指上访问。

解决在移动设备上使表单可访问和吸引人的另一部分是实现新的表单字段，例如滑块（访问者可以通过在条上滑动拇指来选择一系列值）或翻转切换开关（具有易于使用的“开”和“关”开关选项），以使在线填写表单更加功能齐全和有趣。

以下表单同时使用了翻转切换（开开关）和值滑块（0-100）：

Dreamweaver 中的表单

Dreamweaver 在历史上提供了三种创建表单的方法。当然，您可以在代码视图中使用 HTML 定义表单和表单字段。您可以通过导航到插入 | 表单并定义一个表单来生成表单，然后在其中插入表单字段（例如文本字段）和必需的按钮（例如提交按钮以使表单执行某些操作）。

包括 Dreamweaver CS6 在内的较新版本的 Dreamweaver 已经添加了 Spry 验证表单字段，首先测试数据（例如，查看它是否看起来像一个电子邮件地址），然后允许访问者提交表单。我提到这段历史是因为 a）如果你不知道你曾经在哪里，你就无法到达目的地，或者无论那句话是什么；和 b）所有这些技术在移动设备上仍然有效，所以如果您了解其中任何一种或全部技术，您可以用这些工具补充 Dreamweaver 中的新 jQuery Mobile 表单工具。

然而，在这里，我们将专注于旨在创建移动设备友好表单的 jQuery Mobile 表单工具，并包括到目前为止在 Dreamweaver 中不易访问的表单字段，如滑块和切换开关。

在深入研究这些工具之前，这里是在 Dreamweaver 中创建表单的世界上最紧缩的课程（通常情况下，不仅仅是使用 jQuery Mobile 表单工具）：

1. 所有表单字段（如文本字段或提交按钮）都必须包含在一组<form>标签中。

2. 为了使其工作，表单必须有一个定义的操作。对于连接到服务器端脚本（使用 PHP 或 Perl 等编程语言编写的脚本，并驻留在服务器上）的表单，操作是将数据发布到服务器上该脚本的位置的链接。有许多免费的，相当直观的在线资源可用于生成此类脚本，并提供有关如何将它们上传到您的服务器并将它们连接到表单的说明。其中一个资源是TheSiteWizard.com。一个非常简单但功能齐全的操作是简单地使用操作mailto:xxx@xxx.xxx将表单内容发送到电子邮件地址，其中xxx@xxx.xxx是电子邮件地址。然后，这个简单的解决方案启动一个电子邮件客户端（程序）并提示用户将表单内容发送到提供的电子邮件地址。

牢记这两条基本规则，让我们来看看 Dreamweaver 中用于创建特别适合移动设备的表单字段的工具。

创建 jQuery Mobile 表单

与本章中我们已经检查过的其他 jQuery Mobile 对象一样，jQuery Mobile 表单元素只能插入到已经生成的 jQuery Mobile 页面中。但除此之外，还需要使用 Dreamweaver 中更传统的表单功能来创建表单和提交按钮。因此，设置将包含 jQuery Mobile 表单元素的表单的过程如下：

1. 创建一个 jQuery Mobile 页面。

2. 在该 jQuery Mobile 页面中插入一个带有提交（按钮）的表单。

3. 然后，您可以向该表单添加特定的移动设备友好的 jQuery Mobile 表单字段。

这个三步过程并不是创建 jQuery Mobile 表单的唯一方法，也没有涵盖所有可能的选项。但这是一个基本的基础，使得实现 jQuery Mobile 表单元素成为可能。

让我们通过一个例子来工作，创建一个基本表单，当提交时，将通过电子邮件客户端将内容发送到一个电子邮件地址。当然，这些步骤假设您正在一个定义好的 Dreamweaver 网站中工作，并且已经创建了一个带有 jQuery 移动页面的 HTML5 页面。有了这些部分，以下步骤将更详细地阐述之前粗略概述的“三步流程”：

1. 在 jQuery 移动页面内（您可以在代码视图或设计视图中选择占位符“内容”文本，以确保您操作正确），导航到插入 | 表单 | 表单。标签编辑器-表单对话框出现。只有常规选项卡中的选项对于创建表单是必不可少的。

2. 在动作字段中，输入mailto:[电子邮件地址]，当然，使用真实的电子邮件地址。如果您正在使用与服务器端脚本链接的表单，您将在此处输入该脚本的 URL。

3. 从方法弹出窗口中选择post，这是几乎总是用来将表单数据发送到一个位置的方法。

4. 编码类型参数由管理数据的脚本定义。如果您通过电子邮件上传，输入text/plain。

5. 在名称框中输入表单名称。

6. 目标弹出窗口允许您选择_blank，如果您希望在新的浏览器窗口中打开链接的表单脚本（通常这是不必要的）。

7. 完成标签编辑器-表单对话框后，单击确定生成表单。

这一系列步骤只是定义了一个表单。目前表单中还没有表单字段，所以实时视图中没有任何表单字段。当然，您可以在代码视图中看到表单代码，并且在设计视图中关闭实时视图后，可以看到表单本身，用红色轮廓表示。

记住前面这一节的规则#1：为了被表单动作执行，所有表单字段都必须在表单内。因此，请确保您清楚您的表单在页面上的位置，即使它目前还没有内容。

将光标放在表单内，导航到插入 | 表单 | 按钮。我们还没有完全集成特殊的 jQuery 移动表单字段，所以通过导航到插入 | 表单 就可以使用这个选项。当输入表单可访问属性对话框出现时，您不需要在任何字段中输入任何内容，只需单击确定生成一个提交按钮。

现在我们有了一个表单的基本元素：具有定义动作的表单和一个提交按钮。接下来，是时候添加 jQuery 移动表单字段了。

特殊的移动表单字段

正如前面提到的，移动设备通常具有内置的界面工具，使表单内容更易访问。jQuery 移动也是如此。当您放置标准的 HTML 表单字段，如文本框、复选框和按钮时，jQuery 移动会替换为在移动设备上更易访问的自定义表单字段。复选框变大，选择菜单弹出大按钮的列表，表单字段标签和字段名称被调整大小以最大化屏幕空间利用率。

因此，jQuery 移动子菜单中提供的一些“特殊”表单字段只是标准 HTML 表单字段的适应。其他的是 HTML 表单字段集中的新内容。无论哪种情况，jQuery 移动表单字段都包括特殊的格式，使它们更适合移动设备。

让我们来看看其中三个表单字段的例子，根据这些例子，您将能够使用 jQuery 移动设置中的其他表单字段。在这些例子中，确保您在<form>标签集内插入 jQuery 移动表单字段。

插入文本输入字段

文本字段是在表单中收集数据的最灵活的方式。它们用于收集用户名、密码、电子邮件地址、送货地址等。

要在表单中插入 jQuery Mobile 文本输入字段，请导航至插入 | jQuery Mobile | 文本输入（如果要允许多行输入，请选择文本区域）。jQuery Mobile 文本输入字段会自动调整大小，但您必须用自己的文本替换标签占位符文本（Text Input）。您可以在设计视图（关闭实时视图）或分割视图中进行此操作。

您还可以通过编辑代码name="textinput"来更改文本字段的默认字段名称，以替换输入名称。但是避免使用空格和特殊字符（只使用字母和数字）。例如，要重命名名为email的文本输入字段，您需要将此代码更改为name="email"。

插入滑块

这些天每个人都在评价一切。也许你没有读过太多物理学，但你会如何在 1-100 的范围内评价玻色弦理论？好吧，也许……确实有*有效的理由在移动表单中包含评分选项。而且，如果你要在表单中包含“评价这个……（什么的）”，你应该让人们很容易地做到这一点。

输入滑块，这是在移动表单中输入值的一个特别方便的方式。

要在 jQuery Mobile 表单中插入滑块，请导航至插入 | jQuery Mobile | 滑块。自定义滑块如下：

1. 用你自己的文本替换Slider标签文本。

2. 用默认值替换value="0"代码。

3. 用你选择的任何值替换min="0"代码，这将是最小值。

4. 用你选择的任何值替换max="0"代码，这将是最大值。

插入切换开关

切换开关为大手指提供了一个方便的方式来轻松选择“是”或“否”；“内”或“外”；或在移动设备上做出其他两个选择。

要在 jQuery Mobile 表单中插入一个切换开关，请导航至插入 | jQuery Mobile | 翻转切换开关。

自定义切换开关如下：

1. 用你自己的文本替换Option标签文本。

2. 用你自己的文本替换代码<option value="off">Off</option>中的Off（不带引号）。

3. 用你自己的文本替换代码<option value="on">On</option>中的On（不带引号）。

构建一个带有可折叠块和移动友好表单的页面

让我们通过一个具体的例子来总结、审查、充实，并提供一个在 Dreamweaver 中构建 jQuery Mobile 可折叠块的模型，并混入一个移动友好表单。

调查告诉我们，寻找某个地方吃塔可的人中有很大比例会在移动设备上在线搜索。因此，让我们以我在康尼岛上不存在的塔可摊作为这个配方的模型，你可以很容易地根据自己的需求进行调整。

我们构建的移动页面将有四个可折叠块：菜单、位置、下订单和关于塔可店的一些信息。在构建过程中，我们将演示创建四个可折叠块，并在其中一个块中嵌入一个表单。我们开始吧：

1. 当然，我们假设您正在 Dreamweaver 站点中工作。如果没有，请创建一个新站点或打开一个现有站点。然后导航至文件 | 新建，在新建文档对话框中，在类别列中选择空白页，在页面类型列中选择HTML，在布局列中选择，并从文档类型弹出窗口中选择HTML5。然后点击创建。

2. 导航至文件 | 保存，并将文件保存为index.html。由于这将是一个单页面站点，当站点的 URL 在浏览器中被访问时，index.html文件名将打开页面。将页面标题设置为“移动塔可”。

3. 在此过程的这个阶段，默认情况下，您的光标位于一组 <body> 标签之间。这正是它应该在的地方。通过导航到 插入 | jQuery Mobile | 页面 来插入一个 jQuery Mobile 页面。由于我们将保持这个项目相对简单和标准（但不是太简单或标准 - 不用担心），您可以选择 远程（CDN） 链接类型选项，我们将使用 jQuery Mobile CSS 文件的在线版本。选择 远程（CDN），然后单击 确定。

4. jQuery Mobile 页面 对话框会打开。使用默认设置单击 确定。

5. 用 "Coney Island Tacos" 替换原始的 Header 占位文本。或者，您可以从一开始就偏离我的食谱，自由发挥您自己的内容。用 Coney Island Tacos 的虚构网站 - www.coneyislandtacos.com 替换页脚文本。如果您希望定义超链接，请导航到 插入 | 超链接。

6. 定义工作环境：选择 分割视图，然后从 设计 视图底部的 窗口大小 弹出菜单中选择 480x800。打开 实时视图。

7. 开始应用一个 jQuery Mobile 主题进行格式化。在 分割 视图的代码侧面，输入代码 data-theme="e" 或尝试其他主题（尝试 a、b、c、d 或 e）。

现在让我们一起来添加四个可折叠面板到我们的网站上：

1. 选择占位符 content 文本，然后导航到 插入 | jQuery Mobile | 可折叠块。复制并粘贴一组可折叠块代码以创建第四个块。这段代码是：

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

1. 自定义四个块的标题。您会发现标题被包含在 <h3> 代码中。我选择：菜单，电子邮件订单，寻找/联系我们 和 关于 Coney Island Tacos 作为标题，但请随意发挥创意。

2. 自定义所有可折叠块的内容除了 Email Order 块 - 我们将为下一个创建一个表单。

3. 在 Email Order 块（或您在自定义项目中用于输入表单的任何块）中，选择占位符 content 文本，导航到 插入 | 表单 | 表单。在 标签编辑器 - 表单 对话框中，将操作设置为 mailto:youremail@youremail.xxx（替换为您自己的电子邮件地址）。将方法更改为 POST。在 编码类型 字段中输入 text/plain，然后单击 确定。在这里，弹出实时视图可能会有所帮助，以创建输入表单。在表单内输入 Order Form，然后按 Return 或 Enter 创建新行。

4. 确保插入点在表单内，导航到 插入 | jQuery Mobile | 选择菜单。将标签更改为 Taco。单击 选择 菜单本身，并使用 属性 检查器中的 列表值 按钮打开 列表值 对话框。使用 + 按钮添加新行，并使用上下箭头根据需要重新排序项目。

5. 添加额外的选择菜单，以允许人们选择玉米饼。

6. 在表单内，导航到 插入 | jQuery Mobile | 复选框。在 jQuery Mobile 复选框 对话框中，在 名称 框中输入 Sides，然后选择四个复选框和水平布局，最后单击 确定。在 设计 视图中的 文档 窗口中直接编辑标签，并使用 属性 检查器为每个复选框定义与标签匹配的值。

7. 通过插入提交按钮完成表单。再次确保插入点位于表单内部，并导航到插入 | 表单 | 按钮。单击确定，而不进行任何选择，因为提交按钮是默认选项。

8. 要自定义页面的外观，创建一个新的类样式。使用CSS 样式面板底部的新 CSS 规则选项创建新的 CSS 规则。将类样式命名为Format。由于我们使用的是相关 CSS 文件的远程版本，并且这是一个单页面站点，我们可以打破仅依赖链接的外部样式表的规则，因此从新 CSS 规则对话框底部的弹出菜单中选择(仅限本文档)，然后单击确定。

9. 定义一些自定义属性，例如字体系列，字体大小和字体颜色。使用属性检查器，如下截图所示，将类样式应用于页面上选择的元素：

10. 您可以通过创建其他类样式并应用它们来进一步自定义项目。

11. 您可以在浏览器中测试订单表格。

摘要

jQuery Mobile 中的一个页面设计技术是布局网格。布局网格与块一起，基本上是div样式的列，但具有使列在移动设备上有效显示的特殊属性。

我们在本章介绍的两个最重要的 jQuery Mobile 技术是可折叠块和 jQuery Mobile 表单对象。可折叠块可以展开和折叠，并提供了一种在小视口中呈现内容的非常舒适的方式。添加 jQuery 表单对象可以创建更多移动友好版本的熟悉输入表单对象（例如文本框），还可以启用新的表单字段，如滑块和切换翻转开关。

要自定义 jQuery Mobile 页面的外观和感觉，我们可以利用数据主题的广泛格式，辅以自定义 CSS。但要真正发挥主题的力量，我们需要创建自己的自定义主题颜色样本。我们将在下一章中进行。

第九章：使用 ThemeRoller 自定义主题

在我们的旅程的这个阶段，我们已经探索了使用 Dreamweaver CS6 创建基本和更复杂的 jQuery Mobile 页面的结构。还缺少什么？样式！我们还没有自定义字体、字体颜色、背景以及我们在本书早期章节中学习的其他所有事物。

但是，当我们为 jQuery Mobile 页面设置样式时，普通的 CSS 样式规则只在非常有限的意义上适用。为什么？因为 jQuery Mobile 页面依赖于一个集中式、相当庞大的 CSS 样式表文件。该文件包括五套配色方案。在本章中，你将学习如何在 Dreamweaver CS6 中应用这些配色方案。

但是五套配色方案并不多。为了严肃地自定义 jQuery Mobile 页面的外观，有必要改变主题，这又是说你必须自定义集中分发的 CSS 样式表。在本章的后半部分，我们将介绍如何使用 Adobe 支持的在线实用程序ThemeRoller创建自定义 CSS 文件和主题。

将涵盖以下主题：

• 在 Dreamweaver 中理解使用 jQuery Mobile 主题进行格式化

• 将 jQuery Mobile 主题应用于页面元素

• 将 jQuery Mobile 主题应用于页面内的特定元素

• 使用 ThemeRoller 自定义 jQuery Mobile 主题

应用 jQuery Mobile 主题配色

有五个标准的 jQuery Mobile 数据主题（或简称主题）。它们是：a，b，c，d，还有，你可能已经猜到了，e。这五个标准主题内置在我们链接所有 jQuery Mobile 页面的大型集中式 CSS 样式表文件中。

提示

如果你检查 CSS 文件，你会发现该样式表中的大多数 CSS 样式都在样式名称中有-a，-b，-c，-d或-e。

再次，这里的基本概念是，五个主题配色（a、b、c、d 和 e）都存储在每个 jQuery Mobile 页面链接到的单个 CSS 样式表文件中。这个链接内置在 Dreamweaver 生成的 jQuery Mobile 页面中。

检查五个数据主题

在印刷书籍中，甚至在我们的电子书版本中，都不可能提供五个默认 jQuery Mobile 主题配色的动态、动画、交互式演示。了解它们如何工作的最佳方法是执行以下操作之一：

• 在 Dreamweaver 中将它们应用到页面

• 在 jQuery Mobile 网站上查找它们，你可以与并比较所有五个主题，如下图所示：

提示

展示这些主题配色的 jQuery Mobile 页面的 URL 会定期更改。但你可以在www.jquerymobile.com找到它。网站的主页上会有一个链接，可以轻松地从网站的主页访问到该网站的主题框架部分。

作为快速的文本参考，以下是每个主题的简化描述：

• 主题a是一种高对比度的、以深灰色为基础的配色方案，在各种光照条件下都可以访问。

• 主题b是一种白色文字在蓝色背景上的风格，不太易访问，但仍然高对比度。

• 主题c有点像主题a的反面。它呈现的是深灰色文字在浅灰色背景上，而不是白色文字在深灰色背景上。

• 主题d与主题c几乎无法区分，但对比度更高，背后是白色而不是浅灰色的背景。

• 主题e具有黄色到橙色的渐变背景，比其他主题更具吸引力和更乐观。

要在 Dreamweaver CS6 中应用主题配色，按照以下步骤进行：

1. 定义了你的 Dreamweaver 站点后，导航到文件 | 新建以打开新建文档对话框。

2. 在左侧的类别列中选择示例 | 页面，在示例文件夹列中选择移动起始页，在示例页面列中选择jQuery Mobile (CDN)，然后单击创建生成一个新页面。

3. 打开 jQuery Mobile 页面后，使用分割视图，并打开实时视图。

4. 保存页面。我们将在一会儿使用 Dreamweaver CS6 的jQuery Mobile Swatches面板，该面板要求您先保存页面。保存页面后，导航到窗口 | jQuery Mobile Swatches以显示jQuery Mobile Swatches面板。

5. 单击五个可用的主题样本中的任何一个（最左边的样本不分配主题），如下面的屏幕截图所示：

您还可以在代码视图中为任何元素分配数据主题。使用以下语法应用 jQuery Mobile 主题：

data-theme="x"

其中"x"是a、b、c、d或e。以下是将数据主题e应用于第一个页面元素的示例：

(<div data-role="page" id="page" data-theme="e">

该数据主题代码可以应用于任何 jQuery Mobile 元素。在代码视图中编辑数据主题后，单击文档工具栏中的刷新按钮以刷新视图，如下面的屏幕截图所示：

注意

在 CS6 之前的 Dreamweaver 版本中，用户将无法访问jQuery Mobile Swatches面板，并且必须在代码视图中应用数据主题，如前面所讨论的。

将主题应用于特定元素

当您将数据主题应用于整个页面元素时，您为该页面元素定义了一个颜色方案。但您还可以将数据主题应用于数据页面中的任何元素，以精确调整每个元素的外观。

但是这里有一个挑战；只有在 Dreamweaver 中打开实时视图时，您才能看到数据主题的外观。然而，打开实时视图后，很难选择要应用主题的元素，因为通常当您单击一个元素（例如列表视图中的链接）时，链接会起作用，您将不再在预览窗口中看到它。因此，我通常建议依靠代码视图来应用数据主题。

例如，您可以为默认情况下使用我们的 jQuery Mobile 示例页面生成的主要listview分配数据主题（在 jQuery Mobile 网站的第一个页面元素中）。为此，在分割视图的代码侧中，找到以下代码：

<ul data-role="listview">

要应用数据主题b，我们可以将此参数添加到listview中：

<ul data-role="listview" data-theme="b">

保存您的页面并在实时视图中查看效果。

您可以将数据主题应用于任何元素。这包括listview中的元素。例如，我们可以为listview中的每个列表项分配不同的数据主题。为此，在第一个页面元素的三个<li>标签中添加数据主题定义。以下代码分别将数据主题c、d和e应用于列表元素：

<li data-theme="c"><a href="#page2" >Page Two</a></li>
<li data-theme="d"><a href="#page3" >Page Three</a></li>
<li data-theme="e"><a href="#page4" >Page Four</a></li>

使用 ThemeRoller 自定义主题

如果每个网站都受到 jQuery Mobile CSS 文件中提供的五个默认主题的颜色选项的限制，移动世界将会变得相当沉闷、墨守成规。

创建自定义主题的最易于访问和强大的工具是 ThemeRoller。ThemeRoller 是一个在线应用程序，将一组样本组合成一个主题。ThemeRoller 最多创建 26 个单独的样本。

注意

主题和样本

五个 jQuery Mobile 主题样本（a、b、c、d和e）通常被简称为主题。但从技术上讲，这些颜色和图形元素集合是主题内的样本。jQuery Mobile 主题实际上是与 jQuery Mobile 包相关联的 CSS 样式表中的一组样本。

移动颜色方案的美学

在让您自由在 ThemeRoller 中创建自定义主题之前，让我回顾一下为移动设备设计有效、吸引人和易于访问的颜色方案的一些基本规则。

• 所有网页设计颜色方案都是围绕一组五种颜色构建的。这五种颜色可以是您选择的任何一组颜色。但将该组限制为五种的原因是，更少会很无聊，而超过五种颜色会产生视觉混乱，太多的颜色没有连贯性或目的。

• 中性颜色，如白色、黑色、各种灰色和蓝色，不算作五种颜色之一。使用它们的数量取决于需要。

• 移动站点需要高对比度的颜色方案。在强烈背光的笔记本电脑上，石板灰色文本可能是用户在细微调光环境中的有效颜色方案。但在明亮的阳光下，这种颜色方案看起来就像一个黑色的实心块。

• 使用渐变混合将一个颜色流入另一个颜色，使移动站点更具吸引力。

在专业移动设计工作流程中，设计师选择一个颜色方案，并为您提供一组五种颜色的颜色值。

启动 ThemeRoller

您可以通过单击jQuery Mobile 样本面板底部的获取更多主题链接来启动 ThemeRoller，如下面的屏幕截图所示：

或者（或者如果您使用的是较旧版本的 Dreamweaver），您可以直接在浏览器中导航到 jQuery Mobile 的 ThemeRoller 页面，网址为jquerymobile.com/themeroller/。

提示

ThemeRoller 是一个在线的开源项目，已经被 Adobe Dreamweaver 采用，但并不是其一部分。因此，ThemeRoller 不像 Dreamweaver 这样的传统软件应用程序那样稳定和易于可靠地记录。这意味着我在这里写的关于 ThemeRoller 的内容在您阅读本书时通常是准确的，但您应该期望 ThemeRoller 发展中会有一些差异。我会为此做好准备。也就是说，ThemeRoller 是一个非常强大的工具。它允许我们完全定制 jQuery Mobile 站点的外观和感觉。它相对容易使用，并且为我们作为开发人员可以为网站增加实质价值。

正如前面的提示所强调的，ThemeRoller 是一个不断发展的在线资源，因此您的屏幕看起来可能与下面的屏幕截图有些不同，但基本上是一样的。如果出现开始按钮，如下面的屏幕截图所示，请单击该按钮使信息框消失，并开始在 ThemeRoller 中工作。

定义全局主题属性

在 ThemeRoller 中定义主题有两个部分：全局和样本。全局属性包括适用于所有样本的属性，如字体。颜色方案由样本定义。

您可以使用ThemeRoller窗口左上角的选项卡在全局元素和单独的样本之间导航，如下面的屏幕截图所示：

通常，首先定义自定义主题的全局主题属性是有意义的。

全局主题设置包括以下内容：

• 字体系列：这让您选择一组字体，从您首选的显示字体开始，就像您在普通网页的<body>标签中定义 CSS 字体系列属性一样

• 活动状态：这组选项控制活动链接的显示

• 角半径：此设置定义了圆角框的角半径大小

• 图标：此选项定义图标的颜色和样式

• 框阴影：这些设置控制应用于框的任何投影的颜色、不透明度和大小。

所有这些属性都是为您的整个 jQuery Mobile 页面定义的，即站点中的所有元素（包括页面元素）。它们必须是全局的。为什么？想想listview上的角半径，例如。如果不同颜色样本中的角半径不同，您分配给它的颜色将会影响listview的形状。

要在ThemeRoller应用程序窗口左侧的Global选项卡中编辑全局主题属性，请单击与该属性相关联的展开三角形以查看可用选项。

一些全局主题设置非常重要，其他更加隐晦。Font Family、Corner Radii和Box Shadow是对您的自定义主题影响最大的三个属性。

要更改定义的字体系列，请在Font Family选项卡的FONT字段中输入新的字体（用逗号分隔）。当您在字段外单击时，编辑后的字体系列将显示在右侧预览窗口中，如下面的屏幕截图所示：

您可以使用Corner Radii区域中的滑块（或输入值）来更改分配给框和按钮的曲率。同样，当您在字段外单击时，您的设置将在右侧窗口中预览。

在Box Shadow区域，您可以在COLOR框中选择阴影颜色；在OPACITY框中选择不透明度百分比（100％是最深的阴影，0％是没有阴影）；并在SIZE框中选择大小（以像素为单位）。

定义自定义样本

样本是样式表中定义 jQuery Mobile 站点的一组格式选项。您可以向自定义主题添加多达 26 个自定义颜色样本。您可以为每个样本自定义标题、页脚和内容样式以及按钮状态样式。

让我们从创建一个过程开始。如前所述，您可以通过从ThemeRoller页面左上角的选项卡集中选择该选项卡来访问定义特定样本的颜色（和其他属性）的界面。

要自定义标题和页脚，请展开ThemeRoller窗口左侧的Header/Footer Bar面板。执行以下步骤来为标题和页脚栏定义颜色样本：

1. 点击文本颜色样本。使用外环点击一个接近你想要应用于标题和页脚文本的颜色，并使用内部渐变来微调你的选择。您点击的颜色将转换为文本颜色框中的十六进制值，如下面的屏幕截图所示：

2. 文本阴影用于在文本周围生成微妙的轮廓，以便更清晰地显示。接受极简主义的默认设置（水平阴影，0px；垂直阴影，1px；模糊，1px；颜色，白色）是很好的选择。

3. 要设置背景颜色，您可以定义一个纯色（与您在步骤 1 中定义文本颜色的方式相同）。但是，渐变背景是移动站点的特色，因此请考虑生成一个。为此，请点击BACKGROUND标签右侧的加号（+）图标，展开选项。选择渐变的START和END颜色，如下面的屏幕截图所示：

4. 为内容主体区域（即由<body>标签或<content>元素覆盖的区域）定义颜色与定义标题或页脚颜色非常相似。最大的区别在于，您可以通过展开样本的Link Color部分来定义链接状态颜色。点击Link Color旁边的加号（+）图标，并为每个链接状态定义颜色。您可以为三个按钮状态定义文本颜色（和阴影）、背景颜色和边框颜色。正常状态在按钮未悬停或按下时显示。请记住，大多数移动设备，因此无鼠标的移动设备，无法充分利用悬停状态。

5. 您可以使用我们迄今为止探讨的相同技术来定义特定文本颜色、文本阴影、背景颜色（或渐变）和正常按钮、悬停按钮和按下按钮的边框。

创建额外的调色板

默认情况下，ThemeRoller 提供了三个选项卡，允许您创建和预览三种不同的调色板（A，B和C）。需要更多吗？要添加更多调色板，请点击 ThemeRoller 应用程序窗口底部的添加调色板链接。每次点击，都会为调色板 D、E、F 等生成新的调色板面板，一直到 Z。您可以像定义调色板 A-C 一样定义这些调色板。

滚动主题

创建了调色板并为您的主题定义了全局属性后，执行以下步骤将它们整合到一个主题中并下载：

1. 点击ThemeRoller屏幕顶部的下载按钮。下载主题对话框将打开。在下载主题对话框的主题名称字段中输入my-custom-theme。

2. 点击下载 Zip按钮。

3. 您的浏览器的下载对话框将出现。这对于不同的浏览器和 Windows 和 Mac 来说是不同的。使用对话框中的设置将文件保存到定义您的 Dreamweaver 站点的文件夹中。

4. 最后，解压文件。我们需要的所有文件都在解压后的主题文件夹中。

在 Dreamweaver 中应用自定义主题

现在您已经准备好将自定义主题应用到您的 jQuery Mobile 站点中。

您可能已经注意到下载主题窗口中的 ThemeRoller 生成的 CSS 文件的应用说明（您用来创建 ZIP 文件的那个）是为那些没有 Dreamweaver 的人设计的。当您在 Dreamweaver 中工作时，这个过程会更容易。您只需将生成的 CSS 文件附加到带有文件名末尾带有-min（但在.css文件扩展名之前）的 jQuery Mobile 站点上。

执行以下步骤来完成这个过程：

1. 回到 Dreamweaver，查看CSS 样式面板，然后点击附加样式表图标。附加外部样式表对话框将打开。

2. 在附加外部样式表对话框中点击浏览按钮。选择样式表文件对话框将打开。在您的站点文件夹中，导航到文件名末尾带有-min的文件。双击该文件以将您的 jQuery Mobile 页面链接到此 CSS 文件。

3. 在附加外部样式表对话框中点击确定。您的自定义 CSS 文件将添加到原始 CSS 文件中，并应用您的自定义主题样式。

4. 点击jQuery Mobile 调色板面板底部的刷新图标，刷新面板并显示您自定义的调色板和主题属性。使用您自己的自定义主题重新加载的jQuery Mobile 调色板面板，您可以使用面板或代码视图来将您自己的自定义数据主题应用于任何元素。

总结

这一章有点不同寻常，因为我们大部分注意力放在了 Dreamweaver 之外。在某种程度上，我们可以将 Dreamweaver 看作是一个乐队指挥，它利用和整合自定义主题来创建真正独特的 jQuery Mobile 站点。

使用 ThemeRoller 生成自定义主题，并将其整合到 Dreamweaver jQuery Mobile 站点中，这真的是一个重大事件。它使我们摆脱了 jQuery Mobile 内置的单调的五种调色板选项，而是可以访问无限的主题和配色方案。

在构建自己的主题时，请记住一个主题包含多个调色板。因此，您的主题将定义一组标准元素（特别是字体系列）。然后您可以构建颜色调色板，最多 26 个，这些将整合到一个主题中。

在本书的最后一章中，我们将讨论 PhoneGap 在线资源，该资源可以生成全尺寸应用程序。这些应用程序在移动设备上运行而无需浏览器。Dreamweaver CS6 包括了大量新工具，可以通过 PhoneGap 生成应用程序而无需编码。

第十章：使用 PhoneGap 构建应用程序

什么是应用程序？应用程序与移动友好的网站有什么不同？

您需要一个应用程序吗？如何在 Dreamweaver 中创建应用程序？

在本章中，我们将回答所有这些问题，并逐步介绍在 Dreamweaver CS6 中创建应用程序的过程。

应用程序（简称应用）与移动友好的网站不同之处在于应用程序不在浏览器中运行。相反，应用程序作为在移动设备操作系统中运行的独立程序。摆脱在浏览器中运行的限制，应用程序可以利用移动设备的整个视口。此外，即使设备未连接到互联网，应用程序也可以在移动设备上运行。

在大多数方面，应用程序看起来和感觉很像 jQuery Mobile 页面，但它们在“内部”非常不同。应用程序是用高级编程语言编写的，而移动友好的网站可以使用 HTML5、CSS3 和 JavaScript（jQuery Mobile 的三个组件）创建。

使用 Dreamweaver CS5.5，Adobe 推出了允许您将 jQuery Mobile 网站转换为应用程序的工具。这些生成应用程序的工具仍处于早期的演进阶段。事实上，与 Dreamweaver 5.5 中可用的功能相比，Dreamweaver CS6 中生成应用程序的功能有所减少。尽管如此，您仍然可以在 Dreamweaver 中生成真正的、可工作的应用程序；在本章中，我们将介绍如何做到这一点。

以下主题将被涵盖：

• 理解应用程序和移动网站之间的关系

• 两个主要移动操作系统 Android 和 iOS 的概述

• 在 PC 上模拟应用程序

• 安装 Android 软件开发工具包

• 使用 Dreamweaver 与 PhoneGap

• 配置 PhoneGap 设置

• 使用 Dreamweaver 生成应用程序

• 测试和分发应用程序

应用程序和移动网站

正如本章介绍中简要提到的，应用程序是完整的软件程序。这其中一个重要的含义是应用程序需要在特定的操作系统上运行。例如，Dreamweaver 是一个应用程序。Dreamweaver 可以在两个操作系统上运行：微软 Windows 和苹果的 OS X 操作系统。而且，应用程序是特定于操作系统的，因此您不能在 Mac 上运行 Dreamweaver 的 Windows 版本（也不能在 Windows 机器上运行 Dreamweaver 的 Mac 版本）。Dreamweaver 的 Mac 版本和 Windows 版本都无法在 Linux 机器上运行。

重点是什么？当您为移动设备创建应用程序时，您必须为每个移动操作系统创建单独的应用程序版本。有许多移动操作系统，包括 Google Android、Apple iOS、微软的 Windows Phone、HP 的 WebOS、Blackberry 和 Symbian。

为它们提供服务的主要移动操作系统是 Android 和 iOS，它们占据了绝大多数移动设备。

Android 和 iOS

Google 赞助了 Android 移动操作系统的开发，并后来收购了它。Android 是开源的，意味着任何人都可以访问源代码。谷歌的做法是鼓励移动设备制造商使用 Android 作为其设备的操作系统。在移动设备发展的这一阶段，Android 操作系统出现在各种移动设备上，从亚马逊的 Kindle Fire、三星的平板电脑和智能手机，到售价低至 39 美元的廉价智能手机。Android 是最广泛使用的移动操作系统。

Android 应用程序的大量受众催生了数以十万计的 Android 应用程序。Android 应用程序的最大分发商是 Google Play 在线市场，但任何人都可以将 Android 应用程序作为带有.apk文件扩展名的文件进行分发。

您可以构建一个 Android 应用程序并通过电子邮件发送给客户或朋友，或者从您的网站上提供。这是我们将在本章重点关注的情景。

苹果的 iOS 移动操作系统不是开源的。iOS 仅适用于 iPhone、iPad、Apple TV 和 iPod Touch。

正如苹果严格控制对 iOS 操作系统的访问一样，它也严格控制在 iOS 上运行的应用程序的分发。分发 iOS 应用程序需要将您的应用程序放置在 iTunes 商店中，并经过苹果的批准。这个过程很复杂，甚至是政治性的。

注意

苹果认为，它对通过 iTunes 营销的应用程序的严格控制确保了质量控制。苹果的批评者指出，例如 2009 年禁止普利策奖获得者马克·菲奥雷的卡通应用程序NewsToons的事件，理由是它“嘲笑”公众人物。在广泛抗议之后，苹果改变了决定，允许NewsToons应用程序通过 iTunes 进行营销。

为了避免陷入成为经过批准的 iOS 应用程序开发人员的程序中，我们将在本章中专注于使用 Dreamweaver 生成和分发 Android 应用程序。也就是说，如果您是经过批准的苹果 iOS 应用程序开发人员，构建 iOS 应用程序的步骤几乎与构建 Android（和其他）应用程序的步骤相同，因此您将毫无困难地按照本章后面的逐步说明添加应用程序的 iOS 版本。

了解 PhoneGap

PhoneGap 是一个移动开发框架，得到了 Adobe 的支持，现在由 Adobe 拥有。PhoneGap 可以从使用 JavaScript、HTML5 和 CSS3 创建的页面生成应用程序，这意味着它可以从 jQuery Mobile 页面生成应用程序。

PhoneGap 可以从一组 HTML、CSS 和 JavaScript 文件生成多个应用程序。早期版本的 PhoneGap（Dreamweaver CS5.5 中使用的版本）只能在 OS X（苹果）计算机上生成 iOS 应用程序，但当前版本可以上传文件到云端，然后将它们转换为应用程序，因此您可以从 Windows 计算机创建 iOS 应用程序。

PhoneGap 可以在没有 Dreamweaver 的情况下访问和使用（在www.phonegap.com），但 Dreamweaver 提供了一组简化的、更易访问的工具，可以直接从 Dreamweaver 生成使用 PhoneGap 的应用程序。

在构建应用程序之前

比利·乔尔有一首歌有以下歌词：

“你听说过新风格吗，亲爱的？你只需要外貌和大量金钱。”

在 Dreamweaver 中构建应用程序不需要外貌或大量金钱，但有两件事是必须的：

1. 一个工作的 jQuery Mobile 页面。本书的前三章介绍了构建 jQuery Mobile 网站的过程，因此，如果您从这里开始阅读本书，您需要回溯几章，以掌握创建 jQuery Mobile 网站所需的技能。

2. 一个 PhoneGap Build 服务帐户。Dreamweaver 实际上充当了 PhoneGap 的前端，但 Dreamweaver 会要求您登录您的 PhoneGap 帐户。我将很快为您介绍获取 PhoneGap 帐户和登录信息的过程。

还有一个对在 Dreamweaver CS6 中构建应用程序有用但不是必需的第三个元素，那就是 Android 的软件开发工具包（SDK）（如果您是注册的 iOS 开发人员，也可以下载 iOS 的 SDK）。SDK 允许您在自己的计算机上预览和测试应用程序，因此让我们一起走过下载这些文件的过程。

创建 PhoneGap Build 服务帐户

让我强调一下：您不能在没有 PhoneGap Build 服务帐户的情况下使用 PhoneGap Build 和 Dreamweaver。帐户是免费且易于设置的。要创建一个帐户，请访问 PhoneGap Build 网站build.phonegap.com/people/sign_up。

当您访问 PhoneGap Build 网站时，您会看到两个注册选项。其中一个选项是使用 Adobe ID。如果您已经有 Adobe ID，可以在这里使用，如果没有，可以创建一个。

下载 Android SDK

虽然 Android SDK 不是构建应用程序所必需的，但在自己的计算机上预览和测试应用程序时是必需的。而且 SDK 是免费且易于下载，并且在预览和测试应用程序时非常有帮助，因此您应该下载它。

要下载包含 Android SDK 的文件集，请转到developer.android.com/sdk。单击如下屏幕截图中所示的下载 SDK按钮：

单击下载 SDK按钮会带您到一个法律页面。阅读条款和条件，选中我已阅读并同意上述条款和条件复选框，然后单击下载 SDK按钮（确切的措辞取决于您的操作系统）。

单击下载按钮后，下载将开始。将 ZIP 文件保存到一个您可以找到的文件夹中。解压文件——Mac 版本是adt-bundle-mac-x86_64.zip，Windows 版本略有不同。

重要的事情在这里：保存解压后的文件，有一个名为SDK的文件夹。跟踪这个文件夹在计算机文件结构中的位置。在配置 PhoneGap 构建功能的过程中，您需要导航到这个文件夹中的 Dreamweaver。

PhoneGap 和 Dreamweaver

您会发现，在 Dreamweaver 中生成应用程序的工作 99%是在开始将页面导出到应用程序之前完成的。简而言之，这一切都是关于准备。如果所有的准备工作都就绪，生成应用程序就是无忧无虑的。

在准备将 jQuery Mobile 页面导出为应用程序时要记住的一个规则是：每个应用程序都必须基于一个独特的 Dreamweaver 站点。换句话说，您不能从同一个 Dreamweaver 站点中的文件构建两个不同的应用程序。

在整本书中，我强调了始终在 Dreamweaver 站点中工作的重要性。当您构建一个将被导出为应用程序的站点时，这一规则变得更加重要。

当然，在单个 Dreamweaver 站点中创建多个 jQuery Mobile HTML 页面是完全可能的。只要您不打算将 HTML 页面导出为应用程序，这是可以的。但是，如果您打算将 jQuery Mobile 页面导出为应用程序，请创建一个新的 Dreamweaver 站点，并在该站点中创建一个 HTML 页面。将页面命名为index.html。

如果您已将 jQuery Mobile 页面保存为index.html，则可以使用 Dreamweaver 的 PhoneGap 工具将内容导出到应用程序。

提示

Dreamweaver CS6 引入了生成应用程序的全新和不同的程序。在某些方面，Dreamweaver CS5.5 中生成应用程序的工具比 CS6 更强大，但是步骤又有很大不同。有关在 Dreamweaver CS5.5 中生成应用程序的逐步说明，请参见Dreamweaver CS5.5 移动和 Web 开发与 HTML5、CSS3 和 jQuery，David Karlins，Packt Publishing。

配置 PhoneGap 设置

您可以在 Dreamweaver 中生成应用程序而不配置 PhoneGap 设置。但是，除非并且直到配置 PhoneGap 设置，否则无法在计算机上模拟应用程序。这就是您需要记住您保存 Android SDK 文件的位置的地方。记住了吗？好的，那么您现在可以配置 PhoneGap 设置，以便模拟（预览和测试）您的 Android 应用程序。

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

1. 打开 Dreamweaver 站点后，导航到站点 | PhoneGap 构建服务 | PhoneGap 构建设置。PhoneGap 构建设置面板将打开。

2. 在面板的Android部分（顶部），单击选择位置（文件夹）图标，然后导航到并选择从 Android SDK 下载文件解压缩的文件夹中的SDK文件夹。

提示

在这里，我们不讨论 iOS SDK 的安装过程，但如果你是注册的苹果开发者，你可以在面板的 iOS 部分使用选择位置（文件夹）图标，并导航到并选择你保存解压后的 iOS SDK 文件的文件夹。

1. 在定义 PhoneGap SDK 设置后，点击PhoneGap Build Settings面板中的保存按钮。

在你定义了 PhoneGap Build 设置后，你可以在台式机或笔记本电脑上模拟（测试）你的应用程序。这并非必需——你仍然可以在移动设备上创建和测试应用程序，并将其下载到你的电脑，而无需配置 PhoneGap Build 设置。但是，如果你可以在用来运行 Dreamweaver 的同一台电脑上直接测试你的应用程序，你会发现开发和测试过程更加高效。

使用 Dreamweaver 生成应用程序

让我们回顾一下在你可以在 Dreamweaver 中生成应用程序之前需要准备的清单：

• 你需要在 PhoneGap 注册，并拥有登录 ID 和密码。

• 你需要构建并保存一个 jQuery Mobile 页面作为index.html。记住，每个应用程序都需要自己的 Dreamweaver 站点。

• 如果你想在自己的电脑上模拟你的应用程序，你至少需要下载 Android SDK，解压文件，并使用PhoneGap Build Settings面板定义这些文件的位置。

将这些部分放在一起，你就可以生成一个应用程序了。要做到这一点，请执行以下步骤：

1. 导航到站点 | PhoneGap Build Service | PhoneGap Build Service。PhoneGap Build Service面板将出现。

2. 要开始创建一个新应用程序的过程，请将下拉菜单设置为默认的创建为新项目，然后点击继续按钮。

3. 点击继续后，会打开一个新的PhoneGap Build Service面板。在这里，你可以为你计划专业分发的应用程序输入密钥和密码。对于你自己分发的应用程序，密钥和密码是不需要的，通常除非你是为大规模销售而开发应用程序，否则是不必要的。你可以在 Android 的密钥弹出菜单中选择无。

提示

有关获取 Android 应用程序的密钥和密码的详细信息，请参阅developer.android.com/tools/publishing/app-signing.html#cert。

1. 在下一个面板中点击继续按钮：

2. 另一个PhoneGap Build Service面板会显示应用程序生成的进度。在这里你无需做任何操作，只需坐下来，放松一下，等待 PhoneGap 生成你的应用程序。

3. 当 PhoneGap 为你配置的移动操作系统生成应用程序完成时（在我们的情况下，除了 iOS 之外的所有操作系统），PhoneGap Build Service面板将显示每个应用程序的状态。

现在你已经准备好测试和分发你的应用程序了。但不要关闭PhoneGap Build Service面板！你需要它来测试和分发你的应用程序。

提示

故障排除提示

如果PhoneGap Build Services面板反复冻结，问题很可能不在于你的配置或互联网连接。Dreamweaver CS6 可能已经携带了一个似乎未被承认的错误，导致PhoneGap Build Services面板冻结。如果问题仍然存在，请在 Dreamweaver 中导航到帮助 | 更新，并使用最新版本更新你的 Dreamweaver CS6 安装，这将修复这个错误。

测试和分发应用程序

在你分发应用程序之前，有三种方法可以测试应用程序：

• 你可以在电脑上模拟应用程序，只要你下载并安装了该应用程序的 SDK。

• 您可以使用移动设备的 QR 阅读器将应用程序扫描到移动设备上。这将提供一个链接到 PhoneGap 网站上保存的应用程序文件，并允许将应用程序下载到您的移动设备进行测试。

• 您可以下载该应用程序并将其从计算机传输到移动设备。

在您自己的计算机上模拟应用程序是这些选项中最简单的，我们将重点关注这一点。但我也会介绍如何使用 QR 阅读器将您的应用程序加载到移动设备上，以及如何下载该应用程序。

使用模拟器测试应用程序

在您用来运行 Dreamweaver 的台式机或笔记本电脑上模拟应用程序，是查看您的应用程序在移动设备上的外观最简单的方法。如果您已经安装和配置了任何操作系统的 SDK（如 Android），该 SDK 包括模拟软件。

要启动任何操作系统的模拟器，请单击PhoneGap 构建服务面板中的模拟应用程序图标。

在PhoneGap 构建服务面板中出现的下一个屏幕提供了如何模拟您的应用程序的选项（在它们可操作时）。一般来说，您会接受默认设置，并单击启动按钮。

启动模拟器需要互联网连接，并需要一些时间。为什么？因为应用程序实际上是托管在 PhoneGap 网站上的，并且必须从该网站下载到模拟器窗口中。因此，在启动模拟器之前，请确保您有可用的互联网连接，并且要有耐心。最终，模拟器将启动，您可以在计算机上测试应用程序。

不同的操作系统有不同的模拟器，但它们都提供键盘和预览窗口，显示您的应用程序几乎与在移动设备上显示和工作的方式相同。

使用模拟器测试应用程序

修改您的应用程序

一般规则是，在生成应用程序之前，创建应用程序的测试和编辑过程会进行。您希望确保您的 jQuery Mobile 网站在转换为应用程序时能够按照您的意愿进行工作。

也就是说，有时当您在模拟器窗口中测试应用程序时，您会发现需要进行更改。您可以通过编辑 jQuery Mobile 网站来做到这一点，并通过单击PhoneGap 构建服务面板底部的重新构建应用程序图标来重新生成应用程序。

您可以在此过程中保持模拟器运行，并通过单击您的应用程序的模拟应用程序图标来更新模拟器。应用程序需要上传和重新生成，这需要相当长的时间，这强调了在生成应用程序之前测试和完善您的 jQuery Mobile 网站的重要性。

将应用程序扫描到您的 Android 设备

另一种测试生成的 Android 应用程序的方法是将其下载到 Android 设备上。要做到这一点，单击PhoneGap 构建服务面板中 Android 的查看 QR 码图标。

一旦单击查看 QR 码图标，PhoneGap 构建服务面板将显示一个大的可扫描的 QR 码。

使用 Android 手机中的 QR 扫描软件，将 QR 码扫描到您的 Android 设备。您可以通过在 Android 移动设备中启动 QR 阅读器，并将扫描窗口对准 Dreamweaver 生成的 QR 码来完成这一操作。

在将 QR 码扫描到您的 Android 设备后，您的设备会显示应用程序文件的链接。单击该链接，并使用您的 Android 设备中的工具下载、打开和安装应用程序文件。

提示

如何在不同的 Android 移动设备上下载和安装文件的全面探讨超出了本书的范围，但您可以使用 Astro 文件管理器完成整个过程，这是一款可下载到任何 Android 移动设备上的应用程序。

下载并安装应用程序后，您可以在您的 Android 移动设备上进行测试。我的 Android 手机没有屏幕截图实用程序，所以我们将使用屏幕的照片来演示应用程序在我的设备上的外观。

下载应用程序

测试应用程序的第三个选项是将其下载到您的计算机上。该应用程序不会在计算机上运行，因为它只能在为其创建的移动操作系统上运行。但是，您可以使用任何文件传输技术将文件移动到您的移动设备上进行测试。

在这里，我们再次偏离了 Dreamweaver，但一般来说，您可以通过使用 USB 线将应用程序从开发计算机传输到移动设备，然后将应用程序（其文件扩展名为.apk）拖放到移动设备上。然后，您可以在移动设备上启动应用程序，方式与启动任何应用程序相同。

分发应用程序

应用程序分发是针对每个操作系统的。如前所述，所有 Apple 设备的应用程序都通过 iTunes 分发。Android 应用程序通过 Google Play 出售和分发。您无需经过 Google 的批准即可通过 Google Play 分发应用程序，但有一些要求，您必须注册为 Android 开发人员（并支付注册费）。您可以在play.google.com/apps/publish找到有关通过 Google Play 出售或分发应用程序的所有信息。

虽然商业分发应用程序远远超出了本书的范围，但您可以直接从您的网站分发 Android 应用程序。以下是在 Dreamweaver 中如何做到这一点：

1. 在PhoneGap Build Service面板中，单击 Android 的下载应用程序图标。

2. 选择保存.apk 文件的位置对话框将打开。导航到您将分发应用程序的网站，并单击打开按钮将应用程序下载到所选文件夹。下载应用程序后，将出现一个小对话框。在该对话框中单击确定。

3. 您可以在 Dreamweaver 的本地文件面板中重命名应用程序，只需确保保留.apk 文件扩展名。

4. 将.apk 文件保存到 Dreamweaver 网站后，您可以创建一个链接到该应用程序文件，就像您创建到任何其他文件的链接一样。

从您自己的网站分发应用程序是一种可行的、基层的方式，使您的应用程序可用。鉴于通过 Dreamweaver 构建的应用程序的技术限制，从您的网站共享应用程序是一种适当的分发方式。

总结

应用程序是您网站的独立版本。它们不需要在移动设备上使用浏览器，也不需要互联网连接（一旦它们被下载和安装）。应用程序是用高级编程语言编写的，专业级应用程序需要大量投资在高级编码上。

Dreamweaver CS6 与 PhoneGap 工具集合作，并作为其前端。这些工具将使用 HTML5、CSS3 和 JavaScript 构建的网页（一般来说，这意味着 Dreamweaver 中的 jQuery Mobile 页面）转换为一系列移动操作系统的应用程序，包括 Android。如果您是注册的 Apple 开发人员，您还可以使用 PhoneGap 和 Dreamweaver 创建 Apple iOS 应用程序。

Dreamweaver CS6 的 PhoneGap Build Service 管理整个构建、测试和在简单级别上分发应用程序的过程。使用 jQuery Mobile 构建的页面上传到 PhoneGap 服务器，然后转换为应用程序并保存。

您可以使用每个操作系统提供的软件开发工具包（SDK）文件中的模拟器软件来测试应用程序。您可以通过将应用程序文件下载到计算机上，并在网页中发布文件的链接来自行分发生成的应用程序，就像您发布任何文件的链接一样。

Dreamweaver CS6 的应用程序工具是否能够达到通过 Google Play 或 iTunes 销售的商业分发应用程序的水平？可能不会。由专业编码人员构建的应用程序将加载更快，运行更快，可以包含 3D 图形，最重要的是，可以针对不同的操作系统进行定制（而 PhoneGap 基于相同的源文件为每个操作系统生成应用程序）。但是，在 Dreamweaver 中构建的应用程序足够好，可以免费分发。如果您选择与专业编码人员合作创建商业质量的应用程序，您可以使用 PhoneGap 生成的应用程序作为编码团队的工作模型。