第8课 网页的数据呈现 教学设计 浙教版初中信息技术八年级上册

第8课《网页的数据呈现》教学设计【课标内容要求】了解常用互联网应用中数据的构成，能够使用适当的数字化工具对网页进行编辑和发布初步了解互联网协议，知道网络中数据的编码、传输和呈现的原理【教学内容分析】本课属于“互联网应用与创新”模块，是2023浙江省版八上第二单元第八课的教学内容本课通过学习使用CSS（层叠样式表）来设置网页样式和布局，包涵认识CSS及其作用、掌握CSS的语法结构、理解CSS的优点等内容本课是在学习了前一课《网页的数据组织》基础上，进一步学习样式美化设置，了解网页数据呈现样式的原理，为下一课更好地呈现网页交互做好准备，起到承上启下的作用【教学目标】

1.通过体验CSS设置的效果，认识CSS,了解CSS的作用

2.通过在网页中添加样式的探究，掌握CSS的语法结构

3.通过链接CSS文件设置样式的体验，理解分离式CSS的便捷性重点通过CSS修改和添加样式，认识CSS,掌握CSS的语法结构（理由CSS是一种常用的网页样式设计方式，学生初识CSS,若仅从样式表这个抽象的概念去解说，是不能对css有较清晰的认知，可以通过学习探究样式的修改、添加等任务，切身体验感知，结合教师解说，认识css及其作用是一种用于描述网页样式和布局的语言，并掌握CSS的使用即语法规则）难点理解分离式CSS的优点（理由为什么要使用css设置样式，它能带来哪些效益，需要在一系列的学习活动中，去体验了解分离式CSS的形式，感知它的便捷性，从而理解分离式CSS的优点）【核心素养指向】

1.能够借助学习资源，自主动手解决问题，掌握核心技术（信息意识）

2.用计算机科学领域的思想方法，在形成问题解决方案的过程中产生一系列思维活动（计算思维）使用数字化学习工具，开展探究性学习，创造性地解决问题（数字化学习与创新）【学情分析】学生在学习了上一课《网页的数据组织》，认识了HTML（超文本标记语言），掌握了HTML文档的基本结构，会使用HTML的常用标签初步编辑网页的内容和简单样式，但页面效果较简陋，且HTML主要是用于描述网页的结构和内容为此引入新知CSS样式设置，让学生学习便捷的样式设计方法，通过任务活动，施展设计技能，提高制作网页的兴趣，为今后创作有价值的网页作品创造条件【设计构想】

1.整体设想以无样式页面效果呈现的问题，引出样式设置需求先以学生已知的HTML标签中属性设样式的方式来呈现代码范例，察觉这种方式的缺点，再引出优化的方式CSS设置样式，从而展开新知学习使用CSS设置样式通过两个活动任务，实现给半成品网页修改和添加样式，从中认识CSS,掌握CSS的语法结构，以此落实本课的教学重点通过体验应用外部.css文件设置样式，从中感受分离式CSS的便捷性，从而理解分离式CSS的优点，以此实现本课的教学难点

2.教法学法采用对比分析、任务探究、实践体验、演示讲解、归纳总结等教学方法

3.情境与任务展示无样式页面效果，呈现问题内容样式不协调统

一、缺乏整体性引出解决问题需求，从而提出课题《网页的数据呈现》以学生已有的学习认知通过HTML标签中属性设样式来展开，引导思考其中的问题缺点，提出优化的方式一一使用CSS设置样式任务一协调内容一一修改大标题颜色、修改图片大小、设置三个小标题样式任务二美化页面一一给三个小标题单元格及网页添加合适的背景任务三体验Qink＞方式连接外部.css文件，进行样式效果的应用

4.学生活动活动1对比两种样式设置方式的区别，理解CSS设置样式方式相较于HTML标签属性设置样式方式的优势活动2借助导学稿中“CSS属性说明”表，自主学习探究样式的修改和添加，实践体验，示范解说活动3探讨多页面应用同一种样式，该如何实现？体验链接外部.css文件应用样式，修改css文件查看网页效果，感受分离式CSS的便捷性

