WEB前端程序设计课程思政教学案例一等奖

《WEB前端程序设计》课程思政教学案例（一等奖）一、课程简介本课程面向数据科学与大数据技术专业的大二学生，通过本课程的学习，可以使学生了解网站设计开发的基本方法和识记基本的概念，对网站前端开发和静态网页开发技术有全面深入的学习，并能够独立开发具有一定难度的Web网站,为学生进一步学习动态网页设计打下良好的基础。本课程教学注重学生团队精神培养，能与人良好沟通交流，以团队合作完成Web网站建设工程；注重学生自我控制素质培养，能主动深入学习最新Web开发技术，能不断探索新知识、新领域。二、课程挖掘的思政资源分析坚持立德树人的根本任务，注重“术道结合”，在教学设计中课程思政注重从以下面方面进行设计：（1）通过软件行业开展前景，引发学生对未来的职业愿景，培养学生老实、守信、坚忍不拔的性格，提高学生在沟通表达、自我学习和团队协作能力；（2）了解计算机软件从业人员应当具备的职业道德守那么，为进军软件行业做准备，努力提高自己的技能，为社会和人民造福；（3）在课程内容和案例选择、教师示范和案例分析等角度深入挖掘思政内容和课程内容的结合点，将思想教育融于知识传授中，细化为对具体内容的要求，提升课程融合能力；（4）思政元素加在每个章节的案例设计局部，通过案例教学，充分挖掘案例中蕴含的思政元素，在潜移默化中加强学生思想政治教育，提升学生学习实效性及针对性，到达润物无声的效果，真正实现立德树人的根本目的，通过案例的引入，将思政教育融入课堂教学的全过程。三、案例信息1.价值目标：系统进行法治教育、劳动教育、心理健康教育、中华优秀传统文化教育，坚定学生理想信念，切实提升立德树人教学的成效。目标2.知识目标：盒子模型介绍；元素的浮动；元素的定位；3.能力目标：培养学生发现问题、分析问题、解决问题，既注重理论又注重实践，理实相结合的能力。课堂设计思路：以课程思政设计理念为基础，结合积极教学法，教学以学生为中心，发挥学生的主观能动性，激发学生爱国热情，将内容知识点与红色主题结合，到达润物细无声的效果。.教学过程(1)知识点介绍1)盒子模型概念CSS将HTML页面中的每一个元素看成是一个矩形盒子，占据一定的页面空间。一个HTML页面由很多这样的盒子组成，这些盒子之间会相互影响，因此网页布局主要是掌握:一个独立的盒子的内部结构；多个盒子之间的相互关系。2)盒子模型使用标记来表示。组织与实施一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）这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）：相对于浏览器窗口进行定位。元素设置为固定定位之后，就会脱离原来的文档流进行定位，原有的位置将被其他元素占据。无论浏览器窗口大小如何改变，浏览器滚动条如何拖动，固定定位的元素都将显示在浏览器的固定位置。2）旋转divtransform:rotate（角度）；3）使用元素的定位和浮动绘制图形；.教学方法从以上的教学理念可以看出，本课堂充分发挥学生的作用，以学生为中心，充分调动学生学习积极性，采用积极教学法为主要方法，翻转课堂、工程式教学等方法辅助完成授课。授课过程中，突出学生学习目标，本节课完成后需要学生对照学习目标进行学习结果检测，并使用思维导图对本节课学习内容进行总结。.教学活动设计采用积极教学法，教学活动主要包括：有导向的点名提问、改良版的头脑风暴、任务单的制作、多种教学评价方式共存。.课程思政理念及分析（1）通过软件行业开展前景，引发学生对未来的职业愿景，培养学生老实、守信、坚忍不拔的性格，提高学生在沟通表达、自我学习和团队协作能力；了解计算机软件从业人员应当具备的职业道德守那么，为进军软件行业做准备，努力提高自己的技能，为社会和人民造福；（3）在课程内容和案例选择、教师示范和案例分析等角度深入挖掘思政内容和课程内容的结合点，将思想教育融于知识传授中，细化为对具体内容的要求，提升课程融合能力；（4）思政元素加在每个章节的案例设计局部，通过案例教学，充分挖掘案例中蕴含的思政元素，在潜移默化中加强学生思想政治教育，提升学生学习实效性及针对性，到达润物无声的效果，真正实现立德树人的根本目的，通过案例的引入，将思政教育融入课堂教学的全过程。在以学生为中心的OBE的教学理念引领下，课程思政设计理念和积极教学法等较成熟的教学方法的指导下，完成了对本节课程的教学。教学效果良好，也很好的调动了学生的学习积极性。教学但在教学过程中也发现了一些待