响应式Web应用前端开发教程（活页式）电子教案.docx

《响应式Web应用前端开发教程（活页式）电子教案.docx》由会员分享，可在线阅读，更多相关《响应式Web应用前端开发教程（活页式）电子教案.docx（19页珍藏版）》请在优知文库上搜索。

1、深圳信息职业技术学院教师学期授课计划牧师41名：课程名检：授课班圾:用次校课日期段课章节及内东提条课型讲投/实践/，刈试）,1时坡教学平台课外作业注23.3府，Boostrap*jQery技术的懑义边讲边做，任务4.1Bootstrap安装与能Jt步赛1：BOOtStraP下发与引用步骤2：测试BOOtStraP步骤3:jQuery下我与引用边悔边做：任务4.2实现客户界面廿页页而结构步骤1:页面头部设置步赛2:配置响应式容耨和页脚步赛3：更眉导航栏的实现步骤4：站内搜索框的实现讲授实践相合4智意职敦IDOOC完成课堂任务33.10边悔边做：任务4.2实现*户界面廿页页步骤5：导航内容的实现步

2、骤6：实现导航内容的响应式折叠展开效果边讲边做，任务4.3实况Itjr主体事分步较1:添加节页第一屏广告步熊2：游加首页“观鸟召集”中的图文隼元边济边做；任务4.3实现首Jr主体部分步骤3：营贾“观鸟召集”版块响应式布局步骤4:“观鸟召臬”板块美化步骤5:添加“热门线路”版块中的图文单元步骤6:“热门线路”添如“瀑布流”效果说按实践相结合1智现敦IDOOC完成课堂任务讲解上一节课课堂任务出现的问题容由第一行控件步骤2：实现“基本信息”内容窗第二行控件74.7边济边做I任务5.3.定制线Jt”J（审实现步我3:实现添加“行程”内容窗步骤4:实现添加“团费”内容窗步骤5:实现,上传“图片”内容宙边

3、悔边做：任务6.1客户界再导航栏-M累我们”鼻出二罐码步骤1:jQuery班程起步步躲2：为“联系我们”漆加二维码图片弹出隹任务6.2客户界面菜单活衣状态最赚步骤1：设置导航目标步骤2：端定当前页面步骤3：动态谀置导航条目“活乐”状态授实践相各4智思职教mooc完成课堂任务讲解上一节课课堂任务出现的问题84.11边讲边做，任务6.3管理察加“斜边栏导钦”中横向展开子菜单实女步赛1：添加倒边栏“资源管理”导航模块步旅2:横向展开的子菜单内容制作步骤3:采月弹出板实现横向展开子菜单任务6.4理系优俏边尊就栏活跃状态醇除步藤1:获取当前打开的文件所在的子目录步旅2:设置活跋状态的侧边栏导航于模块为展

4、开”步骤3:网页加我时动态设置“活跋”导航子模块图标步骤4：用户切换导航子模块时切换图标边饼边做：任务7.1定制线基”选项卡的动态启用淋授实践相结合4智憩职教mooc完成课堂任务讲解上一节课课堂任务出现的问题步赛1：“行程”选项的动态启用步骤2：任意选项内容的动态启用任务7.2“行程”辑条目数的动态生成步藤1：获取行程天数步骤2:动态添加日程蜡辑卡片94.21边讲边做任务7.2“行理”辑条目数的动态生成步骤3：动态设置日程蝌辑卡片的标题和id国性值（方法1）步骤4：动态谀置日程姑辑卡片的标题和id属性值（方法2）步骤5：设置折面板的状态、添加图标边悔边做：任务7.3”用本信息.用户，入合法检检

5、左步骤1：设置表单控件般证穰式步骤2：“交通方式”验证的实现步躲3：点击“下一步”按钮需逋it费证才启用下一个选项讲授实践相结合4智港职教mooc完成课堂任务济祥上一节课课堂任芬出现的问题104.28边讲边做：任务7.4添加、*除、除“团次”辑条目的实况步骤1:添加“团次”编辑条目步藤2:金通与取消全选的实现步旅3:粼除编辑条目与推销删除边济边It任务76国费*条目恢金及舍舍梅动,效果制作步藤1:记录热除前被删除条目的位置步班2：以淡出的动SS效果原位恢复被划除的条目耕授实践相结合4智慧职教100OC完成课堂任务讲解上一节课课支任务出现的问题学院教案2021年/2022年第1学期课程名称响应式

6、Web应用前端开发BootStraP4+jQuery课程类别任课班级任课教师教师所属院部二O二一年七月二十四日讲授：（20分钟） 响应式Web前端的应用场景 使用Bootstrap+jQucry项目的特点 搭建开发环境 ElWnet速写规则发布任务工单，明确任务目标与实茂步鼻（5分钟）目标；搭建B。ISIrap46开发环境。任务4.hBoOtStraP4的安装与配置（55分钟）步1卜,载Blslrap4.6库贵料： BOOwrap底下或网址：httpszdoc5.0getting-started（kwnkMd Bootstmp460下载网址：httpszgetbtstrap.conVdocs4

