第17课 制作网页展活动 课件-2025-2026学年人教版初中信息科技七年级全一册
2026-05-14
|
33页
|
137人阅读
|
1人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第17课 制作网页展活动 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 10.27 MB |
| 发布时间 | 2026-05-14 |
| 更新时间 | 2026-05-14 |
| 作者 | xkw_7550 |
| 品牌系列 | - |
| 审核时间 | 2026-05-14 |
| 下载链接 | https://m.zxxk.com/soft/57867899.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
第17课 制作网页展活动
打造你的线上创意空间
时间：2026年3月
1.7.2013
大家好，欢迎来到今天的信息科技课。今天我们将一起开启一个非常有趣的项目——制作网页展活动。在接下来的课程中，我们将学习如何把自己的创意和想法，通过代码变成一个精彩的线上网页。准备好开启你的创意之旅了吗？让我们一起打造属于自己的线上创意空间！
‹#›
活动介绍 —— 我们要做什么？
知识点定义
“制作网页展活动”是一个项目式学习任务，要求我们综合运用HTML、CSS、JavaScript知识，独立或小组合作完成一个主题网页的设计与制作，并最终进行展示和交流。
为什么重要（核心价值）
不仅能巩固编程知识，更能锻炼创造力、设计能力、解决问题与团队协作能力。这是将书本知识转化为实际作品的绝佳机会！
生活化类比：我们的“线上跳蚤市场”
就像校园“跳蚤市场”：构思内容=准备商品，设计网页=布置摊位，发布网页=展示推销。让我们在网络世界里，支起自己的“小摊”！
💡 课堂互动：如果让你做一个网页，你最想展示什么？是萌宠、游戏攻略，还是难忘的旅行？快和同桌分享一下你的奇思妙想！
1.7.2013
同学们，想象一下，我们要举办一场全校的“线上创意集市”。每个人都可以成为一个“摊主”，用我们学过的信息技术知识，制作一个独一无二的网页来展示你的兴趣爱好、学习成果或者创意作品。这就是我们的“制作网页展活动”！这个活动就像学校的跳蚤市场，需要你精心准备和设计。现在，请大家和同桌分享一下，你最想在你的网页上展示什么呢？
‹#›
活动目标 —— 我们要学到什么？
▍ 什么是活动目标？
它是完成任务过程中，我们必须达成的具体成果，以及希望实现的能力提升方向。它是行动的指南针。
▍ 为什么它很重要？
明确目标能帮我们合理分配时间精力，避免盲目摸索，让学习过程有的放矢，确保收获实实在在的成长。
生活类比：就像玩游戏通关，你得先看清“收集10个金币”或“打败最终Boss”的任务提示，才能有策略地行动，而不是在地图里盲目乱跑。
01. 回顾与应用| 熟练运用HTML/CSS/JS完成网页搭建与交互
02. 设计与规划| 学会合理规划网页内容布局与视觉呈现
03. 实践与创新| 亲手打造一个具有鲜明个人特色的网页作品
04. 分享与交流| 勇敢展示成果，在交流中学习他人的长处
课堂思考时刻：
对照以上四个目标，想一想：
哪一项你最有信心做好？哪一项对你有挑战？
请在笔记本上简单写下你的想法。
1.7.2013
明确我们的目标至关重要。就像玩游戏要看任务目标一样，这次活动我们也有四个明确的目标：回顾应用技术、学会设计规划、实践创新以及分享交流。请大家花一分钟时间思考一下，这四个目标中，你对哪个最有信心，又觉得哪个最有挑战呢？把你的想法记录下来。
‹#›
活动流程 — 我们的行动路线图
流程的定义与价值
它是完成项目的标准化步骤，能帮助我们“有条不紊”地从起点走向终点。遵循流程可避免混乱、提升效率，确保不遗漏关键环节，最终产出高质量作品。
网页制作四步法：像做菜一样简单！
①主题构思(想做什么菜) → ②设计规划(备菜备料) → ③编码制作(烹饪料理) → ④测试完善(尝味调味)
💡 互动时刻：在这四个步骤中，你觉得哪一步最有趣？哪一步又觉得最有挑战呢？
1.7.2013
为了高效地完成任务，我们需要一张行动路线图。这就像做菜一样，需要按部就班。我们的流程分为四步：主题构思、设计规划、编码制作和测试完善。大家可以思考一下，这四个步骤里，你觉得哪一步最吸引你，哪一步又让你觉得有点难呢？
‹#›
技术回顾 —— 我们的工具箱
HTML · 结构大师
负责网页的内容结构，是网页的“骨架”。
正如盖房子的钢筋水泥框架，决定了房间的数量与整体布局。
CSS · 美学设计师
负责网页的视觉样式，是网页的“皮肤”与“衣服”。
如同房子的装修风格，决定了墙面色彩、地板纹理与软装搭配。
JavaScript · 灵魂引擎
负责网页的交互行为，是网页的“大脑”与“灵魂”。
就像房子的智能中控系统，实现自动开灯、恒温控制等动态功能。
💡 互动时刻：请用一个词来形容你对这三种技术的理解。比如 HTML 是“结构大师”，CSS 是“美学设计师”，那 JavaScript 是什么呢？
1.7.2013
在开始制作之前，我们先来回顾一下我们强大的“工具箱”。HTML、CSS和JavaScript，就像盖房子一样，分别负责结构、装修和智能系统。现在，请大家开动脑筋，用一个词来形容你心中的JavaScript是什么角色呢？
‹#›
HTML基础：网页的骨架
▍ 知识点定义
HTML基本结构是构成任何网页的基础框架，它定义了网页的根元素、头部信息和主体内容区域，是网页的“骨架”所在。
▍ 为什么重要？
正确的基本结构是浏览器正确解析和显示网页内容的前提。缺少它，网页的内容就会变成一片混乱，无法被识别。
▍ 生活中的类比
就像写作文需要遵循固定格式一样：必须有标题（对应HTML里的 <title>）和正文（对应 <body>）。
<!-- 基础HTML结构示例 -->
<!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>你好，世界！</h1> </body> </html>
课堂互动：请打开记事本，敲一遍上述代码，保存为 index.html ，再用浏览器打开，看看会发生什么？
1.7.2013
好，我们正式进入技术回顾部分。首先是HTML，网页的骨架。每个HTML文件都有一个标准的基本结构，就像作文有固定格式一样。大家看屏幕上的代码，这就是最基础的结构。现在，请大家打开记事本，亲手敲一遍这段代码，保存后用浏览器打开，看看奇迹会不会发生。
‹#›
HTML内容：添加标题
📌 知识点定义
HTML标题标签（<h1>-<h6>）用于在网页中创建层级分明的标题，数字越小，级别越高，主要用于突出内容的重要性和页面结构。
💡 为什么重要（价值）
清晰的标题结构能让访问者快速了解内容大纲，提升阅读体验；同时也能帮助搜索引擎抓取核心关键词，利于SEO优化。
<h1>这是一级标题 (最重要)</h1> <h2>这是二级标题</h2>
<h3>这是三级标题</h3> <h4>这是四级标题</h4>
<h5>这是五级标题</h5> <h6>这是六级标题 (最不重要)</h6>
课堂挑战：修改你的HTML文件，在<body>中添加一个<h1>主标题和几个<h2>副标题，保存后刷新浏览器，观察字号和粗细的变化。
1.7.2013
有了骨架，我们就要给网页添加内容了。首先是标题。HTML提供了从<h1>到<h6>六个级别的标题，就像书的目录一样，层级分明。数字越小，级别越高。现在，请大家回到自己的代码里，添加几个不同级别的标题，看看效果有什么变化。
‹#›
HTML内容：添加段落
▍ 核心概念 & 价值
定义：HTML中最基础的文本元素，用标签<p> </p>来包裹一段文字，定义一个逻辑段落。
作用：将长文本切割为条理清晰的小块，让网页排版告别“豆腐块”，更具阅读性与专业感。
▍ 生活中的类比
就像写语文作文时，每写完一个意思就要“另起一行，开头空两格”一样。在网页里，一个<p>标签就代表“另起一段”。
💻 代码示例：
<h2>我的爱好</h2>
<p>我爱打篮球，强身健体又练团队感。</p>
<p>也爱读科幻，在想象世界里遨游。</p>
课堂小挑战
快动手试一试！在你的网页中，用 <p> 标签写一小段关于你自己的介绍吧。
“作文分段”与“代码段落”异曲同工
1.7.2013
有了标题，接下来就是正文段落了。在HTML中，我们用<p>标签来定义一个段落，它就像写作文时的分段一样。每个<p>标签都会另起一段。现在，请大家尝试用<p>标签在你的网页里写一段自我介绍吧。
‹#›
HTML内容：插入图片
📌 知识点定义
<img> 标签是用于在 HTML 页面中嵌入图像的核心标签。它是一个“单标签”，不需要闭合标签。
💎 为什么重要？
图片是网页的“颜值担当”，能瞬间提升吸引力。“一图胜千言”，用图片表达比纯文字更直观、更高效。
📝 生活化类比：像贴照片一样简单
如果把网页比作作文本，那么 <img> 标签就是那滴“胶水”。其中src属性就是“照片的名字”（告诉浏览器去哪找它），alt属性就是“照片旁边的说明文字”。
💻 代码示例：
<!-- 插入一张名为"cat.jpg"的图片 -->
<img src="cat.jpg"alt="可爱的猫咪"width="300">
🤔 小挑战：动手试一试
找一张喜欢的图片保存在电脑上，用 <img> 标签把它插入网页。尝试修改 width 和 height 的数值，观察一下图片会发生什么变化？
1.7.2013
一个生动的网页怎能没有图片呢？我们使用 <img> 标签来插入图片。
大家看左边的图片，是不是很像我们小时候写作文，贴的贴纸或者照片？其实在网页中插入图片也是一样的逻辑。
其中，`src` 属性最重要，它告诉浏览器“这张图片叫什么名字，在哪能找到它”，就像你要告诉别人你贴的这张照片叫什么。`alt` 属性是当图片因为各种原因加载不出来时，显示的说明文字，也能帮助视障用户理解图片内容。
现在，请大家找一张喜欢的图片，比如你喜欢的动物、风景或者偶像，把它保存到电脑上，然后用刚才学到的 <img> 标签，把它插入到你的网页里。别忘了试着改改宽和高，看看图片是变大了还是变小了。
‹#›
HTML内容：创建链接
▍ 什么是 <a> 标签？
它是定义超链接的核心标签，用于实现网页间的跳转。就像一座桥梁，把互联网上一个个孤立的页面连接在一起。
▍ 为什么它是互联网的基石？
万维网(WWW)之所以能成为“网”，正是因为无数的超链接将海量信息交织在一起。没有它，网页永远只是孤岛。
// 1. 跳转到外部网站 (绝对路径)<a href="https://www.example.com">示例网站</a>
// 2. 跳转到本地页面 (相对路径)<a href="about.html">关于我</a>
�� 动手试一试：创建一个指向你最爱的网站的链接，再创建一个指向本地的“about.html”文件。
📍 生活中的类比
就像地图上的指示牌：
<a> 标签是箭头，而 href 属性就是你要去的目的地。
1.7.2013
网页的魅力在于连接。我们使用 <a> 标签来创建超链接，它就像地图上的指示牌，带你去往不同的地方。 href 属性就是目标地址。现在，请大家尝试在你的网页上创建一个链接，指向你最喜欢的网站，体验一下跳转的感觉。
‹#›
CSS基础：美化我们的网页
知识点定义
CSS是用于描述如何显示HTML元素的规则集，由选择器和一系列属性-值对构成，是网页美化的基石。
为什么重要
脱离了CSS的HTML只是骨架。掌握CSS语法能让你精确控制网页的色彩、排版与视觉风格，打造独一无二的网页体验。
🎨 生活化类比
就像给玩具上色：选择器是你选中的玩具（如“所有的积木”），而声明块就是你要给它涂的颜色与图案（如“涂成红色”）。
p {
color:blue;/* 改颜色 */
font-size:20px;/* 改大小 */
}
🤔 课堂挑战
在 HTML 文件的 <head> 标签内添加 <style>，试着把所有 <h1> 标题改为红色！
1.7.2013
有了HTML搭建的骨架，我们就要用CSS来给它穿上漂亮的衣服了。CSS的基本语法很简单，就是“选择器 { 属性: 值; }”。这就像给玩具上色，先选中玩具，再告诉它要涂成什么颜色。现在，请大家在``里添加``标签，尝试把所有``标题的颜色改成红色。
‹#›
CSS样式：设置颜色
▍ 核心定义
CSS 中的color与background-color是网页配色的基础。前者定义元素的前景（文字）颜色，后者定义元素的背景颜色。
▍ 价值与类比
色彩直接影响用户的情绪和阅读体验。你可以把它想象成装修：background-color是给墙面刷漆，color则是给家具和挂画上色。
body { background-color: lightyellow;/* 页面背景：浅黄色 */}
h1 { color: #C8102E;/* 标题文字：中国红 */}
小挑战：尝试搜索“HTML颜色代码”，为你的网页设置一套专属配色，让它看起来更酷！
1.7.2013
接下来我们学习如何设置颜色。`color`属性用来改变文字颜色，`background-color`用来改变背景颜色。这就像给房间刷墙和给家具上色一样。大家可以尝试给你的网页换上喜欢的颜色，让它变得更有个性。
‹#›
CSS样式：设置字体
📝 核心知识点定义
`font-family` (字体类型)、`font-size` (字号大小)、`font-weight` (字体粗细) 是 CSS 中控制文本外观的三大基石。它们共同决定了网页文字的可读性与视觉基调。
✨ 为什么重要？
合适的字体搭配能提升文本的可读性，增强页面的整体美感与专业度，让用户更愿意阅读你的内容。
🖋️ 生活中的类比
这就像写毛笔字：`font-family` 是选“狼毫”还是“羊毫”；`font-size` 是选大字还是小字；`font-weight` 是用力顿笔还是轻拂而过。
p {font-family: "Microsoft YaHei", sans-serif;font-size: 16px;font-weight: bold; }
// 效果：微软雅黑字体，16像素大小，加粗显示
互动挑战：尝试将你网页的段落设置为“宋体”，并调整字号到14px，加粗显示。
1.7.2013
除了颜色，我们还可以控制字体。`font-family`选择字体类型，`font-size`设置大小，`font-weight`控制粗细。这就像我们写作业时选择不同的笔一样。现在，请大家尝试修改你网页中文字的字体、大小和粗细。
‹#›
CSS布局：简单盒子模型
▍ 核心定义
CSS 盒子模型是网页布局的基石。它将每一个 HTML 元素（如图片、段落、按钮）抽象为一个矩形的“盒子”。
▍ 为什么重要？
理解盒子模型，能让你像搭积木一样，精确控制页面上元素的大小、形状以及它们之间的距离，实现灵活的排版。
▍ 生活化类比：就像寄快递
📦Content(内容)= 包裹里的商品 |Padding(内边距)= 防震泡沫
📦Border(边框)= 快递盒子本身 |Margin(外边距)= 盒子间的空隙
✍️ 动手试一试：
创建一个 <div> 元素，尝试修改 padding/border/margin 的数值，观察页面布局变化。体会“盒子”是如何被撑开和推开的。
div {width: 200px; height: 100px;
padding: 20px;/* 内容与边框的距离 */
border: 2px solid #C8102E;/* 盒子本身 */
margin: 30px;/* 与其他盒子的空隙 */}
1.7.2013
CSS布局的核心是盒子模型。你可以把每个HTML元素想象成一个快递包裹，它有内容、保护泡沫（内边距）、盒子本身（边框）和与其他包裹的距离（外边距）。理解了这个模型，我们就能精确控制页面布局。现在，请大家创建一个div元素，动手调整它的padding、border和margin，看看页面会发生什么变化。
‹#›
JavaScript基础：让网页动起来
▍ 核心概念：<script> 标签
它是HTML中包含或引用JavaScript代码的专用元素，是连接静态网页与动态交互逻辑的“桥梁”，也是实现网页动态效果的入口。
✨ 赋予网页“生命”
没有它，网页就只是静止的“图片”；有了它，网页才能响应用户点击、展示动态内容。
🧸 生活类比：玩偶的开关
HTML/CSS 是玩偶的身体，而 <script> 标签就像玩偶的开关，里面的代码就是让玩偶做出动作的指令。
<script>
// 浏览器弹窗提示
alert("欢迎来到我的网页!");
console.log("Hello, JS!");
</script>
💡 动手试一试：
在HTML文件的 </body> 之前，插入上方代码并刷新页面，看看浏览器会有什么反应？
1.7.2013
现在，我们要给网页注入灵魂，让它动起来！这就要用到JavaScript。我们通过<script>标签来嵌入JS代码。这就像给玩偶装上电池和开关。大家看代码里的alert()函数，它能弹出一个提示框。现在，请大家把这段代码加到你的网页里，看看会发生什么神奇的事情。
‹#›
JavaScript基础：变量
▍ 什么是变量？
变量是程序中用于存储和表示数据的“命名容器”，它是数据的载体，也是操作数据的桥梁。
▍ 为什么要学习变量？
它是编程的基石，让程序摆脱了固定数值的限制，能灵活处理用户输入、计算结果等动态变化的数据。
▍ 生活化理解：贴标签的盒子
就像一个空盒子，你在盒面写上“零花钱”（变量名），再往里面放入“10元”（赋值）。以后要用钱，直接找“零花钱”这个盒子就行，不用去记里面具体有多少。
let userName = "小明"; userName = "小红"; // 可修改 (let)
const PI = 3.14159; // 不可修改 (const)// PI = 3.14; 报错
课堂小挑战
请在编辑器中，声明一个变量myAge，并把你的年龄赋值给它。
最后，尝试用alert()函数将年龄展示在弹窗中。
1.7.2013
编程离不开数据，而变量就是存储数据的容器。大家可以把它想象成一个贴了标签的盒子：标签就是“变量名”，方便我们查找；盒子里装的东西就是“值”。
在JS中，我们主要使用两个关键字来声明：用 `let` 声明可以随时修改内容的变量，就像可以反复装取东西的盒子；用 `const` 声明不能修改的常量，就像一个封存的箱子，一旦放入东西就不能换了，比如圆周率 PI。
现在，请大家完成右下角的小挑战：声明一个变量 `myAge`，把你的年龄存进去，然后用 `alert()` 函数把它显示出来。
‹#›
JavaScript基础：函数
▍ 核心定义
函数是组织代码的基本单元，是执行特定任务的可重用代码块，是编程中的“积木”。
▍ 学习价值
有效避免重复编写相同代码，降低维护成本，让复杂程序的逻辑结构更清晰、有条理。
▍ 生活化理解：多功能料理机
你放入蔬菜 (输入参数) → 按下“榨汁”按钮 (调用函数) → 机器吐出果汁 (返回值)。下次要用，直接操作即可，无需再造一台新机器。
// 1. 定义函数 (料理机原理)
function add(a, b) {
return a + b; // 返回结果
}
// 2. 调用函数 (制作果汁)
alert("5+3=" + add(5, 3));
💡 课堂小挑战
定义函数 `greet(name)`，让它返回 "你好，name!"。最后调用它并用 alert 弹窗显示出来。
1.7.2013
为了让代码更有条理，我们需要用到函数。函数是一段可以重复使用的代码块，就像一个多功能料理机。你给它原料（参数），它帮你加工并给出成品（返回值）。现在，请大家尝试定义一个打招呼的函数，并调用它。
‹#›
JavaScript交互：事件响应
▍ 核心定义
事件处理是JS实现网页交互的核心。它就像为网页装上“感应器”，让网页能捕捉并响应用户的点击、鼠标移动等操作。
▍ 价值与生活类比
价值：让静态的网页“活”起来，是构建现代动态Web应用的基石。
类比：就像家里的声控灯。你拍手（触发事件），灯亮（执行响应）。而 onclick 就是网页里的“声控开关”。
<button onclick="sayHi()">点我互动</button>
// 点击后触发此函数，弹出消息框
function sayHi() { alert("你好，JavaScript!"); }
✍️ 课堂小挑战
请在你的编辑器中，写一个按钮。
当你点击它时，弹出一个显示你名字的提示框！
1.7.2013
JavaScript最强大的地方在于实现交互。我们通过事件来响应用户的操作，比如点击。这就像家里的声控灯，你拍手，灯就亮。在网页里，我们用 onclick 这样的事件属性来绑定动作。现在，请大家创建一个按钮，让它在被点击时弹出你的名字。
‹#›
综合小练习：个人简介页
📝 知识点定义
综合练习是将所学的零散知识点整合起来，解决一个完整问题的实践过程，是检验学习成果的试金石。
🌟 为什么重要？
它不仅能检验对知识的掌握程度，更能锻炼逻辑思维与解决实际问题的能力，实现从“知”到“行”的跨越。
🧩 生活化类比
就像用乐高积木搭城堡：HTML是方形积木（搭建骨架），CSS是彩色贴纸（装饰外观），JavaScript是电动马达（赋予交互）。只有组合使用，才能搭出一个完整、生动的作品。
<!DOCTYPE html><!-- 声明文档类型 -->
<divclass="container">
<h1>关于我</h1> <!-- 页面标题 -->
<img src="me.jpg" alt="我的照片"> <!-- 头像 -->
<button onclick="alert('Hi!')">点我</button>
</div>
💡 课堂挑战
请大家基于上面的思路，制作一个专属个人简介页。试着替换照片链接、修改个人信息，并发挥创意调整CSS样式，让它独一无二！
1.7.2013
好了，基础知识回顾完毕！现在是时候把所有知识整合起来了。就像用乐高积木搭城堡一样，我们要用HTML、CSS和JavaScript来搭建一个完整的个人简介页。这里有一个模板，请大家基于它进行修改，制作一个属于你自己的个人简介页。
‹#›
第一步：主题构思
知识点定义：主题构思是项目的起点，指明确网页的核心思想和要传达的主要信息，是整个网页的灵魂所在。
为什么重要：清晰的主题能让内容聚焦、结构清晰，避免做到一半“迷失方向”，确保所有设计和内容都服务于同一个目标。
常见主题方向：可以是“我的旅行日记/偶像/宠物”等个人类；“游戏攻略/动漫/科普”等兴趣类；或是“单词卡片/历史故事/公式大全”等学习类。
课堂小任务：填写一份“创意策划书”
1. 我的主题是______ 2. 核心内容有______ 3. 希望访问者看完后能______
“就像写作文要先定中心思想”
1.7.2013
现在我们进入项目实战阶段。第一步，也是最关键的一步，是主题构思。就像写作文要先确定中心思想一样，你要明确你的网页是关于什么的。是展示你的宠物，还是分享游戏攻略？请大家花点时间，填写一份简单的策划书，明确你的主题和内容。
‹#›
第二步：设计规划
什么是“设计规划”？
将抽象的网页想法转化为具体的视觉布局方案的过程。通常不需要精美的图画，只需通过简单的方框和线条绘制草图即可完成。
它为什么这么重要？
草图就是网页的“建筑蓝图”。就像建房子前要先画好设计图，明确客厅、卧室的位置，我们也要在动手前想清楚页面结构，减少后续反复修改的麻烦。
关键规划要素
• 标题与导航放哪里？
• 主要内容区怎么划分？
• 图片和文字如何搭配？
课堂小挑战
拿出纸和笔，为你的网页画一张简单的布局草图。请清晰标明 Header、Content、Footer 这三个核心区域！
1.7.2013
有了主题，下一步就是设计规划。我们需要画出网页的草图，也就是蓝图。这能帮助我们理清思路，规划好标题、菜单、内容区的位置。现在，请大家拿出纸和笔，为你的网页画一张简单的布局草图。
‹#›
第三步：编码制作（HTML结构）
📝 知识点定义
编码制作的第一步是使用HTML标签构建网页的内容结构，它是网页显示的骨架，决定了内容的层级和逻辑关系。
🌟 核心价值
清晰的HTML结构不仅是浏览器正确渲染页面的基础，更能提升SEO（搜索引擎优化）效果，并让代码更容易维护和扩展。
<body>
<header> <!-- 页眉: 标题与导航 --> ... </header>
<main> <!-- 核心内容: 文章、图片等 --> ... </main>
<footer> <!-- 页脚: 版权、联系方式 --> ... </footer>
</body>
💡 互动挑战：试着用 <h1> <p> 标签把你的页面内容先“填”进去吧！
🧱 就像“搭建乐高城堡”
先搭好墙壁、柱子和楼层框架，再去填充家具和装饰。HTML结构就是网页的“钢筋混凝土”。
1.7.2013
现在，我们正式开始编码！第一步是搭建HTML结构。根据你的草图，用<header>, <main>, <footer>等标签把页面的骨架搭起来。先不要管样式，只关注内容的组织。
‹#›
第三步：编码制作（CSS样式）
💡 核心概念：网页的“化妆师”
在HTML构建的“骨架”上，用CSS定义颜色、字体、布局等视觉表现，将简陋的网页变得专业美观，是实现设计还原的关键技术。
🎨 生活场景类比：
就像盖房子：HTML是搭好的钢筋水泥框架，而CSS就是给房子刷油漆、贴瓷砖、装门窗和做室内装修。
🔧 基础代码示例：
header { background: #2c3e50; color: white; padding: 20px; }
nav a { color: #333; margin: 0 10px; text-decoration: none; }
main { width: 80%; margin: 20px auto; }
课堂挑战：试着给你刚写的HTML页面添加CSS，先设置body背景色吧！
1.7.2013
HTML结构搭好了，接下来就是用CSS进行美化。这就像给城堡刷油漆、装门窗。针对你刚才搭建的HTML结构，编写CSS规则，设置背景色、文字颜色、边距等，让你的页面变得美观起来。
‹#›
第三步：编码制作（JavaScript交互）
▍ 知识点定义
利用JavaScript响应用户操作，为网页添加动态行为和交互能力，让静态页面“活”起来。
▍ 为什么重要（价值）
交互功能能极大地提升用户体验，让网页不再枯燥，变得更具吸引力和趣味性。
▍ 生活化类比
这就像给静态的乐高城堡装上可以打开的城门、会转动的风车和会亮灯的窗户。
<button onclick="changeColor()">点击变色</button>
function changeColor() {
document.body.style.backgroundColor = 'rgb('+Math.random()*255+',0,0)'; }
课堂小任务
为你的网页添加至少一个交互功能吧！
可以尝试做一个点击按钮弹出问候语，或者点击切换图片的效果。
1.7.2013
最后一步，我们要用JavaScript给网页添加交互功能，让它动起来。这就像给城堡装上可以打开的城门。思考一下你的网页需要什么交互，比如点击按钮改变颜色，或者显示隐藏内容。现在，请为你的网页添加至少一个交互功能。
‹#›
第四步：测试与完善
📝 核心定义
开发中不可或缺的环节，指通过实际运行网页，去主动发现并修复代码中的错误和设计缺陷，确保最终作品的可用性。
🏰 价值与类比
未经测试的网页可能暗藏各种影响体验的“小地雷”。这就像城堡建好后，必须亲自走进去检查一遍：屋顶会不会漏雨？大门能否关严？确保万无一失，才能交付使用。
✅ 浏览器自查清单
文字显示准确 · 图片加载正常 · 链接跳转无误 · 多窗口布局稳定 · 交互功能响应及时
👀 课堂互动时刻
请同学们互相检查网页，扮演“小测试员”，为对方找Bug并提修改建议！
1.7.2013
代码写完了，工作还没结束！我们需要进行测试和完善。这就像城堡建好后要亲自检查一样。打开你的网页，仔细检查文字、图片、链接和交互是否都正常。也可以请同学互相检查，扮演“小测试员”的角色，找出问题并一起解决。
‹#›
如何在本地打开网页
知识点定义
指在没有联网的情况下，通过浏览器直接访问存储在本地计算机上的HTML文件，无需经过服务器中转。
为什么重要？
这是我们在开发过程中实时预览效果、以及完成后向他人直接展示本地网页作品最直接、高效的方式。
生活化类比
就像你画了一幅精美的画，直接把画纸递给朋友当面欣赏，而不是先拍照再通过网络发给他看。
操作三步走
1. 找到本地文件夹中的index.html文件 → 2. 鼠标双击它 → 3. 电脑自动用默认浏览器打开展示
📢 课堂互动时刻
请大家把自己电脑上写好的HTML文件，通过U盘或局域网分享给同桌，让他/她在自己的电脑上打开，看看效果吧！
1.7.2013
作品完成了，怎么展示呢？非常简单，因为我们的网页是保存在本地的文件。你只需要找到那个index.html文件，双击它，浏览器就会自动打开。就像你画了一幅画，直接拿给朋友看一样。现在，大家可以把自己的文件分享给同桌，让他也看看你的作品。
‹#›
小组展示与交流
📝 什么是小组展示？
一种集体学习交流活动，通过分享作品与经验，打破思维壁垒，促进成员间的相互学习与共同进步。
💎 为什么它很重要？
既能锻炼你的逻辑与口头表达能力，也是一个“见贤思齐”的机会，从他人的作品中获取灵感，拓宽设计思路。
💡 分享这三点就很棒！
① 你的网页主题是什么？ ② 你最喜欢作品中的哪个部分？ ③ 制作中遇到了什么困难，如何解决的？
互动时刻：请每个小组推选一名代表，准备向全班展示你们小组最优秀的作品！
1.7.2013
现在是分享和交流的时间！我们将以小组为单位，轮流展示自己的作品。这就像读书分享会一样，你可以介绍你的创作思路、最喜欢的部分以及遇到的困难。请每个小组选出一位代表，准备向全班展示你们的优秀作品。
‹#›
作品评价标准（自评）
▍ 什么是作品评价标准？
一套用于衡量作品质量的准则，帮助我们跳出创作者的视角，更客观地认识作品本身的优点和不足，是复盘与迭代的基础。
▍ 为什么要学会自评？
自评是最好的反思练习。它能让你清晰地看到自己当前的能力坐标，明确本次创作的进步点，以及下一阶段的努力方向。
▍ 五大核心评价维度
•内容：主题明确度 / 内容丰富度 •技术：代码规范性 / 功能实现度
•设计：布局合理性 / 色彩和谐度 •交互：功能易用性 / 操作流畅度
•创新：创意独特性 / 风格辨识度
🎯 课堂互动：请参照以上五个维度，为自己的网页作品打分（每项1-5分），并写下一句最想对自己说的评语。
“ 如阅卷打分，知得失而后进 ”
就像考试后对照答案复盘，自评让我们把“感觉”转化为“标准”，把“模糊”变成“清晰”。
1.7.2013
展示之后，我们需要对自己的作品进行评价。这就像考完试给自己打分一样，能帮助我们反思和进步。我们可以从内容完整性、技术运用、设计美观性、交互友好性和创新性这五个方面来评价自己的作品。请大家为自己的作品打分并写下评语。
‹#›
作品评价标准（互评）
▍什么是互评？
互评是指同学之间相互对作品进行评价和反馈的过程，是学习中不可或缺的环节。
▍互评的价值
能让我们从不同的视角看问题，发现他人优点并学习，同时培养批判性思维和沟通能力。
▍评价三步法
1.先肯定优点 | 2.再友好建议 | 3.始终尊重鼓励
评价的最终目的是帮助同学共同进步，而非指责。
小组互动：请以小组为单位，互相评价组员作品并填写评价表。
1.7.2013
除了自评，互评也非常重要。这就像和同学交换批改作文，能让我们看到不同的视角。在评价别人时，要先肯定优点，再友好地提出建议。现在，请大家以小组为单位，互相评价组员的作品。
‹#›
总结与展望
▍ 何为总结与展望？
总结与展望是对整个学习过程的系统回顾与复盘，同时也是基于当下成果对未来发展方向的思考与规划。
▍ 为什么这一步很重要？
总结能帮助我们沉淀知识，将零散的技能转化为系统的能力；展望则能为我们明确方向，激发持续探索与精进的动力。
▍ 回顾与思考：制作网页展活动
这就像完成一次长途旅行，翻看照片回味风景，并规划下一次的出发。在本次活动中，我们学会了将创意落地、解决实际问题以及团队协作与分享，这只是Web开发之旅的起点。
请大家用一句话分享：你在这次活动中的最大收获是什么？
1.7.2013
课程接近尾声，让我们一起总结一下。通过这次活动，我们不仅学会了制作网页，更学会了创造、合作和分享。这只是一个开始，未来还有更多精彩的技术等着我们。现在，请大家用一句话来总结你在这次活动中的最大收获。
‹#›
优秀作品欣赏
知识点定义
优秀作品欣赏是一种通过观摩高水平范例，去分析其设计思路、色彩搭配与交互逻辑，从而快速提升审美眼光和设计实操能力的高效学习方法。
核心价值
古人云：“取法乎上，仅得乎中”。向行业内的标杆作品学习，能帮助我们打破思维局限，开阔眼界，更能激发源源不断的创作灵感。
生活化类比
这就像我们初学绘画时，要先从临摹大师的经典作品入手。通过拆解和模仿他们的运笔技巧、构图逻辑与色彩风格，逐步形成自己的风格体系。
📖 风格各异的优秀范例：创意十足的游戏介绍页 · 设计精美的个人旅行博客 · 内容详实的科普知识网页
💡 思考：这些作品中，你最喜欢哪一个？它的色彩搭配或排版布局，给了你哪些新的启发？
1.7.2013
“取法乎上，仅得乎中”。学习优秀的案例能帮助我们提升审美和设计能力。这里展示了一些优秀的学生作品，大家可以欣赏一下。想一想，你最喜欢哪一个？它的哪些设计给了你启发？
‹#›
课后作业 · 精益求精
▍ 什么是课后作业？
它是课堂学习的延伸，不仅是为了完成任务，更是巩固知识、深化理解和将技能内化为能力的关键环节。
▍ 为什么反复打磨很重要？
“玉不琢，不成器”。只有通过动手实践和不断修改，才能真正消化知识，将普通的练习变成高质量的作品。
▍ 今日任务清单
结合今天的自评与互评，对作品进行最后优化：
1. 补充页面内容，丰富信息维度；
2. 优化色彩搭配与布局，提升视觉美感；
3. 增加更多交互细节，让页面“活”起来。
期待你下节课的精彩展示！
互动思考
合上电脑前，请先思考一下：
你计划为你的网页作品做哪一项“最重要”的改进？
1.7.2013
最后是我们的课后作业。请大家根据今天的评价反馈，对自己的网页进行最后的修改和完善。就像写作文需要反复修改润色一样，不断打磨才能出精品。下节课，我们将进行最终的班级展示，期待看到大家更精彩的作品！
‹#›
感谢聆听！
让我们一起用代码创造更多精彩！
Q & A
1.7.2013
今天的课程到此结束，感谢大家的聆听！希望这次活动能让大家感受到代码创造的乐趣。未来，让我们一起用代码创造更多精彩！现在是提问环节，大家有什么问题可以提出来。
‹#›
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。