网页设计建立链接_第1页
网页设计建立链接_第2页
网页设计建立链接_第3页
网页设计建立链接_第4页
网页设计建立链接_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章

建立超级链接所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。3.1超链接的概念合理安排超链接在网页的制作中是非常重要的。采用什么结构的链接会直接影响到网页的布局。建议：避免孤立文件的存在在网页中避免使用过多的超链接网页中的超链接不要超过4层页面较长时可以使用书签设置主页或上一层的链接

合理安排超链接

URL（UniversalResourcesLocator）用于定位Web上的文档信息。一个URL包括四部分：协议、计算机地址、端口号、文件路径。协议：//计算机:端口号/文件路径一个典型的URL为:

:80超链接基础超链接基础——绝对URL绝对URL常用于引用另一网络服务器上的链接，它是指资源的完整地址，包括URL所有四个部分，即：协议：//计算机域名/路径/文档名超链接基础——相对URL相对URL是指网站内部资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。如果要链接的资源位于当前文件夹中，就只要输入文件名即可，如help.html。当要链接的资源不在当前文件夹时，则需要添加路径信息。超链接基础——相对URL要链接的资源位于下级文件夹时，需先输入下级文件夹名，后跟一个“/”号，再输入文件名，如content/computer.html。要链接的资源在上级文件夹或上级文件夹的其他下级文件夹中时，可使用“../”表示上级文件夹路径，后面再跟上具体路径信息。如../index.html，再如：../images/flower.jpg。超链接基础——相对URL要链接的资源位于下级目录时，需先输入下级文件夹名，后跟一个“/”号，再输入文件名，如content/computer.html。当要链接的资源不在当前文件夹时，则需要添加路径信息。不同类型的超链接按照链接路径的不同，网页中超链接一般分为以下3种类型：内部链接：即在同一个站点内的不同页面之间相互联系的超链接。锚点链接：可以链接到网页中某个特定位置的链接。外部链接：把网页与Internet中的目标相联系的链接。不同类型的超链接如果按照使用对象的不同，网页中的链接又可以分为：文本超链接图像超链接E-mail链接锚点链接多媒体文件链接空链接3.2HTML设置超链接文字超链接书签链接文件（下载）链接Email链接超链接的显示效果1）文本超链接标签1．格式：

<ahref="链接位置"target="窗口名称">超链接名称</a>2．说明：①超链接名称就是链接的源点，当鼠标被移到超链接名称处时会变成手状。②链接位置就是超链接的目标，可使用URL指定。URL的格式是由通讯协议、链接地址与文件位置所组成，语法如下：通讯协议://链接地址/文件位置.../文件名称③target用于指定打开链接的目标窗口。Target属性

<a>…</a>标记中的target属性称为目标属性，用于指定新引用的资源显示在哪一个窗口中。Target属性取值分为以下两种情况：如果需要新引用的页面显示在本窗口中，亦即复盖当前页面的内容，应该不为target属性赋值。如果需要另开一个新窗口来显示新引用的页面，则可为target属性赋值为:target=“windowname”。其中，target属性取值为一个空窗口名“_BLANK”2）锚点(书签)链接

使用页面内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。定义锚点应使用<aname=xxx></a>

指向锚点的超链接为：

<ahref=#xxx>link</a>锚点命名的注意事项①只能使用字母和数字，锚记命名不支持中文。虽然在插入锚记对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚记添加链接的时候，也无法工作。②锚记名称的第1个字符最好是英文字母，一般不要以数字作为锚记名称的开头。③锚记名称区别英文字母的大小写。④锚记名称间不能含有空格，也不能含有特殊字符。链接锚记时，注意以下事项：①在#和锚记名之间不要留有空格，否则链接会失败。②符号#必须是半角符号，而不能为全角符号。锚点链接指向其他页面内锚点的超链接：<ahref=页面的URL#该文件中的锚点>link</a><ahref=#>blanklink</a>各种常用超文本链接标记应用的实例<HTML><HEAD><TITLE>超文本链接标记实例</TITLE></HEAD><BODY>大<br>家<br>好<br> <aname="A1">跳转锚记1。</a><br><br><br><br><br> 长<br>沙<br>理<br>工<br>大<br>学<br> <ahref=“a1.html”>点击此处将跳转到另一个网页。</a><br> <ahref=“a1.html”target=“_blank”>点击此处将在一个新的浏览器窗口打开另一个网页。</a><br> <ahref="#A1">向前跳转到锚记1。</a>、<ahref="#A2">向后跳转到锚记2。</a> 计<br>算<br>机<br>与<br>通<br>信<br>工<br>程<br>学<br>院 <br><br><br><br> 长<br>沙<br>理<br>工<br>大<br>学<br> <aname="A2">锚记2。</a><br></BODY></HTML>3）文件下载

当超链接目标为浏览器不能识别的文件格式时，那么就自动生成了文件下载链接。<ahref=abc.zip>下载</a>4）Email链接<ahref=mailto:i@>Email</a>示例：<ahref=mailto:djs_mail@>请给我写信</a>点击“请给我写信”将打开本地的电子邮件客户端程序，方便用户编写电子邮件。5）超链接的显示效果HTML文件中超链接文字颜色的设置，是由<body>标签中的text、alink、vlink与link属性所控制。其中：①text属性：非可链接文字的颜色， 默认为黑色（Black）。②link属性：可链接文字的颜色，默认为蓝色(Blue)。③vlink属性：已经被访问过的可链接文字的颜色， 默认为粟色（Maroon）。④alink属性：正被单击的可链接文字的颜色， 默认为红色(Red)。超链接的显示效果示例示例：<HTML><HEAD><TITLE>超文本链接标记实例</TITLE></HEAD><BODYvlink=green>长沙理工大学<br> <aname="A1">跳转锚记1。</a><br>长<br>沙<br>理<br>工<br>大<br>学<br><br><br><br><br><br><ahref=“a1.html”>在本窗口中打开一个新网页</a><br><ahref=“a1.html”target=“_blank”>在新窗口中打开一个网页</a><br><ahref=“#A1”>向前跳转到锚记1。</a>、

<ahref="#A2">向后跳转到锚记2。</a> <br><br><br><br><br><br><br><br><br

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论