第6章网页设计关键技术超级链接.ppt

,超级链接一般分为内部链接、外部链接、锚点链接、电子邮件链接以及其它的一些链接方式，如图像映射和翻转图等。,第6章神通广大的超级链接,6.1内部链接,内部链接是指链接到网站内部的页面，就是在同一个站点内的不同页面之间建立一定的相互关系。,该类型的超级链接是使用最为广泛的链接。,超级链接是开发网站的基本基本技术，超级链接能将千千万万个网页组织成一个个的网站，它是Web的灵魂。,在DreamweaverMX中，不仅可以用文字制作成超级链接，还可以用图片制作成超级链接。链接的对象不仅是网页，还可以是多媒体文件、E-mail以及其它网站等。,制作要求：当用户单击“保护地板5大原则”时，链接到一个内部网页。,案例制作一个带有内部链接的网页,制作步骤,1打开或制作所要链接的页面文件，选中用于链接的文字“保护地板五大原则”。,2.在属性面板中单击Link旁边的按钮，选择超级链接要指向的文件名。,3.当网页尚未保存时，属性面板的Link框中显示的是以“file:/”开头的绝对路径，当保存文件后，则显示的是相对于文档所在目录（网站）的相对路径。,网页效果,内部链接是最常用的链接方式，制作很简单，只需将某个文字、词语或某幅图像与其它网页的地址联系在一起即可。,网页常常建立与外部网站的链接。如很多网站都有的“友情链接”，就是应用了外部链接。,6.2外部链接,案例创建与其它网站的链接,制作要求：在上一案例基础上增加一个“友情链接”的外部链接，当用户单击“友情链接”时，链接到一个外部网站。,制作步骤,1输入“友情链接”文字，然后选中它。,2在属性面板中的Link框中输入一个要链接到的外部网址。如：。,注意：不能省略“http:/”,否则浏览时会出现“该页无法显示”的提示信息。,很多网站中经常有与网站作者联系的电子邮件地址，当浏览者单击电子邮件地址时，系统会启动电子邮件程序，这就是电子邮件链接。,案例创建一个电子邮件链接,6.3电子邮件链接,制作要求：在上例中加入“与我联系”，创建电子邮件链接。,制作步骤,1.将光标定位到要插入电子邮件链接的位置。,2.选择主菜单Insert/EmailLink，弹出对话框。在Text框中输入“与我们联系”，在E-mail文本框中输入电子邮件地址。,注意：电子邮件地址一定要符合格式要求。,我们经常碰到这样的情况：在同一网页中实现超级链接。当某链接项时，网页自动跳到该项的详细内容上。这就是锚点链接的作用。对于包含了大量文字的网页来说，锚点链接是非常实用的。,6.4锚点链接,1.在网页中编辑文字内容,制作要求：在网页顶部有几部小说的名字，当用户单击某部小说时，网页立刻显示在本页中有关小说的详细内容。,.在文档窗口中，将光标放在要插入锚点的位置，即小说的详细内容处。,3.选择主菜单Insert/NamedAnchor，弹出对话框。在对话框中输入锚点名字。名字可以任取，但最好不要中文。,4.然后选中网页顶部的小说名，在属性面板中的Link框中输入“#“号和锚点名。,案例制作锚点链接,显示在网页锚点链接的效果。,制作步骤,6.5图像映射,我们在前面谈到，整幅图片可以制成超级链接。不仅如此，还可以把一幅图片的不同区域做成不同的超级链接。比如一张旅游地图，当单击不同地区，会跳转到不同的介绍该地区情况的网页。,这就是图像映射，图片上可单击的区域叫Hotspot热区。,案例使用图像映射,制作要求：把一幅地图图片上的“上海，北京，广东”三个区域分别设置成热区，使得当用户单击这些地区时，能跳转到不同网页。,制作步骤,在网页中插入地图并选中地图图像。,2.单击属性面板的热区工具，在相应区域绘制。,3.分别选中“北京”和“广东”热区，设置成不同的超级链接。,6.6翻转图,翻转图是指当鼠标指向一幅图片上时，该图片变成了另外一幅图，移走鼠标，又恢复原来的图像，单击鼠标时，会跳转到另一个网页。,这就是所谓的翻转图。,案例制作翻转图广告,制作要求网页中显示一幅图，当鼠标指向该图片时，它变成另外一幅图片，移走鼠标，又恢复原来的图片。单击该图片，链接到网页home.htm。,6.6翻转图,制作步骤,1.插入翻转图。将鼠标指针放到要插入翻转图的位置单击，选择菜单Insert/InteractiveImage/RolloverImage，在弹出对话框内进行设置。,2