《响应式网页开发实战》教学教案第9章 jQuery Mobile样式.docx

1、响应式网页开发实战教学教案第9章 jQuery Mobile样式9.1制作图片浏览网页【教学导航】教学目标（1）掌握jQuery Mobile页面中网格样式的设置（2）熟悉jQuery Mobile页面中按钮的添加、位置设定（3）掌握jQuery Mobile页面中设置内联按钮及分组按钮的方法（4）掌握jQuery Mobile页面中主题样式的设置重难点jQuery Mobile页面中网格样式、内联按钮及分组按钮及主题样式的设置教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议2课时【教学任务】9.1.1 任务描述引入jQuery Mobile框架，制作如图9.1（1）所示的图片

2、浏览网页，头部标题部分分为三栏，可进行上一张图片，下一张图片及主题样式的更换，主题更换效果如图9.1（2）所示。9.1（1）图片显示效果9.1（2）更换主题效果分别用Chrome模拟器Galaxy S5和iPad，得到了自适应的网页显示效果，如图9.2和图9.3所示。 图9.2 Galaxy S5效果图9.3 iPad效果9.1.2 任务知识1jQuery Mobile页面按钮的添加2内联按钮与按钮组3jQuery Mobile页面的网格样式设置方法4jQuery Mobile页面主题样式的设置方法9.1.3 任务实施任务描述中需完成的网页是一个点击“上一张”和“下一张”按钮可以进行图片的浏览

3、，点击“更换主题”按钮可查看不一样的主题样式。三个按钮采用网格样式显示在头部栏中。在Dreamweaver CS6中，创建Task9-1.html，在与内添加标签，导入jQuery Moblie函数库，其部分源代码如下。 前一张 后一张 更换主题 页脚 前一张 后一张 更换主题 页脚 前一张 后一张 更换主题 页脚 页面完整的CSS代码为Task9-1.html。 9.2制作音乐点评网页【教学导航】教学目标（1）熟悉jQuery Mobile中的各种表单元素（2）掌握各种表单元素的设置和使用方法（3）掌握jQuery Mobile中列表组件的创建方法（4）掌握jQuery Mobile中各种列

4、表的设置和使用方法重难点jQuery Mobile中的各种表单元素和列表组件的设置和使用方法教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议4课时【教学任务】9.2.1 任务描述引入jQuery Mobile框架，制作如图9.4（1）所示的歌曲列表网页，列表进行分类，点击某首歌曲后，进入对该歌曲的评分页面，效果如图9.4（2）所示。图9.4（1）歌曲列表图9.4（2）评分页面分别用Chrome模拟器图Galaxy S5和iPad，得到了自适应的网页显示效果，如图9.5和图9.6所示。 图9.5 Galaxy S5效果图9.6（1） 首页iPad效果图9.6（2） 评分页iPad

5、效果9.2.2 任务知识1 jQuery Mobile页面列表组件的设置方法2jQuery Mobile页面表单元素的设置方法9.2.3 任务实施任务描述中需完成的网页是一个展示音乐列表并点击进入列表项进行相关评论的网页。在Dreamweaver CS6中，创建Task9-3.html，在与内添加标签，导入jQuery Moblie函数库，其与之间实现的源代码如下。音乐列表流行歌曲卡路里火箭少女101-西虹市首富电影插曲10w斗罗大陆萧敬腾-斗罗大陆主题曲6w天后薛之谦-蒙面唱将猜猜猜第二季第十一期10w轻音乐Robot MonsterDon Ross-Robot Monster10wCrazyDon Ross-Breakfast for Dogs!6w随心听音乐客官请留言留言区评分: 取消 随心听音乐页面完整的CSS代码为Task9-3.html。