《CSS样式表》教学设计

杨志方 江苏省盐城市时杨中学

刘苏梅 江苏省盐城市时杨中学

曹恒来 江苏省盐城市教育科学研究院

● 学习内容分析

《CS S样式表》是高中选修教材《网络技术应用》（教科版）第5章第2节中的内容。CSS是Cascading Style Sheet的缩写，是用于增强或控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，在所有浏览器和平台之间具有较好的兼容性。学好CSS样式表，就可以“随心所欲”地控制页面布局和外观，在修改网页外观和格式时只需修改CSS代码即可，能够避免重复劳动和代码冗余，提高网页下载速度。

● 学习者分析

本课的学习对象是高一年级学生，处于这一阶段的学生，思维更加灵活流畅，独立自主的意识不断增强。通过前阶段的学习和实践，学生已经较为熟悉Frontpage、Dreamweaver这类“所见即所得”的网页制作软件，能够使用这类软件设计制作网页，但这种“所见即所得”的设计方式屏蔽了技术细节，在编排相同的格式时，需一次次地对它们进行重复的操作，因而效率不高，这样的体验促使学生寻求解决问题的更好方法。

● 学习目标

知识与技能目标：理解CSS的基本概念；了解CSS代码的语法规则；熟练掌握外联式、内联式、嵌入式三种样式表的插入方法，理解CSS的层叠优先次序。

过程与方法目标：在实践中总结出三类样式表各自的作用范围和适用场合，学会利用CSS样式表设计修改网页外观。

情感态度与价值观目标：体会CSS样式表的优势及“样式”中蕴含的标准化、自动化、批处理的思想。

● 教学重难点

教学重点：CSS的基本概念及语法规则；三类样式表的插入方法与适用场合。

教学难点：三类样式表的插入方法与适用场合。

● 教学过程

1.呈现问题

活动1：案例分析，发现问题。

（1）观察初始网站“mysite”（如图1），其外观有哪些地方需要调整？

（2）网站变身（如图2）。在平时上网的过程中有没有过相似的体验？尝试分析其技术特征，如何解决？

小结：网站由初始时图片大小不一、布局凌乱，瞬间变身为图片大小统一、布局整齐，网站的风格也可任意切换。变身后的网站内容没有改变，仅仅改变外观，这样的变化可以通过CSS技术来实现，它能够实现网站内容与外观的分离。

图1 初始网站

图2 网站变身

设计意图：通过网站mysite变身前后的比较，引导学生分析其技术特征，迅速将学生的注意力吸引至CSS这一新知识、新技术。

2.认识CSS样式表

活动2：对比分析，认识样式。

修改初始网站“mysite”站点下所有页面中的图片大小，除首页第一张图片外，统一调整为宽300像素、高200像素。

图3 首页图片逐个调整之后的代码

图4 “设计”视图中定义样式修改图像大小

图5 “代码”视图中自动生成的CSS代码

（1）运用现有的技术解决：在Frontpage设计视图下，通过“所见即所得”的操作或HTML语言代码直接编辑修改图像大小（如图3）。

思考：能否将相同的格式代码提取出来只定义一次，需要使用时直接调用？

（2）通过样式修改图像大小：图4为所见即所得的“样式”操作示意，或在网站各个网页的相应位置直接插入如图5所示的代码，并与第一种修改方法进行对比。

小结：“样式”是用一个指定的名字来标识和保存的一组格式的集合。在编辑相同的格式时，使用“所见即所得”方式需对每一个元素逐个修改，而样式只需要在定义的格式里修改一次，更加高效，代码也更为精简。

活动3：比较分析，掌握CSS样式表基本语法。

“样式”不仅应用于图片，也可应用于网页中的其他元素，精确地控制布局、背景、超链接和其他图文效果。CSS样式表的属性代码非常多，以图片的样式为例，与HTML比较其书写规则的区别如表1所示。

表1 CSS代与HTML代码的比较

小结：CSS代码和HTML代码，其核心语句与实现的功能是一致的，只是书写的规则不同。CSS代码在书写时，首先要有样式规则选择器，如表1CSS代码中的“img”，样式规则放在一对{}中，属性和属性对应的值之间使用冒号，不同的属性之间使用分号进行分隔。

设计意图：通过两种操作方法的对比，帮助学生认识到样式更加高效、代码更为精简的优势，最大程度地激发学生学习CSS的热情；将HTML代码与CSS代码放在一起比较，降低理解难度，尊重学生的最近发展区，有利于学生主动学习、积极建构。

3.理解CSS样式表

在HTML中加入CSS样式表并不是只有一种方法，根据CSS样式表作用范围的不同，可分为三种方式：外联式、内联式、嵌入式。图5所示代码的作用范围仅限于一个页面，此为内联式样式表。若要统一整个网站中的所有图片大小为宽218像素、高143像素，且网站首页第一张图片的大小保持其原来的尺寸，宽为700像素、高为379像素，如何实现呢？

活动4：体验外联式、嵌入式样式表，并观察网站中图片元素的变化。

