响应式Web应用前端开发教程全套电子教案完整版教学设计.docx

《响应式Web应用前端开发教程全套电子教案完整版教学设计.docx》由会员分享，可在线阅读，更多相关《响应式Web应用前端开发教程全套电子教案完整版教学设计.docx（89页珍藏版）》请在课桌文档上搜索。

1、XXXXXXX孽?-rJL教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次1时数2授课班级教学目的及要求：理解使用Bootstrap+jQuery项目的特点能够基于项目需求合理选择Bootstrap和jQuery库熟练搭建开发环境熟练使用emmet速写HTML标签教学重点：理解使用Bootstrap+jQuery项目的特点基于项目需求合理选择Bootstrap和JQuery库教学难点：无实验仪器及教具：PC机、WindOWS7操

2、作系统、HbuilderX、Google浏览器讲授：（20分钟） 响应式Web前端的应用场景 使用Bootstrap+jQucry项目的特点 搭建开发环境 Emmet速写规则发布任务工单，明确任务目标与实施步骤（5分钟）目标：搭建Bootstrap4.6开发环境。任务4.1：Bootstrap4的安装与配置（55分钟）步骤1：下载Bootstrap4.6库资料： BOotStnIP库下载网址：https:/getbootstrap.eom/docs/5.OZgetting-StartedZdownload/ Bootstrap4.6.0下载网址：httpsdocs4.6getting-star

3、teddownload步骤2：引用Bootstrap并测试资料： Bootstrap按钮资料卡 Bootstrap下拉菜单资料卡技能训练： 选择适合的Bootstrap库并引用 Emmet速写 Bootstrap下拉菜单步骤3：下载引用jQuery库资料： jQuery下载网址httpsdowsload技能训练： 选择适合的jQuery库并引用实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtSt

4、raP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次1时数2授课班级教学目的及要求：熟练设置响应式页面的meta标签熟练使用Bootstrap全局样式设置文本对齐方式熟练使用Bootstrap全局样式设置背景颜色熟练使用Bootstrap容器熟练使用Bootstrap导航栏组件和内容教学重点： Bootstrap导航栏组件 Bootstrap文本对齐方式和背景颜色设置 Bootstrap容器教学难点：理解容器的断点设置实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布

5、任务工单，明确任务目标与实施步骤（5分钟）目标：1、根据首页的高保真图实现页眉导航栏和页脚2、在任何视口的设备上，页面内容宽度都与视口宽度相同任务4.2：实现客户界面首页页面结构（75分钟）知识点：导航栏颜色步骤1：页面头部设置资料： meta标签技能训练： 响应式页面meta设置步骤2：配置响应式容器和页脚资料： 首页的高保真图 Bootstrap容器 Bootstrap文本技能训练： 依据高保真图，设计页面结构 Bootstrap容器的种类 Btstrap文本对齐方式步骤8页眉导航栏的实现资料： 导航栏 颜色技能训练： 根据高保真图选择适合的导航栏内容Bootstrap颜色设置实施方式：方

6、式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次2时数2授课班级教学目的及要求：熟练使用Bootstrap导航栏组件熟练使用Bootstrap折叠面板组件教学重点： Bootstrap导航栏 Bootstrap折叠面板教学难点：组件的嵌套使用实验仪器及教具：PC机、W

7、indOWS7操作系统、HbuilderX、Google浏览器回顾任务工单，明确任务目标与实施步骤（5分钟）目标：1、根据首页的高保真图实现页眉导航栏和页脚2、在任何视口的设备上，页面内容宽度都与视口宽度相同任务4.2：实现客户界面首页页面结构（75分钟）步骤4：站内搜索框的实现资料： Bootstrap表单 Bootstrap间距 Bootstrap按钮技能训练： BOOtStraP导航栏内置表单 Bootstrap表单控件样式设置 Bootstrap间距设置 Bootstrap不同外观的按钮设置步骤5：导航内容的实现资料： Bootstrap导航 Bootstrap导航栏 Bootstra

8、p间距技能训练： Bootstrap导航组件的使用 Bootstrap导航栏expand断点设置 BOotStraP设置自动占据剩余空间步骤6：实现导航内容的响应式折叠展开效果资料： Bootstrap导航栏 Bootstrap折叠面板技能训练, Bootstrap导航栏响应式折叠展开效果的实现实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师

