《WEB前端框架应用》课程教学实施方案

PAGEXX职业学院课程教学实施方案202X-202X学年度第X学期开课系信息学院课程名称WEB前端框架应用授课班级软件任课教师赵丙秀填表日期：2025年2月13日填写说明1．本方案由任课教师填写，教研室主任、系（部）主任审核同意后，于每学期第二周交系办公室存档。2．本方案一式二份：开课系一份，教师本人一份。3．所有拦目应填写完整，“教学进度安排”表和“综合技能训练、课程设计进度安排”表的空格内可以按照教学内容分章、分节、分项的要求自行加画子栏目，并可加页或适当调整表格。课程类别B类；开课时间：第1周至第18周，周课时4；本学期课时数（学分）72（4）。考核要求：考核类型（考试/考查）考试，考核方式课程设计。成绩分配：期末考试成绩占总分比例50%；平时成绩占总分比例50%，其中：书面作业占0%，实践性环节占40%，过程性考核占20%，考勤占40%。本课程授课总时数（总学分）已完成学时数本学期授课总学时数理论教学时数实践教学时数复习机动讲授其它单项技能训练综合技能训练课程设计0723612121002课程思政建设目标、教学目的、教学要求（分述）课程思政建设目标：养成善于思考、深入研究的良好自主学习习惯；培养学习者的分析问题、解决问题的能力；具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力；培养学习者的创新意识；具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。教学目的：通通过本课程的学习，使学生逐步建立和掌握Web客户端静态页面设计的思想方法，能够使用Bootstrap框架结合HTML5、CSS3和JavaScript编写Web客户端静态页面，具备必备的程序调试和问题解决能力，能够熟练使用主流开发工具对应用程序进行调试、跟踪，确保网站运行正常，满足业务需求。教学要求：《Web前端框架应用》是一门实践性很强的课程，学习这门课需要将理论和实践结合起来，通过课堂学习了解理论知识，通过实践环节巩固和实践理论知识，并与其它相关技术综合运用。教材和参考书1．《Bootstrap基础教程（第二版）》，人民邮电出版社，赵丙秀、汪晓青、李文蕙主编教研室审查意见年月日系主任审查意见年月日教学进度安排周次章、节及内容重难点（重难点分别说明）思政元素教学类型（讲授或其它教学形式）学时数使用教学设备及软（课）件作业1第1章Bootstrap是什么1.1Bootstrap简述1.2为什么使用Bootstrap1.3如何使用Bootstrap1.4下载Bootstrap1.5简单模板1.6案例：第一个Bootstrap1.7Bootstrap4重点：掌握Bootstrap的开发环境难点：熟练掌握Bootstrap框架的基本HTML代码致敬人民英雄讲授1PCHBuilderX单项训练11第2章栅格系统复习HTML（布局、选择器等）重点：掌握HTML元素的语法难点：灵活运用HTML元素温故而知新讲授1PCHBuilderX作业1：实验一个简单的布局页面单项训练12第2章栅格系统2.2工作原理2.3使用方法重点：掌握什么是栅格系统难点：熟练运用栅格布局学习要循序渐进讲授2PCHBuilderX2第2章栅格系统2.3使用方法2.4与工具类结合使用2.5案例-w3school首页重点：掌握什么是栅格系统难点：熟练运用栅格布局孰能生巧、举一反三讲授1PCHBuilderX作业2：银行首页单项训练13第3章CSS布局3.1排版3.2列表重点：掌握排版样式难点：灵活运用列表样式编码规范性和踏实严谨的工作态度讲授2PCHBuilderX4第3章CSS布局3.3代码3.4表格3.5按钮重点：代码、表格、按钮难点：表格的灵活应用做一个自律有规划的人讲授1PCHBuilderX单项训练14第3章CSS布局3.6图像3.7图文框重点：掌握按钮、图像样式难点：灵活运用图文框传统文化、节日来历讲授2PCHBuilderX作业3：百度词条动物世界5第4章工具类4.1透明度4.2边框4.3边距4.4尺寸4.5浮动4.6display属性重点：掌握颜色、边框、边距等样式难点：灵活运用工具类时代楷模事迹讲授1PCHBuilderX单项训练16第4章工具类4.8flex布局重点：掌握flex布局难点：灵活运用弹性盒子布局家国情怀讲授2PCHBuilderX6第4章工具类4.7定位4.9阴影4.10垂直对齐4.11视觉隐藏4.12可见性4.13交互4.14溢出4.15比例助手4.16延伸链接4.17焦点环重点：掌握定位、阴影、垂直对齐等样式难点：灵活运用工具类勤于思考讲授2PCHBuilderX作业4：完成课后实训(个人简历)7第5章表单5.1表单布局5.2表单控件5.3表单焦点5.4表单禁用5.5表单控件和标签大小重点：掌握表单元素难点：熟练运用表单提升创新能力讲授1PCHBuilderX作业5：完成课后实训（联系我们、百度注册页面）单项训练18第5章表单5.6浮动标签5.7表单验证5.8输入框组重点：掌握表单、输入框组难点：熟练运用表单、输入框组安全教育讲授2PCHBuilderX9第6章CSS组件6.1下拉菜单6.2导航（第7章选项卡）重点：掌握导航、下拉菜单等知识难点：灵活运用CSS组件工匠精神讲授1PCHBuilderX作业6一个选项卡的效果实现单项训练19第6章CSS组件6.3导航条6.4分页导航6.5徽章(结合综合案例）重点：掌握分页导航、卡片等知识难点：灵活运用CSS组件实践能力的提升讲授1PCHBuilderX单项训练110第6章CSS组件6.6列表组6.7进度条6.8卡片(结合综合案例）重点：掌握列表组、多媒体对象等CSS组件难点：灵活运用CSS组件人物传记纪录片，了解历史，了解我国革命先烈的事讲授1PCHBuilderX作业7：完成课后实训单项训练110第6章CSS组件6.9旋转图标6.10图标6.11按钮组6.12关闭按钮6.13媒体对象（flex）(结合综合案例）重点：掌握按钮组等CSS组件难点：灵活运用CSS组件金句学习讲授2PCHBuilderX11第7章JavaScript插件7.1插件库说明7.2模态框(结合本章综合案例）重点：掌握模态框插件难点：灵活运用JS插件提升分析问题解决问题的能力讲授2PCHBuilderX作业8-9完成课后实训(按照知识点分两次作业)12第7章JavaScript插件7.3工具提示7.4弹出框(结合本章综合案例）重点：掌握工具提示、弹出框插件难点：灵活运用JS插件提升分析问题解决问题的能力讲授1PCHBuilderX单项训练112第7章JavaScript插件7.5警告框7.6轻量弹框7.7下拉菜单(结合本章综合案例）重点：掌握警告框、轻量弹框等插件难点：灵活运用JS插件遵循事物发展规律讲授2PCHBuilderX13第7章JavaScript插件7.8折叠7.9手风琴7.10Offcanvas(结合本章综合案例）重点：掌握轮播等插件难点：灵活运用JS插件版权知识讲授1PCHBuilderX单项训练113第7章JavaScript插件7.11轮播7.12滚动监听(结合本章综合案例）重点：掌握轮播等插件难点：灵活运用JS插件垃圾分类知识讲授1PCHBuilderX单项训练114第7章JavaScript插件7.13选项卡7.14按钮(结合本章综合案例）重点：掌握选项卡等插件难点：灵活运用JS插件界面设计人性化讲授2PCHBuilderX14第8章综合案例重点：掌握各组件和插件难点：灵活运用CSS组件和插件、能够自己编写CSS样式改变默认样式提升学生音乐素养讲授2PCHBuilderX15第8章综合案例重点：掌握各组件和插件难点：灵活运用CSS组件和插件、能够自己编写CSS样式改变默认样式提升学生音乐素养讲授2PCHBuilderX作业10完成实训项目15机动2综合技能训练、课程设计进度安排周次项目名称目的和要求主要内容设施和条件检验形式学时数支撑项目的知识点3W3School灵活运用：栅格系统用法响应式栅格固定式布局流式布局布局嵌套栅格系统CSS组件架构Bootstrap布局PCHBuilderX考查2栅格系统用法响应式栅格固定式布局流式布局布局嵌套5少儿编程首页灵活运用：文本及背景颜色表格图像文本背景颜色表格图像PCHBuilderX考查2文本背景颜色表格图像7学习电台页面灵活运用：工具类Flex布局定位颜色尺寸PCHBuilderX考查2Flex布局定位颜色尺寸8表单应用灵活运用：表单样式表单样式输入框组表单控件PCHBuilderX考查2表单样式输入框组表单控件11保护野生动物灵活运用：导航列表组多媒体面板导航列表组多媒体面板PCHBuilderX考查2导航列表组多媒体面板15乐队网站灵活运用：模态框滚动监听选项卡轮播折叠