课程思政

思政元素

正视问题解决问题的意识

融入知识点

CSS精灵技术（CSS  Sprites）

融入方式

随点融入

案例概述

课程和案例的基本情况，案例选用意义，思政内容融入方法和理念，课程思政改革教学实践情况，知识、能力、素质目标的设定和达成等

本次课所涉及的专业知识点为CSS精灵技术（CSS Sprites）。传统网页上的图片通常是利用<img>元素从服务器端申请后加入网页的，每个<img>元素就意味着一次客户端向服务端的请求。每当用户访问一个带有图片的网站时，网页上的每张图像都要经过一次请求才能展现给用户，就会导致向服务器发送N多次请求，这样不仅降低了页面的加载速度，也会影响服务器的效率。

聪明机智的前辈们研究出了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。需要用到background-img属性，background-position属性，当然也可以连写起来，都写在background属性中。这样，当用户访问该页面时，只需向服务发送一次请求，通过定位就可以将网页中的背景图像全部展示出来。

在学习精灵技术这一知识点的时候，启发学生，在发现问题时不能逃避，要培养正视问题解决问题的意识，面对任何问题都要想方设法进行解决，而不是放任不管。满足课程知识和能力目标，也能达到对学生的思政教育。

教学设计

融入课程思政的教学内容和资源，教学环节的设计，教学方法和手段，考核评价方式，教学过程的组织与实施等

教学设计：

1.教师讲解CSS精灵技术的基本原理。

2.教师以“摇晃的桃子”项目为例进行精灵技术的演示。

3.学生进行项目：“摇晃的桃子”页面的代码编写。

4.找学生讲解自己的代码，老师进行点评，并进行思想教育。

5.根据学生的代码编写情况和发言情况，教师打出这次课的平时成绩。

特色创新

通过思政点和教学知识的融合，使得思政教育潜移默化，不突兀，不牵强，不死板。同时可以扩展学生的知识面，引导学生认识我们日常生活中熟悉事物中存在的问题，并能够勇于正视问题和解决问题，不逃避不漠视。

教学反思

在教学实施过程中学生对于授课中所用项目的形式还是比较感兴趣的，但应该注意及时的提炼和引导，避免学生只是看热闹，而忽略项目背后需要传达和掌握的知识点。因此可以通过在项目中穿插提问，或项目讨论、总结的方式进行知识点的巩固。