第26课 《创意展示我家乡》教学课件-2025-2026学年人教版初中信息科技七年级全一册
2026-05-14
|
34页
|
302人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第26课 创意展示我家乡 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 11.98 MB |
| 发布时间 | 2026-05-14 |
| 更新时间 | 2026-05-14 |
| 作者 | xkw_7550 |
| 品牌系列 | - |
| 审核时间 | 2026-05-14 |
| 下载链接 | https://m.zxxk.com/soft/57852779.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
创意展示我家乡
信息科技 · 数字匠心之旅
七年级信息科技课 | 第26课
1.7.2013
同学们好！今天，我们将开启一场特别的数字匠心之旅。当我们提到“家乡”，脑海里会浮现出怎样的画面？是妈妈做的一道菜，是村口的老槐树，还是过年时热闹的庙会？这节课，我们将学习如何用代码，将这份对家乡的热爱，变成一张精美的“数字名片”。让我们一起，用科技的力量，创意展示我们美丽的家乡！
‹#›
月是故乡明
感受家乡文化，激发创作灵感
✦ 诗词欣赏：
“举头望明月，低头思故乡。” —— 李白 · 《静夜思》
“露从今夜白，月是故乡明。” —— 杜甫 · 《月夜忆舍弟》
“少小离家老大回，乡音无改鬓毛衰。” —— 贺知章 · 《回乡偶书》
💎 文化价值：诗词是中华文化的瑰宝，通过感受古人对家乡的深厚情感，为创作注入独特的文化底蕴。
🎨 创作视角：每个人的家乡都是一首独一无二的诗。今天，我们将用代码作为“笔墨”，来书写属于你的这首“诗”。
课堂互动：你还知道哪些描写家乡的诗词？或者有没有哪首歌，一听就想起了家？
1.7.2013
自古以来，家乡就是文人墨客笔下永恒的主题。无论是李白的“低头思故乡”，还是杜甫的“月是故乡明”，都饱含着对故土深深的眷恋。这些诗词不仅是文学瑰宝，更是我们情感的源泉。今天，我们就将这份情感作为创作的灵感，学习用代码来描绘我们心中的家乡。
‹#›
我的家乡，我来定义！
🏮 家乡名片
梳理地理位置坐标，讲述城市历史沿革，描绘人口与文化特色，建立对家乡的基础认知。
🏞️ 风光掠影
捕捉著名的自然景点，定格山川湖泊的壮丽，展现家乡独有的自然之美与生态画卷。
🍜 舌尖记忆
探寻特色风味美食，记录令人垂涎的传统小吃，让味蕾记忆成为连接游子与家乡的纽带。
🎎 人文风情
深挖民俗节日的仪式感，讲述动人的历史故事与名人轶事，传递代代相传的文化底蕴。
💡 教学互动：如果让你来介绍我们的家乡，你会选择哪几个主题？为什么？（请进行小组讨论）
1.7.2013
那么，如何才能全面地展示我们的家乡呢？我们可以从这几个方面来构思：家乡名片、风光掠影、舌尖记忆和人文风情。这就像为我们的家乡画一幅素描，先勾勒出轮廓，再填充细节。现在，请大家分组讨论一下，如果让你来介绍家乡，你会选择哪些主题呢？
‹#›
今日任务：打造你的“家乡数字名片”
🎯 本课学习目标
知识与技能：掌握HTML核心标签 (h1, p, img, a) 及 CSS基础样式，能够独立搭建结构完整的简单网页。
过程与方法：体验“构思 → 编码 → 调试 → 展示”的完整数字创作流程，学会用技术实现创意表达。
情感与价值：挖掘家乡的风土人情与独特魅力，在技术实践中加深对家乡的热爱，提升文化自信。
📝 最终任务：小组共创
以小组为单位，综合运用今天学到的HTML和CSS知识，
共同制作一张图文并茂的“家乡数字名片”网页。
为你的家乡代言！
课堂互动 · 头脑风暴
“用代码制作一张家乡名片，听起来是不是很酷？
你最想在这张‘名片’上，展示家乡的什么？
你最期待实现哪个网页功能？”
1.7.2013
明确了方向，我们来看看今天的具体任务。我们的目标是掌握HTML和CSS的基础知识，并最终完成一个介绍家乡的“数字名片”网页。这不仅是一次技术学习，更是一次文化探索之旅。大家是不是已经迫不及待想动手了？
‹#›
中篇 · 匠心
从零开始，构建你的数字世界
1.7.2013
好了，现在让我们正式进入今天的核心环节——“匠心”篇。在这一部分，我们将学习如何像一位工匠一样，从零开始，用代码一砖一瓦地构建我们的数字世界。准备好了吗？让我们一起开启这段奇妙的旅程！
‹#›
网页：互联网世界的“数字砖瓦”
理解网页：数字世界的基石
【定义】：网页 (Web Page) 是构成网站的基本单位，它是包含文字、图片、视频等多媒体信息的文档，最终通过浏览器呈现给用户。
【城市与窗户】：若把整个互联网比作一座巨大的“数字城市”，每个网站就是一栋独特的建筑。而我们即将制作的“家乡名片”，正是这城市中一扇精美的窗户，向世界展示家乡风采。
💡 课堂互动：你平时都通过网页做什么？你见过最有趣、印象最深的网页是什么样的？
设计精美的个人主页
充满韵味的地方文化网站
1.7.2013
首先，我们来认识一下什么是网页。简单来说，网页就是我们在浏览器里看到的一个个页面。它就像互联网这座大城市里的一块块砖瓦，构成了丰富多彩的网络世界。我们今天的任务，就是亲手烧制一块属于我们自己的、独一无二的“砖瓦”。
‹#›
HTML：网页的结构与灵魂
认识 HTML，理解其作用
▍核心定义
HTML (HyperText Markup Language) 是描述网页结构的标准标记语言。它不是编程语言，而是用于定义网页内容的结构和含义的标记语言。
▍生活化类比
若把网页比作一栋房子，HTML 就是这栋房子的“钢筋骨架”与“砖瓦结构”。它决定了页面内容的层级、排列，就像决定房子哪里是墙，哪里是门窗。
▍核心价值
HTML 负责向浏览器“说明”页面内容的性质。它告诉浏览器：“这是一个标题”、“那是一个段落”、“这是一张图片”，从而让内容结构化呈现。
教学互动 · 课堂思考：“根据刚才‘房子’的比喻，大家猜一猜，HTML 主要是由什么组成的？是纯文字？是图片？还是一些特殊的符号？”
1.7.2013
要建造网页这座房子，我们首先需要它的“骨架”，这就是HTML。HTML是一种标记语言，它的作用就是定义网页的结构。就像盖房子需要钢筋水泥来搭建框架一样，HTML告诉浏览器，哪里是标题，哪里是段落，哪里是图片。它是网页的基础。
‹#›
搭建我们的“数字小屋”
index.html
<!DOCTYPE html>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<title>我的家乡名片</title>
</head>
<body>
<h1>欢迎来到我的家乡</h1>
<p>这是一个美丽的地方。</p>
</body>
</html>
📝 核心结构解析
•根与头：<html>是所有内容的“容器”；<head>藏着网页的元信息，如字符集、标题。
•主与身：<title>决定了浏览器标签页的名字；<body>才是用户能直接看到的“正文”。
⚠️ 易错警示
HTML 标签通常需要“成对出现”（如 <h1>...</h1>），且必须注意标签的正确嵌套，避免结构混乱。
⚡️ 课堂实操
打开在线编辑器，输入上方代码，保存后观察浏览器标题栏的变化。
1.7.2013
现在，我们来搭建我们数字小屋的地基。这就是HTML的基本结构。大家看这段代码，``告诉浏览器我们用的是最新的HTML5标准。`<html>`是根标签，`<head>`里放的是网页的标题等信息，而我们真正要展示的内容，都放在`<body>`里面。大家注意，标签都是成对出现的，像括号一样，不能少了另一半哦。
‹#›
给网页“画龙点睛”
学习使用 <h1> - <h6> 和 <p> 标签
<body>
<h1>我的家乡：江南水乡</h1>
<h2>一、水乡简介</h2>
<p>江南水乡，河网密布，素有"东方威尼斯"之称...</p>
<h2>二、特色美食</h2> <h3>1. 小笼包</h3>
</body>
💡 知识点
• <h1>到<h6>: 定义标题，级别从高到低。
• <p>: 用于定义正文段落。
⚠️ 易错点
切勿单纯为了让文字变粗而滥用标题标签。
请根据内容的逻辑层级来选择使用。
思考： <h1> 和 <h2> 在显示效果上有何不同？该如何合理使用？
1.7.2013
有了骨架，我们就要开始填充内容了。这一页，我们学习如何给网页“画龙点睛”。
大家请看左边的图片，这是一幅典型的江南水乡图，很有意境吧？我们在网页上描述它时，需要清晰的结构。这就需要用到两组标签：
第一组是标题标签，从 <h1> 到 <h6>，就像我们写文章的大标题、小标题一样，数字越小，级别越高。比如 <h1> 通常用作页面的主标题，最重要；而 <h3> 可能就是某个分类下的子标题。
第二组是段落标签 <p>，专门用来放正文内容。
右边的代码框展示了一个简单的结构，大家可以看到“我的家乡”用了 h1，“水乡简介”和“特色美食”用了 h2，这样层级非常分明。这里有一个易错点要提醒大家：不要为了让文字变粗、变大，就随意用 h1 标签。要根据内容的逻辑关系来选择，这样搜索引擎才更懂你的网页。
最后，大家思考一下底部的问题：h1 和 h2 在显示效果上有什么不同？我们在实际写代码时，应该如何合理使用它们？
‹#›
笔墨丹青：为网页换上国风字体
▍ 初识 CSS：网页的“装修师”
定义：CSS (层叠样式表) 是用来描述网页表现形式的“装修手册”。
类比：如果 HTML 是房子的钢筋骨架，那么 CSS 就是决定风格的软装与配色。
<style>
h1 { font-family: "楷体", "思源宋体";color: #8B1E3F;}
p { font-family: "微软雅黑";font-size: 16px;}
</style>
▍ 核心知识点
•<style> 标签：HTML文档中嵌入样式的容器。
•font-family：指定字体，如“楷体”、“微软雅黑”。
•color / font-size：分别控制文字颜色和字号大小。
课堂互动时刻
“大家觉得，把标题设置为‘楷体’，搭配‘宫墙红’，是不是能让网页瞬间有了浓浓的中国韵味？”
1.7.2013
房子盖好了，总得装修一下吧？CSS就是我们的装修工具。它可以让我们的网页变得更加美观。比如，我们可以用CSS把标题字体换成更有中国风的楷体，颜色也可以换成典雅的宫墙红。这样，我们的网页就有了独特的风格。
‹#›
一图胜千言：为家乡增添色彩
核心标签 <img> 解析
•<img>：图片标签，属于“自闭合”标签，无需结束标签。
•src (必需)：指定图片文件的路径，告诉浏览器去哪里找图片。
•alt (必需)：为图片提供“替代文本”，图裂时显示，利于无障碍访问。
•width/height：设置图片在网页中显示的宽和高。
⚠️ 高频踩坑：
图片无法显示？90% 都是因为src 路径写错了，请务必检查文件名和文件夹路径。
🖐️ 课堂实操：
准备一张家乡风景照，尝试用 <img> 标签把它“放”到网页里。
<body>
<h1>我的家乡：江南水乡</h1>
<img src="shui_xiang.jpg" alt="江南水乡风景" width="400">
</body>
1.7.2013
俗话说，一图胜千言。一张美丽的图片能让我们的家乡名片更加生动。在HTML中，我们用 <img> 标签来插入图片。
大家请看左边的讲解，这里有几个关键点：第一，这是一个“自闭合”标签，不用写结束标签；第二，有两个属性是绝对不能少的：一个是 src，它告诉浏览器图片在哪里，路径一定要写对，否则图片就显示不出来了，这也是大家最容易出错的地方；另一个是 alt，它是图片的“替补”，在图片加载失败或者读屏软件浏览时发挥作用。
右边展示了一段简单的代码和它展示的效果，大家课后也可以试着找一张家乡的照片，把它放到自己的网页里。
‹#›
为美景“装裱”画框 —— 使用 CSS 美化图片
CSS 代码编辑器
<style>
img{
border: 5px solid#DAA520; /* 琉璃黄边框 */
border-radius: 10px;/* 圆角效果 */
box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
margin: 20px auto;/* 水平居中 */
}
</style>
核心知识点拆解
● border：为图片添加实体边框，模拟“画框”质感。
● border-radius & shadow：圆角和阴影让画面柔和、立体，避免生硬。
● margin: auto：在父容器中实现水平居中，提升版面整齐度。
美学价值
简单的几行样式，就能让普通的图片秒变精致，充满古典艺术气息。
课堂互动
大家觉得给图片加上一个“琉璃黄”的边框，是不是瞬间有了“装裱画”的感觉？
1.7.2013
图片插入后，我们还可以用CSS给它“装裱”一下。比如，给它加上一个琉璃黄色的边框，再设置成圆角，加上一点阴影，是不是立刻就有了古典画框的感觉？这些小小的美化技巧，能让我们的网页瞬间提升一个档次。
‹#›
链接世界：让家乡走向更广阔的舞台
💻 代码示例：学习使用 <a> 标签
<body>
<p>想了解更多关于我们家乡的信息吗？</p>
<a href="https://baike.baidu.com/" target="_blank">点击访问家乡百度百科</a>
</body>
📝 核心知识点解析
•<a>: 锚点标签，是构建互联网“连接”的基石。
•href:必需属性，定义链接跳转的目标网址。
•target="_blank": 点击后在新浏览器窗口打开链接，保留当前页面。
✨ 学习价值
超链接是互联网的“血管”，它能将我们精心制作的“家乡名片”，与权威百科、政府官网等海量网络资源紧密相连。
🖱️ 课堂实操挑战
请大家在浏览器中，查找一个关于你家乡的权威介绍网站，然后模仿左侧代码，编写一个链接，将用户导向该网站。
1.7.2013
我们的家乡名片不能只是一个孤岛，它需要与外界连接。<a>标签就是用来创建超链接的。通过它，我们可以链接到百度百科、政府官网等更多信息源，让访问者可以深入了解我们的家乡。记得加上target="_blank"，这样链接会在新窗口打开，体验更好。
‹#›
指尖上的互动：让链接“活”起来
style.css
a{
color: #1E90FF;/* 天青蓝 */
text-decoration: none;/* 去掉下划线 */
border-bottom: 2px solid transparent;
transition: all 0.3s ease;/* 平滑过渡 */
}
a:hover{
color: #8B1E3F;/* 鼠标悬停时变为宫墙红 */
border-bottom: 2px solid #8B1E3F;
}
核心知识点
•:hover 伪类：用于选中鼠标悬停在上方的元素，触发交互样式。
•text-decoration: none：去除链接默认的下划线，使样式更简洁。
•transition：让颜色、边框等样式变化更平滑，避免生硬的切换。
设计价值
微小的动态效果，能让网页“活”起来，极大地提升用户浏览时的交互感和趣味性。
课堂思考
当你把鼠标移到链接上时，它发生了什么变化？这种“呼吸感”给你什么感觉？
1.7.2013
链接也可以变得更有趣。我们可以用CSS的`:hover`伪类，来设置鼠标悬停时的效果。比如，当鼠标移到链接上时，文字颜色变了，还出现了下划线。这种小小的互动，能让用户感觉到网页是“活”的，大大提升了用户体验。
‹#›
匠心小筑：我们的HTML工具箱
<h1> - <h6>
标题标签
定义不同级别的标题，用于文章的层级划分。
<h1>我的家乡</h1>
<p>
段落标签
定义一个文本段落，是承载正文内容的基础。
<p>这是一段介绍</p>
<img>
图片标签
在网页中插入图片，让页面图文并茂。
<img src="pic.jpg" alt="...">
<a>
链接标签
创建超链接，实现页面间的跳转和互联。
<a href="url">链接</a>
<style>
样式标签
用于嵌入CSS样式代码，美化网页外观。
<style>{...}</style>
教学互动时刻
🎮快速问答：老师说出标签名称，同学们请迅速回答它的核心作用！
1.7.2013
好了，让我们来整理一下我们的工具箱。今天我们学习了几个核心的HTML标签，包括标题标签<h1>到<h6>，段落标签<p>，图片标签<img>，链接标签<a>，以及用于嵌入样式的<style>标签。这些是我们构建网页的基础，大家一定要记牢。
‹#›
妙笔生花：我们的CSS调色盘
📝 回顾和总结已学的 CSS 样式
CSS 属性 主要作用 代码示例
font-family / color / size 设置字体、文字颜色及大小 font-family: "楷体"; color: #8B1E3F;
border / radius / shadow 设置边框样式、圆角与阴影效果 border: 2px solid #DAA520; border-radius: 10px;
margin / :hover 实现水平居中与鼠标悬停交互效果 margin: 0 auto; a:hover { color: red; }
💡 课堂挑战：谁能快速上手，用今天学到的样式，把页面标题改成蓝色，并给正文段落加上浅灰色背景呢？
提示：善用 color 和 background-color 属性！
1.7.2013
接下来是我们的CSS调色盘。我们学习了如何设置字体、颜色、边框、圆角、阴影，以及如何实现鼠标悬停效果。这些样式就像画家手中的颜料，可以让我们的网页变得五彩斑斓。大家可以尝试一下，用这些属性来创造自己独特的风格。
‹#›
实战演练：开工！打造你的“家乡数字名片”
📝 任务分解清单
01. 准备素材：收集1-2张家乡代表性图片，撰写100字左右的简介文案。
02. 搭建框架：创建HTML文件，构建基础骨架（包含 html、head、body 标签）。
03. 填充内容：用<h1>做标题，<p>写简介，<img>插入图片，<a>添加百科/官网链接。
04. 国风美化：使用内联样式，为标题设置典雅的颜色与字体，为图片添加边框和阴影，给链接增加悬停变色效果。
⏳ 限时挑战
20 分钟
👩🏫 教学互动
教师全场巡视，为大家答疑解惑
遇到技术问题，请举手示意
1.7.2013
理论学习结束，现在是实战演练时间！请大家以小组为单位，开始制作你们的“家乡数字名片”。我已经把任务分解成了几个步骤，大家可以按照这个流程来操作。如果遇到问题，可以随时举手问我。现在，开工！
‹#›
问题排查 · 图片为何不显示？
巡回指导与答疑（一）
❖ 常见原因
1. src 路径错误 (最常见)：文件名大小写不一致 (如 Shui_Xiang.jpg vs shui_xiang.jpg)；或图片文件未放入项目文件夹中。
2. 图片文件损坏：可尝试重新上传图片文件，确认源文件未损坏。
3. alt 属性缺失：虽不直接影响图片显示，但不符合代码规范，建议养成书写习惯。
❖ 解决方案
✓ 仔细核对代码中的文件路径与文件名，注意区分大小写。
✓ 保持图片文件与 HTML 代码文件在同一个项目文件夹下。
✓ 使用在线编辑器时，请务必确认图片已正确上传到编辑器。
1.7.2013
在同学们实操的过程中，我发现一个常见问题：图片不显示。大家不要着急，这通常是`src`路径写错了。大家要仔细检查文件名的大小写，以及图片是不是放在了正确的位置。记住，计算机是很“死板”的，一个字母都不能错。
‹#›
问题排查 · 样式为何不生效？
巡回指导与答疑（二）
❖ 常见原因
1. 代码位置错误：CSS代码应写在HTML文档的 `<head>` 标签内的 `<style>` 标签中，不可置于 `<body>` 标签里。
2. 单词拼写错误：属性名或值拼写有误，例如误写 `coler` 而非正确的 `color`。
3. 选择器使用错误：未准确选中目标元素，导致样式无法正确应用。
❖ 解决方案
✔ 检查代码结构：确认所有样式代码均包含在 `<head>` 中的 `<style>` 标签内。
✔ 检查拼写细节：仔细核对每一个属性名称及取值的拼写是否准确无误。
✔ 检查选择器：确认选择器（如标签选择器 `h1`、`p` 或类选择器等）是否正确匹配目标元素。
1.7.2013
另一个常见问题是样式不生效。大家要记住，CSS代码一定要放在`<head>`里的`<style>`标签中。另外，一定要仔细检查拼写，比如把`color`写成`coler`，计算机就不认识了。写代码就像写作文，一定要细心。
‹#›
创意分享 · 优秀代码片段
巡回指导与答疑（三）
在刚才的巡视中，我发现了一些同学写的非常棒的代码片段，逻辑清晰、注释规范，非常值得大家学习和参考。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"> <title>我的家乡</title>
<style> /* 页面整体样式定义 */ </style>
</head>
<body> </body>
</html>
💡 亮点点评：这位同学的代码结构非常清晰，标签闭合完整，关键逻辑处加上了清晰的注释，极大提升了代码的可读性与可维护性，是值得大家学习的榜样！
✨ 学生优秀作品演示 - 首页效果
规范代码的基石，造就美观网页的呈现
1.7.2013
在指导过程中，我也看到了很多优秀的作品。比如这位同学的代码，结构非常规范，清晰易读。写代码不仅要实现功能，更要注重规范和美观，这体现了一个程序员的专业素养。让我们为他鼓掌！
‹#›
创意分享 · 优秀设计思路
巡回指导与答疑（四）
学生优秀作品展示
在这次“家乡名片”设计中，不少同学的作品令人眼前一亮，亮点主要体现在这三个方面：
巧妙的色彩搭配
借鉴青花瓷风格，以天青蓝与纯白为主调，清新脱俗，极具辨识度。
独特的版式布局
打破常规横平竖直的排版，图文错落有致，构建出丰富的视觉层次与呼吸感。
富有情感的文案表达
将个人情感融入文字，生动描绘家乡风貌，让观者共情，充满温度。
1.7.2013
除了代码，我还看到了很多有创意的设计。有的同学用了青花瓷的配色，有的同学设计了独特的布局，还有的同学写的文案非常感人。技术是基础，但创意才是灵魂。希望大家都能保持这份创新精神。
‹#›
佳作共赏：我们的家乡名片
—— 展示学习成果 · 多元评价 · 思维碰撞 ——
展示流程
❶ 作品展示：邀请2-3个小组，上台演示并展示最终作品效果。
❷ 思路分享：作者阐述选题缘由、设计思路，以及制作过程中的难点与解决方法。
❸ 互评交流：其他同学进行点评，指出作品的亮点与可优化之处。
❹ 教师总结：总结共性问题，肯定大家的创意与技术实现。
多维评价标准
📝 内容完整性
标题、简介、图片、链接等要素是否齐全。
🔧 技术正确性
代码书写规范，网页功能正常、无报错。
🎨 设计美观性
是否运用国潮风格，页面布局合理、色彩协调。
💡 创意独特性
内容与视觉呈现是否有个人特色与巧思。
互动时刻：
“你最喜欢今天展示的哪一个作品？为什么？”
1.7.2013
时间到！我看到大家都完成了自己的作品。现在，让我们一起来欣赏几幅佳作。请这几个小组的代表来展示一下你们的作品，并分享一下你们的设计思路。其他同学也要认真看，待会儿要给出你们的评价哦。我们可以从内容、技术、设计和创意四个维度来进行评价，最后也欢迎大家踊跃发言，说说自己最喜欢的作品和理由。
‹#›
CHAPTER 04
结尾 · 致远
总结收获 · 展望未来
1.7.2013
非常精彩的展示！看到大家的作品，我感到非常自豪。现在，我们进入最后一个篇章——“致远”。在这一部分，我们将总结今天的收获，并一起展望未来。
‹#›
今日收获：从0到1的数字之旅
核心技术 · 基石
HTML (网页骨架):
构建页面基础结构：标题(h1)、段落(p)、图片(img)与链接(a)
CSS (网页妆容):
定制视觉体验：字体样式、色彩搭配、边框阴影及交互效果(hover)
设计理念 · 神韵
国潮风格 (Chinese Style):
融合传统文化与现代审美，通过色彩、字体与排版的精妙配合，展现独特的国风之美。
“创意展示我家乡”：将技术与情感结合，为家乡代言。
项目流程 · 全览
构思→搭建→填充
↓
美化→分享展示
“从无到有，体验完整的数字创作闭环。”
💬 教学互动：通过这节课，你最大的收获是什么？
1.7.2013
让我们一起回顾一下今天的收获。我们从0开始，学习了HTML作为网页的骨架，CSS作为网页的妆容，了解了国潮设计理念，并完整地体验了一个项目从构思到分享的全过程。这是一次真正的从0到1的数字之旅。
‹#›
代码为笔，文化为墨
—— 将技术学习与文化自信相结合 ——
今天，我们不仅学会了制作网页的技术，更重要的是，我们学会了如何运用现代科技来传承和弘扬家乡的优秀传统文化。每一行代码，都承载着我们对家乡的热爱；每一个设计，都展现着我们的文化自信。
“希望同学们能继续保持这份匠心，用信息技术创造更多美好的作品。”
💡 教学互动 · 共同倡议
让我们一起，做中华文化的传承者和创新者！
1.7.2013
技术是冰冷的，但文化是温暖的。今天，我们用代码作为笔，用家乡文化作为墨，共同书写了属于我们这一代人的篇章。希望大家能记住，技术不仅是工具，更是传承文化、表达情感的桥梁。让我们一起，做中华文化的传承者和创新者！
‹#›
拓展任务一：丰富你的“家乡名片”
巩固所学知识，进行简单扩展
01增加内容
为你的网页增加“特色美食”或“风景名胜”板块，让名片内容更丰富饱满。
02优化布局
尝试调整页面内的图片大小、文字排版和模块间距，让整体视觉更和谐美观。
03更换风格
尝试使用另一套国潮色板，例如青花瓷风格（天青蓝 #1A5C69 + 象牙白 #FFFFF0），打造不一样的韵味。
💬 教学互动 · 思考提问
在开始动手之前，先思考一下：你最想为你的家乡名片增加哪个板块？是令人垂涎的美食，还是令人向往的风景？
1.7.2013
课程结束了，但我们的创作之旅才刚刚开始。这里有一个初级挑战任务，大家可以尝试为自己的家乡名片增加更多内容，优化布局，或者换一种风格。比如，试试青花瓷风格的配色，看看会是什么效果。
‹#›
拓展任务二：打造“家乡美食地图”
🎓 学习新知识，实现更复杂的图文排版功能
📝 任务清单
1.学习标签：掌握无序列表标签 <ul> 与列表项标签 <li> 的用法。
2.制作清单：列出3-5道你最喜欢的家乡特色美食名称。
3.图文并茂：尝试为每一道美食配上一张小图，让页面更生动。
💻 代码示例参考
<h2>家乡美食</h2>
<ul>
<li><img src="food1.jpg" width="50">美食一</li>
</ul>
💡 教学预告：列表是网页中非常常用的元素，无论是排行榜、待办事项还是导航菜单都会用到它。下节课，我们将一起深入探索列表的更多用法！
1.7.2013
如果觉得初级挑战太简单，这里有一个中级挑战：学习使用列表标签，制作一个图文并茂的“家乡美食地图”。列表是网页中非常常用的元素，掌握它对你未来的学习很有帮助。有兴趣的同学可以提前探索一下！
‹#›
拓展任务三：构建你的“家乡网站”
探索多页面网站的制作逻辑与方法
核心任务
1.创建新页面：新建HTML文件（如 food.html），专注介绍家乡美食。
2.创建链接：在首页（index.html）设置跳转链接，串联新页面。
3.丰富网站：尝试扩展“风景”、“文化”等专题页，构建完整的小型网站。
学习价值
跳出单页思维，通过实操掌握多页面网站的基本构成逻辑。理解“链接”在Web世界中的桥梁作用，为未来学习更复杂的前端工程化开发打下坚实基础。
教学互动
展示成熟的多页面个人网站或城市官网案例截图，直观呈现页面跳转逻辑与视觉统一性，激发大家动手搭建专属“家乡名片”的探索欲。
1.7.2013
对于学有余力的同学，我准备了一个高级挑战：尝试构建一个多页面的“家乡网站”。你可以创建专门的美食页、风景页，然后用链接把它们连接起来。这能让你初步了解网站的构成，为未来成为一名真正的网站开发者打下坚实的基础。
‹#›
学海无涯：继续探索的宝藏
推荐资源 · 助你进阶
🖥️ 在线编辑器：Glitch, Replit, CodePen
🌐 技术学习网站：W3School, MDN Web Docs
🎨 配色灵感工具：Adobe Color, Coolors
🖼️ 高清图片素材：Unsplash, Pexels
✎ 创意字体资源：字魂网, 站酷字库
教学互动 · 温馨提示
“同学们在探索浩瀚的网络资源海洋时，技术的提升固然重要，但更要时刻绷紧一根弦——”
一定要注意版权问题！
尊重原创，合规使用素材，保护知识产权。
1.7.2013
学习的道路是无止境的。这里我为大家推荐一些优秀的学习资源，包括在线编辑器、学习网站、色彩和图片工具等。希望大家能利用这些资源，继续探索信息技术的奥秘。同时也要提醒大家，使用网络资源时一定要注意版权问题。
‹#›
思辨时刻
01 / 多元化展示
除了制作网页，我们还可以探索哪些信息技术手段来展示家乡独特的魅力？
💡 启发思考：短视频Vlog、互动小程序、动态数据可视化图表等。
02 / 真实性与准确性
在制作“家乡展示”作品时，面对网络上纷繁复杂的信息，如何确保我们展示的历史、文化、地理内容是客观、真实且准确的？
💡 启发思考：权威信源交叉验证、实地调研考察、向长辈求证。
03 / 未来展望
随着科技发展，你认为未来的“家乡展示”会变成什么样子？是否可以实现足不出户、身临其境的沉浸式体验？
教学互动 · 小组讨论请大家以小组为单位，围绕以上三个维度展开5分钟的自由讨论，稍后我们将邀请几位代表来分享你们的奇思妙想。
1.7.2013
最后，让我们一起思考几个问题。除了网页，我们还能用什么方式展示家乡？如何保证我们展示内容的真实性？未来的“家乡展示”又会是什么样子？比如，会不会有一天，我们可以通过VR技术，身临其境地游览家乡？大家可以分组讨论一下。
‹#›
你的家乡，独一无二
—— 教师寄语 ——
“每一个人的家乡都是独一无二的宝藏。希望今天这堂课，能成为大家探索家乡之美、学习信息技术的一个新起点。
愿你们带着这份热爱与好奇，不断学习，不断创造，用科技的力量，让世界看到你家乡的精彩！”
1.7.2013
同学们，每一个人的家乡都是独一无二的宝藏。今天这堂课只是一个开始，希望它能点燃你们探索家乡之美和学习信息技术的热情。愿你们带着这份热爱与好奇，不断学习，不断创造，用科技的力量，向世界展示你们家乡的精彩！
‹#›
谢谢观看
期待看到你们更精彩的作品！
THANKS FOR WATCHING
1.7.2013
今天的课程到此结束，谢谢大家！期待在未来看到你们更精彩的作品。下课！
‹#›
核心知识点汇总
HTML 基础结构
● 文档声明：<!DOCTYPE html> (HTML5标准)
● 骨架标签：<html> / <head> / <body>
● 基础内容：<title> (页面标题) | <h1>-<h6> (层级标题) | <p> (段落)
● 媒体链接：<img> (含 src/alt 属性) | <a> (含 href 属性，创建跳转链接)
CSS 样式修饰
● 样式嵌入：<style> 标签包裹样式代码
● 文本样式：font-family (字体) | color (文字颜色)
● 边框与阴影：border (边框) | border-radius (圆角) | box-shadow (投影效果)
● 布局与交互：margin (外边距/居中) | :hover (鼠标悬停交互)
国潮设计理念
● 色彩美学：
选取具有代表性的“宫墙红”与“琉璃黄”为主色调，营造庄重、典雅的视觉氛围。
● 字体选择：
搭配“楷体”展现中国书法韵味，结合现代无衬线字体，实现传统与现代的完美平衡。
● 风格内核：
保留国风的神韵，同时符合现代网页的排版与阅读习惯，打造独特的文化质感。
1.7.2013
这一页是本节课的核心知识点汇总，方便大家复习和回顾。从HTML的基本结构到CSS的常用样式，再到国潮设计理念，这些都是我们今天学习的重点。希望大家课后能好好消化。
‹#›
参考资料与信息来源
01.网页设计实战项目：我的家乡主题网站开发| https://blog.csdn.net/weixin_42599908/article/details/151912516【CSDN博客】
02.5分钟搞定家乡主题网页设计：HTML+CSS实战教程| https://wenku.csdn.net/column/79qpgxcvad8【CSDN文库】
03.web期末作业网页设计——我的家乡（网页源码）| https://blog.csdn.net/weixin_58860615/article/details/126566233【CSDN博客】
04.初中信息技术创意展示我家乡表格教学设计| https://m.51jiaoxi.com/doc-17354785.html【教习网】
05.第26课 创意展示我家乡 教学设计| https://www.zxxk.com/soft/56838292.html【学科网】
1.7.2013
最后，列出了本次课件制作所参考的部分资料来源，供大家查阅和深入学习。学海无涯，希望大家能保持学习的热情。
‹#›
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。