宁波网站设计专栏

宁波网站设计:超链接

发布时间:2018-09-22 23:02:18

  超链接
  超链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超链接串接而成,超链接完成了页面之间的跳转。超链接是浏览者和服务器交互的主要手段9.1超链接常识一个网站的网页如果没有超链接,则各网页间就无法互相联系与跳转,也就不能称为一个完整的网站。学习制作网站,必须学会超链接的应用。下面介绍超链接的基础知识。
  超链接的基础知识
  超链接的定义
  链接,是指一个事物与另一个事物之间的绑定关系。
  超链接,是”超级链接“的简称,是指在计算机软件中,对包括文字、图片、按钮、影音多媒体等对象添加对另一文件的指向关系,单击该对象即可索引或访问指向文件的特殊功能。
  超链接是一种对象,它以特殊编码的文本或图形的形式来实现链接,单击该链接相当于指示浏览器移至同一网页内的某个位置,或打开一个新的网页,或打开某一个新的WWW网站中的网页。
  超链接的运行原理
  超链接在本质上属于一个网页的一部分,它是一种允许同其他网页或站点之间进行连接的元素。各个网页链接在一起后,才能真正构成一个网站。所谓超链接,是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一张图片、一个电子邮件地址、一个文件,甚至一个应用程序。而在一个网页中用来超链接的对象,可以是一段文本或者一张图片。当浏览者单击已经链接的文字或图片时,链接目标将显示在浏览器上,并且根据目标的类型打开或运行。
  超链接的类型
  超链接在网页中的应用频繁,分布广泛,根据不同的分类方法,可以分成多种不同的类型。
  按照链接路径分类

宁波网站设计:超链接的图片258

  按照链接路径的不同,网页中的超链接一般分为3种基本类型:内部链接、锚点链接和外部链接。
  内部链接,是指在本网站内部页面之间建立的链接关系。
  外部链接,是指在本网站页面和其他网站页面之间建立的链接关系。
  锚点链接,是指通过锚点功能制作出来的对本页面或本页面与其他页面中的页面内容进行快速定位的链接方法。
  按超链接对象分类
  按照使用对象的不同,网页中的链接又可以分为:文本超链接、图像超链接、E-mail链接、多媒体文件链接、程序链接和空链接等几种类型。
  文本超链接,是指在网页文本之上附加的超链接功能。
  图像超链接,是指在网页图像之上添加的超链接功能。
  E-mail链接,是指专门对用户邮箱进行连接和访问的超链接功能。
  多媒体文件链接,是指在影音视频等多媒体文件上所附加的多媒体功能。
  程序链接,是指在计算机程序代码中编写链接语句,只有当程序执行到该语句才会触发响应的超链接功能。
  空链接,是指只有链接功能,但没有具体链接对象的超链接。有时候,空链接也叫作死链。需要注意的是,为了给用户较好的体验,除非有特殊的功能需要,否则应该尽可能不出现空链接。

宁波网站设计:超链接的图片250

  按链接地址进行分类
  按链接地址的不同,超链接一般可以分为3种:绝对URL的超链接、相对URL的超链接和同一页面URL的链接。
  网络地址,又称为URL,就是统一资源定位符,简单地讲就是网络上的一个站点、网页的完整路径,如”http://www.huaxiaonline.net/“等。
  绝对URL的超链接,是指链接地址书写完整,包含URL所有组成元素的超链接地址,例如”http://www.nanshan.edu.cn/info/1010/2082.htm“o这种链接的优点是既可访问外部网站链接,又可访问自身网站链接。其缺点是书写烦琐,且当网站域名发生变更时,所有链接都会失效。
  相对URL的超链接,是指链接地址简化书写,只描写相对于当前页面所体现的地址即可,例如”1010/2082.htm“。
  相对URL的超链接只能访问本网站页面,无法外链其他网站,但它胜在书写简单,灵活性强,故通常用于网站自身页面之间的链接,如将本网页上的某一段文字或某标题链接到同一网站的其他页面。
  同一页面URL的超链接,这种超链接又叫作书签。
  按链接地址是否可以变化分类
  按照链接地址是否可以发生变化,超链接又可以分为动态超链接和静态超链接两大类。
  动态超链接,是指页面制作者可以通过改变HTML代码来实现动态变化的超链接,例如可以实现将鼠标移动到某个文字链接上,文字就会像动画一样动起来或改变颜色的效果,也可以实现将鼠标移到图片上图片就产生反色或变得朦胧的效果。

