第8课 网页的数据呈现 教学设计-2023新浙教版八年级上册《信息技术》.docx

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

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

3、动中，去体验了解分离式CSS的形式，感知它的便捷性，从而理解分离式CSS的优点。）【核心素养指向】1.能够借助学习资源，自主动手解决问题，掌握核心技术。（信息意识）2.用计算机科学领域的思想方法，在形成问题解决方案的过程中产生一系列思维活动。（计算思维）使用数字化学习工具，开展探究性学习，创造性地解决问题。（数字化学习与创新）【学情分析】学生在学习了上一课网页的数据组织，认识了HTML（超文本标记语言）,掌握了HTML文档的基本结构，会使用HTML的常用标签初步编辑网页的内容和简单样式，但页面效果较简陋，且HTML主要是用于描述网页的结构和内容。为此引入新知：CSS样式设置，让学生学习便捷的样

4、式设计方法，通过任务活动，施展设计技能，提高制作网页的兴趣，为今后创作有价值的网页作品创造条件。【设计构想】1.整体设想以无样式页面效果呈现的问题，引出样式设置需求。先以学生已知的HTML标签中属性设样式的方式来呈现代码范例，察觉这种方式的缺点，再引出优化的方式：CSS设置样式，从而展开新知学习：使用CSS设置样式。通过两个活动任务，实现给半成品网页修改和添加样式，从中认识CSS，掌握CSS的语法结构，以此落实本课的教学重点。通过体验应用外部.css文件设置样式，从中感受分离式CSS的便捷性，从而理解分离式CSS的优点，以此实现本课的教学难点。2.教法学法采用对比分析、任务探究、实践体验、演示

5、讲解、归纳总结等教学方法。3.情境与任务展示无样式页面效果，呈现问题：内容样式不协调统一、缺乏整体性。引出解决问题需求，从而提出课题：网页的数据呈现。以学生已有的学习认知：通过HTML标签中属性设样式来展开，引导思考其中的问题缺点，提出优化的方式使用CSS设置样式。任务一：协调内容修改大标题颜色、修改图片大小、设置三个小标题样式。任务二：美化页面给三个小标题单元格及网页添加合适的背景。任务三：体验方式连接外部.css文件，进行样式效果的应用。4.学生活动活动1：对比两种样式设置方式的区别，理解CSS设置样式方式相较于HTML标签属性设置样式方式的优势。活动2：借助导学稿中“CSS属性说明”表，

6、自主学习探究样式的修改和添加，实践体验，示范解说。活动3：探讨：多页面应用同一种样式，该如何实现？体验链接外部.css文件应用样式，修改css文件查看网页效果，感受分离式CSS的便捷性。4.核心素养的落实本课通过问题设置，引发学生思考，进而促使学生观察、分析、构思等一系列思维活动，并带领学生探究、验证、优化问题的解决，即培养计算思维素养。借助学习资源，使用代码编辑器开展学习实践，尝试解决问题并加以美化，即培养数字化学习与创新素养。利用各种学习平台延伸后续学习，实现多样化的样式设计，即培养信息意识素养。5.评价设计过程性评价：课堂中设置问题，学生通过观察、分析、理解等活动，进行反馈和交流，评价学

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

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

9、前进。二、问题导入(引出学习需求)我们通过浏览器来呈现这个代码文档（index0.html：无样式设置）的页面效果，出现了什么问题？生：内容样式不协调统一、缺乏整体性。针对这样的呈现问题，如何解决？生：思考、提出样式方案。如：文字的字体字号颜色、位置；图片和表格的大小、位置布局；网页背景等。（预设回答）是的，网页设计不仅是对数据内容的组织，还需要对数据内容的呈现效果进行样式设置。课题：网页的数据呈现【设计意图】以问题为导向，试图让学生分析问题、构思样式、提出方案，从中灌输思维能力的培养。从学生中提炼学习需求（样式方案），指明样式设置的大体方向，为落实后面的学习任务做好铺垫。三、对比设置方式，提

10、出CSS优势。（提出学习内容）那么如何对网页的数据内容进行样式设置呢？这里介绍两种设置方式。方式一：通过HTML标签中属性设置样式。在HTML常用标签表中我们会发现：直接在HTML标签中定义属性可以来实现样式设置。我们来看下这个网页文件范例：index1.html的代码，里面的数据内容是通过HTML标签中属性来设置样式的。师：简要解说。例如：头图的大小设置；主标题的居中设置走进人工智能等。标签属性的语法结构：（单标签）（双标签）这种方式是给每个元素的标签中声明一个或多个属性来设置样式，比较直观，便于单个修改，但有什么缺点吗？生：思考。（提示：index1.html代码中同类别的元素样式设置，如

11、三个标题，三张图片）缺点：同类别的元素样式设置会出现代码重复性，造成代码冗余，当网页数据较多时，一定程度上会影响浏览器的解析（呈现）速度。方式二：使用CSS设置样式。我们再来看下这个网页文件范例：index2.html的代码，与index1.html的网页效果一样，但index2.html的中只组织了内容结构，而在标签中多了标签，这个标签区块内是一个CSS规则代码，用来定义HTML文档中元素的样式。这种方式对同类别的元素样式只要设置一次就行，避免了代码的重复性。【设计意图】通过两个代码范例呈现，让学生直观感受两种样式设置方式的区别，能够理解HTML标签属性设置样式的缺点，提出优化的设置方式，从