7、.6getting-starteddownload步2t引用BoOlSlraP并测试KM Bootstrap按钮资料卡 Bootstrap下拉菜单资料卡技倦调如 选择适合的BoOtStmP扉并引用 Emmct速写 Bootstrap下拉加P步3t卜载引HJjQUCry库资科: jQucry下载网址hups：的UerV.condownload，技能训舔：选择适合的jQucry库并引用实施方式：方式1：教师边做边讲,学生根随老师的课堂教授完成规定步.骤方式2：学生眼1教材比套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核学科计兑机软件课题响应式Wcb应用前端开发Boo

8、tstrap4+jQucrj周次6时数2授课班级教学目的及要求：热麻学握Bststrap表单组件教学重点：Bootstrap表即教学难点：选择适当的组件完成页面样式及功能需求实验仪器及教具，PC机、WindOWS7悌作系统、HbUilderX、GOOgIe浏览器发布任务工单，明确任务目标与实薛步骤任务6.1,客户界面导航栏“联系我们”弹出二雉码（75分钟）步hjQuery编程起步责礼 核心方法 货件处理方法技能训练， jQucry核心方法的使用jQuery事件注册步2t为“联亲我们”添加二维码图片弹出框KMi 弹出框 将木选择器技能训镰， BOOtstraP弹出框组件的使用 Bootstrap

9、弹出框组件API的使用实施方式，方式h教师边做边讲,学生跟随老师的课堂教授完成规定步骤方式2：学生跟用教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老脚，完成过程性考核课后作业, 完成i果堂任务,预习下节课的知识点课后作业， 完成课堂任务.预习下节课的知识点xx学院教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOotStrap4+jQuery课程类别任课班级任课教师教师所属院部学科计兑机软件课题响应式Wcb应用前端开发Bootstrap4+jQucrj周次7时数2授课班级教学目的及要求：热麻学握WUery设*弹出樨选项熟蚱掌握JQuery获取指定元素的子

10、元素熟球掌握jQuery快捷本件处理方法使用教学重点： jQuery设置弹出框选项 jQuery获取指定元素的子元素 jQuery快捷事件处理方法教学难点：独立分析业务逻辑需求，并采用Bootstrap+jQuey技术实现实验仪器及教具，PC机、WindOWS7操作系统、HbUiIcIerX、Google浏览器课后作业， 完成课堂任务.预习下节课的知识点xx学院教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOotStrap4+jQuery课程类别任课班级任课教师教师所属院部方式2：学生跟随教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老师，完成过程性考核

11、课后作业， 完成课堂任务，预习下节课的知识点发布任务工单，明确任务目标与实茶步骤（5分钟）任务8.2,酒店信息的异步读取（75分钟）步h使用mockjs生成模拟酒店数据贵料： Mockjs技能训练一 使用nKKk.js产生后台随机数据 MockjS占位符步2s编号异步获取酒店信息的ajax请求 ajax快提方法 ajax底层接口 nock.js技能训练， 使用S.get（）发送异步请求 Mockjs设置后端路由步配置模拟后端路由，成功加做酒店数据KM： mock.js技能训练一 Mock.js设置后端响应延迟时间步914：显示提示信息ftft 信息提示框 ajax事件方法 加我动画 操作DoM

12、样式技能训练， Bootstrap信息提示框组件的使用 BOOlStraP加载动画组件 jQuery获取指定元素的宽 jQucry设置指定元素CSS屈性的值xxxx孽陵教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStrap4+jQuery课程类别任课班级任课教师教师所属院部二O二一年七月二十四日学科计兑机软件课题响应式Wcb应用前端开发Bootstrap4+jQucrj周次13时数2授课班级教学目的及要求：热麻学握jQuery通历HTM1.祖先元素熟炼掌握JQuery历HTM1.兄弟元素教学重点： jQuery遍历HTM1.祖先元素 jQuery遍历HTM1.兄弟

13、元素教学难点：独立分析业务逻辑需求，并采用Bootstrap+jQuery技术实现实验仪器及教具：PC机、WindoWS7操作系统、HbUilderX、GOOgle浏览器发布任务工单，明确任务目标与实茂步鼻（5分钟）任务8.4：修改酒店侑息（75分钟）.步H:实现修改信息模态框KWi 表单只读控件技值训薛， 使用Bootstrap衣单只读控件步2,将指定记录的信息埴写到衣单控件中KMijQuery遍历HTM1.祖先元素jQuery班历HTM1.兄弟元素技俺训镰，jQucry获取指定元素满足条件的祖先元素 JQuerv获取指定元素满足条件的兄弟元素实施方式，方式h教师边做边讲,学生跟随老师的课堂教授完成规定步骤方式2：学生跟用教材配套的微课完成任务，教师巡堂指导任务完成后，学生填写工单上交老脚，完成过程性考核课后作业，完成课堂任务.预习下节课的知识点xx学院教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOotStrap4+jQuery课程类别任课班级任课教师