网络中的一个个网页是通过超级链接的形式关联在一起的。超级链接是网页中最重要也是最根本的元素之一,没有它的存在,网页之间失去了关联,也就不成为网了。
网页中的超级连接分为以下三种形式:绝对路径 如:http://www.ddvip.com/index.htm 文档相对路径 如:web/work/my.htm 站点根目录相对路径 如:/web/work/my.htm
【文本超级链接】
浏览网页时,鼠标经过某些(带有下划线的)文字的时候,鼠标指针的形状会发生变化,根据网页设计的不同,可能文本也会发生一些变化,比如出现下划线或下划线消失、文本颜色字型改变等。这就是提示浏览者“这里是一个超级链接”此时用鼠标点击这个超级链接,就会打开所链接的网页。
在 Dreamweaver MX 2004 中为文本加入超级链接十分简单,以本小节素材为例,我们一起来动手建立一下文本超级链接。
1、首先请各位下载本小节素材,然后将“test”文件夹放入我们建立的站点“myweb”目录中。
2、用 Dreamweaver MX 2004 打开“test”文件夹中的“index.htm”
3、用鼠标选中“启航简介”:
4、来到属性面板,在【链接】文本框后点击文件夹图标:
5、打开【选择文件】对话框:
在这里我们引入相对路径的概念:
选中文档之后,在上图中我们选择【相对于】下拉选项的“文档”或“站点根目录”【URL】文本框的内容也随之改变。
如果在【相对于】选择【文档】则使用文档的相对路径,省略了与当前文档链接相同的URL部分,只指明不同部分。一般相对于文档用于以下几种情况:要链接的文档与当前文档在同一文件夹中,这是只需要输入文件名。 要链接的文件位于当前文件所在文件夹的子文件夹中,URL会自动加上子文件夹名。
如果在【相对于】选择【站点根目录】则使用从站点根目录到文档所在文件夹所经过的全部路径,本选项一般适合在使用多台服务器的大型网站。如果不是很熟悉路径的概念,建议大家采用相对于文档。
上面所例出的都是相对文档与文件夹而言的,以此建立的链接叫做“相对路径”
为文本添加链接之后,属性面板中的【目标】文本框就变成了可选状态:
重复上面的步骤为“课程介绍”以及后面的页面中的文本设置超级链接。
为“启航论坛”设置超级链接,这里【链接】文本框中填写的是启航论坛的URL
(http://bbs.flasher123.com/index.asp) 它的URL带有通信协议、主机名,文件名等,是一个完整的统一资源定位,因此这就是“绝对路径”
绝对路径一般在所要链接的内容在其他网站的时候。
【设置文本链接的不同状态】
大家上网浏览会发现有些文本链接颜色会发生变化,有的有下划线,而有的没有下划线,那些文字有的点击后颜色发生了改变,有些并不改变,这些是怎么做到的呢?
原来,默认加入超级连接之后的文本带有下划线,点击后文本也会改变颜色。根据设计者的喜好以及页面总体视觉效果的需要,我们可能会为了保持页面文本字型字号字色的一致而采用只有鼠标移动到带有超链的文本时文本才变色,提示用户此处是一个超级链接。过去这样的效果需要填写大量代码才能实现,现在Dreamweaver MX 2004 给大家提供了方便的设置方法,只需要点击几次鼠标,就能制作出与众不同的网页来。
1、在【属性】面板点击【页面属性】打开其对话框,对话框中的【分类】选择【链接】
【图像链接】
图像链接与文本链接大体相同,不同的首先要选中图像,然后在链接文本框中设置。更多的内容,在前面图像属性中已经介绍,不再赘述。
【电子邮件链接】
在“常用”中点击“电子邮件”按钮(点击“常用”处下拉三角可以选择各种布局方式)
弹出对话框:
按下“确定”按钮,一个电子邮件的超级链接就建立完毕。
依次填写文本和正确的邮件地址,网页中文本的内容就会变成一个电子邮件超级链接,用户点击它时,就能启动Outlook或Foxmail等软件给您发送邮件了。
【下载链接】
建立下载链接与建立文本链接基本相同,不同的是在【链接】文本框中最后的文件的扩展名是“rar、zip”等。
【建立锚点】
当一个页面中如果内容过多,就会使页面变的很长,用户要通过拉动浏览器的滚动条才能在页面中浏览相关的内容。这样就很不方便,建立锚点,就可以在本页面中快速的查找相关的主题和信息,本教程第一课第一小节就在页面中大量使用了锚点。
打开本小节素材中的“test3.htm”如果我们想点击术语列表中的“域名”就能直接跳转到相关的术语解释,而不需要拖动浏览器的滚动条。
1、选择“常用布局”将光标移动到属于解释的“域名”,然后按下【命名锚记】按钮
弹出【命名锚记】对话框,在铭记名称文本框填写一个名称,如“1”
按下确定按钮后,相应位置插入了一个锚点:
2、回到“术语列表”用鼠标选中文本“域名”,并在属性面板的【链接】的拖动【指向文件】图标,直接指向刚才建立的锚点:
松开鼠标后【链接】的文本框中出现“#1”此时,保存文档,在浏览器中打开该文档,点击术语列表的“域名”超级链接时,就会快速跳转到“术语解释”的“域名”。
请各位在“回到术语列表”的文本和“术语列表”文本之间做建立锚点和链接,来体会一下。