第17课 制作网页展活动 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-04-13
|
3份
|
22页
|
265人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第17课 制作网页展活动 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | ZIP |
| 文件大小 | 33.37 MB |
| 发布时间 | 2026-04-13 |
| 更新时间 | 2026-04-13 |
| 作者 | 丫丫课件 |
| 品牌系列 | - |
| 审核时间 | 2026-04-13 |
| 下载链接 | https://m.zxxk.com/soft/57309251.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
三分钟教会你创建一个网页。首先创建一个记事本文件，把后缀名改成HTML。双击打开就会看到一个空白网页。空白网页没什么作用，在文件中写入代码，保存并刷新浏览器页面，就可以在浏览器页面看见蜡笔小新四个大字。聪明的你就要问了，蜡笔小新四个字旁边的文字是什么意思？它是用来创建网页的。HTML全称是超文本标记语言，这种用尖括号括起来的叫做标签。标签由开始标签、内容结束标签三个标签部分组成，开始标签和结束标签都要加尖括号，结束标签还必须额外要加斜杠。而整个HTMM网页代码由多个标签组成不同的代码组合，形成一个完整的网页。再开始与结束标签中的符号就是标签名。那么聪明的你肯定知道，标签一定还有其他不同的标签。没错，下面这些就是HTML的其他标签。Div标签主要用于网页布局和内容的结构化划分，通过CSS样式或javascript实现页面元素的组合与定位。A标签作用是定义超链接，用于跳转到其他页面或锚点。嗨的标签用于定义文档的头部信息。EME标签用于在网页中嵌入图片。Input标签用于创建多种不同类型的输入控件，如文本框、复选框、按钮等。Video标签用于嵌入视频内容。标签的种类有很多，以上只列举了一部分。H一标签和span标签都可以用来展示文字，不同的是H一为内容赋予了标题的含义，而span标签只是展示文字。H一标题标签具有给文字加粗放大的作用，span标签文字只是普通的，但是如果H一标签和span标签的文字内容放反了，也是可以显示内容，只不过格式是混乱的。要注意的是，如果格式错误，可能会导致页面无法搜索出来，所以标签是非常重要的。学习了前面的知识，想必你不会再满足于如此简单的网页。最后聪明的你要开始工作了。首先运用em标签在记事本中加入以上代码，banner 2维放在网页的图片名称，images是图片所属文件夹，SRC属性用于指定照片的路径或URA浏览器会根据此路径加载图片。其次，将所选的图片放在名为图片的文件夹中将该文件夹与之前创建的网页代码再放在一个文件夹中，重新刷新该页面就可以看到加入图片后的新的网页。聪明的你又放入了其他图片，最终就可以做出如图所示的HTML网页。今天你学会了吗？
制作网页展示活动
——设计个人数字名片
目录
01 情境导入：什么是个人数字名片？
02 温故知新：常用HTML标签
03 核心实践：制作个人数字名片
05 总结作业：课堂小结
常见HTML标签
<html>
HTML文档的根标签，所有其他标签都嵌套在其中，定义了整个HTML文档。
<head>
包含文档的元数据，如网页标题、字符编码等，这些信息不会直接显示在网页的正文区域。
<title>
定义网页的标题，显示在浏览器的标题栏或标签页上，也用于搜索引擎优化。
<body>
包含网页的所有可见内容，如文本、图片、链接等，是网页的主体部分。
根标签
标题标签
头部标签
主体标签
常见HTML标签
<h1>
HTML中最大的标题标签，通常用于显示最重要的内容，如姓名或主标题。
<p>
用于定义段落的标签，适合展示详细的文本信息，如个人简介或经历描述。
<img>
用于在网页中嵌入图片的标签，必不可少的元素，常用于展示头像或作品展示。
<br>
单标签，用于在文本中强制换行，让排版更加清晰易读。
标题标签
图片标签
段落标签
换行标签
什么是个人数字名片？
在线展示个人信息
集成姓名、头像、职位等核心身份标识，打造专业形象。
多维信息呈现
不仅限于联系方式，更可展示个人简介、兴趣爱好与作品集。
高效社交连接
打破传统交换方式，通过数字链接快速分享，促进深度交流。
制作数字名片网站需要哪些步骤？
数字名片网站制作流程
01 确定主题
明确核心信息，如个人简介、爱好、联系方式等，确立名片定位。
02 搜集素材
准备个人高清头像、姓名、个人简介、爱好描述等图文素材。
03 确定结构
规划页面布局，确定标题、头像位置及文字排列方式。
04 制作网页
使用HTML标签编写代码，搭建数字名片的基本框架结构。
05 美化网页
使用CSS样式调整背景、字体、图片样式，提升视觉美观度。
06 发布网站
将制作好的网页文件上传至服务器，让更多人访问你的数字名片。
活动1：数字名片核心信息头脑风暴
明确核心信息，学会筛选与互评
活动目标
明确个人数字名片的核心信息，学会筛选有价值的展示内容，为后续设计打下基础。
活动步骤
个人思考：列出基础身份、个人标签、联系方式
同桌互评：互相标注推荐/无需/可精简，最终确定8-10条核心信息。
活动小结
数字名片的信息要简洁、有特色、贴合个人定位。通过互评，我们能发现自己忽略的亮点或冗余的信息。
制作个人数字名片（1）
代码实现 (HTML)
<html >
<head>
<title>简单的个人介绍</title>
</head>
<body>
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/07072b76a317459ba02e5f775d022311.png~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=202603101104444BB7915C9208251DF27A&rrcfp=dafada99&x-expires=2089335885&x-signature=dcHipRTQFvDZEh2NYL3PJ5lIceA%3D"
width="150" >
<h1>张三</h1>
<!-- 普通文字介绍 -->
<p>大家好，我是张三，很高兴认识大家！</p>
</body>
</html>
制作个人数字名片（1）——效果预览
活动2：数字名片纸面布局设计
掌握页面布局，为代码编写打基础
活动目标
掌握数字名片的页面布局思路，确定各元素位置关系，将抽象代码转化为直观设计。
个人创作
在方格纸绘制纸面原型，标注HTML标签和美化思路。
设计草图示例
✅ 技巧1：让文字/图片居中——align="center"
核心原理
只需在已掌握的标签（如 h1, p, img）中添加align="center"属性即可实现居中效果。
设计标注小技巧
在设计稿上标注“居中”时，直接写上align="center"，方便后续编码对照。
手写代码范例
<h1 align="center">李四</h1>
<p align="center">我的爱好：书法</p>
<img src="头像链接"align="center">
✅ 技巧2：加横线分隔内容——<hr/>
核心原理：分隔模块
• <hr/> 是“水平线标签”，属于单标签，无需闭合。
• 常用于分隔名片的不同模块（如姓名与简介），让结构更清晰。
基础写法：姓名下方加横线
<h1 align="center">李四</h1>
<hr/><!-- 姓名下方加横线 -->
<p align="center">我的爱好：书法</p>
进阶优化：自定义宽度与居中
代码：<hr width="220" align="center">
效果：生成一条220px宽、居中显示的横线，视觉更精致。
纸面标注小提示
在设计稿“要加横线的位置”画横线，并写上 <hr/>，方便后续对照开发。
技巧3：给内容加边框——style="border: ...;"
核心原理：3个关键属性
border (边框样式)
border: 2px solid #999; (宽度、样式、颜色)
padding (内边距)
padding: 20px; (让内容不紧贴边框，呼吸感)
margin (外边距)
margin: 0 auto; (配合宽度让模块居中显示)
常用范例：给名片加外框
<!-- 给头像加边框 -->
<img src="头像链接" style="border: 3px solid #999;">
<!-- 给整个名片加外框（核心！）-->
<div style="border: 2px solid #333; width: 350px; padding: 20px; margin: 0 auto;">
<!-- 这里放所有名片内容 -->
</div>
设计小提示：在设计稿“要加边框的区域”画框，标注样式代码。
✍️ 动手实践：制作你的专属数字名片
步骤 1：纸面设计
布局规划：在练习本上画出名片草图
标注居中：确定位置并写下 align="center"
标注线条：画出横线并标注 <hr/>
标注边框：画出框线并标注 style="border..."
步骤 2：手写代码
内容替换：填写姓名、班级、爱好等个人信息
代码实现：正确书写居中、横线、边框代码
添加注释：用 <!-- 注释 --> 标注每部分含义
📝 完整范例：带居中/横线/边框的数字名片
index.html
<html>
<head>
<title>我的个人数字名片</title>
</head>
<body>
<divstyle="border: 2px solid #333; width: 350px; padding: 20px; margin: 0 auto;">
<img src="头像链接" width="150"align="center"style="border: 3px solid #999;">
<h1align="center">李四</h1>
<hr width="220" align="center">
<palign="center">大家好，我是李四</p>
</div>
</body>
</html>
AI辅助制作个人数字名片
智能描述生成
向AI模型描述您的设计需求，无需复杂代码基础，即可快速生成原型。
效率显著提升
自动化生成代码，减少繁琐的手动编写工作，让创意快速落地。
个性化定制
根据个人品牌风格，灵活调整配色与布局，打造独一无二的数字名片。
AI生成的个人数字名片示例效果
课堂小结与作业
课程回顾小结
掌握核心标签：HTML结构搭建（h1, p, img, br）
学会基础方法：制作完整的个人数字名片页面
了解美化技巧：使用CSS提升页面视觉效果
探索AI辅助：利用工具提升开发效率与创意
下课
$这是一个字母，把它复制一份，然后分别添加尖括号，后面加上斜杠，中间填入文字。这种格式被称为HTML标签，也有单标签的情况。HTML超文本标记语言，它用来创建和描述网页内容，标签是HTML的主要组成单元。一个标签就像一个盒子，可以按一定顺序摆放，可以嵌套，用盒子装盒子，所以它可以划分出不同的网页区域。网页可以看作盒子的套娃和堆叠。标签有很多种类，dif是最常用的标签，还包括段落、标题、列表、表格、表单、图像和链接等。在标签中，可使用特定的字母提供额外信息，它通常会有一个值，这个字母被称为属性。在这里，该属性代表要跳转的地址，可以有多个属性。部分标签有自己独有的属性，除了A标签，图片的SRC属是图片的地址，还有表单的action type等等。Class是很重要的通用属性，通常结合js和css使用style属性定义了外观，比如宽高边距、颜色浮动，还有动画。如果标签是盒子，那么属性就是写在盒子上面的规则，定义了盒子的行为和外观。当前大多场景遵循HTML5标准，也就是常说的H5雷树引入了语义化标签，它能合理表现网页结构，比如aside section等等，它们等同于def标签。H5还增加了绘图、存储、媒体等更加丰富的内容。一个规范的HTML代码还需要一个脚手架，包括一些必要的数据。所有的页面内容标签需要放在body里面。HTML不具备编程能力，它本身就是网页的结构和内容，是web开发的基础。
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。