选择“文件”>“新建”。
- Dreamweaver 用户指南
- 简介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作区和视图
- 设置站点
- 管理文件
- 布局和设计
- CSS
- 页面内容和资源
- 设置页面属性
- 设置 CSS 标题属性和 CSS 链接属性
- 使用文本
- 查找和替换文本、标签和属性
- DOM 面板
- 在实时视图中编辑
- 在 Dreamweaver 中对文档编码
- 在“文档”窗口中选择和查看元素
- 在属性检查器中设置文本属性
- 对网页进行拼写检查
- 在 Dreamweaver 中使用水平线
- 在 Dreamweaver 中添加和修改字体组合
- 使用资源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中创建和管理收藏资源
- 在 Dreamweaver 中插入和编辑图像
- 添加媒体对象
- 在 Dreamweaver 中添加视频
- 插入 HTML5 视频
- 插入 SWF 文件
- 添加音频效果
- 在 Dreamweaver 中插入 HTML5 音频
- 使用库项目
- 在 Dreamweaver 中使用阿拉伯语和希伯来语文本
- 链接与导航
- jQuery 构件和效果
- 对网站进行编码
- 关于在 Dreamweaver 中编码
- Dreamweaver 中的编码环境
- 设置编码偏好设置
- 自定义代码颜色
- 编写和编辑代码
- 代码提示和代码完成
- 折叠和展开代码
- 使用代码片段重用代码
- 使用 linting 检查代码
- 优化代码
- 在设计视图中编辑代码
- 使用页面的头内容
- 在 Dreamweaver 中插入服务器端包含
- 在 Dreamweaver 中使用标签库
- 将自定义标签导入 Dreamweaver
- 使用 JavaScript 行为(一般说明)
- 应用内置 JavaScript 行为
- 关于 XML 和 XSLT
- 在 Dreamweaver 中执行服务器端 XSL 转换
- 在 Dreamweaver 中执行客户端 XSL 转换
- 在 Dreamweaver 中为 XSLT 添加字符实体
- 设置代码格式
- 跨产品工作流
- 模板
- 移动设备和多屏幕
- 动态网站、页面和 Web 表单
- 以可视化方式生成应用程序
- 测试、预览和发布网站
- 疑难解答
Dreamweaver 与 jQuery Mobile 相集成,可帮助您快速设计适合大多数移动设备的 Web 应用程序,同时可使其自身适应设备的各种尺寸。
使用 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 和本地 jQuery Mobile 文件
CDN
CDN(内容传送网络)是一种计算机网络,其中所含的数据副本分别放置在网络中的多个不同点上。使用 CDN 的 URL 创建 Web 应用程序时,应用程序将使用 URL 中指定的 CSS 和 JavaScript 文件。默认情况下,Dreamweaver 使用 jQuery Mobile CDN。
此外,也可使用其它站点(如 Microsoft 和 Google)CDN 的 URL。在代码视图中,编辑 <link> 和 <script src> 标签中指定的 CSS 和 JavaScript 文件的服务器位置。
从 CDN 下载的文件为只读。
本地 jQuery Mobile 文件
安装 Dreamweaver 时,会将 jQuery Mobile 文件的副本复制到您的计算机上。选择 jQuery Mobile(本地)起始页时所打开的 HTML 页会链接到本地 CSS、JavaScript 和图像文件。
jQuery Mobile 的起始页
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 类仅适用于实时视图。
从新页面创建适用于移动设备的 Web 应用程序
“页面”组件充当所有其它 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 核心库的未压缩版本。
将文件保存到包含其它资源的核心文件夹。