4.核心素养的落实本课通过问题设置，引发学生思考，进而促使学生观察、分析、构思等一系列思维活动，并带领学生探究、验证、优化问题的解决，即培养计算思维素养借助学习资源,使用代码编辑器开展学习实践，尝试解决问题并加以美化，即培养数字化学习与创新素养利用各种学习平台延伸后续学习，实现多样化的样式设计，即培养信息意识素养

5.评价设计过程性评价课堂中设置问题，学生通过观察、分析、理解等活动，进行反馈和交流，评价学生学习认知在任务活动过程中，对学生学习探究中遇到的知识、技能和解决方法等问题加以帮助和评价，然后个别学生上台广播示范并作相应解说，引导台下学生思考和评价终结性评价对学生最终作品进行点评，采用师生共评，让评价多样化，全面且客观学生自评、互评时，需理性评价自己和他人的学习成果，依据下表开展实施评价标准自评互评标题样式是否协调☆☆☆☆☆☆图片样式是否统一☆☆☆☆☆☆页面色彩是否和谐☆☆☆☆☆☆【教学环境及资源准备】安装Notepad软件、课件、范例网页学生用导学稿、index.html半成品文件、css文件夹、“颜色代码”网站【教学活动设计】

一、复习回顾上节课学习认识了HTML文档的基本结构，并学习使用HTML标签给网页设置标题，给网页添加各种类型的元素文本、图像、超链接等老师这里有一个介绍“人工智能应用”的网页设计，我们先来查看下它的HTML代码（ppt呈现indexO.html的代码），请同学们思考并解析下在这个网页中设置了哪些内容？生思考、分析内容结构网页标题；网页正文中有图、大字号标题、表格、水平线、制作者信息等（预设回答）师补充解说，如表1中三列编辑了三个标题，表2中三列编辑了三张图【设计意图】《网页的数据呈现》与前一课《网页的数据组织》是递进关系，是在学习了HTML对网页数据元素组织的基础上，进一步学习样式美化设置，为了能有效地开展新知学习，则需对前面知识进行复习回顾，以便学生扎实所学、有序前进

二、问题导入（引出学习需求）我们通过浏览器来呈现这个代码文档（indexO.html无样式设置）的页面效果，出现了什么问题？生内容样式不协调统

一、缺乏整体性针对这样的呈现问题，如何解决？生思考、提出样式方案如文字的字体字号颜色、位置；图片和表格的大小、位置布局；网页背景等（预设回答）是的，网页设计不仅是对数据内容的组织，还需要对数据内容的呈现效果进行样式设置一一课题《网页的数据呈现》【设计意图】以问题为导向，试图让学生分析问题、构思样式、提出方案，从中灌输思维能力的培养从学生中提炼学习需求（样式方案），指明样式设置的大体方向，为落实后面的学习任务做好铺垫

三、对比设置方式，提出CSS优势（提出学习内容）那么如何对网页的数据内容进行样式设置呢？这里介绍两种设置方式方式一通过HTML标签中属性设置样式在HTML常用标签表中我们会发现直接在HTML标签中定义属性可以来实现样式设置我们来看下这个网页文件范例indexl.html的代码，里面的数据内容是通过HTML标签中属性来设置样式的师简要解说例如头图的大小设置＜img src=〃images/banner.jpg〃width=1152〃height=428”＞；主标题的居中设置＜hl a廿

8.飞6961＞走进人工智能〈/111〉等标签属性的语法结构〈标签属性1=属性值1属性2=属性值2”……＞（单标签）〈标签属性1=属性值1属性2=属性值2”……X/标签》（双标签）这种方式是给每个元素的标签中声明一个或多个属性来设置样式，比较直观，便于单个修改，但有什么缺点吗？生思考（提示indexl.html代码中同类别的元素样式设置，如三个标题，三张图片）缺点同类别的元素样式设置会出现代码重复性，造成代码冗余，当网页数据较多时，一定程度上会影响浏览器的解析（呈现）速度方式二使用css设置样式我们再来看下这个网页文件范例index