9、所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次2时数2授课班级教学目的及要求：理解使用Bootstrap栅格提醒熟练使用Bootstrap媒体对象组件实现图文单元教学重点： Bootstrap媒体对象组件 Bootstrap栅格系统教学难点：理解栅格系统，并能使用栅格系统设计实现响应式布局实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）目标：1、根据首页的高保真图实现首页的主体部分任务4.3：实现首页主体部分（75分钟）步骤1：添加首页第一屏广告资料： Bootstr

10、ap巨幕 Bootstrap颜色 Bootstrap文本 Bootstrap图片技能训练： Bootstrap巨幕的使用 Btstrap设置文字颜色 Bootstrap文字缩放 Bootstrap图片保持比例缩放步骤2：添加首页“观鸟召集”中的图文单元资料： BOotStraP媒体对象 Bootstrap文本 Bootstrap图片 Bootstrap延展链接 Bootstrap定位技能训练： Btstrap媒体对象实现图文单元 Bootstrap设置缩略图 Bootstrap在媒体对象内设置延展链接 Bootstrap设置元素的定位步骤3：首页“观鸟召集”版块响应式布局资料： Bootstr

11、ap栅格技能训练： 理解Bootstrap栅格系统 使用Bootstrap栅格系统实现页面的响应式布局实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：XXX孽?-iA教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次3时数2授课班级教学目的及要求：熟练使用Bootstrap卡片组件熟练使用Bootstra

12、p卡片组件实现瀑布流效果熟练使用Bootstrap轮播器组件能够使用CSSmedia实现响应式布局教学重点： Bootstrap卡片组件 Bootstrap轮播器组件教学难点：Bootstrap轮播器组件实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器回顾任务要求，明确任务目标与实施步骤（5分钟）任务4.3：实现首页主体部分（75分钟）步骤4：“观鸟召集”版块美化资料： Bootstrap边距 Bootstrap边框 Bootstrap阴影技能训练： Btstrap设置内填充 BoOtStraP设置阴影效果 Bootstrap设置边框颜色步骤5：添加“热

13、门线路”版块中的图文单元资料： Bootstrap卡片技能训练： BOOtStraP卡片组件实现图文单元步骤6：为“热门线路”添加“瀑布流”效果资料: Bootstrap卡片技能训练： Btstrap卡片组件实现“瀑布流效果” 使用CSSmedia实现瀑布流响应式布局步骤7：为首页第一屏广告添加轮播器资料： Btstrap轮播器 尺寸技能训练： Btstrap组件的配置 Bootstrap以比例的形式设置宽度实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：教案2021

14、年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次3时数2授课班级教学目的及要求：熟练掌握Bootstrap导航组件的使用熟练掌握Bootstrap弹性盒的使用教学重点： Bootstrap导航组件 Bootstrap弹性盒教学难点：Bootstrap弹性盒布局实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务4.4：实现“线路展示”页面（75分钟）步骤1

15、：实现页面主体部分响应式布局资料： Bootstrap弹性盒 Bootstrap文本技能训练： 使用BOOIStraP弹性盒布局步骤2：实现“线路区划导航”的响应式布局资料： Bootstrap导航 Bootstrap弹性盒 BootstrapDisplay属性技能训练： 使用Bootstrap导航组件设置胶囊式导航 使用Bootstrap弹性盒设置元素垂直布局 使用BootstrapDisplay属性设置元素的显示与隐藏步骤3：实现“线路区划导航”页内导航功能资料： Bootstrap选项卡 Bootstrap弹性盒技能训练： 使用Bootstrap导航组件设置选项卡式导航 使用Bootst

16、rap弹性盒设置元素占据剩余宽度步骤4：为“线路展示”版块添加标题资料： Btstrap图标 SVG技能训练： 标签引用式使用Bootstrap图标 SVG常用属性设置实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次4时数2授课班级教学目的及要求：熟练掌握

17、Bootstrap面包屑组件的使用熟练掌握Bootstrap列表组组件的使用熟练掌握Bootstrap选项卡的使用教学重点： Bootstrap面包屑组件 Bootstrap列表组组件 Bootstrap选项卡教学难点：选择适当的组件完成页面样式及功能需求实验仪器及教具：PC机、WindOWS7操作系统、HbuilderX、Google浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务4.4：实现“线路详情”页面（75分钟）步骤1：实现页面中的“面包屑”导航资料： Bootstrap面包屑导航 Bootstrap图标技能训练： 白定义Bootstrap面包屑导航的分隔符 修改Bootst