宁波网站设计:超链接的图片247

  静态超链接,顾名思义,就是没有动态效果的超链接。
  超链接的外观
  默认外观
  在网页中,一般文字上的超链接都是蓝色的(当然,也可以设置成其他颜色),文字下面有一条下划线。当移动鼠标指针到超链接上时,鼠标指针就会变成一只手的形状,这时候用鼠标左键单击,就可以直接跳到与这个超链接相连接的网页或WWW网站上去。如果用户已经浏览过某个超链接,这个超链接的文本颜色就会发生改变(默认为紫色)。
  图像超链接同样在图像的四周产生一条蓝色的链接线,单击访问后变为紫色。
  链接对象变化外观
  网站的设计者如果觉得默认外观较为单调的话,可以通过Photoshop设计、CSS样式表和JavaScript脚本语言来变化出形式较为多样的超链接外观。

宁波网站设计:超链接的图片253

  对文字链接可以设置各种颜色,可以有链接线,也可以没有链接线,还可以制作在鼠标移到文字上时发生颜色、大小、链接线隐现变化的链接等。
  图片链接可以不显示链接边框线,也可以设置成不同内容、不同变化效果等。

宁波网站设计:超链接的图片251

  裢接氣标变化外观

宁波网站设计:超链接的图片261

  通过CSS样式表和引人专门制作好的图片,可以更改鼠标光标在移到超链接、单击超链接和移出超链接时的形状、图案变化,制作出丰富多彩的网页效果。
  利用可视化工具添加超链接

宁波网站设计:超链接的图片257

  Dreamweaver具有便捷的添加超链接功能,下面其操作方法。
  超链接添加步骤
  打开Dreamweaver,新建一个HTML页面或打开一个已经存在的页面。
  将当前的Dreamweaver工作窗口保留在设计界面之中。
  在下方的属性面板对该对象添加超链接。
  通过设计界面添加超链接的方式有三种,分别是手动添加、本地选取和站点拖选。

宁波网站设计:超链接的图片248

  ①手动添加超链接地址。在面板右侧找到”链接“的输人框,添人超链接目标地址即可。该目标地址可以是一个网址,也可以是一个文件的路径地址。手动添写的网络地址,既可以是绝对地址,也可以是相对地址。
  优点:链接范围广;缺点:如果链接地址复杂,容易产生输写错误。
  ②本地选取文件生成超链接地址。在属性面板”链接“输人框的右侧有一个黄色的小文件夹图标,这是一个图标按钮,通过单击它,可以打开本地电脑的文件浏览窗口,选中需要链接的文件即可。
  注意:通过”本地选取“方式建立的超链接,链接对象文件必须真实存在,生成的链接地址将是该文件的路径名,且只能是相对地址的链接。
  优点:添加简单;缺点:不能选取站点外的文件3小技巧:为了防止网站上传到服务器后因地址变更而产生链接文件找不到的错误,建议把链接文件先复制到本网站所在文件目录中,再浏览选取。
  ③拖选站内文件生成超链接地址。在属性面板”链接“输入框的右侧有一个小时钟的图标,单击该图标,并按住,拖动至右侧站点面板中拟添加超链接的目标文件上,超链接就会自动生成。
  注意:使用该方法必须首先建立网站的站点,且只能链接到该站点中已有的文件。
  优点:添加简单,并能杜绝站外链接的产生;缺点:必须先建站。建议尽可能多地使用这种方法建立超链接。
  超链接地址添加完后,可以选择链接网页的打开方式。方法是单击”链接“输出框右边的”目标“下拉框,选中其中一种打开方式。
  注意:可以不选,则默认在新开窗口打开链接页面。

宁波网站设计:超链接的图片255

  至此,网页上的超链接已经生成。
  利用标签添加超链接
  超链接除了应用可视化界面实现功能之外,使用HTML代码往往可以更灵活地实现超链接的各种功能。
  基本链接语法
  语法:
  <Ahref=”链接地址“>链接对象</人>
  说明:
  在该语法中,链接地址可以是绝对地址,也可以是相对地址。链接对象可以是文字,也可以是图片。
  实例代码如下:

