高中信息技术选修3教案-5.2.2 CSS样式表的设计与运用

高中信息技术选修3教案——5.2.2CSS样式表的设计与运用一、教学背景分析本课选自教育科学出版社高中信息技术选修3《网络技术应用》第五章第二节第二课时。在前面的学习中，学生已经掌握了网页的基本结构、HTML常用标签以及使用表格进行页面布局的基本方法，能够制作出内容完整但样式单调的网页。本课时承接“用HTML表达信息”的学习成果，引出层叠样式表（CSS）这一实现网页内容与表现分离的核心技术，是学生从“会做网页”走向“做好网页”的关键一步，也为后续学习动态网页与网站集成开发奠定审美与技术双重基础。授课对象为高二年级学生。他们具备一定的网络应用经验，日常浏览大量商业网站，对“好看的网页”有直观感受，但缺乏对页面美化实现原理的理性认识。部分学生逻辑思维较强，对代码学习有热情；另一部分学生对纯代码存在畏难情绪。教学中需要借助可视化对比降低门槛，通过任务驱动让不同层次的学生都能获得成就感。二、教学目标（一）知识与技能1.理解CSS样式表的概念，能说出内容与表现分离的思想及其优势。2.掌握CSS的三种引入方式：行内样式、内部样式表、外部样式表，并能比较三者的适用场景。3.掌握CSS基本语法结构，即“选择器{属性:属性值;}”，能熟练使用标记选择器、类选择器和ID选择器。4.能运用常用属性（字体、颜色、背景、边框、边距）对网页进行初步美化。（二）过程与方法经历“观察对比—猜想原理—动手验证—迁移创作”的探究过程，学会通过修改样式代码观察页面变化来归纳语法规律，形成用代码控制页面表现的基本思维。（三）情感态度与价值观体会技术与艺术结合的魅力，形成规范的代码书写习惯和良好的审美观，理解“一次设计、全站生效”所体现的工程效率思想。三、教学重点与难点教学重点：CSS的基本语法结构，三种引入方式，类选择器与ID选择器的使用。教学难点：内容与表现分离思想的理解；三种引入方式优先级的判断及层叠特性的初步体会。四、教学方法与策略采用任务驱动法、对比教学法和探究学习法。以“同一份HTML文档脱胎换骨”为主线，让学生直观看到CSS的力量；通过三个层层递进的任务（给一句话化妆、给整页换装、给全站统一着装）组织课堂；借助极域电子教室进行广播演示和作品展示，使用记事本或HBuilder作为编辑环境，IE或Edge浏览器预览效果。课前准备：教师准备“素颜版”班级主页HTML文件、配套已完成CSS范例、微课视频（语法速览）、学生任务单与评价量表。五、教学过程（一）情境导入：同一个人，两种气质（约6分钟）教师通过广播依次打开两个网页：第一个是纯HTML制作的班级主页，黑色宋体、默认链接蓝色、版面呆板；第二个是结构完全相同的页面，但经过CSS美化——标题有层次感、配色协调、鼠标划过导航有变色效果。教师提问：“这是两个网站吗？”学生观察后发现问题：文字内容一模一样。教师揭示谜底：“两个页面的HTML文件是同一个，我只动了另一个文件里的几十行代码。让网页从‘素面朝天’到‘精致妆容’的幕后功臣，就是今天要学习的主角——CSS层叠样式表。”板书课题：5.2.2CSS样式表。设计意图：用最直接的视觉冲击制造认知冲突，激发学习动机，同时埋下“内容与表现分离”的伏笔。（二）新知建构一：认识CSS的语法骨架（约10分钟）教师打开记事本，现场书写第一条样式规则并实时预览：p{color:red;fontsize:20px;}结合这行代码讲解CSS语法结构：p是选择器，负责找到要修饰的对象；花括号内是声明块；每条声明由属性和属性值组成，中间用英文冒号连接，末尾用英文分号结束。教师强调三个易错点并现场演示出错效果：第一，冒号和分号必须是英文半角，中文标点会让整条规则失效；第二，花括号必须成对出现；第三，属性和值之间不能写成等号。学生观察“一字之差，满盘失效”的现象，体会代码的严谨性。随后教师提出问题链：“刚才这行代码让所有段落都变红了，如果只想让某一段变红怎么办？如果想让不同页面里的多个元素共用同一种风格怎么办？”引出三种选择器的需求背景，为下一环节蓄势。（三）任务一：给一句话“化个妆”——初探三种引入方式（约12分钟）学生完成任务单一：打开教师下发的“素颜版”页面，依次尝试三种方式将标题文字设为蓝色、24号楷体。方式一，行内样式：直接在标签内书写，形如<h1style="color:blue;">我们的班级主页</h1>方式二，内部样式表：在head区域用style标签集中书写：<styletype="text/css">h1{color:blue;fontsize:24px;fontfamily:楷体;}</style>方式三，外部样式表：新建mystyle.css文件写入样式规则，在HTML的head区域通过link标签引入：<linkrel="stylesheet"type="text/css"href="mystyle.css"/>学生每完成一种方式即保存、刷新、观察效果。教师巡视，重点辅导因标点错误导致样式不生效的学生，引导他们自查“排错三步”：查标点、查括号、查路径。三种方式都成功后，组织小组讨论：“三种写法效果看起来一样，为什么还要学三种？如果一个网站有五十个页面都要统一标题风格，你会选哪种？”讨论后师生共同归纳：行内样式控制范围最小、优先级最高、维护最麻烦；内部样式表作用于当前页面；外部样式表实现多页面共享，改一处而全站更新，真正体现了内容与表现的分离。教师顺势点出CSS中“层叠”的初步含义：多种来源的样式按优先级叠加生效，就近原则——离元素越近的样式越优先。设计意图：用同一效果的三种实现制造比较契机，让学生在“做得出”的基础上思考“为何这样做”，从技术操作上升到工程思想。（四）任务二：给整页“换装”——类选择器与ID选择器（约12分钟）教师提出新问题：“页面中有三个栏目，我想让‘班级新闻’和‘通知公告’的标题都变成橙色加粗，但‘佳作欣赏’的标题要变成绿色居中，标记选择器做不到，怎么办？”学生带着疑问观看微课片段或教材，自主探究类选择器与ID选择器的写法。教师板书对比：类选择器：先定义.highlight{color:orange;fontweight:bold;}，再在标签中引用<h2class="highlight">。类名以英文句点开头，可以被多个元素反复使用。ID选择器：定义header{color:green;textalign:center;}，引用<h2id="header">。ID名以井号开头，在一个页面中应具有唯一性，如同每个人的身份证号。学生完成任务单二：为页面三个栏目标题分别应用两个类样式和一个ID样式，并为正文段落设置行高lineheight:1.8em;，观察阅读体验的变化；尝试给整个页面设置背景色body{backgroundcolor:F5F5DC;}。教师用形象的比喻帮助学生记忆：“类像校服，一个班很多人都穿；ID像学号，一人一个，绝不重复。”随后故意制造冲突：给同一个元素同时用类样式设置为红色、ID样式设置为绿色，让学生观察最终颜色（绿色胜出），小结优先级规律：行内样式优先于ID选择器，ID选择器优先于类选择器，类选择器优先于标记选择器。（五）任务三：学以致用——“我的网页我造型”创作实践（约12分钟）学生进入分层创作环节，教师提供三个梯度的任务供选择：基础任务：完善课堂范例页面，统一配色风格，熟练运用三种选择器。提高任务：为“班级之星”栏目设计卡片式效果，综合运用边框border:1pxsolidCCC;、内边距padding:10px;、外边距margin:15px;，体会盒模型的初步概念。挑战任务：建立一个外部样式表，让教师提供的两个不同页面文件同时引用它，实现“一次定义、双页生效”。教师巡视指导，对共性错误进行集中点评，鼓励学生欣赏邻座作品并借鉴配色方案。对提前完成的学生，布置拓展思考：“浏览器的开发者工具（按F12）可以看到任何一个网站的CSS，课后打开你喜欢的网站看一看，下节课分享你的发现。”（六）展示评价与课堂小结（约8分钟）选取三份有代表性的学生作品广播展示：一份配色协调的优秀作品、一份出现语法错误未生效的作品、一份巧妙运用外部样式表的作品。作者自评思路，同伴按照评价量表从“代码规范、运行效果、创意美感”三个维度打分，教师点评时既指出亮点也规范术语表达。课堂小结采用师生接龙方式完成知识梳理：今天我们认识了CSS这位“网页化妆师”。一句话记住它的语法——“谁{怎么样:到什么程度;}”；记住三种引入方式按作用范围从大到小排列是外部、内部、行内，而优先级恰好相反；记住类选择器用句点、可以复用，ID选择器用井号、独一无二；更要记住一个思想——内容与表现分离，让HTML专注结构，让CSS专注美化。最后教师升华：“一个优秀的网页作品，技术是骨骼，审美是血肉。希望大家今后上网时多一双‘设计师的眼睛’，下节课我们将学习用DIV加CSS进行页面布局，让大家的网页不仅有颜值，更有好的骨架。”六、板书设计主板书：5.2.2CSS样式表一、作用：内容与表现分离，网页的“化妆师”二、语法：选择器{属性:属性值;}三、引入方式：行内→内部→外部（作用范围递增，优先级递减）四、选择器：标记选择器类（.可复用）ID（唯一）副板书：学生练习中出现的典型错误及修正过程。七、作业布置必做题：完成个人页面美化，要求至少使用两种选择器和五种以上属性，中正文标点的规范性要求写进自评表。选做题：用F12开发者工具浏览一个喜欢的网站，截图记录其一条CSS规则并尝试解读含义，下节课交流。八、教学评价设计本课采用过程性评价与作品评价相结合。过程性评价关注学生在三个任务中的操作规范性、排错能力和小组协作表现，由教师随堂记录在观察表中；作品评价使用三维量表：代码规范（标点、缩进、注释习惯）占百分之四十，运行效果（样式正确呈现、无冲突失效）占百分之三十，创意美感（配色协调、版式合理、有个性表达）占百分之三十。评价主体包括学生自评、同伴互评与教师点评，评价结果以等级加评语的方式反馈，强调进步幅度而非横向排名。九、教学反思预设CSS是语法规则密集的内容，若按传统讲授逐条罗列属性名称，课堂