高中信息技术选择性必修模块CSS样式表第一课教学设计

高中信息技术选择性必修模块CSS样式表第一课教学设计【教学基本信息】本课对应教科版高中信息技术《网络技术应用》（选修3）第五章第二节第二课时，教学对象为高中二年级学生。在此前学习中，学生已经掌握HTML基本标记语言，能够使用记事本或编辑器完成结构简单的静态网页，对标签、属性、超链接、表格等概念有初步认知。本课是学生从"会写网页"走向"写好网页"的分水岭，课时安排为一课时，地点为配备网络机房的多媒体教室，每生一机，安装有代码编辑器和常用浏览器。【教材分析】本课内容是"网页设计与制作"单元的核心枢纽。教科版教材在编排上将CSS置于HTML之后、动态网页之前，其逻辑意图十分清晰：先让学生体会"内容与表现混杂"的笨拙，再引入"结构与样式分离"的思想，最后为后续学习JavaScript动态效果奠定选择器基础。教材呈现了三种样式引入方式——行内样式、内部样式表和外部样式表，并以文字外观修饰为主线讲解了font、color、textalign等基础属性。课程标准在本模块中强调学生应"理解网页设计的基本思想，能够使用恰当的技术表达信息"。这意味着本课不能只停留在属性语法的记忆层面，而要让"分离"这一工程思想真正在学生心中扎根。教材的优点是示例贴近学生日常浏览体验，不足是对浏览器兼容性和开发者工具的使用着墨较少，教学中需适度补充。【学情分析】通过课前问卷和上一单元的作业统计，本班四十二名学生呈现出三个典型特征。其一，全体学生能写出含标题、段落、图片的HTML页面，近七成学生尝试用font标签的face和size属性修饰过文字，这正是引入CSS的最佳生长点。其二，学生对"样式"的感性经验极度丰富，每天浏览的网页都是鲜活的样式样本，但他们从未从代码角度审视过这些效果。其三，学生之间的动手能力差异明显，约五分之一的学生打字速度慢、对英文单词敏感畏难，教学中需设计分层任务给予保护。值得注意的是，学生在上一节课修改网页文字颜色时，普遍采用逐段添加标签的方式，有学生在课后作业中抱怨"改一次颜色要改二十多处"。这份抱怨是本课最宝贵的教学资源，它将作为新课导入的真实情境。【教学目标】信息意识层面：学生能够识别网页中"内容"与"样式"各自的承担者，理解结构层与表现层分离的意义；面对一个网页效果时，有主动查看其源代码、分析其实现方式的意识。计算思维层面：学生理解"选择器—属性—值"这一声明式规则的基本结构，能将"把全站二级标题改成蓝色四号字"这类自然语言需求抽象为一条CSS规则；通过对比三种引入方式的作用范围，体会"局部覆盖整体"的优先级思想。数字化学习与创新层面：学生能够综合运用行内样式、内部样式表完成对一个班级网页的美化任务，并能借助浏览器开发者工具观察样式的实时变化，初步养成"边写边看"的调试习惯。信息社会责任层面：在评价环节中引导学生关注网页的可读性与普适性，初步树立为不同人群（如视力较弱者）设计友好页面的意识。【教学重点与难点】教学重点：CSS的基本语法结构，即选择器、属性、属性值三者构成的声明规则；行内样式与内部样式表两种引入方式的使用场景。教学难点：结构与样式分离思想的理解。难点不在语法记忆，而在于让学生从"把样式写进标签里"的习惯中跳出来，接受"另设一处统一管理样式"的抽象做法。突破策略是创设"改一处，动全身"的对比体验，用操作上的强烈反差促成观念转变。【教学策略】本课采用任务驱动与对比教学相结合的策略。主线任务为"美化班级主页"，拆解为"发现问题—认识规则—套用规则—迁移规则"四个环节。每个环节遵循"先做后讲、先错后纠"的原则，让学生在真实的认知冲突中获得新知。辅以分层练习卡，保证基础薄弱学生完成保底任务，学有余力学生挑战外部样式表的自主探究。【教学准备】教师准备：一份仅含HTML骨架、无任何样式修饰的"班级主页"半成品文件包，内含index.html及图片素材；一份已美化完成的成品页面用于展示；教学演示课件；分层任务单（纸质，每人一份）；机房广播教学软件调试正常。学生准备：复习HTML常用标签；每人一个个人文件夹用于存放当堂作品。【教学过程】环节一：情境导入——从一次"痛苦的修改"说起（约6分钟）上课伊始，教师通过广播软件展示上一节课学生提交的典型作业页面：一个介绍班级的网页，正文用若干个p标签书写，每段文字都用font标签设置成了楷体、蓝色。教师先肯定这份作业内容完整，随后提出一个请求："班主任看了这个页面，提了个意见——蓝色字配白底不够醒目，希望全部改成深红色。请你帮作者想想，要改多少处？"学生口头估算，有学生说"每一段都要改"，有学生数出页面有九段，要改九处。教师随即追问："如果是学校官网上的新闻页面，有九十段呢？"教室里出现轻微的骚动，学生开始意识到手工逐个修改的不可行。教师顺势揭示本课课题：有一种技术，只需修改一处，就能让全网页的文字颜色统一改变，甚至让全网站的所有页面整体换装，它就是层叠样式表CSS。板书课题：5.2.2CSS样式表（一）。此环节不讲解任何语法，只制造"非学不可"的心理需求。教师语言示例："今天我们要学的不是一个新软件，而是一种新的思考问题的方式——把'写什么'和'长成什么样'分开管理。"环节二：初识CSS——解剖一条样式规则（约8分钟）教师打开半成品页面index.html，用浏览器展示其朴素面貌，然后在代码中h1标签内添加行内样式：style=\"color:red\"，保存刷新，标题即刻变红。强烈的视觉冲击引发学生兴趣。教师趁热打铁，在大屏幕上放大显示这条代码，引导学生观察其构成："这条样式里，哪些是你的旧知识？哪些是新面孔？"学生指出h1、style是熟悉的标签和属性名，color和red是陌生的搭配。教师在黑板上绘制剖析图：color是属性，red是属性值，中间用冒号连接——这是CSS的书写规矩，与HTML中等号加引号的写法形成对照。随后教师布置微任务一：请学生在自己的半成品页面中，给标题添加行内样式，颜色自定，并将字号设置为36像素（fontsize:36px）。提醒学生注意：多个样式声明之间用分号隔开。学生动手操作，教师巡堂，重点帮扶打字慢的学生，允许同桌间低声互助。约四分钟后，教师随机广播两名学生的屏幕进行展示。其中一份作品中出现了典型错误——把冒号写成了等号，导致样式失效。教师不直接指出，而是请全体学生一起"找茬"，由发现问题的学生口述修正方法。这个错误的暴露极有价值，它让"冒号"这一语法细节在纠错中获得深度加工。环节三：从行内到内部——分离思想的第一次体验（约10分钟）教师再次提出升级需求："现在请把页面里所有的p段落文字都改成灰色、行高1.8倍。"有意观察学生的操作路径。大多数学生开始逐段复制style属性，很快有学生反应过来："老师，这不又回到了上课开头那个痛苦的问题吗？"教师肯定这位学生的发现，明确告知："对，行内样式只对它所在的那个标签负责。要统一管理所有同类标签，需要把样式集中写到页面的头部。"教师演示：在head区域内插入一对style标签，在其中书写规则，p后面跟一对花括号，括号内逐行写声明。保存刷新，所有段落瞬间统一变色。此时教师停顿，让学生安静观察屏幕三秒，然后提问："刚才那一下刷新，你们看到了什么？这个'一处修改、处处生效'的机制，靠的是什么？"引导学生说出：靠选择器"p"指向了页面中所有的p标签。教师正式给出术语：p是选择器，花括号里的内容是声明块，整条称为CSS规则。微任务二下发：学生将环节二中的行内样式迁移到内部样式表中，并为页面中的h2标签统一添加"颜色深蓝、加边框下划线"的样式。教师提示新属性borderbottom的写法可由任务单背面的属性速查表获得。此环节教师巡堂的观察重点是：学生是否把样式写对了地方（head区域），花括号是否配对。对提前完成的学生，口头加问："如果页面里只有一个h2不想加下划线，你怎么办？"为后续伏笔。环节四：对比归纳与优先级初探（约8分钟）教师组织一次全班性的思辨活动。教师现场制造一个"冲突"：先在内部样式表中规定所有p为灰色，再给其中某一段落添加行内样式color:orange。刷新后，该段落呈橙色，其余段落为灰色。教师提问："浏览器听谁的？为什么？"学生直觉能答出"离得越近越优先"，教师给予肯定并规范表述：当多处样式作用于同一元素时，遵循就近原则，行内样式优先于内部样式表。教师进一步引导："这不是杂乱无章的妥协，而是一种设计智慧——全局定基调，局部做微调。学校的规章制度管全体同学，班级的班规可以补充细化，道理相通。"用学生熟悉的校园管理作类比，将抽象的优先级规则锚定在已有经验上。接着教师用一张表格引导学生共同完成三种引入方式的对比小结：行内样式写在标签属性里，作用范围仅限该标签，适合个别元素的特殊处理；内部样式表写在head中，作用于当前页面，适合单页面的统一管理；外部样式表是独立的.css文件，一个网站的所有页面都可以链接它，适合整个网站的风格统一。教师说明：外部样式表将在下一课时深入，今天先建立"还有第三种更彻底的方式"这一认知期待。环节五：综合实践——美化班级主页（约10分钟）学生领取综合任务：运用本课所学，对班级主页半成品进行整体美化，达标要求三项——标题有醒目的颜色与字号；正文段落行距舒适、颜色不超过两种；至少一条样式通过内部样式表统一样式而非逐段设置。提升要求两项——给超链接设置访问前后的不同颜色（a:link与a:visited，速查表提供语法）；尝试用backgroundcolor为页面或局部区域设置背景色。学生独立操作期间，教师巡堂并记录共性问题。预计出现的典型困难有三：一是忘记英文状态下的标点导致整条规则失效，二是选择器拼写错误，三是修改后忘记保存便刷新页面。教师在巡堂中以提问代替代劳："你的样式写在哪了？浏览器读的时候按什么顺序读？"引导学生自己定位问题。结束前五分钟，教师选取三份风格各异的学生作品投屏展示，组织简短的互评。互评不评"好不好看"，而是回答两个技术问题的提问模板："这位同学用行内样式还是内部样式表实现了统一标题？这条规则的选择器指向谁？"评价直指本课知识目标，避免审美层面的空泛夸奖。教师最后补一句价值引导："注意有位同学把字号调到了20像素以上，行距也留足了——如果读者是视力不太好的长辈，这样的页面就是友善的。技术之外，心里要装着读者。"环节六：课堂小结与作业布置（约3分钟）师生共同回顾本课知识链条：一条完整的CSS规则由选择器加声明块构成；声明的书写格式是属性加冒号加属性值，多条声明以分号相隔；样式可以写在标签里、页面头部或独立文件中，作用范围由小到大，优先级遵循就近原则。教师点题："CSS的本质，是把表现从结构中抽离出来集中管理。今天你们写的每一条规则，都是在练习一种工程师的思维方式——分类、抽取、统一管理。"课后作业分两层。必做层：查看任意两个常访问网站的源代码，找出其内部样式表或外部样式表链接，截图并标注一条你能读懂的规则。拓展层：预习外部样式表，尝试把今天的内部样式表剪切到一个独立的style.css文件中，用link标签引入页面，观察效果是否一致，下节课分享遇到的问题。【板书设计】主板书以课题5.2.2CSS样式表（一）居中开题。左侧纵向呈现一条规则的解剖结构：选择器→花括号→属性:属性值。中部呈现三种引入方式及其作用范围的阶梯示意，自下而上为行内（一个标签）、内部（一个页面）、外部（整个网站）。右侧书写两个关键词：分离、就近原则。副板书区域实时记录巡堂中发现的典型错误代码与修正结果，下