构建移动网站与APP

第一篇 HTML与HTML 5

第1章 网页的架构基础 2

1.1 HTML网页的基础构成 2

1.1.1 从一个空白的HTML网页说起 2

1.1.2 通过网页中的DOCTYPE标签识别文档类型 4

1.1.3 html标签声明这是一个网页 5

1.1.4 head标签定义网页的头部 5

1.1.5 body元素定义网页的主体 10

1.2 基底网址标记base标签 12

1.3 定义CSS样式表为网页排版 16

1.3.1 CSS样式表概述 16

1.3.2 定义外链式CSS样式表 17

1.3.3 定义CSS样式style标签 20

1.3.4 定义内联式CSS样式表 22

1.4 添加网站 logo 23

1.4.1 添加网站图像 logo 24

1.4.2 添加网站文字 logo 26

1.4.3 添加网站图形 logo 29

1.5 使用脚本元素script标签 33

1.5.1 HTML网页内嵌脚本让网页动起来 33

1.5.2 载入外部脚本库 36

1.5.3 推迟脚本执行 38

1.5.4 异步执行脚本 41

1.6 使用noscript标签判断浏览器是否支持脚本 44

1.7 为标签添加id、name或class属性 45

1.7.1 为标签添加id属性 45

1.7.2 为标签添加name属性 47

1.7.3 为标签添加class属性 50

1.8 为标签添加title属性 53

1.9 添加网页注释 55

1.10 测试浏览器对HTML 5属性的支持 58

1.11 案例实战：一个完整的HTML 5网页应用 61

1.12 小 结 64

第2章 HTML网页的基本标签 65

2.1 HTML网页段落排版 65

2.1.1 设置段落样式的标记 65

2.1.2 设置对齐与缩进的标记 66

2.1.3 添加分隔线 68

2.1.4 设置段落标题 69

2.2 文字效果 70

2.2.1 设置字形样式的标记 70

2.2.2 设置上标、下标 72

2.3 项目符号与编号 73

2.3.1 符号列表 73

2.3.2 编号列表 75

2.3.3 自定义列表 76

2.4 使用特殊符号 78

2.5 创建超链接 80

2.5.1 什么是超链接 80

2.5.2 站外网页链接 80

2.5.3 站内网页链接 81

2.6 小 结 83

第3章 HTML 5表单 84

3.1 各浏览器内核一览 84

3.2 E-mail类型的input标签 85

3.3 URL类型的input标签 87

3.4 数值类型的input标签 89

3.5 使用日期选择器 91

3.6 用datalist来实现自动提示 93

3.7 各浏览器对HTML 5表单新类型的支持 95

3.8 小 结 96

第4章 HTML 5特色 97

4.1 HTML 5之新特性 97

4.1.1 语义化标签元素 97

4.1.2 CSS 3新特性 99

4.1.3 音频、视频与多媒体 99

4.1.4 画布Canvas 101

4.1.5 本地文件访问 104

4.1.6 开放字体格式WOFF 108

4.1.7 地理定位 108

4.1.8 微数据 110

4.1.9 Ajax升级版——XMLHttpRequest Level 2 112

4.1.10 HTML 5 Forms 115

4.2 HTML 5之Web储存 122

4.2.1 Web存储概述 122

4.2.2 localStorage存储方式 123

4.2.3 sessionStorage存储方式 124

4.3 HTML 5之应用缓存 126

4.4 Web索引数据库：IndexedDB 130

4.4.1 打开一个IndexedDB数据库 130

4.4.2 向ObjectStore里新增对象 131

4.4.3 从ObjectStore里删除对象 131

4.4.4 通过key取出对象 131

4.4.5 更新一个对象 132

4.5 小 结 132

第二篇 CSS与CSS 3

第5章 定义CSS网页样式 134

5.1 什么是CSS 134

5.2 CSS样式表构成 135

5.2.1 CSS样式表构成 135

5.2.2 CSS样式表高级语法 135

5.2.3 CSS选择器 136

5.3 标签语义化 137

5.4 CSS命名规范 138

5.5 CSS样式重置 139

5.6 CSS Sprites技术 142

5.7 页面质量评估标准 146

5.8 CSS Hack 148

5.8.1 什么是CSS Hack 148

5.8.2 CSS Hack原理 148

5.8.3 CSS Hack实例 148

5.9 小 结 155

第6章 CSS网页设计基础 156

6.1 设计文字样式 156

6.1.1 字体属性 156

6.1.2 段落属性 166

6.1.3 文字效果 175

6.2 设计背景样式 181