（1）使用外联式样式表修改多个页面。所谓外联式样式表，是把样式定义成一个“.css”文件，然后在网页中调用该文件。如图6左侧所示，先将图片样式用记事本定义成一个“.css”文件，再在网站中各个网页的相应位置逐个添加如图6右侧所示的调用外联式样式表的代码，也可运用所见即所得的操作。

图6 外联式样式表代码

图7 嵌入式样式表代码

（2）使用嵌入式样式表仅修改一个元素。在网站首页第一张图片所对应的标记后直接添加如图7所示的嵌入式样式表代码。

活动5：比较外联式、内联式、嵌入式三种样式表。

在活动4的基础上，比较总结外联式、内联式、嵌入式三种样式表的书写规范、插入位置、作用范围及层叠优先顺序（如表2）。

表2 三种样式表比较

表3 个人网站的修改

表4 评价标准

思考：应用CSS样式表修改网站外观有什么优势？

小结：①嵌入式样式表只对一个标签起作用；内联式样式表仅能对该页面的指定元素进行控制；外联式样式表可改变多个页面，甚至是整个网站，其充分体现了CSS样式表易于修改、更加高效的优势，所以应用得最多。②首页第一张图片被三种类型的样式表都定义过，依据其呈现效果，可以判断其最终采用的嵌入式样式表声明类型，所以样式表的“层叠”遵循“就近”原则，嵌入式样式表拥有最高的优先级。

设计意图：理解样式表是本节课的重点，三类样式表都是对网站中的图片进行样式的调整，这样的选择便于学生观察并比较三类样式表应用之后的效果，对各自的应用范围有更直观的认识，同时利于学生理解样式的“层叠”次序，为今后能根据不同的情况合理选择并利用样式表美化网页奠定基础。

4.应用CSS样式表解决问题

活动6：应用CSS修改网站外观。

（1）根据自己的偏好和个性特质，列出个人网站要修改的内容及对应的选择器与样式规则，选择合适的样式表类型，完成表3。此处，教师提供部分样式表常用属性及对应的值作为学生的学习资源。

（2）依据表3，在网站相应位置插入相应的样式表代码，观察其效果，参照评价标准（如上页表4）对网站外观进行评价，并根据评价结果进一步修改完善。

图8 《CSS样式表》一课的思维导图

设计意图：此环节给了学生充分创意的空间，从独立思考、规划设计网站外观到CSS技术支持的效果实现，最后对修改结果进行评价与调整，这一过程既加深了学生对CSS的理解，又能够让学生在活动的过程中获得问题解决的能力。

5.思维拓展，再识样式

样式不仅在网页制作中出现，其他应用程序中也存在样式定义，如Photoshop中的图层样式，Excel中的表格样式、单元格样式等，使用样式可以轻松完成以前需要很多步骤实现的效果。样式还出现在我们的生活中，如活字印刷排版、鞋底模具设计等，为后续量产提供标准，省去了重复的操作，大大提高了效率。诸如此类，样式体现了标准化、自动化、批处理的思想。

6.回顾总结

借助思维导图（如图8），对样式表的概念、语法规则、分类、功能等知识进行梳理总结。

设计意图：借助思维导图的梳理，进一步完善学生的认知结构。

点 评

《CSS样式表》这节课的内容既包含抽象的陈述性知识，又包含一定的技能学习，为避免单纯的知识灌输与技能训练，这节课的教学在“三层架构”核心素养理论的指导下，通过创建真实的问题情境，尝试从“双基”“问题解决”“学科思维”三个层面设计一系列学习活动，来落实信息技术学科核心素养。

面对修改初始网站mysite外观这一真实的问题情境，学生首先要分析网站外观需要调整的地方，并尝试用已有经验解决问题。在尝试的过程中，学生体验到逐个设置相同格式的操作效率低下，从而产生运用新方法解决问题的需求——样式。在用“样式”解决问题的过程中，创设了“对比分析，认识样式”“比较分析，掌握CSS样式表基本语法”“体验外联式、嵌入式样式表，并观察网站中图片元素的变化”“比较外联式、内联式、嵌入式三种样式表”“应用CSS修改网站外观”等一系列学习活动，带领学生层层深入，习得“CSS的概念”“CSS代码的语法规则”“外联式、内联式、嵌入式三种样式表各自的插入方法、作用范围和适用场合”“CSS的层叠顺序”等基本知识和基本技能，掌握应用CSS精确控制网页中元素的方法。这些是从“双基”层和“问题解决”层来把握的。

在此基础上，既不停留在“双基”层的掌握，也不止步于问题解决式学习活动的层面，而是继续引导学生思考应用CSS样式表修改网站外观时有什么优势，发现CSS样式表具有易于修改，可以多页面应用，更加高效等优势，并进一步引导学生思考生活中还有哪些地方体现了样式的思想，从而打开学生的视野，拓展思维的深度，最终走向思维方式的内化，获得与本技能点相应的学科思维方式——标准化、自动化、批处理，使得学生学习的知识与技能能够迁移到新的情境中去，走向更有意义的学习。