网页设计与制作课件第11章

项目十一 创建移动设备网页
5
三、网页的本质 2．jQuery Mobile的浏览器支持
jQuery Mobile 同时支持高端和低端设备，比如那些没有JavaScript支持的设备。持续增强 （Progressive Enhancement）包含以下核心原则：
所有浏览器都应该能够访问全部基础内容。 所有浏览器都应该能够访问全部基础功能。 增强的布局由外部链接的CSS提供。 增强的行为由外部链接的JavaScript提供。 终端用户浏览器偏好应受到尊重。 所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外 部链接的JavaScript和CSS持续增强。
步骤 01
启动Dreamweaver CC，选择 “文件”>“新建”菜单，打 开“新建文档”对话框，在 对话框左侧列表中选择“新 建文档”，在“文档类型” 列表中选择“HTML”，右侧
保持默认，如图所示。
项目十一 创建移动设备网页
8
三、网页的本质 步骤 02 在“新建文档”对话框中单击“创建”按钮，即创建一个空白HTML 5文档，如下图
项目十一 创建移动设备网页
7
二、创建jQuery Mobile页面
Dreamweaver集成了jQuery Mobile，有助于快速创建适合大部分移动设备的网页程序，并可 以使网页自身适应各类尺寸的设备。“jQuery Mobile页面”组件充当所有其他jQuery Mobile 组件的容器。在新的使用HTML 5的页面中添加“jQuery Mobile页面”组件，可以创建出 jQuery Mobile的页面结构。
10
步骤 04
三、网页的本质
打开“页面”对话框，输入“页面”组件的属性（此处保持默认设置），单击“确 定”按钮，创建jQuery MoΒιβλιοθήκη Baiduile页面结构，如下图所示。
项目十一 创建移动设备网页
11
三、jQuery Mobile页面结构
在代码界面中打开前面创建的jQuery Mobile页面，可以看到其基本结构，如下图所示。一般的
jQuery Mobile Web应用程序都要遵循这个基本结构。
要使用jQuery Mobile，
首先需要在开发的界面
中包含以下3项内容。
CSS文件； jQuery library；
jQuery Mobile library。
项目十一 创建移动设备网页
12
知识库
三、网页的本质
以上基本页面模板中的内容都包含在div标签中，并为标签添加了data-role="page" 属性。这样jQuery Mobile就会知道哪些内容需要处理。
项目十一 创建移动设备网页
4
三、网页的本质 1．jQuery Mobile的基本特性
一般简单性：该框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScript。 优雅降级：尽管jQuery Mobile利用最新的HTML 5、CSS 3和JavaScript，但并不是所有移动设备都 提供这样的支持。jQuery Mobile的哲学是同时支持高端和低端设备（比如那些没有JavaScript支持的设
项目十一 创建移动设备网页
3
相关知识
一、初识jQuery Mobile
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。 jQuery是继prototype之后又一个优秀的Javascript库。jQuery兼容CSS 3和各种浏览器，其核心理念是 “write less，do more”（写得更少，做得更多）。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、 选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者 编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。 jQuery Mobile是jQuery在手机和平板设备上的版本。它不仅能给主流移动平台带来jQuery核心库，而且能 发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。
备），尽量提供最好的体验。
易于使用：jQuery Mobile在设计时考虑了访问能力，它拥有Accessible Rich Internet Applications （WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。 小规模：jQuery Mobile框架的整体大小比较小，JavaScript库12KB，CSS 6KB，还包括一些图标。 主题设置：此框架还提供一个主题系统，允许用户提供自己的应用程序样式。
所示。
项目十一 创建移动设备网页
9
三、网页的本质 步骤 03 将插入点置于空白文档编辑窗口中，单击“插入”面板“jQuery Mobile”类别中的
“页面”按钮，打开“jQuery Mobile文件”对话框。在该对话框中选中“远程”和
“组合”单选按钮后，单击“确定”按钮，如下图所示。
项目十一 创建移动设备网页
项目十一 创建移动设备网页
6
三、网页的本质 3．jQuery Mobile支持的移动平台
jQuery Mobile目前支持以下移动平台：
Apple iOS：iPhone、iPod Touch、iPad（所有版本） Android：所有设备（所有版本） Blackberry Torch（版本6） Palm WebOS Pre系列、Pixi系列、Veer、TouchPad Nokia N900（进程中） Windows Phone 8/8.1/10预览版
目录页
CONTENTS PAGE
项目十一 创建移动设备网页
案例
案例说明
企业和个人用于开发和发布移动应用程序所使用的技 术在不断地变化，最初，开发和发布移动应用程序的
策略是针对每一个主流平台开发独立的本地APP；然
而，维护多个平台所需的费用是非常大的，并且移动 团队也会丧失其敏捷性。使用jQuery Mobile，只需 一次编码，就可以将APP部署到所有设备上。本案例 首先介绍jQuery Mobile的基础知识，然后应用其创 建一个移动设备网页“不一样的北京”。