网页设计与制作实用教程电子教案教学建议第4章在网页中建立各种超级链接课件

网页设计与制作实用教程 主编 刘艳丽副主编 许晞秦高德高妍 第4章在网页中建立各种超级链接 2 2020 2 23 学习目标 掌握内部 外部超级链接的创建方法 掌握E mail链接的创建方法 掌握锚点链接的制作方法 掌握链接颜色的设置方法 了解图像映射的制作方法 了解跳转菜单 翻转图像实例 导航栏的制作方法 第4章在网页中建立各种超级链接 3 2020 2 23 目录 超级链接应用实例锚点链接应用实例热区链接应用实例导航栏实例本章小结配套实训练习题 第4章在网页中建立各种超级链接 4 2020 2 23 超级链接应用实例 设计目标页面分析实训引导制作步骤 第4章在网页中建立各种超级链接 5 2020 2 23 设计目标 在第3章实例index htm的基础上 制作一个具有超级链接的网页 其浏览效果如图4 1所示 当鼠标移到栏目标题文本上时就会变成手形 同时在浏览器下方的状态栏中显示链接地路径 单击时便会跳转到相应的链接内容 返回 第4章在网页中建立各种超级链接 6 2020 2 23 页面分析 该页面包含了如图4 1所示的各种超级链接 如内部超级链接 外部超级链接 空链接和脚本链接 Email超级链接等 教程P52 返回 第4章在网页中建立各种超级链接 7 2020 2 23 实训引导 1 本实例在第3章制作页面的基础上添加各种超级链接 2 各个栏目文本所对应的链接网页文件由配套光盘webcourse chapter04 materials文件夹提供 请将这些所要链接的文件复制到本地站点的webpages文件夹下 3 页面效果请参见配套光盘webcourse chapter04文件夹下的index4 html文件 返回 第4章在网页中建立各种超级链接 8 2020 2 23 制作步骤 在本地站点future中打开第3章制作的index html页面 依次按照下述内容在页面中创建各种超级链接 1 创建内部超级链接 2 创建外部超级链接 3 创建空链接和脚本链接 4 创建E mail超级链接 5 设置链接颜色 返回 第4章在网页中建立各种超级链接 9 2020 2 23 创建内部超级链接 使用不同的方法分别为栏目文本创建内部超级链接 操作步骤见教程P53 在新的浏览器窗口中打开 未来都市 网页 操作步骤见教程P55 第4章在网页中建立各种超级链接 10 2020 2 23 创建外部超级链接 将 友情链接 文本链接到 Google 网站 操作步骤见教程P56 第4章在网页中建立各种超级链接 11 2020 2 23 创建空链接和脚本链接 为 未来通讯 文本创建空链接 操作步骤见教程P57 为 close 文本创建脚本链接 效果如图4 8所示 操作步骤见教程P57 第4章在网页中建立各种超级链接 12 2020 2 23 创建E mail超级链接 在网页index html的页脚中 为 联系我们 文本创建E mail链接 其E mail地址为 teach ie 操作步骤见教程P57 第4章在网页中建立各种超级链接 13 2020 2 23 设置链接颜色 在网页index html中 设置链接颜色 效果如图4 13所示 操作步骤见教程P59 返回 第4章在网页中建立各种超级链接 14 2020 2 23 锚点链接应用实例 设计目标实训引导制作步骤 第4章在网页中建立各种超级链接 15 2020 2 23 设计目标 返回 第4章在网页中建立各种超级链接 16 2020 2 23 实训引导 1 本实例的素材网页文件ex4 city html由配套光盘webcourse chapter04 materials文件夹提供 请将该文件复制到本地站点future webpages文件夹下 2 页面效果请参见配套光盘webcourse chapter04 result文件夹下的ex4 city html文件 返回 第4章在网页中建立各种超级链接 17 2020 2 23 制作步骤 1 在页面中插入锚点 如图4 15所示 在正文 一 从超大城市到巨型城市 之前插入命名锚点 操作步骤见教程P61 按照上述方法 分别在其余每篇文章的标题前插入命名锚点 锚点名分别为article2 article3 article4 article5 操作步骤 略 2 为锚点建立链接 将页首目录中 一 从超大城市到巨型城 文本链接到 article1 锚点 操作步骤见教程P62 按照上述方法 分别将目录中的其余文本链接到文章前的相应锚点article2 article3 article4 article5 操作步骤 略 设置返回页首链接 操作步骤见教程P62 返回 第4章在网页中建立各种超级链接 18 2020 2 23 热区链接应用实例 设计目标页面分析实训引导制作步骤 第4章在网页中建立各种超级链接 19 2020 2 23 设计目标 制作一个浏览效果如图4 18所示的效果 当鼠标移上图像的不同组成部分时 就会显示出相应的说明文字 单击鼠标将会跳转到对应的网页 返回 第4章在网页中建立各种超级链接 20 2020 2 23 页面分析 在该页面中使用了 图像地图 其中各个组成部分分别对应一个热区 返回 第4章在网页中建立各种超级链接 21 2020 2 23 实训引导 1 本页面用到的图像文件 img4 map jpg 由配套光盘webcourse chapter04 images文件夹提供 请将该文件复制到本地站点future images文件夹中 2 页面效果请参见配套光盘webcourse chapter04 result文件夹下的ex4 hotspot html文件 返回 第4章在网页中建立各种超级链接 22 2020 2 23 制作步骤 为img4 map jpg图像制作热区 操作步骤见教程P63 为每个热区添加说明文字和制作超级链接 操作步骤见教程P65 返回 第4章在网页中建立各种超级链接 23 2020 2 23 导航栏实例 设计目标页面分析实训引导制作步骤 第4章在网页中建立各种超级链接 24 2020 2 23 设计目标 制作一个浏览效果如图4 22所示的导航栏 导航栏由4个按钮组成 每个按钮当鼠标移上去时 颜色将会发生变化 单击导航栏中的某个按钮便会打开另一个网页 返回 图4 22导航栏实例 第4章在网页中建立各种超级链接 25 2020 2 23 页面分析 在这个导航栏中共有4个元素 按钮 每个元素由4个图像构成 其中一个图像用于正常显示状态 另一个图像用于鼠标移上时的状态 还有两个图像分别用于单击元素后的状态及鼠标移到被点击过的元素上时的状态 为此制作这个导航栏一共需要16个图像 返回 第4章在网页中建立各种超级链接 26 2020 2 23 实训引导 1 本页面中用到的16个图像文件由配套光盘webcourse chapter04 images文件夹提供 在制作页面之前 先将用到的图像文件拷贝到本地站点future images文件夹中 2 用于导航栏中的链接网页文件已在前面的实训中复制到了本地站点future webpages文件夹中 3 页面效果请参见配套光盘webcourse chapter04 result文件夹下的ex4 bar html文件 返回 第4章在网页中建立各种超级链接 27 2020 2 23 制作步骤 1 打开 插入导航条 对话框 2 依次设置各个元素的各个选项 3 单击 确定 按钮 完成导航栏的创建 返回 第4章在网页中建立各种超级链接 28 2020 2 23 本章小结 本章详细介绍了网页中链接的应用和各种链接的创建方法 常见的超级链接有以下几种类型 内部链接 在同一网站文件之间的链接 外部链接 不同网站文件之间的链接 锚点链接 同一网页或不同网页的指定位置的链接 E mail链接 电子邮件的链接 链接路径分为绝对路径 文档相对路径和根相对