使用CSS3 Mobile Pack在Fireworks中创建jQuery Mobile网站主题

在本文中，您将学习如何使用Adobe Fireworks CSS3 Mobile Pack来创建和维护使用了jQuery Mobile框架的手机网站。

CSS3 Mobile Pack包含两个新功能：

• CSS属性面板：CSS属性插件可以将能够在CSS中表现的任意Fireworks对象的全部属性展示出来。该插件会在CSS属性面板中列出相等同的CSS属性。要获得更多关于此特性的信息，请阅读使用CSS3 Mobile Pack在Fireworks中从设计对象中提取CSS属性一文。
• jQuery Mobile主题皮肤设计：该插件增加的新功能使您可以在Fireworks中创建或修改一个jQuery Mobile网站的主题。在对网站进行更新后，您可以将其显示在jQuery Mobile主题预览窗口中，并可以导出相应的CSS代码和相关联的sprite素材。本文对如何使用CSS Mobile Pack中提供的这个jQuery Mobile功能进行了说明。

jQuery Mobile框架是一个JavaScript框架，它使您可以快速构建适用于移动设备的网站。它是一个touch-optimized的网络框架，是专为智能手机和平板电脑而设计的。jQuery Mobile适用于绝大多数现行的桌面系统、智能手机、平板电脑和电子书平台。jQuery Mobile框架的易用性很好，它包含了web方式特有的控件，例如按钮、滑动条、列表元素，以及更多的web控件。当您使用jQuery Mobile框架来构建移动网站时，您可以使用该框架提供的默认主题。

jQuery Mobile主题皮肤设计插件在Fireworks工作空间的基础上进行了加强，使您能够创建或修改默认的jQuery Mobile主题。它还可以生成相关的CSS样式表和sprite素材。您可以使用Fireworks生成的CSS修改jQuery Mobile页面的默认主题，为您的项目定制所需的主题。

本文对您如何使用CSS3 Mobile Pack for Fireworks修改或创建jQuery Mobile主题以及如何将新的或者已经修改过的主题应用到您的jQuery Mobile页面进行了说明。

在CSS3 Mobile Pack问世之前，当您为基于jQuery的移动网站创建主题时，您必须手工修改CSS样式表。直到最近，对网站进行预览从而检查网站主题的外观仍是不可能的事情。这是件非常耗时的事情，因为您必须不停地在修改网页代码和在浏览器中对其进行预览之间切换，直到符合您预期的主题最终定稿。

CSS3 Mobile Pack可以帮助您节省时间，因为您现在可以在Fireworks中创建或修改某个jQuery Mobile主题，对其进行预览然后为该网站生成CSS样式表和sprites素材。当您将这个CSS代码应用于您的适用于移动设备的基于jQuery的网页时，主题的显示会和您在Fireworks中预览您的设计时看到的完全相同。

使用jQuery Mobile框架设计移动网站

jQuery Mobile中的每一个布局和widget（微件）都是围绕一个新的面向对象的CSS框架进行设计的。这个框架使得将一个完整的统一的可视的设计主题应用到移动网站和应用成为可能。

这会带来以下的好处：

• jQuery Mobile使用CSS3属性来创建圆角、方框和文本的阴影以及渐变。使用CSS3属性而不使用图片是很有好处的，因为这样可以缩减主题文件的尺寸和服务器请求的数量。
• 主题可以包含多种颜色样本（swatch），每一种都由一个标题栏、内容正文和按钮状态组成，您可以自由地混合搭配这些颜色样本。这些颜色样本使您可以创造更生动的结构和更丰富的设计。
• 开放式的主题可支持每个主题最多包含26个不同的颜色样本。这使您几乎可以向您的设计中添加无限种主题。
• 所有的背景现在都使用CSS3渐变来大幅减少文件的尺寸和服务器请求的数量，以改善性能。
• 一个简化的图标集中包含了最常用于手机网站的元素，并且保存为sprite的形式来减少图片的比重。

默认主题包含了下列五种标题栏样式（见图1）：

在默认情况下，框架会将颜色样本"A"分配给所有的页眉和页脚，因为页眉和页脚元素通常会在一个移动应用中突出显示。要将一个标题栏的颜色设置为一个不同 的颜色样本，需要将data-theme属性添加到您的页眉或页脚，然后设置一个替代的颜色样本字母代码，例如"B"或"D"，来应用这个特定的主题颜色 样本的颜色。一个标题栏的CSS代码如下所示：

要获得更多关于默认主题的工作原理的信息，请阅读jQuery Mobile框架主题文档。

jQuery Mobile主题包含一些默认的sprite图片和颜色样本。您可以使用Fireworks插件提供的功能来修改这些sprite图片和颜色样本。您也可以通过复制一个已有的页面然后对它的一个副本进行定制化设计的方式来创建多个颜色样本。

让我们从创建一个新的主题开始：

1. 在Fireworks CS5中，选择Commands（命令）>jQuery Mobile>Create New Theme（创建新主题），来创建一个新的主题（见图2）。

页面名称被用来命名这个颜色样本。我们推荐您使用单字符(a–z)来命名页面。您可以通过复制已有的页面然后根据需求修改主题来创建页面。每个页面都会生成一个唯一的CSS颜色样本。

