《网张设计与制作》教学ppt课件.ppt

1、网页设计与制作网页设计与制作教学课件教学课件第1页，共30页。第第9 9章：超级链接与导航栏章：超级链接与导航栏主要教学环节主要教学环节五、知识讲解与操作示范一、课程引导二、明确知识技能目标三、展示网页浏览效果四、分析操作任务六、课堂模仿实践七、疑难解析八、归纳总结九、布置习题第2页，共30页。（一）课程引导（一）课程引导 一个网站由许多的网页组成，而各个网页之间通一个网站由许多的网页组成，而各个网页之间通常是由超级链接联系在一起的。超级链接是网页中最常是由超级链接联系在一起的。超级链接是网页中最基本的元素之一，利用它不仅可以进行网页间的相互基本的元素之一，利用它不仅可以进行网页间的相互链接，

2、还可以使网页链接到相关的图像文件、多媒体链接，还可以使网页链接到相关的图像文件、多媒体文件以及下载程序等。文件以及下载程序等。第3页，共30页。（二）明确知识技能目标（二）明确知识技能目标（1）掌握创建外部链接和内部链接的操作方法。）掌握创建外部链接和内部链接的操作方法。（2）掌握制作图像映射的操作方法。）掌握制作图像映射的操作方法。（3）掌握创建）掌握创建E-mail链接的操作方法。链接的操作方法。（4）掌握测试链接的有效性的操作方法。）掌握测试链接的有效性的操作方法。第4页，共30页。（三）展示网页浏览效果（三）展示网页浏览效果本章所制作的网页本章所制作的网页index.html的浏览效果

3、如图所示。的浏览效果如图所示。图9-1网页index.html的预览效果 第5页，共30页。（四）分析操作任务（四）分析操作任务 （1）在站点）在站点“长沙世界之窗长沙世界之窗”下创建文件夹下创建文件夹“10超级链超级链接接”，在，在“10超级链接超级链接”文件夹中创建命名为文件夹中创建命名为“index.html”的的网页。网页。（2）在该网页中创建外部链接和内部链接。）在该网页中创建外部链接和内部链接。（3）在该网页中制作图像映射，设置图像热点的超级）在该网页中制作图像映射，设置图像热点的超级链接。链接。（4）在该网页中创建导航栏）在该网页中创建导航栏。第6页，共30页。（五）知识讲解与操

4、作示范（五）知识讲解与操作示范（1 1）9.1超级链接概述超级链接概述 每一个网页文档都有自己的存放位置和路径，在一个每一个网页文档都有自己的存放位置和路径，在一个网站中，链接路径通常有网站中，链接路径通常有3种表格方法：绝对路径、文档种表格方法：绝对路径、文档目录相对路径、根目录相对路径。目录相对路径、根目录相对路径。第7页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（2 2）1绝对路径绝对路径 绝对路径是被链接文档的完整路径，包括使用的传绝对路径是被链接文档的完整路径，包括使用的传输协议，例如输协议，例如“http:/”即是一个绝对路即是一个绝对路径。绝对路径包含的是具体地

5、址，如果目标文件被移动，径。绝对路径包含的是具体地址，如果目标文件被移动，则链接无效。则链接无效。从当前浏览的网页链接到其他网站的网页时，必须使用绝对从当前浏览的网页链接到其他网站的网页时，必须使用绝对路径。路径。第8页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（3 3）2文档目录相对路径文档目录相对路径 文档目录相对路径是指以当前文档所在位置为起点到被文档目录相对路径是指以当前文档所在位置为起点到被链接文档经由的路径，使用文档相对路径可链接文档经由的路径，使用文档相对路径可 省去当前文档省去当前文档和被链接文档的绝对路径中相同的部分，保留不同部分。和被链接文档的绝对路径中相

6、同的部分，保留不同部分。文档目录相对路径适合于网站的内部链接。只要是属于同文档目录相对路径适合于网站的内部链接。只要是属于同一网站之下，即使不在同一个文件夹中，文档目录相对路径也一网站之下，即使不在同一个文件夹中，文档目录相对路径也是适合的。是适合的。第9页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（4 4）3站点根目录相对路径站点根目录相对路径 站点根目录相对路径是指从站点根文件夹到被链接档经由的站点根目录相对路径是指从站点根文件夹到被链接档经由的路径。根目录相对路径也适用于创建内部链接，但大多数情况下，路径。根目录相对路径也适用于创建内部链接，但大多数情况下，一般不使用这

