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

《《响应式网页开发实战》教学教案第9章 jQuery Mobile样式.docx》由会员分享，可在线阅读，更多相关《《响应式网页开发实战》教学教案第9章 jQuery Mobile样式.docx（14页珍藏版）》请在冰豆网上搜索。

《响应式网页开发实战》教学教案第9章jQueryMobile样式

9.1制作图片浏览网页

【教学导航】

教学目标

（1）掌握jQueryMobile页面中网格样式的设置

（2）熟悉jQueryMobile页面中按钮的添加、位置设定

（3）掌握jQueryMobile页面中设置内联按钮及分组按钮的方法

（4）掌握jQueryMobile页面中主题样式的设置

重难点

jQueryMobile页面中网格样式、内联按钮及分组按钮及主题样式的设置

教学方法

任务驱动法、分组讨论法、理论实践一体化、讲练结合

课时建议

2课时

【教学任务】

9.1.1任务描述

引入jQueryMobile框架，制作如图9.1

（1）所示的图片浏览网页，头部标题部分分为三栏，可进行上一张图片，下一张图片及主题样式的更换，主题更换效果如图9.1

（2）所示。

9.1

（1）图片显示效果

9.1

（2）更换主题效果

分别用Chrome模拟器GalaxyS5和iPad，得到了自适应的网页显示效果，如图9.2和图9.3所示。

图9.2GalaxyS5效果

图9.3iPad效果

9.1.2任务知识

1jQueryMobile页面按钮的添加

2内联按钮与按钮组

3jQueryMobile页面的网格样式设置方法

4jQueryMobile页面主题样式的设置方法

9.1.3任务实施

任务描述中需完成的网页是一个点击“上一张”和“下一张”按钮可以进行图片的浏览，点击“更换主题”按钮可查看不一样的主题样式。

三个按钮采用网格样式显示在头部栏中。

在DreamweaverCS6中，创建Task9-1.html，在与内添加标签，导入jQueryMoblie函数库，其部分源代码如下。

前一张