中职网页设计与制作(中国工信出版集团)教案:jQuery Mobile

中等专业学校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滑块的插入方法及属性设置；

教后札记