模块6制作网页超链接与导航.PDF

第6章 网页超链接与导航 《网页设计与制作案例教程》 （第3版） 本章学习内容  6.1 案例1 设计制作过节乐网页  6.2 案例2 图像地图——设计国家地理网站页面  6.3 学习任务：网页导航设计  6.4 案例3 设计制作网页导航  6.5 实训 设计制作点点星空网站页面 《网页设计与制作案例教程》 （第3版） 6.1 案例1 设计制作过节乐网页  学习目标：认识超链接，掌握各类超链接的作 用与创建方法，并设置其CSS样式。  知识要点：超链接的分类，路径的设置，创建 文档链接、锚点链接、电子邮件链接、空链接 和脚本链接的方法，用CSS设置超链接样式的 方法。案例效果如图所示，请单击页面上的超 链接，观察链接效果。 《网页设计与制作案例教程》 （第3版） 6.1 案例1 设计制作过节乐网页 图 过节乐网页效果 《网页设计与制作案例教程》 （第3版） 6.1 案例1 设计制作过节乐网页 6.1.1 超链接概述 1．认识超链接 所谓超链接是指从某个网页元素指向一个目标的连接关 系。 在网页中用来创建超链接的元素，可以是一段文字，也 可以是一幅图像。 超链接的目标可以是另一个网页，也可以是网页上的指 定位置，还可以是一幅图像、一个电子邮件地址、一个文件、 甚至是一个应用程序。 《网页设计与制作案例教程》 （第3版） 6.1 案例1 设计制作过节乐网页 超链接有以下不同的分类方式： 按照链接路径的不同，网页中超链接主要分为  内部链接  局部链接  外部链接 按照目标对象的不同，网页中的超链接可以分为  文档链接  锚点链接  电子邮件链接  脚本链接  空链接 《网页设计与制作案例教程》 （第3版） 6.1 案例1 设计制作过节乐网页 2．超链接路径 超链接路径分为绝对路径和相对路径两大类。  绝对路径 完整地描述文件存储位置的路径就是绝对路径，如： D:\tu\Rose.jpg。但在Internet中，绝对路径是指包括服 务器协议和域名的完整URL路径，其一般格式如下： protocol :// hostname[:port] / path / [;parameters][?query] 例如：/view/1496.htm 《网页设计与制作案例教程》 （第3版） 6.1 案例1 设计制作过节乐网页 URL路径格式中各项含义如下。  protocol指定使用的传输协议，主要有http协议，格式 为 “http://”、ftp协议，格式为 “ftp ://”、SMTP协议， 格式为 “mailto:”等。其中 “http://”是应用最广泛的。  hostname[:port]指存放资源的服务器的域名系统主机 名或IP地址，方括号中的是端口号，可以省略，如 。  path指路径，由零个或多个“/”符号隔开的字符串，一 般用来表示主机上的一个目录或文件地址 。如 view/1496.htm。  [;parameters][?query] 应用于动态网页的URL中， 指定特殊参数和查询，为可选内容。 《网页设计与制作案例教程》 （第3版） 6.1 案例1 设计制作过节乐网页  相对路径 相对路径是指其他文档相对于某文档的存储路径。在同 一个站点内建立链接通常采用相对路径。 当前文件 目标文件 相对路径格式 说明 hours.