18、rap默认样式步骤2：实现页面“线路参数”版块资料： Bootstrap徽章 Bootstrap列表组 Bootstrap卡片 Bootstrap颜色技能训练： 使用Bootstrap徽章组件使用Bootstrap列表组设置文本布局样式 BoOtStraP设置透明色 BOOtStraP组件内部使用栅格系统步骤3：实现页面“选项卡”版块导航功能资料： Btstrap导航技能训练： Btstrap选项卡导航的实现步骤4：实现“行程安排”时间线资料： Btstrap边框技能训练, 使用Bootstrap边框设置圆形元素步骤5：实现“用户评价”内容资料： Bootstrap列表组 Btstrap图标技

19、能训练, 设置有分割线的Btstrap列表组 设置BOotStraP文本图标实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：完成课堂任务，预习下节课的知识点教案2021年/2022年第1学期课程名称响应式Web应用前端正量区由ap4+jQuer课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次4时数2授课班级教学目的及要求：熟练掌握Bootstrap折叠面板组件的使用教学重点：Bootstrap折叠面板

20、组件教学难点：选择适当的组件完成页面样式及功能需求实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务5.1:实现管理员界面“线路维护”页面导航部分（75分钟）步骤1：实现页面结构技能训练： 项目的创建 页面结构的设计与实现步骤2：实现页眉导航技能训练： Bootstrap导航组件的使用步骤3：实现侧边栏导航资料： 折叠面板 手风琴技能训练： BoolStraP折叠面板组件的使用 Bootstrap组件的组合使用 使用Bootstrap折叠面板实现“手风琴”效果实施方式：方式1：教师边做边讲，学生跟随老师的课

21、堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：完成课堂任务，预习下节课的知识点教案2021年/2022年第1学期课程名称响应式Web应用前端正量区由ap4+jQuer课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次5时数2授课班级教学目的及要求：熟练掌握BOOtStraP表单组件中复选框的样式设置熟练掌握Bootstrap输入组组件的使用熟练掌握Bootstrap表格的使用熟练掌握Bootstrap模杰框组件的使用教学重点： Bootstrap表

22、格 Bootstrap模态框教学难点：选择适当的组件完成页面样式及功能需求实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务5.2:实现“线路维护”页面内容部分（75分钟）步骤1：添加内容部分顶部资料： Bootstrap表单 Bootstrap输入组 Bootstrap浮动技能训练： Bootstrap设置表单复选框的样式 使用Bootstrap输入组提升效果 使用Bootstrap浮动类设置元素浮动步骤2：添加内容部分底部资料： Bootstrap分页技能训练： Bootstrap分页组件的使用步骤3：

23、实现数据表格资料： Bootstrap表格 Bootstrap纵向对齐技能训练： Bootstrap表格的使用步骤4：实现删除确认资料： Bootstrap模态框技能训练： Btstrap模态框组件的使用和配置实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后,学生填写工单上至老师,邓斗逑性考核课后作业：完成课堂任务，预习下节课的知识点教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Boo

24、tstrap4+jQuery周次5时数2授课班级教学目的及要求：熟练掌握Bootstrap表单组件教学重点：Bootstrap表单教学难点：选择适当的组件完成页面样式及功能需求实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务5.3：“定制线路”页面实现（75分钟）步骤1：实现“基本信息”内容窗第一行控件资料： Bootstrap表单技能训练： 设置Bootstrap表单控件组 设置BOOtStraP行内表单步骤2：实现“基本信息”内容窗第二行控件资料： Bootstrap表单技能训练： 设置Bootstr

25、ap复选框组步骤3：实现添加“行程”内容窗资料： Bootstrap卡片 Bootstrap折叠面板 Bootstrap表单技能训练： 多种组件的组合使用实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：完成课堂任务，预习下节课的知识点教案2021年/2022年第1学期课程名称响应式Web应用前端正量区由ap4+jQuer课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次6时数2授课班级教学目的及要求：熟

