响应式Web应用前端开发教程 授课计划表

1、XXXXXXXXX 学院学期 授课计 划2022年/2023年第1学期课程名称课程类别适用专业任课教师教师所属系部教研室主任签名院 长签名教研室通过日期：2022年8月 日学期授课计划编订说明课程标准名称、 批准单位及时 间本学期主要讲 授的内容（授课 内容起止章节）模块一工程准备阶段第一章技术简介第二章Bootstrap4技术资料第三章jQuery技术资料模块二Bootstrap静态网站制作第四章客户界面响应式页面制作第五章管理员界面响应式页面制作模块三jQuery交互效果优化第六章导航的完善与优化第七章用户数据交互的完善与优化模块四动态网站搭建第八章ajax前后端数据异步交互采用教材名称、

2、 作者及版本响应式Web前端开发教程（活页式），主编冯艳玲，拟由电子工业出版社出 版教学参考资料Bootstrap4 官方网站 . com/ jQuery 官方网站 . com/ Mock, js 官方网站 . com/教学资源及网 络教学资源教 学 时 数本 学 期 授 课 时 数班次本学期教学周数本学期周学时数本学期计划教学时数预计假日缺课时数本学期实际教学时数总时数其 中讲授实脸小 结 课测脸习 题 课机动时数深圳信息职业技术学院教师学期授课计划教师姓名：课程名称：授课班级:周 次授课 日期授课章节及内容提要课型（讲 授/实 践/测 试）需 用 时 数教学平 台课外作业备 注23.3讲授

3、：Boostrap+jQuery技术的意义 边讲边做：任务4.1 Bootstrap安装与配置 步骤1： Bootstrap下载与引用 步骤2：测试Bootstrap 步骤3： jQuery下载与引用 边讲边做：任务4.2实现客户界面首页页 面结构步骤1:页面头部设置步骤2：配置响应式容器和页 脚步骤3：页眉导航栏的实现 步骤4：站内搜索框的实现讲授 实践 相结 合4智慧职 教 mooc完成课堂任 务33. 10边讲边做：任务4.2实现客户界面首页页 面结构步骤5：导航内容的实现步骤6：实现导航内容的响应 式折叠展开效果边讲边做：任务4.3实现首页主体局部步骤1:添加首页第一屏广告步骤2：添加

4、首页“观鸟召集” 中的图文单元边讲边做：任务4.3实现首页主体局部步骤3:首页“观鸟召集”版 块响应式布局步骤4： “观鸟召集”版块美 化步骤5：添加“热门线路”版 块中的图文单元步骤6：为“热门线路”添加 “瀑布流”效果讲授 实践 相结 合4智慧职教 mooc完成课堂任务讲解上一 节课课堂 任务出现 的问题步骤7：为首页第一屏广告添 加轮播器43. 17边讲边做：任务4.4实现“线路展示”页 面步骤1：实现页面主体局部响 应式布局步骤2：实现线路区划导航” 的响应式布局步骤3：实现“线路区划导航” 页内导航功能步骤4：为“线路展示”版块 添加标题边讲边做：任务4.5实现“线路详情”页 面步骤

5、1：实现页面中的“面包 屑”导航步骤2：实现页面“线路参数” 版块步骤3:实现页面“选项卡” 版块导航功能讲授 实践 相结 合4智慧职 教 mooc完成课堂任务讲解上一 节课课堂 任务出现 的问题53. 24边讲边做：任务4.5实现“线路详情”页 面步骤4：实现“行程安排”时 间线步骤5：实现“用户评价”内 容边讲边做：任务5.1实现“线路维护”页面导航局部步骤1：实现页面结构步骤2：实现页眉导航步骤3:实现侧边栏导航讲授 实践 相结 合4智慧职教 mooc完成课堂任 务讲解上一 节课课堂 任务出现 的问题63.31边讲边做：任务5.2实现“线路维护”页 面内容局部步骤1:添加内容局部顶部 步

