第20章-移动应用开发实战

20.1移动APP引导页APP软件启动时，在正式进入APP软件界面之前，会首先通过几个引导面向用户介绍该款APP软件的主要功能与特色，第一印象的好坏会极大地影响到后续的产品使用体验。

功能分析制作步骤在本案例的制作过程中，每个引导页面都是一个不同的图片，通过创建jQueryMobile页面，并且在页面的内容区域中顺序插入4张不同的图片，通过CSS样式控制4张图片的显示效果，最后通过添加相应的JavaScript脚本代码来实现在各APP引导页之间的滑动效果。实战练习——移动APP引导页

最终文件：光盘\最终文件\第20章\20-1.html视频：光盘\视频\第20章\20-1.swf

20.2移动应用首页移动应用与网站相似，由多个不同功能的页面构成，其中最重要的就是移动应用的首页面，在该页面中通常会安排导航元素，使用户能够快速进入自己感觉兴趣的内容中，并且为了方案方户的操作，需要能够实现流畅的操作体验。

功能分析制作背景图轮换背景图片轮换效果与上一节中讲解的APP引导页使用了不同的制作方法，在页面中使用项目列表的方式来放置各背景图片，通过CSS样式来控制背景图片的显示效果，最后添加相应的JavaScript脚本代码实现背景图片的滑动轮换效果。实战练习——制作背景图轮换

最终文件：光盘\最终文件\第20章\20-2.html视频：光盘\视频\第20章\20-2-2.swf

制作可滑动的底部导航栏在页面底部放置导航菜单，每个导航菜单项都采用图标与文字相结合的方式，便于用户的理解和操作。导航菜单分为两个大部分，分别放置在<li>标签中，这样可以通过与背景图片滑动切换相同的方式来实现导航菜单的滑动切换效果。实战练习——制作可滑动的底部导航栏

最终文件：光盘\最终文件\第20章\20-2.html视频：光盘\视频\第20章\20-2-3.swf

20.3订餐APP随着移动互联网的不断发展，人们上网的习惯也在悄然发生变化，由原来的PC端桌面浏览器逐步向移动终端设备过渡，而开发基于移动终端设备的应用系统已成为各互联网企业的共识。本节将使用jQueryMobile框架，开发一从此移动终端订餐APP。系统分析制作启动页面通常在启动APP时都会显示一个启动页面，该启动页面可以放置宣传广告、推广活动等信息内容，经过一定时间后自动跳转到APP首页面中，从而起到有效的宣传推广作用。实战练习——制作启动页面

最终文件：光盘\最终文件\第20章\20-3\loading.html视频：光盘\视频\第20章\20-3-2.swf

制作订餐APP首页面APP启动页面显示5秒钟后自动跳转到APP首页面，在该页面中将通过项目列表的方式来展示不同类型风味的食品，单击相应的食品类型可以进入选择区域的界面中。实战练习——制作订餐APP首页面制作订餐城市页面在首页面中选择需要的食品类型即可进入选择订餐城市页面，在该页面中同样使用项目列表的形式表现订餐城市名称，不同的是在该页面中加入了列表过滤功能，可以使用户快速找到需要订餐的城市。实战练习——制作订餐城市页面

最终文件：光盘\最终文件\第20章\20-3\index.html视频：光盘\视频\第20章\20-3-3.swf最终文件：光盘\最终文件\第20章\20-3\select-city.html视频：光盘\视频\第20章\20-3-4.swf制作餐厅列表页面在select-city.html页面中单击相应的订餐城市，即可进入该城市餐厅列表页面，可以在该页面中查看相应的餐厅，该页面的餐厅列表与首页面中的食品类型列表非常相似。实战练习——制作餐厅列表页面制作餐厅介绍页面在餐厅列表页面中单击某个餐厅即可进入该餐厅的介绍页面，在该页面中将分两个部分对餐厅信息和餐厅联系方式进行介绍，并且使用jQueryMobile中的布局网格将介绍信息内容分为两栏显示。实战练习——制作餐厅介绍页面最终文件：光盘\最终文件\第20章\20-3\select-restaurant.html视频：光盘\视频\第20章\20-3-5.swf最终文件：光盘\最终文件\第20章\20-3\restaurant.html视频：光盘\视频\第20章\20-3-6.swf

20.4本章小结本章通过3个具有代表性的移动应用案例的制作