7、种路径形式。一般不使用这种路径形式。第10页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（5 5）9.2创建超级链接创建超级链接 在在“10超级链接超级链接”文件夹中创建一个命名文件夹中创建一个命名“index.html”的网页。的网页。该网页包括外部的友情链接，例如该网页包括外部的友情链接，例如“湖南凤凰湖南凤凰”网站。也包括多种形网站。也包括多种形式的内部链接，例如图像映射、式的内部链接，例如图像映射、E-mail链接。链接。网页网页“index.html”及其超级链接创建过程如下：及其超级链接创建过程如下：第11页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示

8、范（6 6）9.2.1新建网页新建网页 在站点在站点“长沙世界之窗长沙世界之窗”下创建文件夹下创建文件夹“10超级链接超级链接”，在，在“10超级链接超级链接”文件夹中创建一个命名为文件夹中创建一个命名为“index.html”的网页，的网页，保存该网页文档。保存该网页文档。第12页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（7 7）9.2.2编辑网页编辑网页 （1）将光标置于网页编辑窗口的左上角，插入一个）将光标置于网页编辑窗口的左上角，插入一个8行行 1列列的表格，表格的的表格，表格的“宽宽”设置为设置为“767px”，“对齐对齐”方式设置为方式设置为“居中对齐居中对齐”

9、，“填充填充”、“间距间距”、“边框边框”都设置为都设置为0。（2）在表格的第一行插入一幅图像）在表格的第一行插入一幅图像“image/1001.jpg”，在表，在表格的第二行插入一幅图像格的第二行插入一幅图像“image/1002.jpg”，在表格的第三，在表格的第三行插入一幅行插入一幅Flash动画。动画。（3）在表格的第五行输入文本：）在表格的第五行输入文本：“返回首页返回首页|关于我们关于我们|公公司部门司部门|企业文化企业文化|发送邮件发送邮件”，且，且“居中居中”对齐。对齐。第13页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（8 8）（4）在表格的第六行中输入文本

10、：）在表格的第六行中输入文本：“友情链接：湖南张家界友情链接：湖南张家界|湖南凤凰湖南凤凰|湖南韶山湖南韶山”，且，且“居中居中”对齐。对齐。（5）在表格的第七行中输入文本：）在表格的第七行中输入文本：“长沙世界之窗有限长沙世界之窗有限公司公司Copyright2004-2005”，第八行中输入文本：，第八行中输入文本：“中中国长沙浏阳河大桥东邮编：国长沙浏阳河大桥东邮编：410003”，且都，且都“居中居中”对齐。对齐。（6）调整表格中的图像和）调整表格中的图像和 Flash 动画的大小和位置。动画的大小和位置。第14页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（9 9）9

11、.2.3创建超级链接创建超级链接1创建外部链接创建外部链接 为表格中第六行中的文本为表格中第六行中的文本“湖南张家界湖南张家界”等创建外等创建外 部分链接，操作过程如下：部分链接，操作过程如下：（1）选中表格第六行中的文字）选中表格第六行中的文字“湖南张家界湖南张家界”。（2）在属性面板的）在属性面板的“链接链接”文本框中输入外部链接的文本框中输入外部链接的绝对路径：绝对路径：http:/。（3）外部链接的绝对路径输入完成之后，属性面板）外部链接的绝对路径输入完成之后，属性面板中的中的“目标目标”下拉列表框即变为可选状态，共有下拉列表框即变为可选状态，共有4个选项个选项可供选择。可供选择。第1

12、5页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（1010）2创建文本形式的内部链接创建文本形式的内部链接 为表格中的第五行文本为表格中的第五行文本“关于我们关于我们”创建内部链接，操作过程如创建内部链接，操作过程如下：下：（1）选中第五行中的文字）选中第五行中的文字“关于我们关于我们”。（2）在）在“属性属性”面板中，单击面板中，单击“链接链接”列表框中右边的【浏览文列表框中右边的【浏览文件】按钮件】按钮 ，在弹出的，在弹出的“选择文件选择文件”对话框中选择一个网页文件。对话框中选择一个网页文件。这里，选择同一个站点中文件夹这里，选择同一个站点中文件夹“02文本操作文本操作”

