响应式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年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次3时数2授课班级教学目的及要求：熟练掌握Bootstrap导航组件的使用熟练掌握Bootstrap弹性盒的使用教学重点： Bootstrap导航组件 Bootstrap弹性盒教学难点：Bootstrap弹性盒布局实验仪器及教具：PC机、WindoWS7操作系统、Hbu