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