13、中网页文档中网页文档“02.html”，则链接到该网页。，则链接到该网页。（3）在）在“目标目标”下拉列表框中选择下拉列表框中选择“_blank”。至此，一个内部链接创建完成。至此，一个内部链接创建完成。第16页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（1111）3制作图像映射制作图像映射 所谓图像映射是指一张图片上多个不同的区域拥有不同所谓图像映射是指一张图片上多个不同的区域拥有不同的链接地址。在图像中定义一定形状的区域，然后给这些区的链接地址。在图像中定义一定形状的区域，然后给这些区域加上链接，这些区域被称为热点。域加上链接，这些区域被称为热点。下面为表格第二行中的图像

14、制作图像映射，下面以下面为表格第二行中的图像制作图像映射，下面以图像中的图像中的“超级游乐超级游乐”位置为例说明操作过程。位置为例说明操作过程。第17页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（1212）（1）指定热点区域）指定热点区域 选择表格第二行中的图像，然后单击选择表格第二行中的图像，然后单击“属性属性”面板面板左侧左侧“地图地图”下的下的“椭圆形热点工具椭圆形热点工具”按钮，进入热点按钮，进入热点区域绘制状态。当鼠标指针变成区域绘制状态。当鼠标指针变成“+”字形状时，按住鼠字形状时，按住鼠标左键，在需要设置热点的位置标左键，在需要设置热点的位置“超级游乐超级游乐”

15、拖动鼠标拖动鼠标形成一个圆形，于是一个圆形的热点区域便形成，且用形成一个圆形，于是一个圆形的热点区域便形成，且用透明的蓝色显示指定图像的热点区域。透明的蓝色显示指定图像的热点区域。采用同样的方法可以指定多个热点区域。热点区域绘制采用同样的方法可以指定多个热点区域。热点区域绘制完成后，单击完成后，单击“指针热点工具指针热点工具”按钮，取消热点区域绘制状按钮，取消热点区域绘制状态。态。第18页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（1313）（2）调整热点区域）调整热点区域 选中热点区域，可以对热点区域的大小和位置进行适当选中热点区域，可以对热点区域的大小和位置进行适当调整。

16、调整。（3）设置图像热点的超级链接）设置图像热点的超级链接 （4）保存网页，且浏览网页，当鼠标指向不同的区域）保存网页，且浏览网页，当鼠标指向不同的区域时，单击后打开链接页面。时，单击后打开链接页面。第19页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（1414）4创建创建E-mail链链 创建创建E-mail链接的操作要求如下：链接的操作要求如下：（1）为表格中第五行中的文本）为表格中第五行中的文本“发送邮件发送邮件”创建创建E-mail链接。链接。（2）替浏览者加入邮件的主题为）替浏览者加入邮件的主题为“对网站的意见与建议对网站的意见与建议”。创建创建E-mail链接的操作

17、过程如下：链接的操作过程如下：（1）选中页面的文字）选中页面的文字“发送邮件发送邮件”，在，在“属性属性”面板的面板的“链接链接”文本文本框框 中输入中输入“mailto:”和邮箱地址，例如和邮箱地址，例如“mailto:”。（2）在邮箱地址的后面加上）在邮箱地址的后面加上“?subject=对网站的意见与建议对网站的意见与建议”，完整的语句为完整的语句为“mailto:?subject=对网站的意见与建对网站的意见与建议议”。这样预览页面时，用户单击链接弹出发信窗口会有现在的主题。这样预览页面时，用户单击链接弹出发信窗口会有现在的主题。第20页，共30页。（五）知识讲解与操作示范（五）知识讲

18、解与操作示范（1515）9.2.4链接检查链接检查 当创建完一个网站的链接后，应该对链接进行检查与测试，利用当创建完一个网站的链接后，应该对链接进行检查与测试，利用“链接检查器链接检查器”可以检查网站中的链接。过程如下：可以检查网站中的链接。过程如下：（1）在）在Dreamweaver 8主窗口中，单击菜单【窗口】主窗口中，单击菜单【窗口】【结【结果】，打开果】，打开“结果结果”面板。面板。（2）在）在“结果结果”面板中切换到面板中切换到“链接检查器链接检查器”选项卡，单击面板选项卡，单击面板左上角的绿色箭头，在弹出的菜单中选择相应命令，例如选择左上角的绿色箭头，在弹出的菜单中选择相应命令，例