6、骤2：添加内容局部底部 步骤3：实现数据表格 步骤4：实现删除确认 边讲边做：任务5.3 “定制线路”页面实 现步骤1:实现“基本信息”内讲授 实践 相结 合4智慧职 教 mooc完成课堂任 务讲解上一 节课课堂 任务出现 的问题容窗第一行控件步褒2：实现“基本信息”内 容窗第二行控件74.7边讲边做：任务5.3 “定制线路”页面实 现步躲3：实现添加“行程”内 容窗步鞭4：实现添加“团费”内 容窗步骤5：实现上传“图片”内 容窗边讲边做：任务6.1客户界面导航栏“联 系我们”弹出二维码步躲1： jQuery编程起步步骤2:为“联系我们”添加二维码图片弹出框任务6.2客户界面菜单活跃状 态跟踪

7、步骤1：设置导航目标步歌2：确定当前页面步骤3：动态设置导航条目 “活跃”状态讲授 实践 相结 合4智慧职教 mooc完成课堂任 务讲解上一 节课课堂 任务出现 的问题84. 14边讲边做：任务6.3管理系统“侧边栏导 航”中横向展开子菜单实现 步骤1:添加侧边栏”资源管理”导航模块步瞬2：横向展开的子菜单内 容制作步骤3：采用弹出框实现摘向 展开子菜单任务6.4管理系统侧边导航栏 活跃状态跟踪步躲1:获取当前翻开的文件 所在的子目录步骤2：设置活跃状态的侧边 栏导航子模块为“展开”步鞭3：网页加载时动态设置“活跃”导航子模块图标步骤4：用户切换导航子模块 时切换图标边讲边做：任务7.1定制线

8、路”选项卡的 动态启用讲授 实践 相结 合4智慧职教 mooc完成课堂任 务讲解上一 节课课堂 任务出现 的问题步骤1： “行程”选项的动态 启用步骤2：任意选项内容的动态 启用任务7.2 “行程”编辑条目数 的动态生成步骤1:获取行程天数步骤2:动态添加日程编辑卡 片94.21边讲边做：任务7.2 “行程”编辑条目数 的动态生成步骤3：动态设置日程编辑卡 片的标题和id属性值（方 法1）步骤4：动态设置日程编辑卡 片的标题和id属性值（方 法2）步骤5：设置折叠面板的状态、 添加图标边讲边做：任务7.3 “基本信息”用户输 入合法性检查步骤1:设置表单控件验证模 式步骤2： “交通方式”验证

9、的 实现步骤3:点击“下一步”按钮 需通过验证才启用下一个 选项讲授 实践 相结 合4智慧职教 mooc完成课堂任 务讲解上一 节课课堂 任务出现 的问题104.28边讲边做：任务7.4添加、删除、撤销删 除“团次”编辑条目的实现 步骤1:添加“团次”编辑条目步骤2：全选与取消全选的实 现步骤3：删除编辑条目与撤销 删除边讲边做：任务7.5团费编辑条目恢复及 警告框动画效果制作步骤1:记录删除前被删除条 目的位置步骤2：以淡出的动画效果原 位恢复被删除的条目讲授 实践 相结 合4智慧职教 mooc完成课堂任 务讲解上一 节课课堂 任务出现 的问题步骤3：警告框“飞入”动画 的实现步骤4：自定义

10、警告框的关闭115. 12边讲边做：讲授：1.异步访问与同步访问方式的 区别与各自的特点2,XmlHttpRequest 对象3.Ajax生命周期4JS ajax案例讲解任务8.1管理员界面侧边栏导 航的异步加载步骤1：将侧边栏导航单独形 成一个文件步骤2：异步加载侧边栏导航 文件讲授：的安装数据集的设置常用方法 边讲边做：任务8.2管理员界面侧边栏导 航的异步加载步骤1：使用mock.js生成模拟 酒店数据步骤2：编写异步获取酒店信 息的ajax请求讲授 实践 相结 合4智慧职教 mooc完成课堂任务讲解上一 节课课堂 任务出现 的问题125. 12边讲边做：任务8.2管理员界面侧边栏导 航的异步加载步骤3：配置模拟后端路由，成功加载酒店数据步骤4：显示提示信息边讲边做：任务8.3酒店信息的分页显示步骤1:实现酒店信息分页页 码的动态添加步骤2：获取指定页码的数据步骤3：实现分页显示功能讲授 实践 相结 合4智慧职教 mooc完成课堂任务135. 19边讲边做：任务8.4修改酒店信息步骤1：实现修改信息模态框步骤2：将指定记录的信息填 写