第20课组建网站跟我做任务单 2024—2025学年人教版（2024）初中信息科技七年级全一册
2025-06-25
|
5页
|
215人阅读
|
618人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第20课 组建网站跟我做 |
| 类型 | 学案-学习任务单 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | DOCX |
| 文件大小 | 49 KB |
| 发布时间 | 2025-06-25 |
| 更新时间 | 2025-06-25 |
| 作者 | 深耕浅出 |
| 品牌系列 | - |
| 审核时间 | 2025-06-25 |
| 下载链接 | https://m.zxxk.com/soft/52744613.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
人教版2024初中信息科技七年级全一册·第四单元校园活动线上展
第20课组建网站跟我做任务单
姓名： 班级：
学习目标：
1、 熟悉超链接的用法，能将分散的页面组织起来。
2、 知道评测网站需要关注的因素。
3、 能选择适当方式展示网站
学习活动一：表格标签运用
任务要求：使用HBuliderX打开“实践活动1——表格标签.html”，修改代码，构造3行4列的表格，具体表格呈现内容如图所示，保存修改后的代码
源代码
实现效果
<html>
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</html>
学习活动二：网站图像超链接
任务要求：使用HBuliderX打开“学生作业-待完善”文件夹中的“index.html”，补全代码缺失部分①②，实现功能：1、点击机器狗图片打开page1.html网页；2、点击风力发电图片打开page3.html网页
源代码
<html>
<h1>科技节</h1>
<style>
td {
padding: 10px; /* 单元格内边距 */
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
background-color: #f0f0f0; /* 背景颜色 */
}
table img {
max-width: 200px; /* 设置最大宽度 */
max-height: 200px; /* 设置最大高度 */
object-fit: contain; /* 保证图片完整显示，可能会有空白区域 */
</style>
<table border="1">
<tr>
<td>3D打印</td>
<td>机器狗</td>
<td>风力发电</td>
</tr>
<tr>
<td>3D打印是快速成型技术的一种，又称增材制造。</td>
<td>机器狗不仅仅可以爬山涉水，还可以承载较重的货物。</td>
<td>风力发电是指把风的动能转化为电能。</td>
</tr>
<tr>
<td><a href='page2.html'><img src="images/3D.jpg"></a></td>
<td>①</td>
②
</tr>
</table>
</html>
学习活动三：网站文本超链接
任务要求：使用HBuliderX打开“学生作业-待完善”文件夹中的“page2.html和page3.html文件”，补全代码缺失部分①，实现功能：1、在机器狗网页通过点击“主页”文件返回网站主页；2、在风力发电网页通过点击“主页”文件返回网站主页
3D打印网页代码
<html>
<head>
<title>校园科技节</title>
<style>
body{
background: linear-gradient(180deg, rgba(122,208,237,1) 0%, rgba(235,241,255,1) 53%);
}
h2{
font-family:黑体;
font-size:50px;
color:#DB7093;
}
h1{
font-family:黑体;
font-size:40px;
color:#DB7093;
}
p{
color:#000000;
font-family:隶书;
font-size:24px;
text-indent:2em;
text-width:400px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body >
<center>
<h2>科技节体验项目——</h2><h1> 3D打印</h1>
</center>
<p></p><p></p>
<p>3D打印，即三维打印，是一种以数字模型文件为基础，运用金属或塑料等粉末材料以及黏合剂，通过逐层打印的方式来构造物体的技术。当三维打印机为小型化的设备时，此技术称为桌面三维打印。</p>
<center>
<img src="images/3D.jpg" width="348" >
<p></p>
</center>
<p></p>
<center>
①
</center>
</body>
</html>
风力发电网页代码
<html>
<head>
<title>校园科技节</title>
<style>
body{
background: linear-gradient(180deg, rgba(122,208,237,1) 0%, rgba(235,241,255,1) 53%);
}
h2{
font-family:黑体;
font-size:50px;
color:#DB7093;
}
h1{
font-family:黑体;
font-size:40px;
color:#DB7093;
}
p{
color:#000000;
font-family:隶书;
font-size:24px;
text-indent:2em;
text-width:400px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<center>
<h2>科技节体验项目——</h2><h1> 风力发电</h1>
</center>
<p>风力发电是指把风的动能转为电能。风力发电不需要使用燃料，也不会产生辐射或空气污染，因而成为发展绿色能源的焦点之一。我国海上风能资源丰富，加快海上风电项目建设，对于促进沿海地区治理大气雾霾、调整能源结构和转变经济发展方式具有重要意义。</p>
<p>
<center>
<img src="images/fenglifadian.jpg" width="348" >
</p>
</center>
<center>
①
</center>
</center>
</body>
</html>
操作锦囊：
❉HTML 表格由 <table> 标签来定义。
✽每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。
<html>
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</html>
学科网（北京）股份有限公司
$$
资源预览图
1
2
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。