在检查定义转换所需的相对基本的语法之前，让我们重新审视我在本章早些时候试图激起的有关如何充分利用 Dreamweaver CS6 有限但有用的 CSS3 代码生成工具的两种可能方法的争议。
回顾和扩展选择：您不能在CSS 规则定义对话框中定义转换，但可以通过这种方式应用 CSS2（更早）样式——例如背景颜色、字体定义等规则。但是，在 Dreamweaver 的CSS 规则定义对话框中，我们将徒劳地搜索skew、scale、transform或rotate。因此，以下两个选择仍然存在：
我会让你回到本章早些时候更详细的讨论中，逐步介绍如何在正在使用的 CSS 文件中输入代码或使用CSS 样式面板定义样式。但是这里有一个新因素需要检查：在CSS 样式面板中，您在定义转换参数方面会得到比在本章早些时候探讨的效果（如阴影）更多的帮助。
以下是额外帮助的工作方式：在向 CSS 样式 面板中的样式添加规则时，如果在 CSS 样式 面板底部输入其中一个变换选项（-webkit-transform，-moz-transform 或 -o transform），Dreamweaver 会在面板的第二列中提供一个弹出式帮助，其中包含各种变换选项，如下截图所示：
最重要的是，你必须决定哪种环境更适合你生成 CSS3 变换代码。在本章的其余部分探索特定的变换时，我会透露我的选择（只需在 代码 视图中输入代码）。但特别是当你开始熟悉 CSS3 变换代码时，你可能会发现 CSS 样式 面板中的弹出式帮助很有用。
缩放由两个参数定义，即 x 和 y。x 值定义了要增加的宽度（或者使用负值减少），y 值应用于高度。通常是乘数，因此 2 的值 = 200%，表示将尺寸加倍，而 .5 的值 = 50%，表示将尺寸减少到原始值的一半。
translate 变换的语法与 scale 变换类似，不同之处在于第一个参数，即 x 值定义了对象向右移动的距离（如果使用负值，则向左移动），y 值定义了对象向下移动的距离（如果使用负值，则向上移动）。通常以像素为单位定义数值。
当你旋转一个对象（或者，我们将看到，如果你扭曲它），对象将与附近的对象重叠。通常情况下（除非这种重叠是设计的一部分），这可以通过向对象样式添加足够大的外边距值来解决。
skew 变换可能由两个用逗号分隔的参数定义。第一个参数定义了 x 轴（水平）以度为单位的变换，第二个值定义了垂直扭曲。如果你在两个轴中的一个上使用零作为值，结果将是一个平行四边形，如下截图所示：
除了我们在本章中探讨过的 CSS3 的二维（2D）变换效果之外，还有其他三维变换正在不断发展的支持状态。总的来说，除了 WebKit 集（SafariLimit）之外，一般没有任何浏览器支持它们，据我所知，目前它们并不适用于没有额外 JavaScript 来对其进行动画处理。
您可以将多达四个变换组合成一个单一的变换规则。例如，要创建一个应用skew（在 x 和 y 轴上各 5 度）、scale（在 x 和 y 轴上各 1.5 倍）和rotate（45 度）的变换，以适用于 WebKit 浏览器的前缀，您可以使用以下代码：
所谓互动性，是指页面上的对象或元素对访问者的操作做出自己的反应。访问者悬停在一个对象上，该对象移动、调整大小、旋转、倾斜、产生阴影、变得半透明，或者经历其他一些变化。
有两种基本技术可以将互动性与效果和变换结合起来。一种是使用 JavaScript 并编写或生成与变换和效果相结合的代码。将 JavaScript 与效果和变换相结合可以是一种非常强大的技术，用于创建例如使用 Flash 可以生成的互动性。
另一种更加易用的技术是利用广泛支持且易于使用的:hover伪类。如果您熟悉为链接定义“悬停”状态的操作，当悬停在链接上时链接会呈现出独特的外观，那么您大致了解这将如何工作。我们将在接下来的章节中更详细地讨论这一点。
使用 JavaScript 创建互动效果和变换存在一些明显的限制，这超出了我们在本书中可以讨论的范围。首先，为了实现这种方法，需要了解 JavaScript，虽然这方面的知识可以在厚厚的书籍、大量的在线资源以及付费工具中获得，但这远远超出了我在本章甚至本书中可以涵盖的范围。此外，JavaScript 并不在所有浏览环境中得到普遍支持，而 HTML5 和 CSS3 的吸引力在于，通过适当考虑非 HTML5 环境，本书中探讨的几乎所有内容都将在任何浏览环境中工作，或者至少不会对任何浏览环境造成伤害。
Dreamweaver 的被低估但也被支持不足的用于生成 JavaScript 的工具，行为面板，不支持 CSS3 效果和变换，因此在结合 JavaScript 效果和变换方面目前还是无能为力的。
我们已经部分列举了结合 JavaScript 与 CSS3 效果和变换的缺点（和优点），因为您可能会在网络上遇到开发者在探索 CSS3 的前沿并将他们的工作与 JavaScript 结合的示例、模型和讨论。
例如，网页上的未访问链接默认显示为蓝色下划线，访问过的链接显示为紫色下划线，活动链接显示为红色下划线。这些参数可以在 Dreamweaver 的CSS 样式面板中轻松更改。而且，它们在每个现代浏览器中甚至在旧版浏览器中都受到支持。
但除了:visited和:link :active伪类样式（伪类），还有另一种更动态的状态叫做:hover。这种可定义的状态适用于访问者在页面上悬停鼠标的任何东西。
标签（类或 ID）。
例如，对于
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 中。让我们首先设置我们需要的文件：
导航到文件|新建以打开新建文档对话框。在类别列中选择空白页面，在页面类型列中选择HTML，在布局列中选择。从文档类型弹出窗口中，选择HTML5。此时附加 CSS 文件框应为空白。定义新文件后，点击创建以创建一个新的空白 Dreamweaver 页面。
在文档工具栏的标题区域输入悬停。导航到文件|保存并分配一个文件名。让我们使用hover.html文件。
接下来，我们将创建包含我们将使用的样式的 CSS 文件-特别是 CSS3 效果和变换样式。导航到文件|新建。新建文档对话框打开。
在页面类型类别中选择CSS，然后点击创建按钮。保存 CSS 文件；使用文件名hover.css。打开一个空白的 CSS 页面。
选择 HTML 文件。您可以在 Dreamweaver 文档窗口顶部的文件选项卡中执行此操作。或者为了避免任何可能的混淆（因为我们打开了两个名称相似的文件），点击窗口菜单，然后点击hover.html文件。
在 HTML 页面中（您可以在三个视图中的任何一个中，但设计视图效果很好），导航到窗口|CSS 样式以显示CSS 样式面板（如果该面板不可见）。
点击CSS 样式面板底部的附加样式表链接图标，并导航到并链接hover.css样式表文件。空白的样式表文件将出现在CSS 样式面板中。您可以看到到目前为止我们已经定义的所有元素，此时您的屏幕应该看起来像下面的屏幕截图所示：
点击CSS 样式面板底部的新建 CSS 规则图标，打开新建 CSS 规则对话框。从选择器类型弹出菜单中选择类，在选择器名称框中键入box。在规则定义区域，如果尚未选择hover.css，请从规则定义弹出菜单中选择它。点击确定打开hover.css 中.box 的 CSS 规则定义对话框。
在CSS 规则定义对话框的背景类别中，选择浅色背景颜色（如黄色）。在框类别中，应用以下规则，如下面的屏幕截图所示。但是不要点击确定！我们将接下来定义一个边框。
宽度：200 像素
高度：200 像素
浮动：左
填充：25（全部）
外边距：50（全部）
注意
关于设置的说明
我们正在创建一个 200 像素的正方形框，这是一个很好的大小，可以容纳侧边栏消息或图片和标题。我们将其浮动到左侧，以便其他内容可以在右侧围绕框进行包裹。大外边距和填充为可能扩展框或影响附近元素的空间提供了足够的灵活性。
接下来，让我们创建一种有趣的边框。在CSS 规则定义对话框的边框类别中，将边框定义为虚线、粗、红色，如下面的屏幕截图所示。然后点击确定创建样式规则。
现在让我们在页面上放置一个（或--你的选择--多个）这个类样式的实例。导航到插入 | 布局对象打开插入 Div 标签对话框。从类弹出菜单中选择box，然后点击确定。请注意，如果您希望将此框用作页面设计元素，可以重复执行此操作，如下面的屏幕截图所示。您还可以使用此图来仔细检查CSS 样式面板中.box类样式的规则。
使用悬停类样式来实现动画效果
现在我们可以定义:hover伪类样式，以实现对这个框的缩放和圆角效果。使用 Dreamweaver CS6 的CSS 样式面板和对话框，我们能够创建一个具有定义边框的大小浮动框。对于以下步骤中需要的 CSS3 样式，我们就没有那么幸运了。我们将使用CSS 样式面板定义样式，但必须自己输入 CSS3 样式代码，只能依靠 Dreamweaver CS6 的代码提示。
点击CSS 样式面板底部的新建 CSS 规则图标，打开新建 CSS 规则对话框。从选择器类型弹出菜单中选择类，在选择器名称框中键入.box:hover。在规则定义区域，如果尚未选择hover.css，请从规则定义弹出菜单中选择它。点击确定打开hover.css 中.box:hover 的 CSS 规则定义对话框。
由于我们需要的规则在CSS 规则定义对话框中不可用，因此点击确定在当前阶段保存样式.box:hover而不添加任何规则。
导航到窗口 | 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;
}
保存 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 页面中：
在分割视图的代码部分，将光标放在标签后，然后按Enter（或 Mac 上的Return）创建一行新代码。
开始键入标签的开头，如下面的截图所示：
将光标放在单词audio后面，然后按下空格键。再次会出现一个弹出菜单。键入字母s，然后在列表中双击src。这是源代码，也就是文件的来源。
当您选择src时，将会出现一个浏览链接。双击浏览链接打开选择文件对话框，如下面的截图所示：
找到之前复制的音频文件，在我们的例子中是一个 MP3 文件（但也可能是 WAV 或 OGG）。通过双击选择该文件。
您希望为这个音频添加一个控制器或播放器，所以我们将设置一个参数来显示一个。再次按下空格键，这次键入c，这在这种情况下将是用于控制。双击controls，然后当弹出框出现时，再次双击controls，如下面的截图所示：
通过键入>来关闭开放的audio标签。
最后，键入，这将完成audio元素的闭合标签。
现在我们想要预览文件，这只能在 Safari 或 Opera 中进行，假设您选择了 MP3。要在 Safari 中预览，请导航到文件 | 在浏览器中预览 | Safari。它应该看起来像以下截图：
如果我们使用了 OGG 文件，我们可以做同样的步骤，但现在我们必须在 Firefox 中预览。
备用音频选项
所以现在您的页面上有音频了。但是还缺少两件事：
首先，您的音频播放器没有太多特殊功能。
其次，并非所有访问网站的人都能访问音频文件。由于我们之前确定，不是所有支持 HTML5 的浏览器都支持相同的音频文件格式，因此您应该为不同的浏览环境提供不同的 HTML5 支持的音频格式选项。
让我们从提供备用音频文件格式的挑战开始。正如我们所指出的，一些符合 HTML5 标准的浏览环境支持 MP3 文件格式，其他支持 OGG 格式，剩下的支持 WebM。
因此，我们可以通过提供第二个源文件使我们的音频更易访问。这样，符合 HTML5 标准的浏览器可以找到并播放与该浏览器相匹配的文件格式。
为此，我们将改变之前创建的 HTML，以将播放器控制代码与音频源代码分开。代码看起来类似于以下代码块：
在上述代码中，您将audio.ogg或audio.mp3替换为您自己的音频文件名。
对于那些浏览器无法解释 HTML5 的用户，比如使用较旧版本的 Internet Explorer 或较旧浏览器的用户，我们将希望提供另一种访问音频的方法。为此，我们可以创建一个链接到我们的音频文件。如果这样做，当链接被点击时，音频文件将在自己的浏览器用户中打开。然后浏览器将使用插件播放器，如 QuickTime、Flash 或 Windows Media 来播放音频文件。这并不是最优雅的解决方案，但它会起作用。
为此，我们可以在我们刚刚探索的 HTML 中添加一行代码。这行代码创建的文本将出现在不解释（支持）HTML5标签的浏览器中，并且可以链接到一个页面，该页面以 QuickTime、Windows Media 或 FLV 等传统格式呈现音频。
代码看起来类似于以下内容：
Your browser does not support the HTML5 audio element but you can hear the audio file here .
代码的最后一行，以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 音频文件。
将这些部分放在一起，这些步骤将起作用：
在 Dreamweaver 文档窗口中，切换到分割视图，在分割视图的代码侧，单击要创建新代码行的位置。这可以是在
和标签之间的任何位置。
开始输入。在过程中输入几个字母后，您可以按Tab键来完成元素的开头。然后按下空格键。
双击src，如图所示。将出现一个浏览链接：
双击浏览链接以打开选择文件对话框，然后导航到并选择 MP3 音频文件。
再次按下空格键，并在出现的代码提示中双击controls。然后在下一个代码提示中再次双击controls。
键入。
现在，为了支持非 HTML 浏览器，在您的网页上添加一行文本，其中包含一个链接，链接到您刚刚使用 HTML5 标签嵌入的音频文件。要做到这一点，找到一个插入点（在分割视图的代码侧面点击鼠标，就在关闭音频元素的 代码之前）。键入一个闭合的尖括号（>）来完成元素。然后键入Listen to the audio file作为常规 HTML 文本，并使用属性检查器将音频文件链接到您使用 HTML5 标签嵌入的文本。
提示
此代码为支持 HTML5 的浏览器提供了无缝的 HTML5 音频，可以处理 MP3 文件，并为其他所有人提供了 MP3 文件的链接。
嵌入本机视频
接下来，我们将学习如何使用 HTML5 和 Dreamweaver 向网页添加不同类型的视频。
在线视频正在经历一场彻底的演变。这些变化可以非常简要地总结为以下几点：您不再需要插件播放器。Dreamweaver 为嵌入本机视频（所谓的因为它在本机浏览器环境中播放，无需插件）提供了有限但有价值的支持。
我们将通过几个步骤学习如何使用 HTML5 视频元素：
理解本机视频的概念，以及它与网络视频发展的早期演变步骤有关，还有哪种视频格式适用于哪种浏览器。
创建 HTML5 就绪的数字视频文件。
使用标签在 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 技术方面，标签用于在页面上放置视频。这个标签允许设计师对播放器控件和其他参数（如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 将被嵌入页面中使用标签。但视频播放器的外观以及参数的属性（如自动播放或循环）是在 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 的元素（标签）呈现的。在本章中，我们的任务就是实现这一点，并很快我们将探讨 Dreamweaver 中用于嵌入视频的工具。
在我们做到这一点之前，让我们确定开发者在提供本机视频时面临的两个主要挑战。一个是不只有一个本机视频格式，而是有三种。第二个挑战是旧版本的 Internet Explorer（8 及更早版本）不支持 HTML5 的元素。
本机视频格式
三种最广泛支持的本机视频格式是：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 网站。正如我们在之前的章节中所讨论的，我们将在这里以三个简单的步骤回顾涉及其中的基本知识：
如果您没有在定义的 Dreamweaver 站点中工作，请导航到 Site | New Site。在 Site Setup 对话框中，为您的新站点命名并定义一个本地站点文件夹。这样可以定义一个 Dreamweaver 站点。在 Dreamweaver 网页中嵌入 HTML5 视频并不需要定义站点的服务器元素，但是定义本地站点是必要的。
现在创建一个新文件，并将其保存在您定义的站点中。为此，导航到 File | New 以打开 New Document 对话框。在 Category 列中选择 Blank Page，在 Page Type 列中选择 HTML，在 Layout 列中选择 。从 Doc Type 弹出菜单中选择 HTML5。单击 Create 创建一个新的空白 Dreamweaver 页面。
为了避免 Untitled 页面标题，输入 Document 窗口中的 Title 区域中的标题（可以是任何描述性文本）是一个很好的管理方式。
导航到 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 页面中，在开头的
标签后放置光标。如果您要在已有内容的页面中嵌入视频，请将插入点放在视频应出现的位置。
输入 标签。
按下 Tab 键完成 标签的开始。
使用代码提示来添加高度、宽度和控件参数。高度和宽度的值可以与您的视频的原始值匹配，也可以更大或更小。如果值大于原始视频，视频的分辨率将会降低。包括 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 包的任何版本）中通过代码提示生成的。
要开始定义视频源，输入标签。按下Tab键完成代码。按下空格键。输入sr，代码提示会建议。然后按下Tab键。会出现一个浏览链接。
要查找源视频文件，请双击代码提示提供的浏览链接，以打开选择文件对话框。
然后，转到您从 Media Encoder 导出到 Dreamweaver 站点文件夹的 h.264 视频文件。双击该文件以选择它。
非 HTML5 环境的备用视频
Internet Explorer 9 包括 HTML5 视频支持。然而，许多人仍在较旧版本的 Internet Explorer（IE 8、7 和 6）中观看在线视频。因此，重要的是提供不需要 HTML5 支持的在线视频的替代访问方式。
为了做到这一点，您可以添加一行代码，提供一个 FLV 文件的链接。这行代码应该在标签的参数集的末尾，就在 闭合标签之前。以下示例中包含了这行代码。
将所有内容整合在一起
我们将逐步介绍在本章末尾嵌入 HTML5 视频的示例，该示例使用了所有重要的标签参数，并整合了所有三种 HTML5 视频格式，并为非 HTML5 浏览器提供了可访问性。
然而，作为一个简短的课程，以下代码显示了一个带有控件的 320 x 240 视频，包括所有三种 HTML5 视频格式，以及一个供使用较旧版本 IE 的人观看 FLV 视频的选项：
Click to watch this video using Flash Player
测试 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 视频后，您可以进行以下步骤：
在 Dreamweaver 的文档窗口中，切换到分割视图，在分割视图的代码侧面中，单击您希望创建新代码行的位置。这可以是在
和标签之间的任何位置。由于我们正在处理一个全新的文档，请将光标放在第一个标签之后，然后按Enter（Windows）或Return（Mac）创建新的代码行。
开始输入
添加一个名为controls的视频参数以显示控件。
通过输入>来关闭标签，并按Return创建新的代码行。
通过输入来关闭视频元素。
在打开的video标签之后，但在关闭的video标签之前，使用以下代码行定义第一个视频源：
在这个阶段，您可以在分割视图的设计侧面中的实时视图中看到（和听到！）视频，如下面的屏幕截图所示：
在新的代码行中，输入 HTML5 代码以定义 Theora OGG 视频作为第二个视频源：
您可以通过在 Google Chrome 中预览页面来测试第二行代码。如果您安装了该浏览器，可以测试这个。当前版本的 Chrome 不支持 h.264 视频，因此不会识别.mp4文件，但会识别.ogv（OGG）文件。
添加定义第三个视频源的代码行：
在新的代码行上，只需输入：点击这里观看视频。选择单词这里，并使用插入超链接对话框来定义一个链接到vimeo.com/22366228的链接，该链接将在新的浏览器窗口中打开（从目标弹出窗口中选择_blank）。
提示
最后这个链接是我们为那些不支持任何 HTML5 视频的非常老旧的浏览器用户提供的“救援”选项。他们可以在 Vimeo 上观看视频。
随意使用文本或样式装饰页面。或者不用。保存你的文件。如果你可以访问 IE 6、7 或 8，你可以测试非 HTML 版本，或者你可以使用 Adobe BrowserLab 进行测试（文件 | 在浏览器中预览 | Adobe BrowserLab）
我们示例项目的完整代码如下：
Video
Click here to watch the video
总结
在本章中，我们探讨了创建和呈现 HTML5 音频和视频的过程。我们研究了 HTML5 支持的不断发展、不同和竞争的音频和视频压缩选项。此外，我们注意到需要通过创建一个在 HTML5 之前的浏览环境中可以使用的 FLV 文件来呈现我们的视频。
然后，我们使用 Dreamweaver 的工具来嵌入 HTML5 视频。这些工具本质上是代码提示，可以帮助编写 HTML5 标签及其属性，并且 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 元素和标签提供规则。
例如，如果一个
标签在页面上定义了一个主容器，三种媒体（手机、平板和台式机）的样式表都必须定义
标签应该如何显示。手机 CSS 的规则可能包括较窄的宽度、更简单的背景颜色和其他属性。但是，关键是所有三个样式表都必须为这个主容器div标签定义规则。对于所有的布局元素，无论是 HTML5 布局元素、
标签还是两者的组合，都必须如此。
准备生成媒体查询
准备生成媒体查询的一个有效协议是准备好三个可分配给不同媒体的 CSS 文件。
一个简单的准备工作协议如下：
为您的页面创建一个适用于台式机或笔记本电脑尺寸显示器的基本 CSS 文件。如果您正在从 Dreamweaver CS6 的 HTML5 布局生成页面，您可以使用相应布局附带的 CSS 文件作为“主”布局。
使用文件名如full-size.css保存“主”CSS 文件，然后再保存两次，使用两个不同的文件名（如tablet.css和smartphone.css），创建三个相同的样式表。或者，如果您只想提供两个选项（并且让平板用户看到全尺寸样式），只需保存两个版本的 CSS 文件——full-size.css和smartphone.css。
保存备用样式表后，您可以在多屏预览菜单中自定义它们。
有了三个备用 CSS 文件可供分配和编辑，您就可以开始定义媒体查询了。接下来我们将介绍这个过程。
为不同媒体分配样式
利用 Dreamweaver 构建媒体查询的最佳方式是在多屏预览模式下工作。请记住，这意味着我们在调整样式时不会编辑内容。但这种限制是我们完全可以接受的，事实上，作为一种一般方法，调整内容和样式应该被视为不同的过程。
因此，我们的情景是我们已经为打开的网页打开了多屏预览。并且我们已经准备好了三个不同的 CSS 文件——就像本章稍早讨论的“3 步”协议中所指出的那样。
在 Dreamweaver 站点中至少保存两个 CSS 文件，并在多屏预览中打开网页后，按照以下步骤为每个视图定义自定义样式：
单击媒体查询按钮打开媒体查询对话框。
在编写媒体查询到区域，选择此文档选项。站点范围的媒体查询文件选项较为棘手；它涉及 Dreamweaver 更改所有页面中的代码，并且不太可靠。
保留“强制设备报告实际宽度”复选框选中。这可以克服当不同设备以扭曲其实际宽度的方式定义“像素”时可能引起的混乱。在“媒体查询”对话框中的初始选择应该如下所示：
单击“+”图标添加样式表。所选样式表的“属性”区域变为活动状态：
在“描述”字段中，输入描述样式的文本（这是为了你自己的利益，而不是公开展示）。
在“最小宽度”字段中，输入一个值，定义了该样式将显示的最窄视口，无论在何处都适用。如果你为智能手机定义 CSS 样式，你不需要任何最小宽度，因为该样式将适用于任何大小的视口。
在“最大宽度”字段中，输入一个值，定义了该样式将显示的最宽视口，无论在何处都适用。如果你为全尺寸浏览器定义 CSS 样式，你不需要任何最大宽度，因为该样式将适用于任何大小的视口。
在“CSS 文件”区域使用“选择文件”图标导航到并选择一个样式表文件，该文件将适用于符合定义条件的视口，如下面的屏幕截图所示：
重复步骤 4，为媒体查询添加其他样式表。所有相关的样式将如下屏幕截图所示列出：
单击“确定”关闭“媒体查询”对话框，并在“多屏预览”窗口中看到应用了你的媒体查询，如下所示：
在任何时候，你都可以通过选择“窗口”菜单中的“多屏预览”来切换进入或退出“多屏预览”。
为媒体查询格式化 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 创建站点和页面）。有了定义的站点，以下步骤将为您的手机页面生成一个漂亮、适当的极简布局：
转到文件|新建。在新建文档对话框中，选择空白页类别。从页面类型列中选择HTML，并从布局列中选择第一个 HTML5 布局，2 列固定，居中。在新建文档对话框中，将布局 CSS弹出选择保留在创建新文件。确保附加 CSS 文件框中没有选择任何文件（如果有，请使用垃圾桶图标将其删除）。设置好这些设置后，点击创建。
另存样式表文件为对话框打开。将保存的样式表名称更改为fullsize.css，然后点击保存将样式表保存到您站点的文件夹中。
网页在 Dreamweaver文档窗口中打开。让我们对内容进行两次编辑：
删除www.adobe.com/go/adc_css_layouts链接。该链接过长，特别是对于手机来说。如果（在现实生活中）我们想要链接到一个具有很长 URL 的网站，我们可以通过转到插入|超链接来将链接分配给更短的文本。
在标题区域，键入全尺寸...还是手机？。
转到文件|保存，将编辑后的 HTML 页面保存为2_views.html。
接下来，我们将创建一个 CSS 文件，用于在移动设备上显示内容。转到文件 | 新建。在新建文档对话框中，从页面类型列表中选择CSS，然后单击创建按钮。转到文件 | 保存，将新的空白 CSS 文件保存为mobile.css。将原始的fullsize.css文件中的所有代码复制并粘贴到新的mobile.css文件中。接下来我们将编辑这些样式。
返回到文档窗口中的2_views.html页面。您可以通过单击文档窗口顶部的文件选项卡栏中的文件，或者使用窗口菜单来执行此操作。
转到窗口 | 多屏预览；在多屏预览中单击媒体查询按钮以打开媒体查询对话框。
对于平板电脑和全尺寸计算机，为了举例，我们将简单地显示已附加的 CSS 文件（fullsize.css）。单击+图标添加样式表。属性区域将激活新样式表：
在描述字段中输入全尺寸。
在最小宽度字段中输入960。此样式将仅应用于宽度至少为 960 像素的视口。
将最大宽度字段留空。因为我们正在为全尺寸浏览器定义 CSS 样式，所以不希望设置最大宽度；无论视口有多宽，都将应用此样式。
在CSS 文件区域使用选择文件图标导航并选择fullsize.css样式表文件，该文件将应用于符合定义条件的视口。
对于智能手机，我们将显示在第五步中创建的mobile.css文件。单击“+”图标添加样式表。属性区域将激活新样式表。
在描述字段中输入移动。
将最小宽度字段留空。此样式将应用于宽度小于 960 像素的视口。
在最大宽度字段中输入960。因为我们正在为手机定义 CSS 样式，所以不希望此样式表在宽度大于 960 像素的视口中显示。
在CSS 文件区域使用选择文件图标导航并选择mobile.css样式表文件，该文件将应用于符合定义条件的视口。
在多屏预览中查看页面布局；全屏视口的布局还不错。但是页面布局和颜色在移动设备上效果不佳。让我们在页面的移动版本中进行一些调整，如下所示：
将body标签的字体大小更改为150%，为移动设备提供更大的文本，如下所示：
我们希望在我们的移动样式的每个样式规则中删除所有width和float参数。这些width和float参数会创建列，以及内容不会填满页面的整个宽度，使得在移动电话上显示变得不可访问和不吸引人。浏览mobile.css样式表中的每个样式，并单击width或float参数的左侧以将该代码转换为注释，如下所示：
考虑调整颜色方案，以在移动电话用户遇到不同照明条件（包括明亮、户外和阳光）下使页面更易于阅读和导航。以下示例显示导航元素分配了更高的对比度：
就是这样！我们还可以进行更多微调，但要记住，在为移动设备设计时，少即是多。退出多屏预览（转到窗口 | 多屏预览取消选择此视图）。保存对 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“页面”中的内容。然后，在实时视图中尝试内容，查看其流程，并根据需要编辑、移动、分割和修改内容。
使用您自己的内容替换每个页面的页眉、内容和页脚。在每个生成的页面中识别此代码：
用任何 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。因此，例如，当您创建第五个页面时，该代码将添加到第四个页面之后的列表中，如下所示：
Page Four
Page Five 正如您所看到的，列表中复制的代码中有两处更改。
您需要通过复制和粘贴生成的page4来创建一个新页面，并创建一个page5。选择并复制定义page4的代码。
然后将该代码粘贴到page4的data-role属性的结束
标记之后。将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 的页面，请使用以下代码：
或者举个例子，如果您希望将主题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 创建站点和页面，并创建站点。
通过导航到文件 | 新建来创建一个新的 jQuery Mobile 页面。
在新建文档对话框中，选择类别列中的示例中的页面，示例文件夹列中的Mobile Starters，以及示例页面列中的jQuery Mobile（CDN）。然后单击创建。
将页面保存为index.html。
通过选择分割视图，将设计视图窗口大小设置为480像素宽和800像素高，并查看您的CSS 样式面板，设置一个方便的工作空间。
向您的 jQuery Mobile 网站添加第五个页面元素。要将该页面插入到站点的末尾，请在代码视图中单击以将插入点放置在关闭的标记之前。
通过导航到插入 | jQuery Mobile | 页面来插入新的页面元素。jQuery Mobile 页面对话框将显示，并提示您添加第五页。保持选中复选框选项，以在页面上包括页眉和页脚。
即使 Dreamweaver 添加了第五个页面元素，您仍然需要从主页创建到该元素的链接。在 jQuery Mobile 网站的主页上复制并粘贴第四页链接。将链接文本更改为第五页，并在属性检查器中将链接更改为#page5。
为每个页面自定义页面内容。需要一些示例灵感吗？前往维基百科的濒危物种页面，将其中一些文本（和图片）复制粘贴到各个页面中。当您从维基百科（或其他来源）复制和粘贴文本时，导航到编辑 | 特殊粘贴以启用特殊粘贴对话框，并选择仅文本选项，以避免在将文本粘贴到 Dreamweaver 中时复制链接和样式。
检查您主页元素上的链接是否有效。如果您为四种濒危物种设置了页面，主页应该有指向每个页面的链接。并确保在页脚中适当地标明维基百科的来源。
在实时视图中测试您的网站。单击主页元素上的每个链接应该打开四个附加页面元素中的一个。
确保jQuery Mobile Swatches面板是打开的（如果没有，请导航到窗口 | jQuery Mobile Swatches）。
在打开实时视图的情况下，系统地逐个选择元素并为每个元素应用主题颜色。
保存您的页面并导航到文件 | 在浏览器中预览。在浏览器中测试您的页面。在开发环境（笔记本电脑或台式电脑）中测试浏览器虽然不能完全复制移动体验，但它提供了一个足够好的测试环境。
摘要
在本章中，我们介绍了在 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 中为我们服务良好的老式
标签来布置页面内容的列？是的。但我们必须以一种特殊的方式来实现这一点，以便实现 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）的外观，请按以下步骤操作：
单击CSS 样式面板底部的新 CSS 样式规则图标。新 CSS 规则对话框将打开。
在选择器类型字段中，选择类。
在选择器名称字段中，输入.ui-block-a。
在规则定义框中，选择仅限本文档。
单击确定关闭对话框，并打开.ui-block-a的CSS 规则定义对话框。
在背景颜色字段中，选择一个背景颜色。
在框类别中，输入高度为200px。
单击确定以定义此本地样式，并在实时视图中检查效果，并在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 来更改内容，包括复制和粘贴可折叠块。
更改初始块状态
整个可折叠元素集由以下代码定义：
在可折叠集的开头和结尾的
标签之间是单独的可展开块：
或者默认情况下在页面打开时展开的块，使用以下代码定义：
默认情况下，打开页面时，三个可展开部分中的第一个部分会展开，其他两个部分会折叠。将data-collapsed="true"参数添加到最初打开的面板会在页面打开时将其更改为折叠状态。
此外，从面板中相反地移除data-collapsed="true"会使其在页面打开时显示为展开状态。
更改块数据主题和样式
我们可以向任何数据块添加data-theme参数。例如，将
更改为
会将数据主题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 表单工具）：
所有表单字段（如文本字段或提交按钮）都必须包含在一组
