网页设计与制作ppt课件第9章超级链接与导航栏.pptxVIP

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