admin 管理员组文章数量: 1086019
2024年3月7日发(作者：c 编程器)
中等专业学校2022-2023-2教案
编号：
备课组别
授课教师
课题
计算机
课程网页设计与制作
名称
授课
系部
所在
年级
授课班级
二年级
主备
教师
授课
日期
模块四 4.1 jQuery Mobile
1.创建jQuery Mobile页面
教学
2.学会jQuery Mobile列表视图的插入方法及属性设置
目标
3.学会jQuery Mobile滑块的插入方法及属性设置
重点 了解jQuery Mobile列表视图的插入方法及属性设置
难点 学会jQuery Mobile滑块的插入方法及属性设置
教法 讲练法、演示法、任务驱动法
教学多媒体机房
设备
教学
环节
教
学
内
容
教学活动内容及组织过程
【复习导入】
引导学生回顾上节课学习内容
【教学过程及内容】
1. 预备知识：
①jQuery概念
jQuery是Dreamweaver CC制作手机浏览界面的主力插件。在Dreamweaver CC中有两个基于jQuery的子项目，分别是jQuery Mobile和jQuery UI。其中jQuery
Mobile主要用于主题的设计、网页的设计以及网页中的换页实践等功能的设计，并为所有的主流移动操作平台提供了高度统一的接口。而jQuery UI主要用做制作用户界面，如拖放、对话框、标签等功能的实现。
②jQuery Mobile的列表视图
个案补充
教
学
内
容
jQuery Mobile中的列表是标准的HTML列表，可以设定有序列表和无序列表。执行“插入-jQuery Mobile-列表视图”命令，弹出“列表视图”对话框，如图所示。
列表类型：可以选择有序列表和无序列表。
项目：表示序列中添加几个列表项。
①凹入：表示项目四周自动增加外边距，样式为圆角等。
②文本说明：添加一些对列表内容的说明性文字，使其更加丰富，显示在左侧。
③文本气泡：气泡数字是用来显示列表项相关的数字，有计数功能如邮箱的邮件的个数。
④侧边：主要内容的附属信息部分，显示在右上角。
⑤拆分按钮：在jQuery Mobile的列表中,当选项内容需要做出两种不同操作时,会用到该选项,其作用是对链接按钮进行分割。实现分割的方法是在<1i>元素中再增加一个元素。分割后jQuery Mobile会自动设置第二个链接为蓝色箭头图标,图标的链接文字将在用户将鼠标悬停在图标上时显示。
拆分按钮图标:当“拆分按钮”被选择后,“拆分按钮图标”才可选用,其作用是加按钮的可视性。
2.任务安排： 我的家乡——建立jQuery Mobile页面
教
学
内
容
①任务描述：通过使用jQuery Mobile技术建立一个jQuery Mobile页面，学会jQuery Mobile元素的插入方法及属性设置。
②操作提示：
Ⅰ.新建文件，在状态栏中页面大小处选择移动端页面大小“iphone 7 plus”
Ⅱ.创建jQuery Mobile页面。选择“插入-jQuery
Mobile-页面”命令插入jQuery Mobile页面
Ⅲ.在弹出的“jQuery Mobile”对话框，选择连接类型和CSS类型，本任务以Dreamweaver自带库源为例，单击确定后，系统弹出“页面”对话框
Ⅳ.“jQuery Mobile”的安装。可以从“jQuery Mobile文件”对话框中更新jQuery Mobile库，也可以从CDN中载入jQuery Mobile。
Ⅴ.单击jQuery Mobile内容栏，单击“插入-jQuery
Mobile-列表视图”命令，对列表选项进行编辑，分别输入文本：“地域文化、地方美食、过去未来和浓情亲人”。
Ⅵ.修改底部。单击jQuery Mobile底部，单击“插入-jQuery Mobile-滑块”命令，并编辑滑块元素。
【课堂小结】
教师引导学生小结本课所学内容。
【作业布置】
总结本课所学操作实用技巧。
模块四 4.1jQuery Mobile
板
书
设
计
我的家乡——建立jQuery Mobile页面
1.创建jQuery Mobile页面；
2.学会jQuery Mobile列表视图的插入方法及属性设置；
3.学会jQuery Mobile滑块的插入方法及属性设置；
教后札记
版权声明：本文标题：中职网页设计与制作(中国工信出版集团)教案:jQuery Mobile 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1709773975a546096.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论