桂科版2024 七下信息科技 主题一任务四 组建网站跟我做 课件

(共16张PPT)
七年级下册 主题一 文化遗产线上展
Cloud
任务四 组建网站跟我做
汇报人：WPS
导入
点击导航栏的“制作过程”，网页发生了跳转，这是什么魔法？
01
通过超链接可以将制作好的网页关联起来，形成一个完整的网站
探究
思考
对比浏览器窗口和“开发者工具”的内容
XXXX
点击导航栏的“制作过程”时，网页发生了跳转，这说明了什么？
这在“开发者工具”中对应的 HTML 代码是哪部分？
探究
XXXX
仔细查看“开发者工具”窗口中的代码，能实现网页跳转效果的 HTML
代码有哪些？找一找，比一比，写下它们之间的异同。
探究
超链接就像网页之间的桥梁，常见类型为文本超链接和图像超链接
类型 代码举例
文本超链接 需要显示的文字
图像超链接
不同类型的超链接
XXXX
结合你之前设计的网站结构图，使用箭头来表示跳转的方向，实现网页之间的链接，完善网站链接关系图。
网站链接关系图
XXXX
在设置超链接时，不可使用文件管理系统中的绝对路径来表示网页的位置，要使用相对地址。
层级 代码举例
指向当前文件夹 显示文字
指向子文件夹 显示文字
指向上一层文件夹 显示文字
注意事项
XXXX
观摩学习优秀网站，尝试优化
选择一个你喜欢的网站进行浏览，感受超链接的效果。观察这些超链接是怎么设置的，比如所处的位置是否显眼？点击后网页的跳转是否流畅？有没有遇到过点击了没反应，或者跳转到了错误页面的情况？
谈一谈：你发现设计得好的超链接具有的特点
优化超链接设计
XXXX
改变颜色
制作原料
在 标签内添加一个 style 属性，用于定义内联样式，将超链接文字的颜色设置为白色。
美化超链接显示效果
去掉下划线
制作原料
text-decoration:underline;表示给超链接文字去掉下划线
美化超链接显示效果
设置背景色
制作原料
background-color:yellow;表示给超链接文字设置蓝色背景
美化超链接显示效果
现有一段设置超链接的代码，请你分析参数，并指出对应的效果。
制作原料
href参数值指定了点击本元素后跳转的页面文件，style参数值 指定了本超链接显示文本的格式。
color:white 指定了文字颜色为蓝色
background-color:blue 指定了背景颜色为蓝色
text-decoration:none 指定了没有下划线
padding:10px 指定了内边距为10px
border-radius:5px 指定了圆角边框效果为5px
代码解读
请创新超链接的使用方式，尝试设计隐藏的超链接、限时出现的超链接或通过解谜才能找到的超链接等，增加网页的趣味性和挑战性。
拓展任务
拓展
谢 谢
汇报人：WPS