6.2.1 设计背景颜色 181

6.2.2 设计背景图片 183

6.2.3 设计背景渐变 185

6.3 设计边界样式 187

6.3.1 边框 187

6.3.2 内边距 191

6.3.3 外边距 194

6.4 网页元素的定位 197

6.4.1 相对定位 197

6.4.2 绝对定位 201

6.5 小 结 205

第7章 CSS选择器 206

7.1 标签选择器 206

7.2 后代与子代选择器 209

7.3 类别选择器 211

7.4 id选择器 213

7.5 属性选择器 215

7.6 伪类选择器 219

7.6.1 动态伪类选择器 219

7.6.2 状态伪类选择器 222

7.6.3 伪元素选择器 224

7.7 结构性伪类选择器 226

7.8 nth伪类选择器 228

7.9 取反伪类选择器 231

7.10 全局选择器 233

7.11 小 结 235

第8章 媒体查询 236

8.1 响应式Web设计介绍 236

8.1.1 流动布局 236

8.1.2 自适应图片 240

8.1.3 媒体查询 247

8.2 媒体查询使用方法 249

8.2.1 媒体查询基本语法 249

8.2.2 使用媒体查询 251

8.3 实战：响应式登录页面 252

8.4 小 结 258

第9章 案例：HTML 5+CSS 3之轻量级内容管理系统 259

9.1 内容管理系统概述 259

9.2 HTML、CSS和JS等资源的离线缓存 260

9.3 数据储存结构 262

9.4 登录验证模块 263

9.5 新用户注册模块 272

9.6 游客信息模块 277

9.7 用户信息模块 282

9.8 管理员信息模块 287

9.9 关于本系统的补充说明 299

9.9.1 如何初始化用户信息 299

9.9.2 如何清除全部用户信息 300

9.9.3 关于404页面 301

9.9.4 关于BootStrap框架 301

9.9.5 关于localStorage与sessionStorage 301

9.10 小 结 302

第三篇 jQuery与 jQuery Mobile

第10章 jQuery入门 304

10.1 什么是jQuery 304

10.1.1 jQuery的功能 304

10.1.2 配置jQuery运行环境 307

10.1.3 使用Dreamweaver编写第一个包含jQuery库的网站 309

10.1.4 认识jQuery对象 313

10.1.5 调试jQuery程序 316

10.2 jQuery选择器 319

10.2.1 基本选择器 319

10.2.2 层次选择器 322

10.2.3 过滤选择器 327

10.2.4 表单选择器 339

10.3 用jQuery来操作DOM 340

10.3.1 修改元素属性 341

10.3.2 修改元素内容 342

10.3.3 动态创建内容 344

10.3.4 动态插入节点 345

10.3.5 动态删除节点 348

10.4 jQuery的事件 349

10.4.1 什么是事件 350

10.4.2 jQuery所支持的事件和事件类型 350

10.4.3 页面初始化事件 352

10.4.4 绑定事件 354

10.4.5 移除事件绑定 356

10.4.6 切换事件 357

10.5 小 结 358

第11章 jQuery Mobile移动开发入门 359

11.1 跨平台移动开发框架 359

11.1.1 什么是跨平台移动开发框架 359

11.1.2 为什么选择跨平台移动开发框架 360

11.1.3 常见的跨平台移动开发框架有哪些 361

11.2 认识jQuery Mobile 366

11.2.1 为什么选择jQuery Mobile 366

11.2.2 渐进式增强的主题界面 367

11.2.3 简单但是有调理的标记化语言开发 368

11.2.4 自适应布局 369

11.2.5 jQueryMobile案例 370

11.3 下载并应用jQuery Mobile 373

11.3.1 下载jQuery Mobile 374

11.3.2 使用Dreamweaver编辑jQuery Mobile 375

11.3.3 创建第一个jQuery Mobile文件 375

11.3.4 在PC上测试jQuery Mobile 376

11.3.5 应用jQuery Mobile开发的页面 379

11.4 小 结 379

第12章 jQuery Mobile快速开发 380

12.1 从选择元素入手 380

12.1.1 选择页面中的元素 380

12.1.2 设置页面中元素的属性 381

12.2 应用jQuery Mobile中的控件 381

12.2.1 在界面中固定一个工具栏 381

12.2.2 按钮形式的菜单 384

12.2.3 表单做成的手版QQ 387

12.2.4 列表形式的贴吧 392

12.2.5 使用对话框实现一个相册 395

12.3 小 结 398

第13章 APP的布局 399

13.1 QQ登录界面 399

13.2 简洁通讯录 403