26、练掌握Bootstrap表单组件教学重点：Bootstrap表单教学难点：选择适当的组件完成页面样式及功能需求实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器回顾任务要求，明确任务目标与实施步骤（5分钟）任务5.3：“定制线路”页面实现（75分钟）步骤4：实现添加“团费”内容窗资料： Bootstrap按钮组 Bootstrap表单 Bootstrap表格技能训练： Bootstrap按钮组的使用 用Bootstrap表格实现布局步骤5：实现上传“图片”内容窗资料： Bootstrap表单文件浏览控件技能训练： 设置Bootstrap表单文件浏览控件实施

27、方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核课后作业：完成课堂任务，预习下节课的知识点教案2021年/2022年第1学期课程名称响应式Web应用前端正量区由ap4+jQuer课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次6时数2授课班级教学目的及要求：熟练掌握Bootstrap弹出框组件熟练掌握jQuew核心方法$()的使用教学重点：JQuery使用BootstrapAPI教学难点：无实验仪器及教具：PC机、

28、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务6.1：客户界面导航栏“联系我们”弹出二维码（75分钟）步骤1:jQuery编程起步资料： 核心方法 事件处理方法技能训练： jQuery核心方法的使用 jQuery事件注册步骤2：为“联系我们”添加二维码图片弹出框资料： 弹出框 基本选择器技能训练： Bootstrap弹出框组件的使用 Bootstrap弹出框组件API的使用实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成

29、过程性考核课后作业：完成课堂任务，预习下节课的知识点教案2021年/2022年第1学期课程名称响应式Web应用前端正量区由ap4+jQuer课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次7时数2授课班级教学目的及要求：熟练掌握JS字符串方法、数组方法熟练掌握jQuew属性选择器熟练掌握jQuery获取指定元素的父元素熟练掌握jQuery添加CSS类教学重点： JQuery属性选择器 jQuery获取指定元素的父元素 jQuery添加CSS类教学难点：独立分析业务逻辑需求，并采用BOotStraP+jQuer技术实现实验仪器及

30、教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务6.2:客户界面菜单活跃状态跟踪（75分钟）步骤1：设置导航目标技能训练： HTML基础知识复习步骤2：确定当前页面资料： JS字符串方法 JS数组方法技能训练： HTML基础知识复习步骤3：动态设置导航条目“活跃”状态资料： 属性选择器 遍历HTML元素 操作DOM样式技能训练： HTML基础知识复习实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核教

31、案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次7时数2授课班级教学目的及要求：熟练掌握jQuery设置弹出框选项熟练掌握jQuery获取指定元素的子元素熟练掌握jQuery快捷事件处理方法使用教学重点： jQuery设置弹出框选项 jQuery获取指定元素的子元素 jQuery快捷事件处理方法教学难点：独立分析业务逻辑需求，并采用BOotStraP+jQuer技术实现实验仪器及教具：PC机、WindoWS7操作系统、Hbuild

32、erX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务6.3：管理系统“侧边栏导航”中横向展开子菜单实现（75分钟）步骤1：添加侧边栏“资源管理”导航模块技能训练： HTML基础知识复习步骤2：横向展开的子菜单内容制作技能训练： HTML基础知识复习步骤3：采用弹出框实现横向展开子菜单资料： 弹出框 遍历DOM树 事件处理方法 JSevent对象技能训练： HTML基础知识复习实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核教案2021年/2022年第1学

33、期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次8时数2授课班级教学目的及要求：熟练掌握jQuery获取子元素时加过滤条件熟练掌握jQuew获取指定元素的前兄弟元素熟练掌握jQuery删除类熟练掌握使用Bootstrap折叠面板组件API展开折叠面板熟练掌握jQuery为指定元素绑定事件和处理方法熟练掌握jQuery事件委派熟练掌握jQuery切换CSS类熟练掌握Bootstrap折叠面板组件事件熟练掌握jQuew为多个事件绑定相同的处理函数教学重点： JQu

34、ery操作DOM样式 JQuery事件委派 jQuery使用折叠面板自定义事件教学难点：独立分析业务逻辑需求，并采用BOotStraP+jQuer技术实现实验仪器及教具：PC机、WindOWS7操作系统、HbuilderX、GOOgIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务6.4：管理系统侧边导航栏活跃状态跟踪（75分钟）步骤1：获取当前打开的文件所在的子目录资料： JS数组方法技能训练： JS数组方法复习步骤2：设置活跃状态的侧边栏导航子模块为“展开”资料： 遍历HTML元素技能训练： jQuery获取子元素时加过滤条件 jQuery获取指定元素的前兄弟元素步骤3：网页加载

