网页设计与制作案例教程 教学课件 陈承欢 第17单元.pdfVIP

第9章　超级链接与导航栏  课程引导 一个网站由许多的网页组成，而各个网 页之间通常是由超级链接联系在一起的。超 级链接是网页中最基本的元素之一，利用它 不仅可以进行网页间的相互链接，还可以使 网页链接到相关的图像文件、多媒体文件以 及下载程序等。  知识技能目标 （1）掌握创建外部链接和内部链接的操 作方法。 （2）掌握制作图像映射的操作方法。 （3）掌握创建E-mail链接的操作方法。 （4）掌握测试链接的有效性的操作方法。  网页浏览效果展示 本章所制作的网页index.html的浏览效 果如图所示。 图9-1　网页index.html的预览效果  本章操作任务 （1）在站点“长沙世界之窗”下创建文 件夹“10超级链接”，在“10超级链接”文 件夹中创建命名为“index.html”的网页。 （2）在该网页中创建外部链接和内部链 接。 （3）在该网页中制作图像映射，设置图 像热点的超级链接。 （4）在该网页中创建导航栏。 9.1 超 级 链 接 概 述 9.1 9.2 创 建 超 级 链 接 9.2 9.3 导 航 栏 简 介 9.3 9.1　超级链接概述 9.1　超级链接概述 每一个网页文档都有自己的存放位置和 路径，在一个网站中，链接路径通常有3种 表格方法：绝对路径、文档目录相对路径、 根目录相对路径。 1．绝对路径 1．绝对路径 绝对路径是被链接文档的完整路径，包 括使用的传输协议，例如 “”即是一个绝对路 径。绝对路径包含的是具体地址，如果目标 文件被移动，则链接无效。 从当前浏览的网页链接到其他网站的网页时， 必须使用绝对路径。 2．文档目录相对路径 2．文档目录相对路径 文档目录相对路径是指以当前文档所在 位置为起点到被链接文档经由的路径，使用 文档相对路径可省去当前文档和被链接文档 的绝对路径中相同的部分，保留不同部分。 文档目录相对路径适合于网站的内部链接。 只要是属于同一网站之下，即使不在同一个 文件夹中，文档目录相对路径也是适合的。 3．站点根目录相对路径 3．站点根目录相对路径 站点根目录相对路径是指从站点根文件 夹到被链接文档经由的路径。根目录相对路 径也适用于创建内部链接，但大多数情况下， 一般不使用这种路径形式。 9.2　创建超级链接 9.2　创建超级链接 在“10超级链接”文件夹中创建一个命 名为“index.html”的网页。该网页包括外 部的友情链接，例如“湖南凤凰”网站。也 包括多种形式的内部链接，例如图像映射、 E-mail链接。 网页“index.html”及其超级链接创建 过程如下： 9.2.1　新建网页 9.2.1　新建网页 在站点“长沙世界之窗”下创建文件夹 “10超级链接”，在“10超级链接”文件夹 中创建一个命名为“index.html”的网页， 保存该网页文档。 9.2.2　编辑网页 9.2.2　编辑网页 （1）将光标置于网页编辑窗口的左上角， 插入一个8行1列的表格，表格的“宽”设置 为“767px”，“对齐”方式设置为“居中 对齐”，“填充”、“间距”、“边框”都 设置为0。 （2）在表格的第一行插入一幅图像 “image/1001.jpg”，在表格的第二行插入 一幅图像“image/1002.jpg”，在表格的第 三行插入一幅Flash动画。 （3）在表格的第五行输入文本：“返回 首页 | 关于我们 | 公司部门 | 企业文化 | 发送邮件”，且“居中”对齐。 （4）在表格的第六行中输入文本：“友 情链接：湖南张家界 | 湖南凤凰 | 湖南韶 山 ”，且“居中”对齐。 （5）在表格的第七行中输入文本：“长 沙世界之窗有限公司　Copyright@2004- 2005”，第八行中输入文本：“中国长沙浏 阳河大桥东　邮编：410003”，且都“居中” 对齐。 （