2.html的代码，与indexl.html的网页效果一样，但index

2.html的＜body＞中只组织了内容结构，而在〈head》标签中多了〈style〉标签，这个〈style》标签区块内是一个CSS规则代码，用来定义HTML文档中元素的样式这种方式对同类别的元素样式只要设置一次就行，避免了代码的重复性【设计意图】通过两个代码范例呈现，让学生直观感受两种样式设置方式的区别，能够理解HTML标签属性设置样式的缺点，提出优化的设置方式，从而引出对CSS的学习

四、自主探究实践，认识并掌握CSS（重点）什么是CSS呢？CSS全称为层叠样式表（Cascading StyleSheets），它是一种用来描述网页样式和布局的语言，如网页中文字的字体、字号、颜色、位置以及图片的大小等接下来我们通过任务活动来认识并学习使用CSS,在同学们的桌面上有一个“index.html”半成品网页，打开看看哪些内容的样式需要调整？怎么调整？生大标题的颜色；三个小标题的位置、字体、字号、颜色；三张图片的大小；背景色等师加以引导根据调整方案，我们来使用CSS实现这些元素的样式设置通过Notepad++代码编辑器打开index,html文件，在＜head＞标签内已通过〈style》标签定义了类型是CSS规则的代码，结合导学稿中“CSS属性说明”表，实现任务一任务一协调内容一一修改大标题的颜色、修改图片的大小、设置三个小标题的样式生使用Notepad++进行编辑，借助导学稿中的“CSS属性说明”表，实现大标题、图片样式的修改对于三个标题样式的设置，可观察其他元素的设置方法来学习探究师巡视辅助生上台示范CSS设置样式也有相应的语法结构，同学们有发现它的语法结构吗？师指出并解说样式表的基本结构CSS语法结构选择符｛样式属性1:属性值1;样式属性2:属性值2;样式属性f ff•・1■♦（）hl]!color:red:font-slM14p*;4005设置在＜headX/head＞标签内，并用〈style type=text/css”＞语句进行定义说明选择符可以是标签选择器，如hl、p等；可以是类别选择器，如代码中设置的banner、tabi、tab2类别,选择符为.banner、.tabi、.tab2（为了区分对网页中不同图像、不同表格的样式设置，使用〈divX/div＞标签来划分区域，并定义类别）声明属性名属性值，多个声明用“；“隔开注意CSS样式属性名与HTML样式属性名不同给表1中三个标题设置样式，如.tabltd{text-align:center;font-family:黑体；font-size:18px;color:#800080;font-weight:bold;}实现了内容样式的协调统一，我们可以再来给页面添加点色彩，请同学们结合导学稿中CSS属性的说明，继续实现任务二任务二美化页面一一给三个标题单元格及网页添加合适的背景生继续学习背景样式的设置（可设置背景色，也可设置背景图颜色可借助“颜色代码”网站来设置属性值）【评价】展示学生作品，师生点评页面效果通过两个任务活动，我们学习认识了样式表，体会了它的作用，也知道了样式表的语法结构【设计意图】以半成品的形式来补充代码，适于初学者，便于仿照学习通过两个任务活动，展开探究学习，实现样式的修改和添加，从中认识样式表，掌握其语法结构,以此落实本课的学习重点，同时体会样式表带来的作用效果

五、深入学习体验，理解CSS便捷（难点）通过前面的学习，我们已经明白了css是专门用来设置样式的，使用它可以将内容结构和样式设置分离，那么如果有多个页面需要应用同一种样式，该如何呢？生复制粘贴样式（预设回答）复制粘贴也是一种办法，但当代码量多，页面多的情况下，有没有更高效便捷的方法呢？我们来看这个网页文件范例index22的代码，里面没有对元素有样式设置的代码，却有页面样式效果，这是为什么？请同学们仔细观察下其中的代码生观察代码，察觉Gink＞标签行是的，在＜head＞标签中出现了一个Gink＞标签，页面的样式就是通过＜link＞标签这个语句来实现的，＜link rel=stylesheet href=css/ysl.css”＞含义是链接一个样式表脚本的css文件，此文件是css文件夹中的ysl.css文件（Notepad++中打开文件夹窗口，呈现ccs文件夹）我们查看下ysl.css文件，里面的代码就是CSS样式表现在它以文件的形式存放，页面可以通过Gink＞标签来链接，实现样式效果这样多个页面应用同一个CSS,只要通过一句Gink＞标签语句行就可以实现，且只要修改这个CSS文件，就可以更新所有页面的样式接下来请同学们进行体验，在同学们的桌面上有一个css文件夹，里面放了多个文字动画样式的css文件，同学们可以通过Notepad++文件夹窗口来查看，并在自己的index,html文件中通过＜link＞方式进行链接，实现样式效果的应用任务三体验＜link＞方式链接外部.css文件，进行样式效果的应用提示可以尝试修改.css文件中的选择符或某个属性值，保存后刷新页面查看效果生实践体验师巡视辅助生展示代码及效果，说说所做的修改【小结】通过任务体验，让我们进一步对CSS有了深入的认知，CSS可以是半分离式的设在HTML文档的＜head＞〈/head＞标签中，称为内部样式表，也可以是完全分离式的设在一个CSS文件中，在HTML文档的＜headX/head＞标签中通过＜link＞标签引用，称为外部样式表通过学习体验，你觉得使用CSS这种分离式的（内部样式表和外部样式表）样式设置有什么好处？生思考CSS的优点师加以引导分离式的CSS的优点相对标签属性设样式，避免代码重复性，提高网页加载速度；结构清晰，易于程序员阅读解析，易于维护和更新样式与内容分离，便于分工协作，提高开发效率【设计意图】以问题激发学生思考，带领学生一步步探索认知CSS的其他形式，通过任务体验，切身感受应用CSS文件设置样式的便捷性，从而理解分离式CSS的优点

六、课堂总结

①认识了CSS（层叠样式表），它是一种样式表语言，用于描述网页的样式和布局网页的三种核心技术HTML+CSS+JSHTML超文本标记语言，主要负责网页的架构（结构和内容）CSS样式表语言，主要负责网页的外观（样式和布局）JS（JavaScript）动态脚本语言主要负责网页的行为（交互和动态）

②CSS语法结构选择符｛样式属性1属性值1;样式属性2属性值2；样式属性……｝选择符用来选择要定义样式的对象

③CSS的类型内部样式表、外部样式表、内联样式表类型引入方式位置应用范围styletype=,text/css内部样置于head〈/head标”选择符｛样式属性1属性应用于当前页面式表值1；样式属性2属性值2；签中样式属性｝〈/style》外部样〈linkrel=stylesheet置于〈headX/head〉标应用于多个页面式表href=css文件的路径”签中〈标签style二”样式属内联样置于〈bodyX/body标性1属性值1;样式属性2应用于单个元素式表签中属性值2；样式属性……”X/标签〉优先级内联样式〉内部样式〉外部样式

④分离式的css优点提高网页加载速度易于维护和更新提高开发效率利用CSS可以实现多样的页面样式效果（ppt展示网页设计效果图），我们可以在课余时间借助学习平台来学习CSS多样化的样式设置附学习网站CSS教程_w3cschoolCSS教程（w3school.com.cn）【设计意图】围绕本课的学习重点和难点来总结知识内容，简明扼要地提炼知识框架，同时补充知识链接，完善知识体系，助于学生对知识能有清晰地认知和理解提供学习平台，便于今后的延伸学习板书设计网页的数据呈现CSS层叠样式表，是一种用于描述网页样式和布局的语言CSS的语法结构选择符{样式属性1属性值1；样式属性2属性值2；样式属性……}分离式CSS的类型内部样式表、外部样式表分离式CSS的优点提高网页加载速度。