高中二年级信息技术《CSS样式表》教学设计

高中二年级信息技术《CSS样式表》教学设计教材依据：教育科学出版社高中信息技术选修3《网络技术应用》第五章第二节第二课时。一、教学内容分析本课是“动态HTML”章节中承上启下的关键一课。学生在此前已经掌握了HTML基本标签的使用方法，能够制作包含文字、图片、超链接的静态网页，但普遍面临一个真实困境：用font标签逐个修饰文字，页面稍一改动就要逐页重写，代码臃肿、风格混乱。CSS（层叠样式表）正是解决“结构与表现分离”这一工程问题的标准方案。本课的核心内容包括CSS的基本语法结构、三种引入方式（行内样式、内部样式表、外部样式表）、层叠与优先级规则，以及常用选择器的初步运用。学好本课，学生才能完成从“会写网页”到“会设计网页”的跃迁，也为后续学习网页交互与网站规划奠定方法论基础。二、学情分析授课对象为高二年级学生，已具备以下基础：能熟练操作Dreamweaver或记事本编写HTML代码；理解标签、属性的概念；具有一定审美判断力，对网页“好看与否”有直观感受。同时存在三个明显短板：其一，习惯用font、b等表现性标签堆砌样式，缺乏“内容与样式分离”的工程意识；其二，对“选择器—属性—值”这一声明式语法陌生，容易与HTML标签语法混淆；其三，对“层叠”概念易产生误解，认为后面的代码一定覆盖前面的，忽视选择器优先级的差异。教学中须以真实冲突切入，通过对比、试错、归纳帮助学生建立概念。三、教学目标（一）学科核心素养目标信息意识方面，学生能识别“用HTML控制样式”这一做法的效率缺陷，主动寻求结构化解决方案，形成技术选型的敏感。计算思维方面，学生理解CSS“选择器＋声明块”的抽象模型，能将一组重复出现的样式需求抽象为一条规则，体会“定义一次、处处生效”的模块化思想。数字化学习与创新方面，学生能运用三种样式引入方式改造自己的网页作品，并依据项目规模做出合理选择；能查阅MDN等权威文档自学新属性，实现知识的自主迁移。信息社会责任方面，学生理解Web标准是开放协作的产物，在创作中遵循规范、尊重用户体验。（二）具体行为目标学生能准确写出CSS规则的基本语法，指出选择器、属性、值、分号的位置与作用；能在三个不同规模的网页任务中分别选用行内样式、内部样式表和外部样式表，并说明理由；能通过实验归纳出层叠规则“就近优先、外部样式表胜出同类冲突”的基本规律；能为班级网站首页写出一份不少于十五条规则的外部样式表并调试通过。四、教学重点与难点重点：CSS语法结构与三种引入方式的适用场景。难点：层叠规则与优先级的理解；“结构与表现分离”思想的内化。五、教学策略与方法本课采用“旧法困境—新法破局—对比体悟—迁移应用”的主线，综合运用问题驱动法、对比实验法、任务驱动法与小组协作学习。机房配备多媒体广播教学系统，学生人手一机，预装浏览器与代码编辑器，教师准备三组任务素材包。全部示例代码遵循W3C规范，删除任何过时的表现性标签写法，向学生示范业界标准实践。六、教学准备教师端：准备“未使用CSS的班级网站”与“使用CSS美化的同一网站”两个对照版本；准备三个难度梯度的任务包（修复型、改造型、创作型）；准备课堂即时反馈问卷。学生端：课前完成预习单，回顾HTML常用标签，观察三个自己喜欢的网站界面并记录色彩与排版特点。七、教学过程（一）情境导入：一串红色引发的崩溃（约7分钟）上课伊始，教师广播展示两屏代码。左屏是某同学上周的网页作业：五十行的页面里，出现了十九次〈fontcolor="red"size="4"〉标签，几乎每个标题、每段正文都要单独修饰一次。教师提问：假设下周一学校要求把所有网页正文字体从红色改为深蓝色，这位同学要改多少处？学生默数，答案是十九处，且必须逐行查找，漏一处整站风格就不统一。教师追问：如果这个网站有一百个页面呢？学生自然得出结论，这种写法不可维护。教师随即切到对照组：另一份规模相当的网页，全部样式集中写在一个二十行的文本块里，改颜色只需动一处。屏幕上的对比是沉默而有力的——学生第一次直观感受到“样式集中管理”的工程价值。教师板书课题：CSS样式表。并给出一句话定义：CSS是让网页的“长相”集中登记、统一管理的语言，它把HTML从穿衣服的杂务中解放出来，让HTML专心做结构。设计意图：用学生自己作业中的真实痛点制造认知冲突，让CSS的必要性不靠说教而靠证据确立，为整节课奠定“为解决问题而学”的基调。（二）新授一：认识CSS的语法骨架（约10分钟）教师在广播屏幕上写下一个最简规则：p后面跟一对大括号，内部写color:blue;。逐字讲解：p是选择器，负责“点名”——告诉浏览器这条规则管谁；大括号内是声明块；color是属性，blue是值，属性与值之间用冒号连接，结尾必须有分号。一条规则可以包含多条声明，每条声明以分号收尾。讲解中教师故意制造两个错误让学生找茬：其一，把分号写成逗号，页面刷新后样式失效；其二，把大括号写成圆括号，浏览器直接忽略整条规则。学生通过“报错—观察—修正”的过程，建立起对语法细节的敏感，这比一次性灌输正确写法印象深得多。随后教师以“把网页比作一所学校”帮助学生建立类比：选择器是点名册，告诉规则管哪些学生；声明块是校规条款，条款之间必须分条写清；分号是句号，漏了就读不下去了。学生在自己的练习页上完成三个微任务：让所有标题变绿色、让所有段落首行缩进、让所有图片加上灰色边框。教师巡视，对典型错误即时点评。（三）新授二：三种引入方式与各自的战场（约12分钟）教师提出一个递进式的问题串：一条CSS规则写在哪里，浏览器才看得见？由此引出三种引入方式。第一种，行内样式：把样式写在标签的style属性里。教师演示为单个标题添加style="color:orange"。指出其特点是“管得最近、只管一处”，适合临时调试个别元素，但用多了等于把老毛病换个地方犯。第二种，内部样式表：在网页头部用style标签集中书写规则。教师演示为整个页面定义段落和标题样式。指出其特点是“一页之内、统一管理”，适合单个页面的作品。第三种，外部样式表：把全部样式写在独立的.css文件里，网页用link标签引用。教师现场演示：三个页面同时链接同一个style.css文件，只修改该文件中的一处颜色，三个页面的标题颜色同步变化。教室里有学生发出惊叹。教师顺势点题：这就是“定义一次，处处生效”，也是班级网站、学校门户这种多页面项目的唯一正解。学生小组完成对比实验任务：任务包中含三个页面，分别要求用三种方式实现同一套文字美化效果，并填写实验记录表，回答“哪种方式修改成本最低、哪种方式代码最干净、各自适合什么场景”。实验后各组派代表用一句话汇报结论，教师汇总板书：行内样式管一个元素，内部样式管一个页面，外部样式管整个网站——管理的半径不同，战场就不同。（四）新授三：层叠——规则打架时谁说了算（约8分钟）教师抛出问题：如果一个元素同时被三条规则“点名”，且三条规则矛盾，浏览器听谁的？学生猜想各异。教师引导进行控制变量实验：实验一，同一页面中对同一段落，内部样式表写蓝色、行内样式写红色，刷新后显示红色；实验二，外部样式表与内部样式表对同一属性给出不同值，改变两者的链接与书写顺序，观察结果变化；实验三，给某个段落单独加id选择器定义样式，观察其与标签选择器冲突时的结果。学生在实验中归纳出两条核心规律：其一，离元素越近的规则效力越高，即行内样式优先于内部和外部样式表；其二，同等级规则冲突时，后书写的覆盖先书写的。教师补充说明选择器存在细致程度差异，点名越具体的规则优先级越高，并强调“层叠”二字的本义——样式像瀑布一样层层叠落，最后沉淀下来的那条生效，这也正是CSS名称中Cascading的含义。（五）综合实践：为班级网站“换装”（约8分钟）教师发布终极任务：打开任务包中的班级网站首页半成品（纯HTML、无任何样式），小组合作完成三件事。第一，创建外部样式表banji.css并正确链接；第二，编写不少于十条规则，至少覆盖标题、段落、链接、图片四类元素，配色遵循小组预先商定的三色方案；第三，组员交叉检查语法，确保页面在浏览器中无样式失效现象。教师巡视中重点关注两类问题：链接路径写错导致样式表“失联”的，引导其画图理清文件位置关系；语法细节出错的，引导其借助浏览器开发者工具逐条排查。进度快的小组追加挑战：为导航链接添加鼠标悬停变色效果，体验伪类的妙用。（六）展示评价与课堂小结（约5分钟）随机抽取两组作品广播展示，由其他组依据评价量规（语法正确性、样式集中程度、视觉协调性、规则复用意识四个维度）打分并说明理由。教师点评时追问一句：你们的页面如果明天要全站换一套配色，需要改几个文件、几处代码？能答出“一个文件、几处声明”的小组即标志本课思想真正落地。课堂小结由学生口述、教师板书骨架完成：CSS解决的是样式与结构分离的问题；一条规则由选择器和声明块构成；三种引入方式各有管理半径；规则冲突时看谁离得近、谁点名细、谁写在后。八、板书设计主板书呈现四个模块：课题“CSS样式表”；语法骨架“选择器{属性:值;}”；三种引入方式对照表（行内—一个元素，内部—一个页面，外部—整个网站）；层叠口诀“就近优先、具体优先、后来者居上”。副板书留作学生汇报与即时纠错区。九、作业设计基础层：完善课堂上的班级网站首页样式表，补充至十五条规则并撰写五十字的样式说明文档。提高层：访问一个自己喜欢的网站，借助浏览器开发者工具研究其CSS写法，摘录三条值得借鉴的规则并在下节课分享。拓展层：自学CSS类选择器与后代选择器，为班级网站新增的“作品展示”子页面设计一套与首页协调又有所区别的样式。十、教学评价设计评价采用过程性评价与作品评价相结合的方式。过程性评价依托实验记录表与课堂观察，重点考查学生在对比实验中能否自主归纳规律；作品评价依托四维量规实行组间互评与教师复评；课后通过学习平台收集作业，以“修改一处