12、而引出对CSS的学习。四、自主探究实践，认识并掌握CSS。（重点）什么是CSS呢？CSS全称为层叠样式表（Cascading Style Sheets）,它是一种用来描述网页样式和布局的语言，如网页中文字的字体、字号、颜色、位置以及图片的大小等。接下来我们通过任务活动来认识并学习使用CSS，在同学们的桌面上有一个“index.html”半成品网页，打开看看哪些内容的样式需要调整？怎么调整？生：大标题的颜色；三个小标题的位置、字体、字号、颜色；三张图片的大小；背景色等。师：加以引导。根据调整方案，我们来使用CSS实现这些元素的样式设置。通过Notepad+代码编辑器打开index.html文件，

13、在标签内已通过标签定义了类型是CSS规则的代码，结合导学稿中“CSS属性说明”表，实现任务一。任务一：协调内容修改大标题的颜色、修改图片的大小、设置三个小标题的样式。生：使用Notepad+进行编辑，借助导学稿中的“CSS属性说明”表，实现大标题、图片样式的修改。对于三个标题样式的设置，可观察其他元素的设置方法来学习探究。师：巡视辅助。生：上台示范。CSS设置样式也有相应的语法结构，同学们有发现它的语法结构吗？师：指出并解说样式表的基本结构。CSS语法结构：选择符样式属性1:属性值1;样式属性2:属性值2;样式属性设置在标签内，并用语句进行定义说明。选择符：可以是标签选择器，如h1、p等；可以

14、是类别选择器，如代码中设置的banner、tab1、tab2类别，选择符为：.banner、.tab1、.tab2。（为了区分对网页中不同图像、不同表格的样式设置，使用标签来划分区域，并定义类别。）声明：属性名:属性值，多个声明用”;”隔开。注意：CSS样式属性名与HTML样式属性名不同。给表1中三个标题设置样式，如：.tab1tdtext-align:center;font-family:”黑体”;font-size:18px;color:#800080;font-weight:bold;实现了内容样式的协调统一，我们可以再来给页面添加点色彩，请同学们结合导学稿中CSS属性的说明，继续实现任

15、务二。任务二：美化页面给三个标题单元格及网页添加合适的背景。生：继续学习背景样式的设置。（可设置背景色，也可设置背景图。颜色可借助“颜色代码”网站来设置属性值。）【评价】展示学生作品，师生点评页面效果。通过两个任务活动，我们学习认识了样式表，体会了它的作用，也知道了样式表的语法结构。【设计意图】以半成品的形式来补充代码，适于初学者，便于仿照学习。通过两个任务活动，展开探究学习，实现样式的修改和添加，从中认识样式表，掌握其语法结构，以此落实本课的学习重点，同时体会样式表带来的作用效果。五、深入学习体验，理解CSS便捷。（难点）通过前面的学习，我们已经明白了CSS是专门用来设置样式的，使用它可以将

16、内容结构和样式设置分离，那么如果有多个页面需要应用同一种样式，该如何呢？生：复制粘贴样式。（预设回答）复制粘贴也是一种办法，但当代码量多，页面多的情况下，有没有更高效便捷的方法呢？我们来看这个网页文件范例：index22的代码，里面没有对元素有样式设置的代码，却有页面样式效果，这是为什么？请同学们仔细观察下其中的代码。生：观察代码，察觉标签行。是的，在标签中出现了一个标签，页面的样式就是通过标签这个语句来实现的，含义是链接一个样式表脚本的css文件，此文件是css文件夹中的ys1.css文件。（Notepad+中打开文件夹窗口，呈现ccs文件夹）我们查看下ys1.css文件，里面的代码就是CS

17、S样式表。现在它以文件的形式存放，页面可以通过标签来链接，实现样式效果。这样多个页面应用同一个CSS，只要通过一句标签语句行就可以实现，且只要修改这个CSS文件，就可以更新所有页面的样式。接下来请同学们进行体验，在同学们的桌面上有一个css文件夹，里面放了多个文字动画样式的css文件，同学们可以通过Notepad+文件夹窗口来查看，并在自己的index.html文件中通过方式进行链接，实现样式效果的应用。任务三：体验方式链接外部.css文件，进行样式效果的应用。提示：可以尝试修改.css文件中的选择符或某个属性值，保存后刷新页面查看效果。生：实践体验。师：巡视辅助。生：展示代码及效果，说说所做

18、的修改。【小结】通过任务体验，让我们进一步对CSS有了深入的认知，CSS可以是半分离式的设在HTML文档的标签中，称为内部样式表，也可以是完全分离式的设在一个CSS文件中，在HTML文档的标签中通过标签引用，称为外部样式表。通过学习体验，你觉得使用CSS这种分离式的（内部样式表和外部样式表）样式设置有什么好处？生：思考CSS的优点。师：加以引导。分离式的CSS的优点：相对标签属性设样式，避免代码重复性，提高网页加载速度；结构清晰，易于程序员阅读解析，易于维护和更新。样式与内容分离，便于分工协作，提高开发效率。【设计意图】以问题激发学生思考，带领学生一步步探索认知CSS的其他形式，通过任务体验，

19、切身感受应用CSS文件设置样式的便捷性，从而理解分离式CSS的优点。六、课堂总结认识了CSS（层叠样式表），它是一种样式表语言，用于描述网页的样式和布局。网页的三种核心技术：HTML+CSS+JSHTML超文本标记语言，主要负责网页的架构（结构和内容）。CSS样式表语言，主要负责网页的外观（样式和布局）。JS（JavaScript）动态脚本语言：主要负责网页的行为（交互和动态）。CSS语法结构：选择符样式属性1：属性值1；样式属性2：属性值2；样式属性选择符：用来选择要定义样式的对象。CSS的类型：内部样式表、外部样式表、内联样式表。类型引入方式位置应用范围内部样式表选择符样式属性1：属性值1

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