《网页设计与制作》教学课件(精)

（五）知识讲解与操作示范（3）
2．文档目录相对路径 文档目录相对路径是指以当前文档所在位置为 起点到被链接文档经由的路径，使用文档相对路径 可 省去当前文档和被链接文档的绝对路径中相同的 部分，保留不同部分。 文档目录相对路径适合于网站的内部链接。只 要是属于同一网站之下，即使不在同一个文件夹中， 文档目录相对路径也是适合的。
“湖南凤凰”网站。也包括多种形式的内部链接，例如图 像映射、E-mail链接。 网页“index.html”及其超级链接创建过程如下：
（五）知识讲解与操作示范（6）
9.2.1
新建网页
在站点“长沙世界之窗”下创建文件夹“10超级链
接”，在“10超级链接”文件夹中创建一个命名为
“index.html”的网页，保存该网页文档。
《网页设计与制作》
教学课件
第9章：超级链接与导航栏
一、课程引导
二、明确知识技能目标 三、展示网页浏览效果
主 要 教 学 环 节
四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践
七、疑难解析
八、归纳总结 九、布置习题
（一）课程引导
一个网站由许多的网页组成，而各个网页 之间通常是由超级链接联系在一起的。超级链 接是网页中最基本的元素之一，利用它不仅可 以进行网页间的相互链接，还可以使网页链接 到相关的图像文件、多媒体文件以及下载程序 等。
（四）分析操作任务
（1）在站点“长沙世界之窗”下创建文件夹“10超 级链接”，在“10超级链接”文件夹中创建命名为 “index.html”的网页。
（2）在该网页中创建外部链接和内部链接。
（3）在该网页中制作图像映射，设置图像热点的超 级链接。 （4）在该网页中创建导航栏。
（五）知识讲解与操作示范（1）
（五）知识讲解与操作示范（11）
3．制作图像映射 所谓图像映射是指一张图片上多个不同的区域拥 有不同的链接地址。在图像中定源自文库一定形状的区域， 然后给这些区域加上链接，这些区域被称为热点。
下面为表格第二行中的图像制作图像映射，下面
以图像中的“超级游乐”位置为例说明操作过程。
（五）知识讲解与操作示范（12）
（二）明确知识技能目标
（1）掌握创建外部链接和内部链接的操作方法。 （2）掌握制作图像映射的操作方法。
（3）掌握创建E-mail链接的操作方法。
（4）掌握测试链接的有效性的操作方法。
（三）展示网页浏览效果
本章所制作的网页index.html的浏览效果如图所示。
图9-1
网页index.html的预览效果
（五）知识讲解与操作示范（4）
3．站点根目录相对路径
站点根目录相对路径是指从站点根文件夹到被链 接档经由的路径。根目录相对路径也适用于创建内部 链接，但大多数情况下，一般不使用这种路径形式。
（五）知识讲解与操作示范（5）
9.2
创建超级链接
在“10超级链接”文件夹中创建一个命名
“index.html”的网页。该网页包括外部的友情链接，例如
超级链接概述
9.1
每一个网页文档都有自己的存放位置和路径， 在一个网站中，链接路径通常有3种表格方法：绝 对路径、文档目录相对路径、根目录相对路径。
（五）知识讲解与操作示范（2）
1．绝对路径 绝对路径是被链接文档的完整路径，包括使用的 传输协议，例如“http://www.fhvip.com”即是一个绝 对路径。绝对路径包含的是具体地址，如果目标文件 被移动，则链接无效。 从当前浏览的网页链接到其他网站的网页时，必 须使用绝对路径。
（五）知识讲解与操作示范（8）
（4）在表格的第六行中输入文本：“友情链接：湖
南张家界 | 湖南凤凰 | 湖南韶山 ”，且“居中”对齐。
（5）在表格的第七行中输入文本：“长沙世界之窗 有限公司 Copyright@2004-2005”，第八行中输入
文本：“中国长沙浏阳河大桥东 邮编：410003”，且
（五）知识讲解与操作示范（7）
9.2.2 编辑网页
（1）将光标置于网页编辑窗口的左上角，插入一个8行 1列的表格，表格的“宽”设置为“767px”，“对齐”方 式设置为“居中对齐”，“填充”、“间距”、“边框” 都设置为0。 （2）在表格的第一行插入一幅图像“image/1001.jpg”， 在表格的第二行插入一幅图像“image/1002.jpg”，在表 格的第三行插入一幅Flash动画。 （3）在表格的第五行输入文本：“返回首页 | 关于我 们 | 公司部门 | 企业文化 | 发送邮件”，且“居中”对齐。
都“居中”对齐。 （6）调整表格中的图像和 Flash 动画的大小和位 置。
（五）知识讲解与操作示范（9）
9.2.3
创建超级链接
1．创建外部链接 为表格中第六行中的文本“湖南张家界”等创建 外 部分链接，操作过程如下： （1）选中表格第六行中的文字“湖南张家界”。 （2）在属性面板的“链接”文本框中输入外部链 接的绝对路径：http://www.zjjok.com。 （3）外部链接的绝对路径输入完成之后，属性面 板中的“目标”下拉列表框即变为可选状态，共有4个 选项可供选择。
（1）指定热点区域 选择表格第二行中的图像，然后单击“属性”面 板左侧“地图”下的“椭圆形热点工具”按钮，进入 热点区域绘制状态。当鼠标指针变成“+”字形状时， 按住鼠标左键，在需要设置热点的位置“超级游乐” 拖动鼠标形成一个圆形，于是一个圆形的热点区域便 形成，且用透明的蓝色显示指定图像的热点区域。 采用同样的方法可以指定多个热点区域。热点区 域绘制完成后，单击“指针热点工具”按钮，取消热 点区域绘制状态。
（五）知识讲解与操作示范（13）
（五）知识讲解与操作示范（10）
2．创建文本形式的内部链接 为表格中的第五行文本“关于我们”创建内部链接，操 作过程如下： （1）选中第五行中的文字“关于我们”。 （2）在“属性”面板中，单击“链接”列表框中右边 的【浏览文件】按钮 ，在弹出的“选择文件”对话框中 选择一个网页文件。这里，选择同一个站点中文件夹“02 文本操作”中网页文档“02.html”，则链接到该网页。 （3）在“目标”下拉列表框中选择“_blank”。 至此，一个内部链接创建完成。