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

第4章　在网页中建立各种超级链接 网页设计与制作实用教程 主编：刘艳丽　副主编：许晞 秦高德 高妍 学习目标 掌握内部、外部超级链接的创建方法； 掌握E-mail链接的创建方法； 掌握锚点链接的制作方法； 掌握链接颜色的设置方法； 了解图像映射的制作方法； 了解跳转菜单、翻转图像实例、导航栏的制作方法。 目录 超级链接应用实例 锚点链接应用实例 热区链接应用实例 导航栏实例 本章小结 配套实训 练习题 超级链接应用实例 设计目标 页面分析 实训引导 制作步骤 设计目标 在第3章实例index.htm的基础上，制作一个具有超级链接的网页。其浏览效果如图4.1所示。当鼠标移到栏目标题文本上时就会变成手形，同时在浏览器下方的状态栏中显示链接地路径，单击时便会跳转到相应的链接内容。 页面分析 该页面包含了如图4.1所示的各种超级链接，如内部超级链接、外部超级链接、空链接和脚本链接、Email超级链接等。（教程P52） 实训引导 1．本实例在第3章制作页面的基础上添加各种超级链接。 2．各个栏目文本所对应的链接网页文件由配套光盘webcourse\chapter04\materials文件夹提供，请将这些所要链接的文件复制到本地站点的webpages文件夹下。 3．页面效果请参见配套光盘webcourse\chapter04文件夹下的index4.html文件。 制作步骤 在本地站点future中打开第3章制作的index.html页面，依次按照下述内容在页面中创建各种超级链接。 1．创建内部超级链接； 2．创建外部超级链接； 3．创建空链接和脚本链接； 4．创建E-mail超级链接； 5．设置链接颜色。 创建内部超级链接 使用不同的方法分别为栏目文本创建内部超级链接。操作步骤见教程P53。 在新的浏览器窗口中打开“未来都市”网页，操作步骤见教程P55。 创建外部超级链接 ?　将“友情链接”文本链接到“Google”网站。操作步骤见教程P56。 创建空链接和脚本链接 ?　为“未来通讯”文本创建空链接，操作步骤见教程P57。 ?　为“close”文本创建脚本链接，效果如图4.8所示。操作步骤见教程P57。 创建E-mail超级链接 ?　在网页index.html的页脚中，为“联系我们”文本创建E-mail链接，其E-mail地址为“teach_ie@163.com”。操作步骤见教程P57。 设置链接颜色 ?　在网页index.html中，设置链接颜色，效果如图4.13所示。操作步骤见教程P59。 锚点链接应用实例 设计目标 实训引导 制作步骤 设计目标 实训引导 （1）本实例的素材网页文件ex4_city.html由配套光盘webcourse\chapter04\materials文件夹提供，请将该文件复制到本地站点future\webpages文件夹下。 （2）页面效果请参见配套光盘webcourse\chapter04\result文件夹下的ex4_city.html文件。 制作步骤 （1）在页面中插入锚点： ?　如图4.15所示，在正文“一、从超大城市到巨型城市”之前插入命名锚点，操作步骤见教程P61。 ?　按照上述方法，分别在其余每篇文章的标题前插入命名锚点（锚点名分别为article2、article3、article4、article5）。操作步骤（略）。 （2）为锚点建立链接。 ?　将页首目录中“一、从超大城市到巨型城”文本链接到“article1”锚点，操作步骤见教程P62。? ?　按照上述方法，分别将目录中的其余文本链接到文章前的相应锚点article2、article3、article4、article5。操作步骤（略）。 ?　设置返回页首链接，操作步骤见教程P62。 热区链接应用实例 设计目标 页面分析 实训引导 制作步骤 设计目标 制作一个浏览效果如图4.18所示的效果。当鼠标移上图像的不同组成部分时，就会显示出相应的说明文字，单击鼠标将会跳转到对应的网页。 页面分析 在该页面中使用了“图像地图”，其中各个组成部分分别对应一个热区。 实训引导 （1）本页面用到的图像文件（img4_map.jpg）由配套光盘webcourse\chapter04\images文件夹提供，请将该文件复制到本地站点future\images文件夹中。 （2）页面效果请参见配套光盘webcourse\chapter04\result文件夹下的ex4_hotspot.html文件。 制作步骤 ?　为img4_map.jpg图像制作热区。操作步骤见教程P63。 ?　为每个热区添加说明文字和制作超级链接，操作步骤见教程P65。 导航栏实例 设计目标 页面分析 实训引导 制作步骤 设计目标 制作一个浏览效果如图4.22所示的导航