admin管理员组

文章数量:1531659

2024年5月9日发(作者:)

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

教后札记

本文标签: 列表内容页面任务制作