《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元17：超级链接与导航栏 一、课程引导 二、明确知识技能目标 湖南城道业夜御学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元17：超级链接与导航栏 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一)课程引导 湖南绒道 一个网站由许多的网页组成，而各个网页 之间通常是由超级链接联系在一起的。超级链 接是网页中最基本的元素之一，利用它不仅可 以进行网页间的相互链接，还可以使网页链接 蕙 到相关的图像文件、多媒体文件以及下载程序 等。 御學 网页设计与制作
（一）课程引导 一个网站由许多的网页组成，而各个网页 之间通常是由超级链接联系在一起的。超级链 接是网页中最基本的元素之一，利用它不仅可 以进行网页间的相互链接，还可以使网页链接 到相关的图像文件、多媒体文件以及下载程序 等
(二) 明确知识技能目标 湖南绒道 (1) 掌握创建外部链接和内部链接的操作方法。 (2)掌握制作图像映射的操作方法。 (3)掌握创建E-mail链接的操作方法。 (4)掌握测试链接的有效性的操作方法。 夜御拳院 网设计与制作
（二）明确知识技能目标 ➢（1）掌握创建外部链接和内部链接的操作方法。 ➢（2）掌握制作图像映射的操作方法。 ➢（3）掌握创建E-mail链接的操作方法。 ➢（4）掌握测试链接的有效性的操作方法
三) 展示网页浏览效果 本章所制作的网页index.html的浏览效果如图所示。 长沙界之-Internet Exp1or 湖南城道业政御学院 转到上助☑ 可紫阳文如 图9-1 网页index.html的预览效果 网页设计与制作
（三）展示网页浏览效果 本章所制作的网页index.html的浏览效果如图所示。 图9-1 网页index.html的预览效果
(四)分析操作任务 湖南绒道 (1)在站点“长沙世界之窗”下创建文件夹“10超 级链接”，在“10超级链接”文件夹中创建命名为 “index.html的网页。 (2)在该网页中创建外部链接和内部链接。 紫夜 (3)在该网页中制作图像映射，设置图像热点的超 级链接。 (4)在该网页中创建导航栏
（四）分析操作任务 （1）在站点“长沙世界之窗”下创建文件夹“10超 级链接”，在“10超级链接”文件夹中创建命名为 “index.html”的网页。 （2）在该网页中创建外部链接和内部链接。 （3）在该网页中制作图像映射，设置图像热点的超 级链接。 （4）在该网页中创建导航栏
五) 知识讲解与操作示范（1) 9.1 湖南绒道 超级链接概述层 每一个网页文档都有自己的存放位置和路径，在一个 网站中，链接路径通常有3种表格方法：绝对路径、文档 目录相对路径、根目录相对路径。 1.绝对路径 绝对路径是被链接文档的完整路径，包括使用的传输 爽 协议，例如“http:lwww.fhvip.com”即是一个绝对路径。 绝对路径包含的是具体地址，如果目标文件被移动，则链 接无效。 拳院 从当前浏览的网页链接到其他网站的网页时，必须使 用绝对路径。 网 页设计与制作
（五）知识讲解与操作示范（1） 9.1 超级链接概述层 每一个网页文档都有自己的存放位置和路径，在一个 网站中，链接路径通常有3种表格方法：绝对路径、文档 目录相对路径、根目录相对路径。 1．绝对路径 绝对路径是被链接文档的完整路径，包括使用的传输 协议，例如“http://www.fhvip.com”即是一个绝对路径。 绝对路径包含的是具体地址，如果目标文件被移动，则链 接无效。 从当前浏览的网页链接到其他网站的网页时，必须使 用绝对路径
(五) 知识讲解与操作示范（2) 湖南鐵道 9.1 超级链接概述层 2.文档目录相对路径 文档目录相对路径是指以当前文档所在位置为 起点到被链接文档经由的路径，使用文档相对路径 可省去当前文档和被链接文档的绝对路径中相同的 部分，保留不同部分。 文档目录相对路径适合于网站的内部链接。只 琴 要是属于同一网站之下，即使不在同一个文件夹中， 文档目录相对路径也是适合的。 网项设计与制作
（五）知识讲解与操作示范（2） 2．文档目录相对路径 文档目录相对路径是指以当前文档所在位置为 起点到被链接文档经由的路径，使用文档相对路径 可 省去当前文档和被链接文档的绝对路径中相同的 部分，保留不同部分。 文档目录相对路径适合于网站的内部链接。只 要是属于同一网站之下，即使不在同一个文件夹中， 文档目录相对路径也是适合的。 9.1 超级链接概述层
(五)知识讲解与操作示范（3) 9.1 超级链接概述层 湖南绒道质 3.站点根目录相对路径 站点根目录相对路径是指从站点根文件夹到被链接档 经由的路径。根目录相对路径也适用于创建内部链接，但大 多数情况下，一般不使用这种路径形式。 零 网页设计与制作
（五）知识讲解与操作示范（3） 3．站点根目录相对路径 站点根目录相对路径是指从站点根文件夹到被链接档 经由的路径。根目录相对路径也适用于创建内部链接，但大 多数情况下，一般不使用这种路径形式。 9.1 超级链接概述层
(五) 知识讲解与操作示范（4) 9.2创建超级链接 南 在“10超级链接”文件夹中创建一个命名 道 “index.html的网页。该网页包括外部的友情链接，例如 “湖南凤凰”网站。也包括多种形式的内部链接，例如图 像映射、E-mail链接。 或 网页“index.html及其超级链接创建过程如下： 拳院 网页设计与制作
（五）知识讲解与操作示范（4） 9.2 创建超级链接 在“10超级链接”文件夹中创建一个命名 “index.html”的网页。该网页包括外部的友情链接，例如 “湖南凤凰”网站。也包括多种形式的内部链接，例如图 像映射、E-mail链接。 网页“index.html”及其超级链接创建过程如下：