35、时动态设置“活跃”导航子模块图标资料： 操作DOM样式 折叠面板APl技能训练： jQuery删除类 使用Bootstrap折叠面板组件API展开折叠面板步骤4：用户切换导航子模块时切换图标资料： 事件管理方法 操作DOM样式 折叠面板API技能训练, jQuery为指定元素绑定事件和处理方法 jQuery事件委派 jQuery切换CSS类 Bootstrap折叠面板组件事件 jQuery为多个事件绑定相同的处理函数实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后,学生填写工单上交老师，完成过程性考核课后作业:完成

36、课堂任务，预习下节课的知识点XXX孽?-iA教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次8时数2授课班级教学目的及要求：熟练掌握jQuery后代选择器的使用熟练掌握jQuew获取指定元素集合中指定索引的元素熟练掌握Bootstrap选项卡导航API的使用熟练掌握jQue:ry表单选择器熟练掌握jQuery内容过滤器教学重点： JQuery过滤器 jQuery使用选项卡APl jQuery遍历DOM教学难点：独立分析业务逻辑需

37、求，并采用BOotStraP+jQuer技术实现实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务7.1:“定制线路”选项卡的动态启用（75分钟）步骤1：“行程”选项的动态启用资料： jQuery层次选择器 jQuery过滤方法 Bootstrap选项卡组件技能训练： jQuery后代选择器的使用 获取指定元素集合中指定索引的元素 Bootstrap选显卡导航API的使用步骤2：任意选项内容的动态启用资料： 表单选择器 过滤选择器技能训练： jQuery表单选择器 jQuery内容过滤器杂项实施方式：方式1

38、：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次9时数2授课班级教学目的及要求：熟练掌握jQuery设置指定元素的指定标签属性的值熟练掌握jQuew设置指定元素的文本熟练掌握jQuery获取指定元素的后兄弟元素熟练掌握jQuer在指定元素集合中每一个元素结尾添加内容熟练掌握jQue

39、ry生成指定元素的副本熟练掌握jQuery获取表单控件的值教学重点： JQuery设置HTML元素 jQuery使用选项卡APl jQuery遍历DOM教学难点：独立分析业务逻辑需求，并采用BOotStraP+jQuer技术实现实验仪器及教具：PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单，明确任务目标与实施步骤（5分钟）任务7.2“行程”编辑条目数的动态生成（75分钟）步骤1：获取行程天数资料： jQuery读取和设置HTML元素技能训练： jQuery获取表单控件的值步骤2：动态添加日程编辑卡片资料： jQuery向HTML元素添加内容 jQuery复

40、制和替换HTML元素技能训练： jQuery在指定元素集合中每一个元素结尾添加内容 jQuery生成指定元素的副本步骤3：动态设置日程编辑卡片的标题和id属性值（方法1）资料： jQuery获取和设置HTML元素 jQuery遍历HTML元素技能训练： jQuery设置指定元素的指定标签属性的值 jQuery设置指定元素的文本 jQuery获取指定元素的后兄弟元素实施方式：方式1：教师边做边讲，学生跟随老师的课堂教授完成规定步骤方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核教案2021年/2022年第1学期课程名称响应式Web应用前端开发B

41、OOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次9时数2授课班级教学目的及要求：熟练掌握jQuery设置指定元素的DOM属性熟练掌握jQuew将内容添加到指定目标元素的结尾熟练掌握jQuery删除指定元素的所有子元素熟练掌握JS字符串替换熟练掌握jQuery获取指定集合中的第一个元素教学重点：jQuery添加、删除HTML元素教学难点：独立分析业务逻辑需求，并采用BoOtStraP+jQuery技术实现实验仪器及教具：PC机、WindOWS7操作系统、HbuilderX、Google浏览器回顾任务工单，明确任务目标与实施步骤（5分钟）任务7.2“行程”编辑条目数的动态生成（75分钟）步骤4：动态设置日程编辑卡片的标题和id属性值（方法2）资料： 获取和设置HTML元素 向HTML元素中添加内容 删除HTML元素及其属性 JS字符串方法技能训练： jQuery设置指定元素的DoM属性 jQuery将内容添加到指定目