湖南人文科技学院 教案 教学学院 信息学院 课程名称 Web前端开发 专业、年级、班级 计科19级1,2班 主讲教师 刘鹃梅 多 称 讲师 2020~2021学年第二学期
湖南人文科技学院 教 案 教 学 学 院 信息学院 课 程 名 称 Web 前端开发 专业、年级、班级 计科 19 级 1，2 班 主 讲 教 师 刘鹃梅 职 称 讲师 20 20 ~20 21 学年第 二 学期
教案编写说明 教案是教师为顺利而有效地开展教学活动而撰写的一种实用性教学文书。 任课教师应根据专业培养方案，紧扣教学大纲，认真分析教学内容，切合学生实 际，提前编写设计好每门课程每个章、节或主题的全部教学活动。教案编写说明如下： 1、编号：按施教的顺序标明序号（每堂课一个序号）。 2、教学时数：指完成一个授课题目所用教学时间。理论课通常以学时数为单位 (一般2学时)，而实践课则以学时数，天数或周数为单位。 3、教学课型表示所授课程的类型，请在理论课、讨论课、实验课、习题课、实 践课及其它栏内选择打“√”。 4、题目：标明章、节或主题。 5、教学目的要求：含素质、知识与能力目标。 6、教学场所表示本课程在哪些地方开展教学，请在对应栏目后面打“√”。 7、教学重点、难点。 8、课程思政的开展（可选） 9、教学方式和手段。拟定的教学方法和手段要能有效地调动学生的学习积极性， 促进学生的积极思考，激发学生的潜能。 10、教学设计与过程（含授课思路、过程设计、讲解要点及各部分具体内容、时 间分配、启发思维、互动教学、课堂总结等)。将授课的内容按逻辑层次，有序设计 编排。本部分不同专业的授课可有自己的特色。 11、讨论、思考题和作业。 12、板书（可选）。 13、参考资料：列出参考书籍、有关资料 14、课后反思、总结（授课后再写）
教案编写说明 教案是教师为顺利而有效地开展教学活动而撰写的一种实用性教学文书。 任课教师应根据专业培养方案，紧扣教学大纲，认真分析教学内容，切合学生实 际，提前编写设计好每门课程每个章、节或主题的全部教学活动。教案编写说明如下： 1、编号：按施教的顺序标明序号（每堂课一个序号）。 2、教学时数：指完成一个授课题目所用教学时间。理论课通常以学时数为单位 （一般 2 学时），而实践课则以学时数，天数或周数为单位。 3、教学课型表示所授课程的类型，请在理论课、讨论课、实验课、习题课、实 践课及其它栏内选择打“√”。 4、题目：标明章、节或主题。 5、教学目的要求：含素质、知识与能力目标。 6、教学场所表示本课程在哪些地方开展教学，请在对应栏目后面打“√”。 7、教学重点、难点。 8、课程思政的开展（可选） 9、教学方式和手段。拟定的教学方法和手段要能有效地调动学生的学习积极性， 促进学生的积极思考，激发学生的潜能。 10、教学设计与过程（含授课思路、过程设计、讲解要点及各部分具体内容、时 间分配、启发思维、互动教学、课堂总结等）。将授课的内容按逻辑层次，有序设计 编排。本部分不同专业的授课可有自己的特色。 11、讨论、思考题和作业。 12、板书（可选）。 13、参考资料：列出参考书籍、有关资料。 14、课后反思、总结（授课后再写）
《Web前端开发》 课程教学信息 课程编号 xx19408230 课程性质 专业必修 先修课程 计算机基础 后续课程 Java Web 主讲教师 刘鹃梅 职称 讲师 专业 计算机科学与技术 年级、班级 19级1,2班 考核方式 教学质量过程考核，项目目标考核 考核时间 2021年2月一6月 使用教材 聂常红，《eb前端开发技 -HTML CSS、JavaScript(第3版)》（第2版）. 人民邮电出版社，2020年。 教学学时 总学时：32（理论课学时：20实践课学时：12周学时：2） 授课时间 与地点 《Wb前端开发》是一门综合性和实践性都非常强的课程，内容包括 ML、CSS、JavaScrip等Web前端开发技术。HTML是网页设计的基本语 言，CSS用于实现网页元素的样式和布局，JavaScript是目前Web应用 程序开发者使用最为广泛的客户端脚本编程语言，用于实现页面的动态 效果。 课程的任务是要求理论和实际相结合，熟练掌握网页开发工具的同 时能综合运用Wb前端开发技术设计一个完整的网站。通过本课程的学 习，学生能够了解TML、CSS及JavaScript语言的发展历史及未来方向， 熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门 课程的任 务和目的 户、电商类网站，提高学生的软件使用技巧和实际应用能力，为今后的 专业学习或深入的设计打下基础。 课程专业目标：结合本专业“厚基础、强能力”的应用型人才培养 定位目标，培养学生以实现能够运用Wb前端开发相应技术，自主设 一个完整且较高质量的交互式前端网站知识目标的同时，以培养实现学 生的解决问题的实际应用能力、综合工程实践能力及创新能力等的能力 目标。 课程育人目标：为落实“既教书又育人”根本任务，在培养学生以 实现专业课程知识目标和能力目标的同时，在社会贵任感、团队协作精 神、专业荣誉感、正确人生观及价值、爱国主义情怀等方面得到一定的 拉差而空现理积查人的日标
《Web 前端开发》 课程教学信息 课程编号 xx19408230 课程性质 专业必修 先修课程 计算机基础 后续课程 Java Web 主讲教师 刘鹃梅 职 称 讲师 专 业 计算机科学与技术 年级、班级 19 级 1,2 班 考核方式 教学质量过程考核，项目目标考核 考核时间 2021 年 2 月—6 月 使用教材 聂常红,《Web 前端开发技术——HTML、CSS、JavaScript（第 3 版）》(第 2 版). 人民邮电出版社，2020 年. 教学学时 总学时：32（理论课学时：20 实践课学时：12 周学时：2） 授课时间 与地点 课程的任 务和目的 《Web 前端开发》是一门综合性和实践性都非常强的课程，内容包括 HTML、CSS、JavaScrip 等 Web 前端开发技术。HTML 是网页设计的基本语 言，CSS 用于实现网页元素的样式和布局，JavaScript 是目前 Web 应用 程序开发者使用最为广泛的客户端脚本编程语言，用于实现页面的动态 效果。 课程的任务是要求理论和实际相结合，熟练掌握网页开发工具的同 时能综合运用 Web 前端开发技术设计一个完整的网站。通过本课程的学 习，学生能够了解 HTML、CSS 及 JavaScript 语言的发展历史及未来方向， 熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门 户、电商类网站，提高学生的软件使用技巧和实际应用能力，为今后的 专业学习或深入的设计打下基础。 课程专业目标：结合本专业“厚基础、强能力”的应用型人才培养 定位目标，培养学生以实现能够运用 Web 前端开发相应技术，自主设计 一个完整且较高质量的交互式前端网站知识目标的同时，以培养实现学 生的解决问题的实际应用能力、综合工程实践能力及创新能力等的能力 目标。 课程育人目标：为落实“既教书又育人”根本任务，在培养学生以 实现专业课程知识目标和能力目标的同时，在社会责任感、团队协作精 神、专业荣誉感、正确人生观及价值、爱国主义情怀等方面得到一定的 培养，从而实现课程育人的目标
Web前端开发课程教案 编号： 授课题目 第一章网站开发基础教学课型 理论课■讨论课口实验课口 习题课口实践课口其它口 首次授课时间第一周 学时 2学时 教学场所 固定座位教室口移动座位教室口智慧型互动教室口 实验（实训）室■校外实践基地口户外口其它口 数学目的要求： ·了解本课程的基本信息 ·掌握与Web开发相关的基础知识 ·了解网站建设的流程 ·掌握HTML基础知识 教学重点、难点： ·互联网的访问过程 ·网页设计中的基本概念和常见技术 ·常用的开发工具 课程思政： 1、思政元素：万维网之父蒂姆·伯纳斯·李，引导学生建立“不忘初心，无私奉 献”的价值观 2、思政元素：孟晚舟事件，引导学生分析和解决问题不能只看表面，而是要找到 本质，树立正确的世界观 3、思政元素：“Wb前端开发工程师”职业信息，引导学生了解所学课程的知识体 系，并能根据课程知识体系做好职业规划并努力，树立学生积极向上的价值观 4、思政素材：编草鞋的鲁国人经典传统故事，引导学生正确做好自身定位，回归 本职，树立正确的价值观 5、思政素材：HTML5标准规范的制定和发布背景，引导学生在做好职业规划的基 础上，并为之努力，遇到挫折及时调整并坚持，不放弃的精神
Web 前端开发课程教案 编号： 授课题目 第一章 网站开发基础 教学课型 理论课■讨论课□实验课□ 习题课□实践课□其它□ 首次授课时间 第一周 学时 2 学时 教学场所 固定座位教室□移动座位教室□智慧型互动教室□ 实验(实训)室■校外实践基地□户外□其它□ 教学目的要求： ⚫ 了解本课程的基本信息 ⚫ 掌握与 Web 开发相关的基础知识 ⚫ 了解网站建设的流程 ⚫ 掌握 HTML 基础知识 教学重点、难点： ⚫ 互联网的访问过程 ⚫ 网页设计中的基本概念和常见技术 ⚫ 常用的开发工具 课程思政： 1、思政元素：万维网之父蒂姆·伯纳斯·李， 引导学生建立“不忘初心，无私奉 献”的价值观 2、思政元素：孟晚舟事件，引导学生分析和解决问题不能只看表面，而是要找到 本质，树立正确的世界观 3、思政元素：“Web 前端开发工程师”职业信息，引导学生了解所学课程的知识体 系，并能根据课程知识体系做好职业规划并努力，树立学生积极向上的价值观 4、思政素材：编草鞋的鲁国人经典传统故事，引导学生正确做好自身定位，回归 本职，树立正确的价值观 5、思政素材：HTML5 标准规范的制定和发布背景，引导学生在做好职业规划的基 础上，并为之努力，遇到挫折及时调整并坚持，不放弃的精神
教学方式和手段： 教学方法：讲授、讨论、演示 教学设计与过程： 课堂教学设计： 课程导入 课程了解：提出问题：课程学什么，怎么学的问题，引导学生对本课 程的了解和兴趣 指导教学 新知学习：提出和课题相关的问题进行讨论，并课堂演示，从而引出 web开发相关的基本知识 课程节 知识总结：对知识点进行总结归纳 课后思考 一知识应用：布置课后思考和作业 课堂教学过程： 1.课程介绍(15分钟) 11引导学生了解本课程： ◆“为什么？”学习该课程引发学生思考来上课的原因 ◆ “学什么？”引发学生了解本课程要学的技术：Wb基础知识；HTML技 术；CSS技术；JavaScript技术；设计可用的网站 ◆“怎样学？”：课前（使用在线资源），课中（重点内容归纳，讲解常见错误 明确指出，重点反复强调，热点内容讨论)，课后作业与思考，实践（合作 学习)：自动学习 12教材与参考资料： ◆教材： 聂常红，《web前端开发技术—HTML、CSS、JavaScript(第3版)》（第2版） 人民邮电出版社，2020年 ◆网页设计，html,css,js相关参考书： [赵丰年，《网页设计与制作(HTML5+CSS3+-JavaScript)(第4版)（微课版）》， 人民邮电出版社，2020年 [2]明日科技.《HTML5+CSS3+-JavaScript Web前端开发案例教程（慕课版）》.人民 邮电出版社，2020年. [3传智播客高教产品研发部，《网页设计与制作项目教程 (HTML+CSS+JavaScript)》,人民邮电出版社，2016年
教学方式和手段： 教学方法：讲授、讨论、演示 教学设计与过程： 课堂教学设计: 课程导入——课程了解：提出问题：课程学什么，怎么学的问题，引导学生对本课 程的了解和兴趣 指导教学——新知学习：提出和课题相关的问题进行讨论，并课堂演示，从而引出 Web 开发相关的基本知识 课程小节——知识总结：对知识点进行总结归纳 课后思考——知识应用：布置课后思考和作业 课堂教学过程： 1. 课程介绍（15 分钟） 1.1 引导学生了解本课程： ◆ “为什么？”学习该课程引发学生思考来上课的原因 ◆ “学什么？”引发学生了解本课程要学的技术：Web 基础知识；HTML 技 术；CSS 技术；JavaScript 技术；设计可用的网站 ◆ “怎样学？”：课前（使用在线资源），课中（重点内容归纳，讲解常见错误 明确指出，重点反复强调，热点内容讨论），课后作业与思考，实践（合作 学习）；自动学习 1.2 教材与参考资料： ◆ 教材： 聂常红,《Web 前端开发技术——HTML、CSS、JavaScript（第 3 版）》(第 2 版). 人民邮电出版社，2020 年 ◆ 网页设计，html,css,js 相关参考书： [1] 赵丰年，《网页设计与制作（HTML5+CSS3+JavaScript）（第 4 版）（微课版）》， 人民邮电出版社，2020 年 [2] 明日科技.《HTML5+CSS3+JavaScript Web 前端开发案例教程（慕课版）》.人民 邮电出版社，2020 年. [3] 传 智 播 客 高 教 产 品 研 发 部 ，《 网 页 设 计 与 制 作 项 目 教 程 （HTML+CSS+JavaScript）》，人民邮电出版社，2016 年