宁波网站设计:超链接的图片249

  文字链接:<Ahref=nhttp://www.baidu.com/”〉链接到百度</人〉;图片链接:<Ahref=“http://www.baidu.com/”><imgsrc=/images/anniu.jpg“></A>;绝对地址链接:<Ahref=”http://www.huaxiaonline.net/news/china/index,asp“>链接到华夏在线中国新闻页</A>相对地址链接:<Ahref=”news/china/index,asp“〉链接到华夏在线</A>。其中,相对地址链接,其地址主要是相对于当前页面而言。
  设置超链接的目标窗口
  如果在使用超链接打开网页的时候,不希望超链接的目标窗口将原来的窗口覆盖,比如希望不论链接到何处,主页面都保留在原处,可以通过target参数设置目标窗口的属性。
  语法:
  <Ahref=”链接地址“target=目标窗口的打开方式>链接元素</人>说明:
  在该语法中,target参数的取值有4种,宁波网站设计见实际。
  实际目标窗口的设置
  target参数值目标窗口的打开方式

宁波网站设计:超链接的图片260

  _parent在上一级窗口打开,常在分帧的框架页面中使用_blank新建一个窗口打开_self在同一窗口打开,与默认设置相同_top在浏览器的整个窗口打开,忽略所有的框架结构实例代码如下:
  

宁波网站设计:超链接的图片256

  书本介绍
  
  〈fontsize=4>《三国演义》〈/font〉
  作者:罗贯中  出版社:人民邮电出版社<1^>
  书本详情介绍
  在这段代码中包含一个超链接文本”书本详情介绍“,单击该文字上的链接,即可以用新开窗口的方式打开”thebook.html“文件。
  邮件链接的应用
  邮件链接是网页设计制作中的一个非常实用的HTML标签,许多拥有个人网页的人都喜欢在网站的醒目位置写上自己的电子邮件地址,这样网页浏览者一旦用鼠标单击一下超链接,就能自动打开当前计算机系统中默认的电子邮件客户端软件,例如OutLookExpress以及Foxmail等。下面介绍在Dreamweaver中创建电子邮件链接的方法。
  邮件链接的常识
  所谓邮件链接,是对超链接的一种灵活应用,是指设计者在制作的网页中以超链接的形式,实现对用户电子邮件的链接和发送邮箱的启动功能。
  利用可视化工具发送邮件链接
  通讨Dreamweaver.可以方便地容现邮件链接的牛成和调用,制作方法如下:
  第一步:利用Dreamweaver打开拟填加超链接的网页,并进入”设计“工作界面。
  第二步:在页面上填加拟附加超链接的文字信息,例如输入文字”联系方式:“,并把鼠标移到文字的后面。
  小技巧:
  在下方的属性面板里也可以创建一个电子邮件链接,直接在”链接“输人框中键人”mailto:“,后跟电子邮件地址就可以了。
  利用标签发送邮件链接
  通过HTML标签代码,同样可以在网页中设置如”联系我们“”问题反馈“等邮箱链接,类似网页超链接,只是可以直接打开默认邮箱程序。
  语法如下:
  <ahref=”mailto:youEMail@xxx.yyy“>链接文字</8>说明:
  设计者通过<a>标签在网页中创建一个电子邮件链接,用户单击电子邮件链接时,该链接将打开一个新的空白信息窗口。
  ”mailto“是邮件链接的特定标志关键字,指向拟发送的邮箱地址。
  如果在网页中创建一个形如”mailto:aaa@163.com“的超链接,用鼠标单击该超链接,浏览器会自动调用系统默认的邮件客户端程序,同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址,而其他的内容都是空白,留给访问者自行填写。
  代码示例如下:
  contactus
  contactus

宁波网站设计:超链接的图片254

  代码标签执行效果如实际所示。
  实际代码标签执行效果
  在该语法的电子邮件地址后还可以增加一些参数,见实际。
  实际标签的参数

