admin 管理员组文章数量: 1184232
2024年2月21日发(作者：黄页网站介绍)
《WEB前端程序设计》“课程思政”教学案例
课程名称
课程类型
教材信息
WEB前端程序设计
考查课
授课对象
课程总学时
大二本科生
64
Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）
一、课程简介
本课程面向数据科学与大数据技术专业的大二学生，通过本课程的学习，可以使学生了解网站设计开发的基本方法和识记基本的概念，对网站前端开发和静态网页开发技术有全面深入的学习，并能够独立开发具有一定难度的Web网站，为学生进一步学习动态网页设计打下良好的基础。本课程教学注重学生团队精神培养，能与人良好沟通交流，以团队合作完成Web网站建设项目；注重学生自我控制素质培养，能主动深入学习最新Web开发技术，能不断探索新知识、新领域。
二、课程挖掘的思政资源分析
坚持立德树人的根本任务，注重“术道结合”，在教学设计中课程思政注重从以下面方面进行设计：
1
（1）通过软件行业发展前景，引发学生对未来的职业愿景，培养学生诚实、守信、坚忍不拔的性格，提高学生在沟通表达、自我学习和团队协作能力；
（2）了解计算机软件从业人员应当具备的职业道德守则，为进军软件行业做准备，努力提高自己的技能，为社会和人民造福；
（3）在课程内容和案例选择、教师示范和案例分析等角度深入挖掘思政内容和课程内容的结合点，将思想教育融于知识传授中，细化为对具体内容的要求，提升课程融合能力；
（4）思政元素加在每个章节的案例设计部分，通过案例教学，充分挖掘案例中蕴含的思政元素，在潜移默化中加强学生思想政治教育，提升学生学习实效性及针对性，达到润物无声的效果，真正实现立德树人的根本目的，通过案例的引入，将思政教育融入课堂教学的全过程。
三、案例课信息
2
1.价值目标：系统进行法治教育、劳动教育、心理健康教育、中华优秀传统文化教育，坚定学生理想信念，切实提升立德树人的成效。
教学目标
2.知识目标：盒子模型介绍；元素的浮动；元素的定位；
3.能力目标：培养学生发现问题、分析问题、解决问题，既注重理论又注重实践，理实相结合的能力。
课堂设计思路：以课程思政设计理念为基础，结合积极教学教学内容
法，以学生为中心，发挥学生的主观能动性，激发学生爱国热情，将知识点与红色主题结合，达到润物细无声的效果。
3
1.教学过程
（1）知识点介绍
1）盒子模型概念
CSS将HTML页面中的每一个元素看成是一个矩形盒子，占据一定的页面空间。
一个HTML页面由很多这样的盒子组成，这些盒子之间会相互影响，因此网页布局主要是掌握：一个独立的盒子的内部结构；多个盒子之间的相互关系。
2）盒子模型使用标记来表示。
课堂组织与
实施
一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）这4部分组成。
4
（2）盒子模型——元素的定位元素的定位：可以精确定义一个元素的准确位置
1）定位模式：position属性
static：静态定位relative：相对定位absolute：绝对定位fixed：固定定位2）边偏移：left：左侧偏移量right：右侧偏移量top：顶端偏移量bottom：底部偏移量3）静态定位（static）：网页元素默认的定位方式，元素按照标准流进行布局。不能通过设置边偏移属性left、right、top、bottom值来改变元素的位置。相对定位（relative）：网页元素相对于其在原文档流的位置进行定位，当元素设置为相对定位“position:relative;”该元素就会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。绝对定位（absolute）：将元素相对于距离其最近的、已经定位（相对、绝对或固定定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当元素设置为绝对定位“position:absolute;”该元素就会相对于其父元素或body根元素进行偏移，脱离文档流，它在文档流中的位置将被其他元素占据。固定定位（fixed）：相对于浏览器窗口进行定位。元素设置为固定定位之后，就会脱离原来的文档流进行定位，原有的位置将被其他元素占据。无论浏览器窗口大小如何改变，浏览器滚动条如5
何拖动，固定定位的元素都将显示在浏览器的固定位置。
2）旋转divtransform:rotate(角度);
3）使用元素的定位和浮动绘制图形；
2.教学方法
从以上的教学理念可以看出，本课堂充分发挥学生的作用，以学生为中心，充分调动学生学习积极性，采用积极教学法为主要方法，翻转课堂、项目式教学等方法辅助完成授课。授课过程中，突出学生学习目标，本节课完成后需要学生对照学习目标进行学习结果检测，并使用思维导图对本节课学习内容进行总结。
3.教学活动设计
采用积极教学法，教学活动主要包括：有导向的点名提问、改良版的头脑风暴、任务单的制作、多种教学评价方式共存。
4.课程思政理念及分析
（1）通过软件行业发展前景，引发学生对未来的职业愿景，培养学生诚实、守信、坚忍不拔的性格，提高学生在沟通表达、自我学习和团队协作能力；
（2）了解计算机软件从业人员应当具备的职业道德守则，为进军软件行业做准备，努力提高自己的技能，为社会和人民造福；
（3）在课程内容和案例选择、教师示范和案例分析等角度深入挖掘思政内容和课程内容的结合点，将思想教育融于知识传授中，细化为对具体内容的要求，提升课程融合能力；
（4）思政元素加在每个章节的案例设计部分，通过案例教学，充分挖掘案例中蕴含的思政元素，在潜移默化中加强学生思想政治教育，提升学生学习实效性及针对性，达到润物无声的效果，真正实现立德树人的根本目的，通过案例的引入，将思政教育融入课堂教学的全过程。
6
在以学生为中心的OBE的教学理念引领下，课程思政设计理念和积极教学法等较成熟的教学方法的指导下，完成了对本节课程的教学。教学效果良好，也很好的调动了学生的学习积极性。但在教教学效果分析
学过程中也发现了一些待改进的地方，例如，在授课过程中大量的时间用于学生的讨论、交流，使得多数的学习内容无法按照教学计划完成；学生在讨论过程中思维过于发散，无法与教学目标很好的契合。以上问题也是今后改进和研究的重点，整个过程中，结合在线资源很好的完成了本次授课。
7
版权声明：本文标题：【课程思政教学案例】《 WEB 前端程序设计》课程 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1708524469a526750.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论