（义务教育版）七年级
全一册
第20课
组建网站跟我做
单元主题
单元名称
课名称
核心内容
第四单元
校园活动线上展
第16课探秘网页与代码
网页与HTML代码、HTML标签、网页数据的呈现
第17课制作网页展活动
标签格式、用HTML代码制作网页
第18课美化网页方法多
HTML代码美化网页、串联样式表美化网页
第19课多人协同效率高
多人协同制作网页、Markdown代码
第20课组建网站跟我做
网站建设流程、发布网站
学习目标
熟悉超链接的用法，能将分散的页面组织起来。
知道评测网站需要关注的因素。
能选择适当方式展示网站。
了解网站发布的相关法律法规。
激趣导入
【问题情境】
我们平时看到的网站包含多个页面，浏览时可以在这些网页间跳转。这种交互是如何实现的呢？
激趣导入
【知识建构】
页面跳转的主要实现方式——超链接。超链接是网页中实现页面跳转和交互的核心元素，通常以文本、图片或按钮等形式呈现，通过HTML的a标签定义，只需在href属性中指定目标URL，用户点击后浏览器便会加载对应网页或资源，不仅能连接同一网站的不同页面，还可跳转至外部网站、下载文件或定位到当前页面的指定位置，是构建网页导航结构和信息关联的基础技术。
激趣导入
【任务驱动】
学习活动
一、用超链接组织网站中的网页
二、展示网站
三、实践探究
学习活动
学习活动
一、用超链接组织网站中的网页
一个完整的网站，通常包括主页和与之相连的其他网页。
学习活动
一、用超链接组织网站中的网页
现在，主页和网站需要的其他网页都已制作完成，要考虑如何在网页之间建立超链接了。
设置超链接的常用代码
注释：a/a：超链接标签 href：链接地址
类型
代码举例
图像超链接
ahref=链接地址imgsrc=图像地址/a
文本超链接
ahref=链接地址显示文字/a
学习活动
一、用超链接组织网站中的网页
参照下图，把自己制作的页面跟网站的主页用超链接关联起来。
学习活动
一、用超链接组织网站中的网页
【自主探究】
每位同学完成自己的子页面与网站主页的超链接，包含图像链接和文本链接。并从行文、选图、布局、链接等角度对网站进行检查，并及时修正存在的问题。
条目
检查结果
文字准确无误
图像呈现恰当
链接跳转正确
页面布局符合阅读习惯
内容健康、积极向上
学习活动
学习活动
二、展示网站
网页制作完成后，就可以把它发布到局域网啦！就像把画好的画挂到班级展示墙，先把所有网页文件放进一个文件夹，用电脑启动一个简易服务器，再找到服务器的IP地址，在浏览器地址栏输入“http://IP地址:端口号”，大家就能在同一网络里看到你的作品啦，轻松实现网页分享～
学习活动
二、展示网站
【实践探究】
1．选择一台计算机担当服务器。
学习活动
二、展示网站
2．把小组制作的网页，涉及的图像等，汇总保存到名为Web的文件夹中。
3．按照服务器软件的要求，把Web文件夹移到指定位置后运行该软件，并记录服务器的IP地址和端口。
组内服务器的IP地址是：，端口是：。
学习活动
二、展示网站
4．组内成员访问本组制作的网站，浏览其中的网页，如有问题及时修正。
学习活动
二、展示网站
【合作探究】
各小组轮流展示作品，进行自评和互评。
学习活动
学习活动
三、实践探究
如果希望把制作的网站发布到互联网中，那么需要注意些什么？
学习活动
三、实践探究
【知识链接】
《未成年人网络保护条例》第三十一条：
网络服务提供者为未成年人提供信息发布、即时通讯等服务的，应当依法要求未成年人或者其监护人提供未成年人真实身份信息。未成年人或者其监护人不提供未成年人真实身份信息的，网络服务提供者不得为未成年人提供相关服务。
课堂小结
一、用超链接组织网站中的网页
超链接是网页中实现页面跳转和交互的核心元素，不仅能连接同一网站的不同页面，还可跳转至外部网站、下载文件或定位到当前页面的指定位置。
二、展示网站
通过服务器发布网站后，在浏览器地址栏中输入网站对应的网址，就能通过网络访问该网站的主页了。
三、实践探究
网站发布的相关法律法规。
拓展-提升
查阅相关资料，把单板计算机等设备接入局域网，把它设为万维网服务器，然后利用它展示制作的网站。