高中信息技术选修3《用CSS样式表美化网页》教学设计_第1页
高中信息技术选修3《用CSS样式表美化网页》教学设计_第2页
高中信息技术选修3《用CSS样式表美化网页》教学设计_第3页
高中信息技术选修3《用CSS样式表美化网页》教学设计_第4页
高中信息技术选修3《用CSS样式表美化网页》教学设计_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

高中信息技术选修3《用CSS样式表美化网页》教学设计一、教材与学情分析本节课选自教育科学出版社高中信息技术选修3《网络技术应用》第五章第二节“层叠样式表（CSS）”的第二课时。前一节学生已经掌握HTML基本标签，能够搭建有结构但外观朴素的网页；本节要解决的问题是“内容与表现分离”，让学生理解为什么需要CSS、CSS的三种引入方式、常用选择器以及盒模型的基本概念，最终能独立完成一个简单网页的样式美化。高二学生已经具备HTML基础，动手意愿强，审美需求强烈——他们希望自己的网页“好看”，但往往把大量表现代码写进标签内，导致代码臃肿。这正是引入CSS的天然动机。学生的难点在于：选择器的优先级规则较为抽象，盒模型中margin、border、padding三层关系容易混淆。教学中需借助可视化调试工具（浏览器开发者工具）把抽象规则变成看得见、改得动的现象。二、教学目标1.理解将内容与表现分离的设计思想，能说出CSS相对于HTML内联样式的三点优势。2.掌握行内样式、内部样式表、外部样式表三种引入方式，能根据场景选择合适的引入方式。3.熟练使用标签选择器、类选择器、ID选择器及后代选择器编写样式规则，能分析选择器优先级冲突。4.理解盒模型结构，能用浏览器的审查元素功能观察并调整margin、border、padding。5.通过小组协作完成“班级风采主页”的美化任务，形成规范的代码书写习惯与审美判断力。三、教学重点与难点教学重点：CSS基本语法结构（选择器+声明块）、三种引入方式、盒模型。教学难点：选择器优先级与层叠规则；盒模型中各属性对元素实际占地尺寸的影响。四、教学准备机房环境：每人一机，预装任意主流浏览器（开发者工具可用）、代码编辑器（VSCode或记事本+均可）、局域网教学平台。素材准备：一个仅有HTML结构、无任何样式的“班级风采主页”半成品文件unstyled.html；教师机演示用的对照版本styled.html；任务导学案（纸质+电子版）；盒模型分层纸质卡片教具一套。五、教学过程（一）情境导入：两个主页的对比（约5分钟）上课伊始，教师在大屏上并排展示两个网页：左边是纯HTML的班级主页，白底黑字、图片大小参差；右边是应用CSS后的版本，有统一的配色、居中的布局、悬停有动画效果的导航。两页的HTML结构完全一致。教师提问：“右边这个页面，是不是重写了一遍HTML？”请两名学生猜。多数学生会认为重写了。教师此时打开两个页面的源代码，拖动滚动条让学生看到：<body>内的标签几乎一模一样，区别只在<head>里多了一行<link>语句和一个.css文件。学生产生认知冲突：内容没变，只换一个“外观文件”，页面就焕然一新。教师顺势给出本课核心思想——“结构归HTML，外观归CSS”，并板书课题。设计意图：用最小改动产生最大视觉反差，让学生先“想要”，再“想懂”，学习动机由外部任务驱动转为内部审美驱动。（二）初识CSS语法：一条规则拆解（约6分钟）教师现场在代码编辑器中写下一行代码：h1{color:336699;fontsize:28px;}边写边讲：h1叫选择器，回答“修饰谁”；花括号内是声明块，每条声明由“属性:属性值”构成，以分号结尾，回答“怎么修饰”。强调三个书写细节：冒号后不空格与可读性无关但要统一风格；分号不能丢，丢了浏览器会静默忽略后面整条规则；颜色可用英文单词、十六进制或rgb()三种写法。学生任务：打开教学平台上的unstyled.html，在<head>中插入<style>标签，把上述一条规则敲进去，保存刷新，观察标题变化。要求人人手过一遍，禁止复制粘贴——手敲第一遍，肌肉记忆才能建立。教师在巡视中故意停留于几位漏了分号的学生身旁，不直接指出，而是让他们用“删一半代码看是否恢复”的方法自行定位。错误是最好的教具。（三）三种引入方式：一条规则的三个家（约8分钟）教师用类比讲解：同一条样式规则，可以住在三个地方——一是行内样式，写在标签的style属性里，如<pstyle="color:red">。它“贴身但束缚”，只对这一个元素生效，维护时代价最高。二是内部样式表，写在<head>中的<style>标签里，作用于当前页面。适合单页面、小型作品。三是外部样式表，独立保存为.css文件，用<linkrel="stylesheet"href="style.css">引入。一个样式文件可以被几十个页面共享，改一处，全站更新——这才是CSS真正的威力所在。小组实验：四人一组，把刚才写的<h1>样式分别用三种方式实现一遍，填入导学案中的比较表格（作用范围、优先级、维护成本、适用场景）。教师提示：用注释符号//把不用的方式暂时“关掉”，而不是删掉——这也是工程习惯。小结时教师只问一个问题：“如果学校一百个页面都要换主题色，用哪种方式最省事？”学生异口同声答出“外部样式表”，引入方式的选择逻辑即告内化。（四）选择器家族：精准定位的艺术（约10分钟）教师抛出任务情境：主页里有三段文字，要第一段变蓝、第二段加底纹、第三段不动。用标签选择器做不到，因为三段都是<p>。怎么办？由此引出类选择器：给元素加class="intro"，CSS中写.intro{color:blue;}。“点号加类名”，谁贴这个标签就修饰谁，一个类可以给无数个元素用。再提问：页面的版权信息全站唯一，想单独定样式，用类还是更专门的东西？引出ID选择器：id="copyright"，CSS中写copyright。强调：一个页面中同一ID只能出现一次，这是规范，浏览器不报错但会破坏可访问性和脚本的稳定性。最后给出后代选择器：.newsp{}，只修饰class为news容器内部的段落，空格表示“子孙后代”。优先级探究是本环节高潮。教师让学生预测：<pid="a"class="b">，同时存在a{...}、.b{...}、p{...}三条规则且属性冲突，最终谁赢？学生分组试做，用实际显示效果验证。结论自己得出：ID>类>标签，行内样式最大；同级别时后写的覆盖先写的——这就是“层叠”二字的含义。教师补充说明：本文不引入!important，初学阶段用它等同于放弃理解规则。设计意图：选择器优先级不讲公式、不背口诀，先预测后验证再归纳，让规则从实验中“长”出来。（五）盒模型：每个标签都是一只盒子（约10分钟）这是本节难点。教师举起课前准备的纸卡教具：最内层一张小纸片是content（内容），外面包一圈软垫是padding（内边距），再外层硬壳是border（边框），壳外与其他盒子的间隔是margin（外边距）。请一名学生上台手持四张卡片，其余同学喊“增大padding”，该生就把软垫撑大，直观感受盒子整体被“撑开”。随后在电脑上验证：打开浏览器开发者工具，按F12，点击审查元素（放大镜图标），悬停在页面任意元素上，右侧出现橙、黄、绿、蓝四层的盒模型示意图，数字随鼠标改动实时变化。学生任务：给主页的导航栏设置padding:10px20px（上下10、左右20）、border:1pxsolidccc、margin:0auto并配合width实现水平居中。教师追问：“margin:0auto为什么能让盒子居中？auto让浏览器怎么分配剩余空间？”引导学生说出“左右均分”。易错点强调：元素实际占宽=content宽+左右padding+左右border+左右margin。让学生在方格纸上算一算一个width为200px、padding各10px、border各2px的盒子总宽多少（224px），再用开发者工具核对。算一次，胜过看十次。（六）综合实践：让班级主页“活”起来（约12分钟）任务书下发：以小组为单位，为班级风采主页编写一个外部样式表style.css，完成下列要求。必做项：统一全站字体为“微软雅黑”，主色调不超过三种颜色；导航栏设为通栏底色，链接悬停时变色；正文行高设为1.6倍提升可读性；图片统一圆角并限制最大宽度不超过容器。选做项（分层）：用后代选择器为“新闻列表”单独设计样式；用:hover伪类给按钮做微交互；尝试用boxshadow给卡片加阴影。评价量规提前公示：结构与样式分离是否彻底（30%）、选择器使用是否恰当（25%）、视觉效果与配色（25%）、代码规范——缩进、注释、命名（20%）。教师巡视角色是“技术顾问”而非“答题机”：学生问“为什么没生效”时，教师反问“你用F12看了吗？那条规则显示被划掉了吗？被哪条覆盖了？”把调试方法论留在学生手里。（七）展示评价与课堂小结（约4分钟）随机抽取两组通过投屏展示作品，各用一分钟说明“我们最得意的一条样式”。其余学生按量规打分并写一句具体建议，禁止“很好”“很漂亮”这类空泛评价。教师作结，板书三行：内容与表现分离——为什么用CSS；选择器+声明块——怎么写CSS；层叠与盒模型——CSS怎样思考。并预告下一课：用div与盒模型完成多栏布局，“今天你们给网页化了妆，下次我们给它搭骨架”。六、板书设计左板：课题与三条主线（分离思想／语法结构／层叠与盒模型）。中板：一条样式规则的彩色拆解图（选择器、属性、属性值三色标注）。右板：盒模型四层同心方框图，标注margin－border－padding－content。七、作业布置基础作业：完善课堂上的style.css，为页面增加脚注样式与表格斑马纹（提示：tr:nthchild(odd)），下节课课前提交至平台。拓展作业：任选自己常用的一个网站，用F12找到其导航条的CSS，截图并仿写其中三条规则，注明每条规则的作用。让学生知道：今天学的每一行代码，都真实地运行在商业网站上。八、教学反思（预设）本设计的核心策略是“先见森林再见树木”：先让学生

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论