宁波网站设计:超链接的图片259

  参数表示的含义语法
  cc抄送收件人
  Subject电子邮件主题链接文字
  BCC暗送收件人链接文字
  Body电子邮件内容
  这些参数可以没有,也可以同时设置几个。在带有多个参数时,需要使用”&“符号对参数进行分隔。实例代码如下:
  〈title〉发送电子邮件〈/title>
   ;&nl)sp;如果您在使用网站的时候发现了问题或者bug,欢迎您给我们提出。

  发现问题


  &nhsp; ;如果您对我们的工作有建议或意见,也欢迎您来信提出。

  提出意见建议
  给作者来信
  运行这段代码,单击页面中的链接文字”发现问题“,可以打开默认的电子邮件程序OutlookExpress,在程序中可以看到,除了设置的E-mail地址之外,在”密件抄送“文本框中也设置了电子邮件的地址。单击页面中的”提出意见建议“文字链接,在打开的OutlookExpress中,除了”收件人“”抄送“文本框中设置了电子邮件外,还同时设置了邮件的主题。
  小技巧:
  如果在单击电子邮件超链接时,希望在系统自动打开的电子邮件编辑窗口中,除了在收件人地址栏中自动填写内容外,在抄送地址栏中也能自动填写需要的电子邮件地址,可以直接在网页的HTML源代码中插人形如”mailto:aaa@163.com?bbb@163.com“的语句,其中”aaa@163.com“将会自动出现在收件人地址栏中,”bbb@163.com“则会自动出现在抄送地址栏中。

宁波网站设计:超链接的图片252

  如果希望在弹出的邮件编辑窗口中能自动将邮件的主题内容填上,可以使用形如”mailto:aaa@163.com?subject=1mailto1特定代碍“的HTML语句,这样当浏览者用鼠标单击由该语句组成的电子邮件超级链接时,在随后打开的邮件编辑窗口的收件人地址栏中自动出现”aaa@163.com“,在主题设置栏中将自动出现”mailto’特定代码“这样的内容。
  如果想在收件人地址栏中同时输人多个电子邮件地址,可以使用形如”mailto:aaa@163.com;bbb@163.com“的语句,记住每个电子邮件之间用”;“隔开,这样当浏览者单击由该语句创建的电子邮件超链接时,在弹出的邮件编辑窗口的收件人地址栏中同时会出现”aaa@163.com“”bbb@163.com“这样的收件人地址,浏览者就能同时向这些人发送电子邮件。
  在网页中出现的邮件地址经常会被一些诸如”mail-robot“的自动搜索程序搜索到,这样其他人很容易利用搜索到的邮件地址向用户发送各种各样的垃圾邮件,为了将这些垃圾邮件拒于千里之外,可以将在网页上公开的邮件地址写成ASCII码形式,同时每一个ASCII码前面都必须添加例如在网页中使用”mailto:aaa@163.com“这样的语句来创建电子邮件超链接的话,单击该超链接后,发现在随后打开的邮件收发窗口中,收件人地址栏中仍然会显示”aaa@163.com“这样的内容,而其他各种邮件自动搜索工具都不能正确识别这样的ASCII代码,因此用户收到的各种来历不明的垃圾邮件就会大大减少。
  一般情况下,浏览者单击电子邮件超链接时,系统在默认打开的邮件客户端程序中,只是自动在收件人地址栏处填上内容,而其他设置栏处仍然显示为空白,如果还希望自动把主题、抄送、暗送,甚至内容都填写上,可以使用形如”mailto:aaa@163.com?cc=bbb@163.com&bcc=ccc@163.com&subject=1mailto*特定代码&body=mailto标签的综合应用举例说明!“的语句。在这个语句中第一个功能以”?“开头,后面的每一个功能以”&“开头,当用鼠标单击这个邮件地址时,在随后打开的邮件编辑窗口中,在收件人地址栏中自动填写上”aaa@163.com“,在抄送地址栏中自动填写上”bbb@163.com“,在暗送地址栏中自动填写上”ccc@163.com“,在主题栏中自动填写上”?mailtoi特定代码“,在信件的正文部分将自动出现”mailto标签的综合应用举例说明!“。
  上面出现的”aaa@163.com“”bbb@163.com“”ccc@163.com“都是为方便说明而设置的,读者可以根据自己的要求,用真实的邮件地址来代替它们。此外,如果要使用mailto同时实现多个功能,第一个功能必须以”?“开头,后面的每一个功能都以”&“开头;另外,”cc“后为抄送地址,”bcc“后为暗送地址,”subject“后为邮件的主题,”body“后为邮件的内容。
  本文转载自
  宁波网站设计www.leseo.net
  补充词条:宁波网络seo公司  宁波seo网站优化  宁波seo哪家好  宁波seo排名  宁波seo外包