该模板包含了默认的sprites和相关素材（见图3）。

修改一个jQuery Mobile模板

通过使用Fireworks，您可以修改基于主题的皮肤，来匹配您的网站设计风格。

请按照以下步骤来修改一个已有的模板并更新它：

1. 在Fireworks中打开一个页面，选择要修改的元素。
2. 在画布上修改单个元素。（例如，您可以修改颜色、修改文本样式、添加渐变填充、调整圆角角度、应用阴影等特效或者进行其它想要的修改。）
3. 选择File（文件）>Save（保存），保存所做的修改。

画布上的每个对象都与某个颜色样本中的CSS代码的一部分相对应。每个对象的标题指示出了与之对应的代码部分（见图4）。

在进行修改后，下一步操作是对近期所做的修改进行检查，查看您的设计的表现效果如何。

对应用于某个jQuery Mobile模板的修改进行预览

请按照以下步骤来预览修改后的模板文件：

1. 选择Windows（窗口）>Extensions（插件）>jQuery Mobile Theme Preview（jQuery Mobile主题预览）（见图5）。

预览面板中将会出现和显示修改后的页面（见图6）。

2. 要想在一个浏览器中一次性预览所有的主题和sprites，请选择Commands（命令）>jQuery Mobile >Preview Theme in a Browser（在浏览器中预览主题）（见图7）。

点击顶部列出的那些选项卡，您可以在不同的主题之间进行切换，来预览应用于不同元素的各个颜色样本。

在创建或者修改一个模板后，您可以使用Fireworks来生成该网站的jQuery CSS代码和sprites。选择下面两个选项中的某一项，可以导出CSS颜色样本和sprites。

选项1：同时导出CSS和sprites

要想一次性导出所有的颜色样本和sprites，请选择Commands（命令）>jQuery Mobile >Export Theme（导出主题）来为所有页面生成颜色样本和sprites（见图8 ）。

选项2：单独导出一个特定的颜色样本或者sprite

要导出一个特定的颜色样本，请点击jQuery Mobile主题预览面板中的Export Current Swatch（导出当前颜色样本）选项。当您只想要定制某个特定的颜色样本中的标题栏样式并更新它时，请使用这种方法导出（见图9）。

将生成的CSS文件应用于一个jQuery页面

此时您已经创建了用于更新手机网站主题的新的CSS样式表文件。在本节中，您将学习如何将这个CSS文件关联到您的手机网站。请按照以下步骤进行操作：

1. 启动Dreamweaver CS5.5。打开一个已有的网站或者选择File（文件）>New（新建）并在新文档对话框中选择那些选项来创建一个空白的HTML页面。
2. 选择Insert（插入）>jQuery Mobile >Page（页面）来创建一个jQuery Mobile页面。在出现的jQuery Mobile文件对话框中，保留所有的默认设置，并点击OK。

这样这个网页就被创建好了，它使用的是默认的jQuery主题，正如下面这个标签中定义的一样：

3. 查看代码，看看CSS样式表是如何与HTML页面关联起来的（见图10）。

4. 在代码窗口中，编辑这个link标签使其指向您使用Fireworks生成的jQuery CSS样式表。通过这种方法，您可以将您在Fireworks中创建的新主题应用到整个页面或者是页面中特定的元素。

例如，您可以使用以下代码应用一个不同风格的标题栏，而不是使用默认的"A"标题栏的设计：

在应用了这些修改以后，点击Live View（实时预览）按钮查看更新后的主题在Dreamweaver工作空间中的显示效果（见图11）。

当您开始测试时，非常重要的一点是在移动设备上查看所做的修改，以确认一切显示效果都如您预期的一样。但是如果您还处于设计移动程序的阶段，您可以通过选择File（文件）>Preview in Browser（在浏览器中预览）>Device Central（设备中心）来查看网页内容在目标设备的手机模拟器中的表现，从而节省您的时间（见图12）。

注：与jQuery Mobile框架一样，Fireworks不会导出纹理（patterns），这样可以优化导出内容的尺寸。

正如您在本文中学到的，您可以使用CSS3 Mobile Pack for Fireworks创建和更新jQuery Mobile网站的主题，构建和管理适合移动设备的网站。更新后的接口提供了生成CSS样式表的功能，您可以使用这个CSS样式表来重新设计移动应用和网站。

Fireworks使得跨多屏幕构建和部署网页设计变得比以前更容易。此外，由于所生成的CSS是跨平台兼容的，您所创建的站点在智能手机和平板电脑上的运行方式和表现形式都会如预期的一样。使用Dreamweaver中的预览选项可以在实时预览模式或在一个浏览器中预览所做的修改，从而达到在发布修改前检查您的工作的目的。您还可以在Fireworks里面进行预览。

要学习更多关于使用Fireworks的扩展功能来创建CSS样式表的内容，请阅读使用CSS3 Mobile Pack在Fireworks中从设计对象中提取CSS属性一文，您还可以观看Fireworks的高级产品经理Takashi Morifusa关于CSS3属性面板和jQuery Mobile主题皮肤设计工具的 演示。另外请关注HTML5 and CSS3研发中心的最新进展。