1.1 精彩尽在网页中——从制作到渲染 教学设计—2025-2026学年七年级下册《信息科技》湘教版.docxVIP

PAGE

PAGE2

课题名称

第1课精彩尽在网页中——从制作到渲染

课时目标

1.合理规划项目实施方案，能够基于小组情况与实验条件进行规划。

2.知道网页诞生的过程，能够说出网站与网页之间的关系。

3.知道网页的制作标准，能够说出网页设计制作工具有哪些。

4.知道浏览器渲染网页的过程。

教学准备

计算机网络，课件，浏览器，AIGC平台

导学过程

意图说明

一、项目筹备

1.展示单元项目情境：略

2.提出单元项目任务：你会如何规划设计“向世界介绍我的学校”的网页？

（1）提供项目方案范例

知识学习

实施步骤

预期成果

（1）学习教材中的相关知识

（2）了解如何根据需求来收集、处理制作网页所需要的各类素材（文字、图片、音频、视频等）

（3）了解如何根据需求来设计网页

（4）了解如何根据设计来制作网页

（5）掌握如何对网页进行测试、优化和发布

确定网页的栏目

选写出网页栏目对应的宣传内容要求

收集并处理素材

设计制作网页

测试优化发布网页

（1）“向世界介绍我的学校”网页

（2）项目成果汇报文档（PPT格式）

姓名

角色

职责

组长

主持整个项目开展过程，协调处理各种情况以确保完成项目任务

组织员

组织各成员共同开展需求分析、规划实施与交流评价等具体活动

操作员

实施并记录整理需求分析、实施规划与交流评价等活动的相关信息

检查员

核查各项任务完成情况，制作汇报PPT并负责对外展示交流

（2）引导开展自主规划

——要求以小组为单位，基于自身情况进行规划，并将结果填入下表1、表2。

表1项目实施规划

学习知识

实施步骤

预期成果

表2小组分工合作

姓名

角色

职责

（3）各小组汇报展示交流

——展示小组规划成果，交流规划缘由。

知识探究

1.项目子任务引入

——了解网站与网页之间的关系、网页的制作标准与设计制作工具、浏览器是如何渲染网页的，为项目制作储备知识。

2.探究内容与要求

（1）方法引导：遵循“概念→实现→应用”的认知规律。

（2）主要内容：

①网站和网页之间的关系是怎样的？——变革基础（概念）习得

②浏览器是如何渲染网页的？——关键技术（实现）运用

③在网上搜索适合的网页制作工具制作网页——重要工具（应用）探究

3.知识习得

（1）自主阅读：以书本P3-9为主，网络知识作补充

（2）知识梳理：

①网站与网页之间是与的关系。

②网站是上用来存放，它是所有相关网页的，则是网站中的文档元素。

③是用于标识网站的名称，是指输入网站地址后，默认被打开的第一张网页。

④在网站中，用来导航与链接其他内页，而就是网站内部的其他页面。

4.核心素养培育

（1）学会分析：使用浏览器访问两个你喜欢的网站，并通过单击超链接切换不同的网页，在这个过程中，浏览的网页内有哪些基本元素，基本的结构是什么，是通过什么实现的？

辅助分析支架：用户通过来架设网页的结构，通过控制网页的样式，通过_________来为网页添加交互功能和动态效果。

学会解释：

①编写生成的网页可直接在客户端的任意软件上显示出来，这种说法对吗？请说明理由。

辅助分析支架：无论是采用哪种制作工具，编写生成的网页都是一种包含HTML标签、CSS样式与JavaScript的纯文本文件。而它真实的视觉效果与功能，必须经过_________才能正常显示出来。

②使用浏览器打开网页，尝试将UTF-8字符编码更改为GBK或者其他编码，网页中的文字发生了变化，为什么？

辅助分析支架：UTF-8是互联网中使用最广泛的_________，能够满足不同语言的字符_________，因此在文字解析时不容易出现“乱码”现象。

（3）学会求证：W3C标准的网页就是一段由HTML标签组成的描述性文本文档，其所有代码的功能都是用来创建网页的结构的。你同意这个观点吗？

①求证技能：请了解并选择一款人工智能大语言模型工具，帮你生成一张用HTML语言编写的简单网页，并要求对每一行代码进行注释。阅读并理解这些HTML代码，再将它们完整地复制到记事本中，并命名为web.html文件，最后用浏览器打开并观察该网页的页面效果，看看是否与你的理解保持一致。

网页代码

编程语言

效果

结构

表现

行为

②求证活动：尝试修改web.html中的代码，并观察修改后的网页效果，看看它与W3C标准要求是否一致。（具体操作见课件）

（4）对学科方法、工具或作品进行评价反思

请搜索更多关于网页制作工具的知识，并分享交流哪一款工具更适合现有的实验条件。

习题测试

1.浏览器渲染网页时，首先解析的是（??）

A.HTML标签