Document

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

译者：飞龙

协议：CC BY-NC-SA 4.0

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

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

其中一个挑战是设计页面，使其在不同大小的设备上都能够访问、吸引人并且功能正常。一个页面，内容居中，左右两侧有侧边栏，文本围绕图像流动，在笔记本电脑上可能很吸引人，但在 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 生成的应用程序作为编码团队的工作模型。