13.3 完美九宫格 406

13.4 可以折叠的QQ好友列表 408

13.5 展开图标 413

13.6 Metro效果 415

13.6.1 利用分栏布局 416

13.6.2 利用纯CSS调整色块尺寸 418

13.7 课程表 420

13.8 小 结 422

第14章 应用的发布和推广 423

14.1 生成Android应用 423

14.1.1 JDK的配置 423

14.1.2 Eclipse 与ADT的配置 427

14.1.3 SDK的更新 428

14.1.4 第一个程序 430

14.1.5 使用实体机测试第一个程序 432

14.2 如何生成跨平台的应用 433

14.2.1 生成iOS应用 433

14.2.2 生成WebOS应用 436

14.3 怎样发布应用 437

14.4 怎样推广应用 439

14.5 小 结 440

第四篇 移动网页与APP实战

第15章 案例：实现一个实时股票APP 442

15.1 项目需求 443

15.2 技术分析 443

15.3 准备jqChart图表 443

15.3.1 下载jqChart 444

15.3.2 参数说明 446

15.4 开发一个模拟股票指数实时图应用 456

15.4.1 添加jqChart图表插件插件库文件 456

15.4.2 构建实时图页面的布局 457

15.4.3 模拟股票实时图的初始化操作 458

15.4.4 模拟股票实时走势图APP最终效果 461

15.5 小 结 463

第16章 案例：实现一个在线视频播放器 464

16.1 项目需求 464

16.2 界面设计 465

16.3 界面的实现 467

16.3.1 主题文件的获取 467

16.3.2 主页界面的实现 469

16.3.3 二级页面的实现 471

16.3.4 视频播放界面的实现 473

16.4 数据库的设计与连接 475

16.4.1 数据库设计 476

16.4.2 数据库连接 478

16.5 功能的实现 479

16.5.1 首页功能的实现 480

16.5.2 专辑列表功能的实现 483

16.5.3 播放页面的实现 486

16.6 小 结 489

HTML 5带来了移动网站的突飞猛进，本书帮助传统Web开发者搭乘HTML 5快车，轻松部署移动应用，也使移动开发者得以充分发掘Web潜力，在传统网页的基础上获得跨平台支持。jQuery Mobile+HTML 5+CSS 3结合的形式，让普通开发人员可以有条不紊地开发出优秀的移动应用，这也是本书的目的，让一切看似复杂的移动应用看起来更简单，实现起来也更简洁。全书分为4部分：第1部分介绍HTML和HTML 5的网页开发技术，阐述移动网页与PC网页的不同和改进；第2部分介绍CSS和CSS3，从兼容性角度介绍网页样式的变化和技巧；第3部分介绍jQuery 和jQuery Mobile，从快速开发和移动开发角度阐述APP开发的流程和技巧；最后一部分通过案例详细介绍当下网站和APP开发的整体设计方案和实现代码。本书内容精练、重点突出、实例丰富、讲解通俗，是广大网页或移动Web设计人员和前端开发人员必备的参考书，同时也非常适合大中专院校师生学习阅读，也可作为高等院校计算机及相关培训机构教材使用。

结合当下技术热点，让移动互联网的混合开发更简单。移动互联网的发展简直可以用爆发来形容，传统的网页技术从兼容性和美观性上都无法与移动Web和媲美。当下*好*快速的开发移动互联网的技术非HTML 5莫属，微信内嵌HTML 5网页和游戏的爆发也促进了HTML 5在国内的需求。对于安卓、iOS等跨设备的需求，又促进了jQuery Mobile的跨平台技术的发展。本书结合这两大热点，帮助读者轻松应对移动互联网。
布局移动网站和移动应用，切中目前企业最热的开发需求。本书所有的实例或小示例全部针对移动网页，这是市场所需，因为所有的企业都在谋求移动方向的突破，而这种突破的第一步就是将网页改造成兼容的移动网页。
低成本，快速开发，还能跨平台，利用最好最流行的技术进行实战演练。本书所选的HTML 5和jQuery Mobile都是开源技术，不需要购买大量的硬件和软件，完全低成本，而且这两种技术都支持快速开发且还能跨平台，这进一步节约了企业的成本。
最合理的章节安排。不管是PC网页还是移动网页，都要明白网页的构成和基本元素的设计。本书首先从基础网页讲起，然后讲解HTML 5的技术，介绍CSS美化网页，再介绍CSS 3帮助读者制作更酷炫的移动网页，*后通过jQuery和jQuery Mobile的讲解，帮助读者将移动网页布局到任何需要的平台上。