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

七年级下册主题一文化遗产线上展

Cloud

任务四组建网站跟我做

导入

点击导航栏的“制作过程”，网页发生了跳转，这是什么魔法？

01

通过超链接可以将制作好的网页关联起来，形成一个完整的网站

探究

对比浏览器窗口和“开发者工具”的内容

XXXX

点击导航栏的“制作过程”时，网页发生了跳转，这说明了什么？

这在“开发者工具”中对应的HTML代码是哪部分？

探究

XXXX

仔细查看“开发者工具”窗口中的代码，能实现网页跳转效果的HTML

代码有哪些？找一找，比一比，写下它们之间的异同。

探究

超链接就像网页之间的桥梁，常见类型为文本超链接和图像超链接

类型

代码举例

文本超链接

ahref=链接地址需要显示的文字/a

图像超链接

ahref=链接地址imgsrc=图像位置/a

不同类型的超链接

XXXX

结合你之前设计的网站结构图，使用箭头来表示跳转的方向，实现网页之间的链接，完善网站链接关系图。

网站链接关系图

XXXX

在设置超链接时，不可使用文件管理系统中的绝对路径来表示网页的位置，要使用相对地址。

层级

代码举例

指向当前文件夹

ahref=文件名.html显示文字/a

指向子文件夹

ahref=子文件夹名/文件名.html显示文字/a

指向上一层文件夹

ahref=../文件名.html显示文字/a

注意事项

XXXX

观摩学习优秀网站，尝试优化

选择一个你喜欢的网站进行浏览，感受超链接的效果。观察这些超链接是怎么设置的，比如所处的位置是否显眼？点击后网页的跳转是否流畅？有没有遇到过点击了没反应，或者跳转到了错误页面的情况？

谈一谈：你发现设计得好的超链接具有的特点

优化超链接设计

XXXX

改变颜色

ahref=制作原料.htmlstyle=color:white;制作原料/a

在a标签内添加一个style属性，用于定义内联样式，将超链接文字的颜色设置为白色。

美化超链接显示效果

去掉下划线

ahref=制作原料.htmlstyle=text-decoration:none;制作原料/a

text-decoration:underline;表示给超链接文字去掉下划线

美化超链接显示效果

设置背景色

ahref=制作原料.htmlstyle=background-color:blue;制作原料/a

background-color:yellow;表示给超链接文字设置蓝色背景

美化超链接显示效果

现有一段设置超链接的代码，请你分析参数，并指出对应的效果。

ahref=制作原料.htmlstyle=color:white;background-color:blue;text-decoration:none;padding:10px;border-radius:5px;制作原料/a

href参数值指定了点击本元素后跳转的页面文件，style参数值 指定了本超链接显示文本的格式。

color:white 指定了文字颜色为蓝色

background-color:blue 指定了背景颜色为蓝色

text-decoration:none 指定了没有下划线

padding:10px 指定了内边距为10px

border-radius:5px 指定了圆角边框效果为5px

代码解读

请创新超链接的使用方式，尝试设计隐藏的超链接、限时出现的超链接或通过解谜才能找到的超链接等，增加网页的趣味性和挑战性。

拓展

谢谢