19、如选择“检查检查整个当前本地站点的链接整个当前本地站点的链接”。（3）链接检查器会自动开始检查站点链接，检查完毕后，如）链接检查器会自动开始检查站点链接，检查完毕后，如果有无效链接，便会显示在该对话框中。如果要修改无效链接，果有无效链接，便会显示在该对话框中。如果要修改无效链接，直接单击链接内容，并对其进行修改即可。直接单击链接内容，并对其进行修改即可。第21页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（1616）9.3导航栏简介导航栏简介 导航栏实际是超级链接的综合应用。为了方便网站访问者导航栏实际是超级链接的综合应用。为了方便网站访问者浏览网站中相关信息，通常将许多超链接

20、有规律地排列网页的浏览网站中相关信息，通常将许多超链接有规律地排列网页的上部或者左侧，这些超链接就是浏览者访问网站的向导，形象上部或者左侧，这些超链接就是浏览者访问网站的向导，形象地称为地称为“导航栏导航栏”，尤其是首页一般都有导航栏。，尤其是首页一般都有导航栏。第22页，共30页。（五）知识讲解与操作示范（五）知识讲解与操作示范（1717）导航栏可以理解为超链接的有序排列。导航条的布局方式导航栏可以理解为超链接的有序排列。导航条的布局方式通常分为横向排列、纵向排列、弧形排列、浮动导航栏等多种通常分为横向排列、纵向排列、弧形排列、浮动导航栏等多种形式；导航栏中的的超链接载体可以为文字、图片、形

21、式；导航栏中的的超链接载体可以为文字、图片、Flash动动画、按钮等；导航栏也可做成弹出式菜单形式。导航可以排列画、按钮等；导航栏也可做成弹出式菜单形式。导航可以排列在页面的上方、左侧、右侧、底部，有的网站将导航栏置于页在页面的上方、左侧、右侧、底部，有的网站将导航栏置于页面的中部位置。面的中部位置。第23页，共30页。（六）课堂模仿实践（六）课堂模仿实践 1操作要求操作要求 （1）打开）打开“课堂实践课堂实践”网站文件夹网站文件夹“10超级链接超级链接”中的网页文档中的网页文档“10.html”。（2）选中页面底部的文字）选中页面底部的文字“返回首页返回首页”设置超链接，链接的网设置超链接，

22、链接的网页文档为页文档为“index.html”；同样为；同样为“关于我们关于我们”设置超链接，链接设置超链接，链接的网页文档为的网页文档为“02.html”；为；为“公司部门公司部门”设置超链接，链接的设置超链接，链接的网页文档为网页文档为“12.html”。（3）为）为“联系我们联系我们”创建创建E-mail链接，链接，E-mail地址为地址为mailto:abc126com。（4）为图片）为图片“凤凰城门凤凰城门”创建超链接，链接的网页文档为创建超链接，链接的网页文档为“10_1.html”。第24页，共30页。（六）课堂模仿实践（六）课堂模仿实践 2效果展示效果展示图9-15图像超链接

23、所打开的网页图9-14设置超链接的课堂实践网页的浏览效果第25页，共30页。（六）课堂模仿实践（六）课堂模仿实践 3制作要点提示制作要点提示 先选中文字或图片，然后在属性面板的先选中文字或图片，然后在属性面板的“链接链接”列表框中输入链接对象的路径和名称，也可以打开对列表框中输入链接对象的路径和名称，也可以打开对话框选择链接的文件。话框选择链接的文件。第26页，共30页。（六）课堂模仿实践（六）课堂模仿实践 课外拓展实践课外拓展实践 1在在“湖铁职院学院网站湖铁职院学院网站”站点文件夹站点文件夹“10超级链接超级链接”中创建网页文档中创建网页文档“10.html”。2为该网页的上部导航栏和底部导航栏设为该网页的上部导航栏和底部导航栏设置超级链接。置超级链接。第27页，共30页。（七）疑难解析（七）疑难解析第28页，共30页。（八）归纳总结（八）归纳总结 制作网页时经常需要通过超级链接将各个不同制作网页时经常需要通过超级链接将各个不同的页面联系起来，达到快速指向需要浏览页面的目的页面联系起来，达到快速指向需要浏览页面的目的。通过本章学习，熟练掌握如何创建外部链接，页的。通过本章学习，熟练掌握如何创建外部链接，页间链接、空链接、间链接、空链接、E-mail链接等，并能测试链接的有链接等，并能测试链接的有效性。效性。第29页，共30页。（九）布置习题（九）布置习题第30页，共30页。