网页制作课件第4章 超链接

《网页制作课件第4章 超链接》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

第4章超链接制作人：王飞 重点和难点链接的检查与测试绝对路径相对路径创建超链接 4.1超链接基础知识4.1.1超链接概述1.绝对路径绝对路径是指被链接对象的完整路径，是一个完整URL地址。2.根目录相对路径根目录相对路径是指从站点根文件夹到被链接对象经过的路径。站点上所有公开的文件都存放在站点的根目录下。根目录相对路径以一个正斜杠“/”开始，该正斜杠表示站点根文件夹。3．文档目录相对路径文档目录相对路径是指以当前文档所在位置为起点到被链接对象经由的路径，使用相对路径可以省去当前文档与被链接对象的绝对路径或根目录相对路径中相同的部分，保留不同的部分。文档目录相对路径适合于网站的内部链接。超链接就是一种超媒体链接技术，超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序 4.2典例剖析—信息导航列表本节将通过建立一个信息导航网页的实例来讲解超链接的使用。本节操作任务：（1）在“Mystuhome”下建立文件夹“超链接”，在“超链接”文件夹下建立网页“index.html”和文件夹“image”（2）在网页中创建链接。（3）在网页中创建E-mail链接。（4）在网页中制作图像映射，设置图像热点的超链接。 4.2.1创建内部链接1.新建网页（1）在“Mystuhome”下建立文件夹“超链接”，在“超链接”文件夹下建立文件夹“image”和网页“index.html”，保存网页文档，如图4-1所示。（2）按图4-1所示编辑网页，过程这里不在详叙。图4-1网页“index.html”演示讲解 4.2.1创建内部链接2.创建内部链接为网页中的文本“我的相册”建立内部链接，操作过程如下。（1）选中要设置超接接的元素，这里是选中文本“我的相册”。（2）在属性面板的“链接”文本框中直接输入链接路径或单击“链接”文本框右边的【浏览文件】按钮，在弹出的“选择文件”框中选择一个链接目标对象。这里，选择同一个文件夹下“MyAlbum.html”。也可以在属性面板中拖动“链接”文本框右侧的【指向文件】按钮到“文件”面板中相应的链接目标对象，则链接将指向该对象。拖动时会出现一条带箭头的线，指示要拖动到的位置，指向对象后只需释放鼠标，即可自动生成链接。演示讲解 4.2.1创建内部链接2.创建内部链接(3)链接文本框设置完成后，属性面板中的“目标”下来列表框就自动变为可选状态，用于设置目标对象打开的窗口，共有_blank，_parent，_self，_top四个选项可供选择。_blank：表示重新打开一个新的浏览器窗口显示网页。_parent：表示在本框架的上一级框架或浏览器窗口显示网页。_self：表示在自身的框架或浏览器窗口内显示，这个目标选项是默认的没有指定时就会被采用。_top：在浏览器窗口打开链接的网页。这里选择“_blank”。(4)一个内部链接创建完成，设置完成后如图所示。单击【保存】按钮，按F12按钮预览网页。演示讲解 4.2.2创建外部链接为网页中的文本“我的家乡”建立外部链接，操作过程如下。（1）选中要设置超接接的元素，这里是选中文本“我的家乡”。（2）在属性面板的“链接”文本框中直接输入外部链接的绝对路径，这里是http://www.chengdu.gov.cn。(3)在属性面板中的“目标”下来列表框中设置目标对象打开的窗口，这里选择“_blank”。(4)一个外部链接创建完成，单节【保存】按钮，按F12按钮预览网页。 4.2.3创建E-mail链接为方便获取网页用户的意见和建议，通常需要在网页中建立E-mail链接。E-mail链接被点击后会调用系统中设置的默认邮件程序，打开一个邮件发送窗口，用户可以直接点击E-mail链接发送邮件。为网页中文本“我的邮箱”建立E-mail链接，操作过程如下。（1）选中要设置超接接的元素，这里是选中文本“我的邮箱”。（2）在DreamweaverCS4主窗口中，单击菜单【插入】→【电子邮件链接】弹出如图4-3所示的电子邮件链接对话框。图4-3电子邮件链接对话框演示讲解 4.2.3创建E-mail链接(3)对话框中“文本”指在网页上显示的文本，“E-mail”指需要链接到的邮箱地址，这里输入“wysj@126.com”，单击【确定】按钮完成E-mail链接的设置。也可以在属性面板的“链接”文本框中输入“mailto:”和邮箱地址，这里是“mailto:wysj@126.com”。(4)一个E-mail链接创建完成，单击【保存】按钮，按F12按钮预览网页。 4.2.4创建图像热区链接使用图像热区链接是创建复杂的图像交互的好方法，当用户穿件一个图像热区时可以对图像中的一个部分分别创建链接，他将告诉浏览器图像的这些部分应该链接到特定的对象。DreamweaverCS4能够使用户很方便创建图像热区链接。为网页中第一个图像（孔明苑）建立图像热区链接，操作过程如下。（1）选中需要创建热区链接的图像，这里选择第一幅图像（孔明苑）。（2）可以看到属性面板的左下部有创建热区的几个按钮，分别为矩形、圆形和多边形，如图4-4所示。 演示讲解图4-4热区工具 4.2.4创建图像热区链接（3）单击属性面板上的热区工具，然后在图像上拖动鼠标左键，即可勾勒出热区，（4）在属性面板上的“地图”文本框中为热区命名，这里输入“a1”。（5）选中热区后，在窗口下方可以看到热区的属性面板，如图4-6所示。设置热区对应的链接地址，具体操作步骤与其他元素的链接设置相同。这里在“链接”文本框输入“http://www.wuhouci.net.cn”。(6)一个图像热区链接创建完成，单击【保存】按钮，按F12按钮预览网页。 4.2.5创建锚链接超链接除了可以链接到文件外，还可以链接到本页中的任意位置，这种链接方式称为“锚链接”。当一个网页的主题或文字较多时，为了方便用户浏览，可以在网页内的某些分项内容上建立多个标记点，将超链接指定到这些标记点上，使用户能快速找到要阅读的内容。我们将这些标记点称为锚点（Anchor）为网页中底端的文本“Top”建立一个链接到网页顶端的锚链接，操作过程如下。（1）创建锚链接之前首先要创建锚点，将光标放在页面中需要加入锚点的位置，在“插入面板”的“常用”选项卡中单击【命名锚记】按钮，弹出“命名锚记”对话框。（2）在“锚记名称”文本框中输入锚记的名称，这里输入“Top”。单击【确定】按钮，网页的相应位置将出现一个锚点标志。（3）选中需要建立锚链接的对象，这里是网页中底端的文本“Top”。在其属性面板中的文本框中输入“#”+“锚记名称”，这里是“#top”。注意“#”号表示该链接是锚链接。（4）一个锚链接创建完成，单击【保存】按钮，按F12按钮预览网页。 4.3超链接的检查与测试DreamweaverCS4提供的链接检查器可以方便的检查网站中的链接，检查过程如下。（1）在DreamweaverCS4主窗口中，单击菜单【窗口】→【结果】→【链接检查器】，打开的“链接检查器”面板。（2）单击面板左上方的箭头，在弹出的菜单中选择相应命令，这里选择“检查当前文档中的链接”。（3）链接检查器将会自动开始检查站点链接，检查完毕后，如果有无效链接，则会显示在该对话框中。（4）如果要修改无效的链接，单击链接内容，并对其进行修改即可。4.3.1链接检查 4.3超链接的检查与测试网站发布之前，应该通过浏览器对链接进行测试。在DreamweaverCS4主窗口中，单击菜单【文件】→【在浏览器中预览】→【IExplore6.0】，或按F12键或单击“在浏览器中预览”按钮就可以在浏览器中预览网页，进行链接测试。4.3.2链接测试 4.4习题一、选择题1.下列路径属于绝对路径的是（）。A）http://www.163.comB）/stuhome/index.htmlC）index.htmlD）stuhome/index.html2.将超链接的目标网页在新窗口中打开的方式是（）。A）blankB）parentC）topD）self3.用于在同一网页内容之间相互跳转的超链接是（）。A）锚点链接B）空链接C）电子邮件链接D）图像链接二、简答题1.什么是超链接2.什么是相对路径，什么是绝对路径，两者有什么区别？3.热区的作用是什么？ 4.4习题三、上机实践1.在超链接文件夹下创建“名站收藏..html”网页文档，在网页中列举自己经常访问的网站名称，为他们建立到网站网址的超链接。2.在超链接文件夹下创建“相册..html”网页文档，在网页中插入图片，在图片上建立热区图像链接。3.为网页“相册.html”建立到底端和到顶端的锚链接。