jQuery Mobile 是目前最流行的跨平台移动开发框架，本书以Dreamweaver 为工具，配合
jQuery Mobile 制作移动网页，通过具体的范例从基础到高级循序渐进地进行讲解。本书全面而系
统地对jQuery Mobile 的所有功能、特性、开发方法和技巧进行全面而透彻的讲解，是直观学习
jQuery Mobile 的案例宝典。在写作方式上，本书以一种开创性的方式使理论与实践达到了极好的
平衡，不仅对理论知识进行清晰透彻的阐述，而且根据读者理解这些知识的需要精心设计和构思
了大量实战案例，每个案例分为功能描述、实现代码、效果展示和代码分析，旨在帮助读者通过
实践的方式达到迅速掌握jQuery Mobile 的目的。
本书以实例驱动讲解的方式，让零基础读者也能轻松掌握jQueryMobile 下的应用开发。内容
详尽、实例丰富，是广大jQueryMobile 初学者、跨平台移动开发人员必备的参考书，同时也适合
作为高等院校和培训学校相关专业师生的教学参考书。

前言
Dreamweaver 是一款功能强大的网页编辑软件，它能够帮助用户快速编辑网页，提
供各种常用而方便的工具。用户可以不必编写任何代码，只要使用Dreamweaver 中的
菜单或工具栏按钮，即可完成大部分网页所需的功能。对建立商业网站、Web 应用、复
杂交互式网页等，Dreamweaver 都能够轻松地完成。
编写本书的目的是希望通过本书内容讲解给学习移动网页设计的读者提供一条
快速而完整的学习捷径。读者不仅可以了解移动页面制作的基本方法、如何使用
Dreamweaver 来设计手机版网页。最重要的是设计各种移动版应用效果，交互式操作，
让读者几乎可以不必编写任何的代码，就可以创建更智能的网页。
关于本书
本书从初学者的角度进行选材和编写，在编写过程中考虑到读者的实际技术水平和战
术能力，注重基础知识和实战应用的结合，主要讲解网页布局和版式设计的一般用法、扩
展应用及其实战演练。全书共分为9 章，简单介绍如下。
第1 章 熟悉Dreamweaver CC。本章重点介绍Dreamweaver CC 的基本操作方法。
第2 章 移动Web 设计概述。本章先简单介绍移动Web 设计的特点，然后对jQuery
Mobile 进行详细介绍，最后通过一个简单完整的开发实例进行介绍。
第3 章 HTML5+CSS3 基础。本章介绍HTML5 和CSS3 文档基础知识，以及详细介
绍HTML5 中新增的主体结构元素的定义、使用方法、使用场合，同时讲解了CSS3 页
面布局、字体、颜色、背景或其他动画效果的实现方法。
第4 章 设计响应式页面。本章将结合Dreamweaver CC 介绍快速设计响应式页面的
各种方法和实现技巧。
第5 章 设计jQuery Mobile 页面。本章将介绍jQuery Mobile 页面结构及工具栏、页
面格式化设计 。
第6 章 使用组件。本章将介绍jQuery Mobile 常用小组件，如按钮组件、列表组件等。
第7 章 应用主题。本章将介绍jQuery Mobile 主题及自定义页面主题，在页面元素
中实现主题的混搭效果。
第8 章 高级开发。本章将介绍jQuery Mobile 高级开发，包括方法、事件、定制组件、
设计样式等。
第9 章 综合案例：飞鸽记事。本章将通过一个完整的记事本应用程序的开发，详细
文前.indd 2 2016-9-14 11:10:07
介绍在jQuery Mobile 中使用localStorage 对象开发移动项目的方法与技巧。
读者对象
本书适合网页制作的初学者、广大网页设计师和前端技术人员阅读参考。读者在阅
读本书之前，最好能初步了解HTML、CSS 基础知识。本书将帮助读者掌握HTML5、
CSS3 和JavaScript 基础应用技巧，能够设计移动页面，熟练掌握jQuery Mobile。
正确使用
本书内容操作性比较强，适合读者边阅读边上机实践。在学习之前，建议访问本社
官方网站下载本书示例源码文件压缩包。然后根据章节索引每个操作案例的练习模板
和效果文件，最后根据书中操作步骤耐心操作练习。
如果实例文件中的网页无法预览，请直接使用记事本打开学习和研究其中的代码。
本书示例可运行于/XP/Server 2003 /Vista/Server 2008 及Windows 7 的操作系统下，
支持在各主流浏览器中进行测试和预览。
本书主要根据Dreamweaver 为操作对象进行介绍。建议读者学习之前应访问http://
www.adobe.com/ 官网下载Dreamweaver 软件，并正确安装到本地系统中。
本书主要以Dreamweaver CC 版本为基础进行讲解。
注意：本书配套案例源代码文件仅供个人学习和练习时使用，未经许可不得用于任何
商业行为。
关于作者
本书由陈万林编写，参与资料整理及编写的还有常才英、袁祚寿、袁衍明、张敏、
袁江、田明学、唐荣华、毛荣辉、卢敬孝、刘玉凤、李坤伟、旷晓军、陈万林、陈锐、
钱佩林、苏敬波、冉东林、杨龙贵、张炜、王慧明、涂怀清、卢国才、苏恢定、司成向、
胡体清、陈宗亮、徐清银、周秀成、颜昌学、王幼平、冉原洲、李经键、胡厚成等，
在此对大家的辛勤工作表示衷心的感谢。
由于水平有限，书中难免会有疏漏之处，恳请广大读者提出宝贵意见，并将个人的
意见、建议或问题发送到wwb_beijing@163.com，以便我们与您进行交流。
编 者
2016 年8 月

