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