在 Dreamweaver 中创建适用于移动设备的 Web 应用程序

优质

小牛编辑

136浏览

2023-12-01

Dreamweaver 与 jQuery Mobile 相集成，可帮助您快速设计适合大多数移动设备的 Web 应用程序，同时可使其自身适应设备的各种尺寸。

打开 jQuery Mobile 起始页，或创建 HTML5 页面

在 Dreamweaver 中使用 jQuery Mobile 起始页创建应用程序。或者，也可用新的 HTML5 页开始创建 Web 应用程序。

jQuery Mobile 起始页包括 HTML、CSS、JavaScript 和图像文件，可帮助您开始设计应用程序。可使用 CDN 和您自有服务器上承载的 CSS 和 JavaScript 文件，也可使用随 Dreamweaver 一同安装的文件。

注意:要标识链接文件的位置，请参阅代码视图中的 <link> 和 <script src> 标签。

从“插入”面板中选择 jQuery Mobile 组件

将“插入”面板中的 jQuery Mobile 组件插入 HTML 页面。jQuery Mobile CSS 和 JavaScript 文件定义组件的样式和行为。

CDN（内容传送网络）是一种计算机网络，其中所含的数据副本分别放置在网络中的多个不同点上。使用 CDN 的 URL 创建 Web 应用程序时，应用程序将使用 URL 中指定的 CSS 和 JavaScript 文件。默认情况下，Dreamweaver 使用 jQuery Mobile CDN。

此外，也可使用其它站点（如 Microsoft 和 Google）CDN 的 URL。在代码视图中，编辑 <link> 和 <script src> 标签中指定的 CSS 和 JavaScript 文件的服务器位置。

从 CDN 下载的文件为只读。

安装 Dreamweaver 时，会将 jQuery Mobile 文件的副本复制到您的计算机上。选择 jQuery Mobile（本地）起始页时所打开的 HTML 页会链接到本地 CSS、JavaScript 和图像文件。

Dreamweaver 提供以下起始页供您创建 Web 应用程序：

jQuery Mobile (CDN)

如果计划在 CDN 上承载 jQuery Mobile 库，则使用此起始页。

jQuery Mobile（本地）

如果计划自行承载资源，或如果应用程序不依靠 Internet 连接，则使用此起始页。

jQuery Mobile (PhoneGap)

如果 Web 应用程序在部署为移动应用程序的情况下要访问移动设备固有的功能，则使用此起始页。有关详细信息，请参阅打包 Web 应用程序。

选择“文件”>“新建”。
根据需要选择以下某项：
- “示例中的页”>“Mobile 起始页”>“jQuery Mobile (CDN)”。
- “示例中的页”>“Mobile 起始页”>“jQuery Mobile（本地）”。
单击“创建”。
在所显示的页中，启用“持续跟踪链接”（“视图”>“实时视图选项”），然后切换到实时视图。使用导航组件测试应用程序的运行情况。
使用“多屏”菜单中的选项查看设计在各种尺寸的设备上的显示效果。禁用实时视图，然后切换回设计视图。
在“插入”面板（“窗口”>“插入”）中，选择“jQuery Mobile”。此时将显示可添加到 Web 应用程序的组件。
在设计视图中，将光标放在要插入组件的位置，然后在“插入”面板中单击该组件。在出现的对话框中，使用各个选项自定义组件。
（jQuery Mobile - 本地）保存 HTML 文件之后，jQuery Mobile 文件（包括图像文件）将复制到 HTML 文件所在位置的文件夹中。

在实时视图中预览页面。某些 CSS 类仅适用于实时视图。

“页面”组件充当所有其它 jQuery Mobile 组件的容器。添加“页面”组件，然后再继续插入其它组件。

选择“文件”>“新建”。
选择“空白页”>“HTML”。
某些 jQuery Mobile 组件使用 HTML5 特有的属性。要确保在验证期间符合 HTML5 规范，请确保选择 HTML5 作为文档类型。
在“插入”面板（“窗口”>“插入”）中，从菜单中选择“jQuery Mobile”。jQuery Mobile 组件显示在此面板中。
从“插入”面板中，将“页面”组件拖到设计视图。
在“jQuery Mobile 文件”对话框中，选择以下某项：
远程 (CDN)
如果要连接到承载 jQuery Mobile 文件的远程 CDN 服务器。如果尚未配置包含 jQuery Mobile 文件的站点，则对于 jQuery 站点使用默认选项。也可选择使用其它 CDN 服务器。
本地
显示 Dreamweaver 中提供的文件。要指定其它文件夹，请单击“浏览”，然后导航至包含 jQuery Mobile 文件的文件夹。
CSS 和 JavaScript 文件复制到本地的一个临时目录，直至将 HTML 文件保存到计算机为止。保存 HTML 文件之后，所有相关的 jQuery Mobile 和图像文件都将复制到站点根文件夹中的某个文件夹。
输入“页面”组件的属性。
在设计视图中，将光标放在要插入组件的位置，然后在“插入”面板中单击该组件。在出现的对话框中，使用各个选项自定义组件。

在实时视图中预览页面。某些 CSS 类仅适用于实时视图。

可选择为应用程序创建自定义 CSS 和 JS 文件。确保将文件命名为 jquery.mobile.js、jquery.mobile.css 和 jquery.js

如果使用自定义文件夹，则执行以下操作：

从 http://docs.jquery.com/Downloading_jQuery#Download_jQuery 下载 jQuery 1.5 核心库的未压缩版本。
将文件保存到包含其它资源的核心文件夹。