【核心素养目标】主题一 任务四《组建网站跟我做》课件+素材-【桂科版2025】《信息科技》七下
文档属性
| 名称 | 【核心素养目标】主题一 任务四《组建网站跟我做》课件+素材-【桂科版2025】《信息科技》七下 | | |
| 格式 | zip | ||
| 文件大小 | 60.9MB | ||
| 资源类型 | 试卷 | ||
| 版本资源 | 桂科版 | ||
| 科目 | 信息技术（信息科技） | ||
| 更新时间 | 2025-03-10 17:10:05 | ||
文档简介
第一单元 第4课
组建网站跟我做
（桂科版）七年级
下
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
信息意识
计算思维
数字化学习与创新
信息社会责任
不创建或传播虚假信息的链接。
避免恶意链接对用户造成误导或伤害。
尝试创新的超链接形式，如动态链接、多媒体链接或交互式导航菜单。提升网页的互动性和吸引力。
能够将复杂的网页结构分解为多个页面和模块。通过超链接实现这些页面和模块之间的逻辑连接。
理解超链接在网页设计中的作用，资源或外部网站。认识到超链接对于信息传播和用户导航的重要性。
02
新知导入
活动背景
壮壮和小伙伴们各自负责的网页已经设计得差不多了，接下来就要考虑如何将制作好的网页关联起来，形成一个完整的网站。壮壮回想起以前认识的老朋友——“超链接”。网页之间的超链接设置跟以前学习的超链接设置一样吗？
网页之间的超链接是指通过一个链接将一个网页与另一个网页连接起来。这种链接可以是：站内链接或者站外链接。
02
新知导入
活动目标
1、理解网页设计超链接的跳转过程。
2、了解开发着工具的用法。
3、体验网页之间的跳转过程。
03
新知讲解
一、页面的跳转
03
新知讲解
二、开发者工具
对比浏览器窗口和“开发者工具”的内容。
03
新知讲解
点击导航栏的“制作过程”时，网页从图 1-4-1跳转到了图 1-4-2，这说明了什么？这在“开发者工具”中对应的 HTML代码是哪部分？
探究实践
制作过程。
03
新知讲解
仔细查看图 1-4-3 的“开发者工具”窗口中的代码，能实现网页跳转效果的 HTMI代码有哪些？找一找，比一比，写下它们之间的异同。
探究实践
制作原料
制作过程
制作过程
。 03
新知讲解
超链接就像网页之间的桥梁，常见类型为文本超链接和图像超链接，对应的常见代码如下表所示。其中，
小贴士
03
新知讲解
三、页面跳转的实现方式
类型 代码举例
文本超链接 需要显示的文字
图像超链接
新知讲解
结合你之前设计的网站结构图，使用箭头来表示跳转的方向，实现网页之间的链接，完善表内的网站链接关系图。
马上行动
03
新知讲解
在设置超链接时，不可使用文件管理系统中的绝对路径来表示网页的位置，要使用相对地址。如果目标文件与当前文件在同一目录下，直接使用文件名即可；如果目标文件位于当前文件的子目录中，需要标明子目录名和文件名；如果目标文件位于当前文件的父目录或更上级目录中，可以使用“../”来表示上一级目录，如下表所示。
小贴士
03
新知讲解
小贴士
层级 代码举例
指向当前文件夹 显示文字
指向子文件夹 显示文字
指向上一层文件夹 显示文字03
新知讲解
四、知识讨论
选择一个你喜欢的网站进行浏览，感受超链接的效果。观察这些超链接是怎么设置的，比如所处的位置是否显眼？点击后网页的跳转是否流畅？有没有遇到过点击了没反应，或者跳转到了错误页面的情况？把你的浏览体验记录在下表中和大家分享。
03
新知讲解
四、知识讨论
超链接的形式 所在位置/显示效果 主要作用 我的感受
图像
文本
我发现设计得好的超链接具有的特点：
按钮
列表
锚点链接
导航栏，鼠标悬停时放大
提供视觉吸引力，引导点击
直观、吸引人，易于识别
段落中，下划线并改变颜色
直接引导用户到相关内容
清晰、直接，易于理解
页面底部，悬停时颜色变化
突出重要操作
明显、易点击，提高转化率
侧边栏，项目符号前
组织信息，方便浏览
结构化、易于导航
页面内不同部分
实现页面内快速导航
提高页面内导航效率
直观、清晰、一致、易于访问、提供反馈、增强用户体验。
这些特点确保了超链接不仅在视觉上吸引人，而且在功能上也能满足用户的需求，提高网站的可用性和用户满意度。
04
课堂练习
一、选择题
1、在HTML中，创建指向外部网站的超链接，应该使用哪个标签？( )
A.
2、以下哪个属性用于在新标签页中打开超链接？（ ）
A. href B. target C. src D. alt
3、在HTML中，哪个属性可以为超链接提供额外的信息，当用户将鼠标悬停在链接上时显示？（ ）
A. title B. alt
C. href D. src
B
B
A
04
课堂练习
4、如果你有一个图片链接到一个网页，你应该将
A. B.
5、 HTML超链接属性 。（ ）
以下哪个选项正确描述了HTML中标签的href属性的作用？
A. 定义链接文本的样式
B. 指定链接的目标URL地址
C. 控制链接在何种设备上打开
D. 确定链接文本的显示语言
二、判断题
1、在HTML中，给超链接设置target="_blank"属性时，该链接总会在新的浏览器标签页中打开。( )
A
B
X
04
课堂练习
三、操作题
1、改变颜色，在 标签内添加一个 style 属性，用于定义内联样式。如制作原料，将超链接文字的颜色设置为白色，效果如图所示。
制作原料
04
课堂练习
2、去掉下划线，修改style属性,如制作原料，将超链接文字的下划线效果去掉，效果如图所示。
制作原料
04
课堂练习
3、设置背景色，修改 style 属性，如制作原料，给超链接文字设置背景色效果如图所示。
制作原料
05
拓展延伸
超链接的结构和格式
绝对URL：完整的网址，如 https://www.。
相对URL：相对于当前页面的网址，如 /about 或 ../contact.html。
协议相关：了解不同协议（如 http, https, ftp）对链接行为的影响。
05
拓展延伸
超链接的属性
hreflang：指定链接内容的语言，有助于多语言网站的SEO。
type：指定链接资源的MIME类型，有助于浏览器正确处理资源。
05
拓展延伸
链接的动态生成
JavaScript：使用JavaScript动态生成链接，如在用户交互后创建链接。
服务器端语言：如PHP、Python等，可以在服务器端生成动态链接。
05
拓展延伸
链接的安全性
防止链接欺骗：确保链接指向正确的地址，避免用户被误导到恶意网站。
安全协议：使用HTTPS协议来保护链接的数据传输安全。
06
课堂总结
1
引入新知内容
组建网站
2
学习超链接的使用方法
3
学习使用超链接的注意事项
4
完成课题练习
5
进行相关知识拓展
1
2
3
4
5
07
板书设计
组建网站
1、进行新知引入
2、学习页面的跳转方式
3、学习超链接的使用
4、完成课堂练习
5、进行知识拓展
课后作业。
1、完成页面跳转练习
08
课后作业
1、在HTML中创建一个指向 "https://www." 的超链接，并且当用户点击这个链接时，它应该在新的浏览器标签页中打开。请填写以下HTML代码中的空白部分：
点击访问示例网站。
点击访问示例网站
08
课后作业
2、设计一个简单的网页导航栏，包含三个超链接，分别指向“首页”、“关于我们”和“联系我们”三个页面。
使用HTML编写代码。
要求：
链接文本应该清晰描述链接的目的。
假设这三个页面的文件名分别为 index.html、about.html 和 contact.html，它们都位于网站的根目录下。
08
课后作业
https://www.21cnjy.com/recruitment/home/fine