目录
Chapter01 ┃熟悉Dreamweaver CC
1.1 Dreamweaver 概述 ..........................................................................2
1.2 Dreamweaver CC 工作环境 .............................................................3
1.2.1 标题栏 .................................................................................................4
1.2.2 菜单栏 .................................................................................................4
1.2.3 工具面板和工具栏 .............................................................................5
1.2.4 状态栏 .................................................................................................6
1.2.5 属性面板 .............................................................................................6
1.2.6 浮动面板 .............................................................................................7
1.3 Dreamweaver CC 基本操作 .............................................................7
1.3.1 输入文本和版式设计 .........................................................................8
1.3.2 插入图像和多媒体 .............................................................................9
1.3.3 创建链接 ...........................................................................................10
1.3.4 创建表格 ...........................................................................................12
1.3.5 创建CSS 样式 ..................................................................................13
1.3.6 创建表单 ...........................................................................................14
1.3.7 添加行为 ...........................................................................................15
? Chapter02 ┃移动Web 设计概述
2.1 移动开发基础 .................................................................................18
2.1.1 国内移动Web 设计概况 ..................................................................18
2.1.2 认识WebKit .....................................................................................21
2.2 jQuery Mobile 概述 ........................................................................22
2.2.1 为什么要学jQuery Mobile ...............................................................22
2.2.2 jQuery Mobile 主要功能 ...................................................................23
2.2.3 jQuery Mobile 主要特性 ...................................................................23
2.2.4 jQuery Mobile 开发优势 ...................................................................25
2.2.5 jQuery Mobile 的短板 .......................................................................26
文前.indd 5 2016-9-21 15:37:12
2.3 使用jQuery Mobile ........................................................................26
2.3.1 下载插件文件 ...................................................................................26
2.3.2 初始安装配置 ...................................................................................27
2.3.3 设计第一个jQuery Mobile 页面 ......................................................28
? Chapter03 ┃ HTML5+CSS3 基础
3.1 HTML5 文档结构 ............................................................................32
3.2 了解HTML5 新标签 .......................................................................33
3.3 构建HTML5 主体结构 ....................................................................34
3.3.1 标识文章 ...........................................................................................35
3.3.2 内容分段 ...........................................................................................37
3.3.3 设计导航信息 ...................................................................................39
3.3.4 设计辅助信息 ...................................................................................41
3.3.5 设计微格式 .......................................................................................42
3.3.6 添加发布日期 ...................................................................................43
3.4 定义语义块 .....................................................................................43
3.4.1 添加标题块 .......................................................................................44
3.4.2 标题分组 ...........................................................................................45
3.4.3 添加脚注块 .......................................................................................45
3.4.4 添加联系信息 ...................................................................................46
3.5 CSS3 选择器 ..................................................................................47
3.5.1 属性选择器 .......................................................................................47
3.5.2 伪类选择器 .......................................................................................49
3.6 阴影 ................................................................................................50
3.6.1 box-shadow ........................................................................................50
3.6.2 text-shadow ........................................................................................50
3.7 背景 ................................................................................................51
目录
CONTENTS
文前.indd 6 2016-9-21 15:37:12
3.7.1 background-size .................................................................................51
3.7.2 background-clip .................................................................................51
3.7.3 background-origin ..............................................................................51
3.7.4 background ........................................................................................52
3.8 圆角边框 ........................................................................................52
? Chapter04 ┃设计响应式页面
4.1 响应式设计入门 ..............................................................................54
4.1.1 认识响应式设计 ...............................................................................54
4.1.2 响应式Web 设计流程 ......................................................................57
4.1.3 设计响应式图片 ...............................................................................57
4.1.4 设计响应式结构 ...............................................................................60
4.1.5 自适应内容显示 ...............................................................................64
4.1.6 响应式Web 设计实战 ......................................................................67
4.2 Dreamweaver 流体网格布局 ..........................................................71
4.2.1 创建流体网格布局 ...........................................................................71
4.2.2 插入流体网格元素 ...........................................................................73
4.3 Media Queries 移动布局 ...............................................................77
4.3.1 使用viewport ....................................................................................77
4.3.2 使用Media Queries ...........................................................................78
? Chapter05 ┃设计jQuery Mobile 页面
5.1 设计Mobile 起始页 ........................................................................86
5.1.1 单页结构 ...........................................................................................86
5.1.2 多页结构 ...........................................................................................89
5.1.3 外部页面 ...........................................................................................94
5.2 页面预加载和缓存 ..........................................................................97
文前.indd 7 2016-9-21 15:37:12
5.2.1 页面预加载 .......................................................................................97
5.2.2 页面缓存 ...........................................................................................98
5.3 模态对话框 .....................................................................................99
5.3.1 设计简单的对话框 ...........................................................................99
5.3.2 设计关闭对话框 .............................................................................102
5.4 设计标题栏 ...................................................................................103
5.4.1 定义标题栏结构 .............................................................................103
5.4.2 定义标题栏导航按钮 .....................................................................107
5.4.3 定义按钮显示位置 ......................................................................... 111
5.5 设计导航栏 ................................................................................... 112
5.5.1 定义导航栏结构 ............................................................................. 112
5.5.2 定义导航栏图标 ............................................................................. 116
5.5.3 定义导航栏图标位置 ..................................................................... 117
5.5.4 自定义导航栏图标 .........................................................................120
5.6 设计页脚栏 ...................................................................................123
5.6.1 定义页脚栏按钮 .............................................................................123
5.6.2 添加表单对象 .................................................................................126
5.7 设计页面版式 ...............................................................................129
5.7.1 网格化布局 .....................................................................................129
5.7.2 可折叠版式 .....................................................................................134
5.7.3 折叠组 .............................................................................................136
? Chapter06 ┃使用组件
6.1 按钮 ..............................................................................................140
6.1.1　设计按钮 .........................................................................................140
6.1.2　按钮组 .............................................................................................143
6.2　表单 ..............................................................................................146
目录
CONTENTS
文前.indd 8 2016-9-21 15:37:12
6.2.1　表单组件概述 .................................................................................146
6.2.2　文本输入框 .....................................................................................147
6.2.3　滑块 .................................................................................................151
6.2.4　翻转切换开关 .................................................................................154
6.2.5　单选按钮 .........................................................................................156
6.2.6　复选框 .............................................................................................158
6.2.7　选择菜单 .........................................................................................162
6.2.8　列表框 .............................................................................................166
6.3　列表 ..............................................................................................168
6.3.1　简单列表 .........................................................................................169
6.3.2　嵌套列表 .........................................................................................174
6.3.3　有序列表 .........................................................................................177
6.3.4　拆分按钮列表项 .............................................................................178
6.3.5　分类列表 .........................................................................................179
6.3.6　修饰图标和计数器 .........................................................................181
6.3.7　格式化列表 .....................................................................................182
? Chapter07 ┃应用主题
7.1　定义主题 ......................................................................................190
7.1.1　认识jQuery Mobile 主题 ................................................................190
7.1.2　默认主题 .........................................................................................191
7.1.3　使用主题 .........................................................................................192
7.1.4　编辑主题 .........................................................................................195
7.1.5　自定义主题 .....................................................................................197
7.2　列表主题 ......................................................................................201
7.3　表单主题 ......................................................................................204
7.4　按钮主题 ......................................................................................207
7.5　激活主题 ......................................................................................210
文前.indd 9 2016-9-21 15:37:12
7.6　工具栏主题 ................................................................................... 211
7.7　页面主题 ......................................................................................214
7.8　内容主题 ......................................................................................215
? Chapter08 ┃高级开发
8.1　配置jQuery Mobile ......................................................................220
8.1.1　页面加载和跟踪 .............................................................................220
8.1.2　修改grade() 配置值 ........................................................................224
8.1.3　jQuery Mobile 配置项 .....................................................................226
8.2　事件 ..............................................................................................229
8.2.1　触摸事件 .........................................................................................229
8.2.2　翻转事件 .........................................................................................233
8.2.3　滚屏事件 .........................................................................................235
8.2.4　页面显示/ 隐藏事件 ......................................................................237
8.3　方法 ..............................................................................................240
8.3.1　转换路径 .........................................................................................240
8.3.2　域名比较 .........................................................................................242
8.3.3　纵向滚动 .........................................................................................244
8.4　设计UI 样式 .................................................................................245
8.4.1　关闭列表项箭头 .............................................................................245
8.4.2　固定标题栏和页脚栏 .....................................................................247
8.4.3　随机页面背景 .................................................................................248
8.5　定制组件 ......................................................................................250
8.5.1　设置标题/ 按钮组件显示字数 ......................................................250
8.5.2　设置按钮状态 .................................................................................252
8.5.3　禁用异步打开链接 .........................................................................253
目录
CONTENTS
文前.indd 10 2016-9-21 15:37:12
8.6　HTML5 应用 .................................................................................255
8.6.1　动态传递参数 .................................................................................255
8.6.2　离线访问 .........................................................................................257
8.6.3　HTML5 绘画 ...................................................................................260
? Chapter09 ┃综合案例：飞鸽记事
9.1　设计思路 ......................................................................................264
9.2　设计流程 ......................................................................................264
9.3　难点技术分解 ...............................................................................265
9.4　Web 存储技术 ..............................................................................265
9.4.1　兼容性检查 .....................................................................................266
9.4.2　读写数据 .........................................................................................268
9.4.3　使用Web Storage ............................................................................269
9.4.4　Web Storage 事件监测 ....................................................................269
9.5　开发详解 ......................................................................................270
9.5.1　设计首页 .........................................................................................270
9.5.2　设计列表页 .....................................................................................273
9.5.3　设计详细页 .....................................................................................276
9.5.4　设计修改页 .....................................................................................278
9.5.5　设计添加页 .....................................................................................281
9.6　开发小结 ......................................................................................284

怀平，毕业于中央广播电视大学，本科学历，学士学位。现任河北省唐山市曹妃甸区职业技术教育中心、曹妃甸区劳动技工学校校长，中学高级教师，在教学中积累了丰富的经验，多篇教学论文获省级奖励或发表在省、国家级期刊；参与省级课题研究，曾被评比全国优秀教师、唐山市十佳青年教师。

本书内容操作性比较强，适合读者边阅读边上机实践。在学习之前，建议访问本社
官方网站下载本书示例源码文件压缩包。然后根据章节索引每个操作案例的练习模板
和效果文件，最后根据书中操作步骤耐心操作练习。