创建链接Word下载.docx
《创建链接Word下载.docx》由会员分享，可在线阅读，更多相关《创建链接Word下载.docx（18页珍藏版）》请在冰豆网上搜索。
建立一个文本超链接的方法非常简单，首先选中要建立超链接的文本，然后在“属性”面板的“链接”框中输入要跳转的目标网页的路径及名称即可。
（2）图像超链接
图像超链接的创建方法和文本超链接的创建方法基本一致，选中图像，在“属性”面板中输入链接地址即可。
较大的图片中如果要实现多个链接可以使用“热点”帮助实现。
（3）E-mail链接
在页面中为E-mail添加链接的方法是利用mailto标签，在“属性”面板的“链接”框中输入要提交的邮箱即可，如图4-**所示。
图4E-mail链接
（4）锚记链接
锚点就是在文档中设置标记，并给该位置一个名称，以便引用。
通过创建锚点，可以使链接指向当前文档或不同文档中指定的位置。
锚点常常被用来跳转到特定的主题或文档的顶部，使访问者能够快速浏览到选定的位置，加快信息检索速度。
（5）多媒体文件链接
该种链接方法分为链接和嵌入两种。
使用与外联图像类似的语句可把影视文件链接到html文档，差别只是文件扩展名不同。
与链接外联影视文件不同，对嵌入有影视文件的html文档，浏览器在从网络上下载该文档时就把影视文件一起廿来，如果影视文件很大，则下载的时间就会很长。
（6）空链接
在制作或研发网页中，有时候需要利用空链接来模拟链接，以响应鼠标事件，防止页面出现各种问题。
在“属性”面板上的“链接”框内输入#符号即可创建空链接。
2、合理安排超链接
在网页中创建超链接时，需要综合整个网站中的所有页面进行考虑。
合理的安排超链接，才能使整个网站中的页面具有一定的条理性。
对创建超链接的建议如下：
（1）避免孤立文件的存在
应该避免存在孤立的文件，这样将来在修改和维护链接时就会有一个清晰的思路。
（2）在网页中避免使用过多的超链接
在一个网页中设置过多超链接会导致网页的观赏性不台，文件过大。
如果避免不了过多的超链接，可以尝试使用下拉列表框、动态链接等一些链接方式。
（3）网页中的超链接不要超过4层
链接层数过多容易让上产生厌烦的感觉，在力求做到结构化的同时，尖注意链接避免超过4层。
（4）页面较长时可以使用书签
当页面较长时，可以定义一个书签，从而使浏览者方便地找到想要的信息。
（5）设置主页或上一层的链接
有些浏览者可能不是从网站的主页进入网站的，此时，设置主页或上一层的链接，会让浏览者更加方便地浏览全部网页。
5.2链接路径
为了明确链接路径并能正确地使用路径，下面介绍一下路径的概念和种类。
每个页面都有一个唯一的地址，称为统一资源定位符（URL,即UniformResourdeLocator的缩写）。
URL的功能就是提供一种在Internet上查找任何资源的标准方法。
实际上，在链接中正是以URL的表达方式来书写链接路径的。
采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL地址通常由4部分组成，分别是文件传输协议、域名（或IP地址）、文件路径和文件名，如图4-**所示。
图5URL地址结构
一般来说，Dreamweaver允许使用使用的链接路径有3种：
绝对路径、文档相对路径和根相对路径。
1、绝对路径
绝对路径为文件提供完整的路径，包括使用的协议（如http、ftp、rtsp等）。
常见的绝对路径如、ftp:
//172.16.33.1等。
尽管本地链接也可以使用绝对路径，但不建议采用这种方式，因为一旦将此移动到时其他服务器，则所有本地绝对路径链接将断开。
图6绝对路径
采用绝对路径的好处：
路径同链接的源端点无关。
只要网站的地址不变，无论文件在站点中如何移动，都可以正常实现跳转。
另外，如果希望链接其他站点上的内容，则必须使用绝对路径。
（2）相对路径最适合网站的内部链接。
只要是属于同一网站之下的，即使不在同一目录下，相对路径也非常适合。
如果链接到同一目录下，则只需要输入要链接文档的名称。
要链接到下一级目录中的文件，只需先输入目录名，然后加“/”，再输入文件名。
如果要链接到上一级目录中的文件，则先输入
“../”，再输入目录名、文件名。
（1）如果要链接到同一目录下的4-2.html，则只需要在设置链接地址的地方输入4-2.html即可。
图7设置链接地址
（2）如果要链接到本文件所在目录下的images文件夹中的2406.png文件，则只需要在设置链接地址的地方输入images/2406.png即可。
图8设置链接地址
（3）如果要链接到当前目录以外的chap03文件夹下的3-1.html，则只需要在设置链接地址的地方输入.../chap03/3-1.html即可。
图9设置链接地址
5.3超链接设置
5.3.1创建网站内的文本链接
通过Dreamweaver，可以使用多种方法创建内部链接。
可以使用站点地图查看、创建、更改和删除链接，或在文档窗口中选择“修改”“创建链接”菜单命令选择指向的文件；
可以使用“属性”面板来链接文件，单击“浏览文件”图标
来选择文件，也可以使用“指向文件”图标
来选择文件，或直接输入文件路径。
使用“属性”面板创建网站内文本链接的具体步骤如下。
1、启动DreamweaverCS5，打开“时尚娱乐”站点的首页文件“index.html”。
2、选定“三楼新民众乐园又将为大家奉献两款全新主题广场”这一串字，将其作为建立链接的文本。
单击“属性”面板中的“浏览文件”图标
，打开“选择文件“对话框。
图10“浏览文件”图标设置超链接
3、在“选择文件”对话框中，选择网页文件“zhutiguangchang.html”，然后单击“确定”按钮。
图11“选择文件”对话框
此外，还可以使用拖动的方法来创建链接。
选定文本后，在“属性”面板中单击“指向文件”图标
，将其拖动到“文件”面板中的网页“zhutiguangchang.html”上，然后松开鼠标，即可完成链接的建立。
图12“指向文件”图标设置超链接
也可以使用“属性”面板直接输入链接地址的方法来创建链接。
选定文本后，选择“窗口”“属性”菜单命令，打开“属性”面板，然后在“链接”下拉列表文本框中直接输入链接文件名“zhutiguangchang.html”即可。
在“属性”面板的“目标”下拉列表中，可以选择链接文档打开的框架，其中各选项的含义如下。
图13“属性”面板的“目标”下拉列表框
（1）_blank
将链接的文件载入一个未命名的新浏览器窗口中。
（2）_new
将链接的文件载入一个新的浏览器窗口中。
（3）_parent
将链接的文件载入含有该链接的框架的父框架集或父窗口中。
如果包含链接的不是嵌套的，链接文件则加载到整个浏览器窗口中。
（4）_self
将链接的文件载入该链接所在的同一框架或窗口中。
此目标是默认的，所以通常不需要指定它。
（5）_top
将链接的文件载入整个浏览器窗口中，会删除所有的框架。
4、保存文档，按“F12”快捷键在浏览器窗口中预览效果。
5.3.2创建网站内的图像链接
使用“属性”面板创建网站内图像链接的具体步骤如下。
选定要创建链接的图像，然后单击“属性”面板中的“浏览文件”图标
图14设置图像超链接
2、在“选择文件”对话框中，选择网页文件“zhutiguangchang.html”，然后单击“确定”按钮。
图15“选择文件”对话框
3、在“属性”面板的“目标”下拉列表中，选择链接文档打开的框架，在“替换”文本框中输入图像的替换文本“秋季U2女装”。
图16设置“替换”文本框
与文本链接一样，也可以使用拖动或直接输入链接地址的方法来创建图像链接。
5.3.3创建锚点链接
创建命名锚记（简称锚点）就是在文档的指定位置设置标记，给该标记一个名称，以便引用。
通过创建锚点，可以使链接指向当前文档或不同文档中的指定位置。
锚点常常被用来实现到特定的主题或文档顶部的跳转链接，以使访问者能够快速地浏览到选定的位置，加快信息检索的速度。
创建锚战袍链接要先设置一个命名锚点，然后建立到命名锚点的链接。
创建命名锚记的具体步骤如下：
2、将光标放置到要命名锚记的位置，或选中要为其命名锚记的文本。
图17设置命名锚记位置
3、进行以下操作之一。
（1）在“插入”面板的“常用”选项卡中，单击“命名锚记”图标
。
（2）选择“插入”“命名锚记”菜单命令，或按“Ctrl+Alt+A”组合键。
3、在弹出的“命名锚记”对话框中输入“top”，单击“确定”按钮，此时即可在文档窗口中看到锚记
图18“命名锚记”对话框
图19创建命名锚点
注：
如果命名锚记没有出现在插入点，可以选择“查看”“可视化助理”“不可见元素”菜单命令使之可见。
在文档中定义了锚记后，只做好了链接的一半任务，要链接到文档中锚记所在的位置，还必须创建锚记链接。
具体的操作步骤如下：
1、在文档的底部选中“网站导航”作为链接文字。
图20选中链接文字
2、在“属性”面板的“链接”文本框中输入一个字符符号“#”和锚记名称。
例如，要链接到当前文档中名为top的锚记，则输入#top。
若要链接到同一文件夹内其他文档（如main.html）中名为top的锚记，则应输入“main.html#top”。
图21创建锚点链接
同样，也可以使用“属性”面板中的“指向文件”图标来创建锚记链接。
单击“属性”面板中的“指向文件”图标
，将其拖至要链接到的锚记（可以是同一文档中的锚记，也可以是其他打开文档中的锚记）上即可。
3、保存文档，按“F12”键在浏览器中将网页打开，然后单击网页底部的“网站导航”，网页中导航栏就会出现在页面顶部。
5.3.4创建图像热点链接
在网页中，不但可以单击整幅图像跳转到链接文档，也可以单击图像中的不同区域而跳转到不同的链接文档。
通常将处于一幅图像上的多个链接区域称为热点。
单击“属性”面板上的指针热点工具
，将鼠标指针恢复为标准箭头状态，可以在图像上选取热点。
被选中的热点边框上会出现控点，拖动控点可以改变热点的形状，选中热点为后，按“Delete”键可以删除热点。
也可以在“属性”面板中设置热点相对应的URL链接地址。
如何创建一幅图像中的多个热点呢？
2、选定图像，单击“属性”面板中相应的热点工具按钮，然后在图像上需要创建热点的位置拖动鼠标，即可创建热点。
图22创建热点
热点工具有3种：
矩形热点工具
、椭圆形热点工具
和多边形热点工具
3、在“属性”面板的“链接”文本框中设置链接路径即可。
5.3.5创建电子邮件链接
好的站点总在不断地自我完善和提高，从浏览网站的人那里及时获得需要的意见和建议是非常必要的。
很多情况下，需要将网站管理员的E-mail地址保留在网页上，以便于及时在获取外界反馈信息，这时可以在网页中使用电子邮件链接。
电子邮件链接是一种特殊的链接，单击这种链接，不是跳转到相应的网页上，也不是超载相应的文件，而是会启动计算机中相应的E-mail程序，允许书写电子邮件，然后发往指定的地址。
创建电子邮件链接的具体步骤如下：
2、将光标置于文档窗口中要显示电子邮件链接的地方，或选定即将显示为电子邮件链接的文本或图像（这里选择Sky@china-），然后进行以下操作之一。
图23设置电子邮件链接位置
（1）选择“插入”“电子邮件链接”菜单命令。
（2）在“插入”面板的“常用”标签下单击“电子邮件链接”图标
3、在弹出的“电子邮件链接”对话框的“文本”文本框中，输入或编辑作为电子邮件链接显示在文档中的文本，在“电子邮件”文本框中输入送达的E-mail地址，然后单击“确定”按钮。
图24“电子邮件链接”对话框
同样，也可以利用“属性”面板创建电子邮件链接，在“属性”面板的“链接”文本框中输入“mailto：
和电子邮件地址”。
图25“属性”面板
4、保存文件，按“F12”按在浏览器中预览，可以看到电子邮件链接的效果。
单击电子邮件链接文本，可以打开用于发送邮件的E-mail程序窗口以书写邮件。
5.3.6创建下载文件的链接
下载文件的链接在软件下载网站或源代码下载网站中应用得较多。
下载文件的链接的创建方法与一般的链接的创建方法相同，只是所链接的内容不是文字或网页，而是一个软件。
创建下载文件的链接的具体步骤如下：
在文档窗口中，选中要设置为下载文件的链接的文本“Flashplayer9”。
图26设置下载文件的链接位置
2、单击“属性”面板中的“浏览文件”图标
，在打开的“选择文件“对话框中，选择要链接的下载文件，如“Install_Flash_player9.exe”，然后单击“确定”按钮，即可完成下载文件的链接的创建。
如果链接指向的文档不是HTML文档，而是其他类型的文档，那么单击链接后，出现的结果也不相同。
如果是GIF、JPG或PNG图像，则会在浏览器窗口中载入图像。
如果是浏览器不识别的文档，如带有.exe扩展名的可执行文件，则会打开“文件下载—安全警告”对话框，询问是否运行或保存该文件。
图27“文件下载—安全警告”对话框
5.3.7创建空链接
所谓空链接，不是没有目标端点的链接。
利用空链接，可以激活文档中链接对应的对象和文本。
一旦对象或文本被激活，就可以为之添加一个行为，以实现当光标移动到链接上时进行切换图像或显示分层等动作。
对一般首页中导航栏里的“本站首页”文本就没有必要设置带有目标的链接，因为当前所在的位置就是“本站首页”页面的位置，但是为了能够看到链接的效果，在这里需要设置一个空链接。
创建空链接的具体步骤如下：
1、在文档窗口中，选中要设置为空链接的文本或图像。
2、打开“属性“面板”，然后在“链接”文本框中输入一个“#”号，即可创建空链接。
图28设置空链接
5.3.8创建脚本链接
脚本链接是另一种特殊类型的链接，通过单击带有脚本的文本或对象，可以运行相应的脚本及函数（JavaScript和VBScript等，下面以JavaScript为例进行说明），从而为浏览者提供许多附加的信息。
脚本链接还可以被用来确认表单。
在脚本链接中，由于JavaScript代码出现在一对双引号中，因此代码中原先的双引号应该相应地改为单引号。
创建脚本链接的具体步骤如下：
1、在文档窗口中，选择要创建脚本链接的文本、图像或其他对象。
2、在“属性”面板的“链接”文本框中输入“JavaScript：
”，接着输入相应的JavaScript代码或函数，例如输入“JavaScript：
windows.close（）”，表示关闭当前窗口。
3、保存网页后，按“F12”键在浏览器中将网页打开。
单击创建脚本链接的文本，就会弹出对话框，单击“是”按钮，将关闭当前窗口。
考虑截图（关闭窗口对话框）
JPG格式图片不支持脚本链接，如果为图像添加脚本链接，则应将图像格式转换为GIF格式。
5.4超链接属性控制
超链接属性控制通过CSS样式实现。
CSS对于链接的样式控制是通过伪类来实现的，在CSS中提供了4个伪类，用于对链接样式进行控制，每个伪类用于控制链接在一种状态下的样式。
根据访问者的操作，可以对超链接进行4种状态的样式设置：
1、a:
link
未被访问过的链接。
该种伪类链接应用于链接未被访问过的样式。
2、a:
active
光标单击的链接。
该种伪类链接应用于链接对象在被用户激活时的样式。
在实际应用中，这种伪类链接状态很少使用，且对于无href属性的a对象，此伪类不发生作用。
3、a:
hover
光标经过的链接。
该种伪类链接用来设置对象在光标经过或停留时的样式，该状态是非常实用的状态之一。
当光标指向链接时，改变其颜色或改变下划线状态，这些效果都可以通过a:
hover状态控制实现，且对于无href属性的a对象，此伪类不发生作用。
4、a:
visited
已经访问过的链接。
a:
visited能够帮助用户设置被访问后的样式，对于浏览器而言，每一个链接被访问过之后在浏览器内部会做上一个特定的标记，这个标记能够被CSS所识别，a:
visited能够对已经被访问过的链接进行样式设计。
通过a:
visited的样式设置，能使访问过的链接呈现为其它的颜色或删除线的形式，能够提示用户该链接已经被单击过。
通过以下的CSS代码，使设置链接的文本在没有被访问之时呈现深黄绿色（#706c46），不带下划线；
当鼠标经过设置有链接的文本时呈现更深颜色（#666633），并带有下划线。
a{color:
#706c46;
text-decoration:
none
}
hover{
color:
#666633;
underline;
}
在很多链接应用中，都会直接使用a{}这样的样式。
在默认的浏览器显示下，超链接文本显示这蓝色并且有下划线，被单击过的超链接则为紫色，并且也有下划线。
通过CSS样式的text-decoration属性可以轻松控制超链接下划线的样式及清除下划线。
5.5链接的检查
创建好一个站点之后，由于一个网站中的链接数量很多，因此在上传服务器之前，必须先检查站点中所有的链接。
如果发现站点中存在着中断的链接，还必须将它们修复之后才能上传到服务器。
在DreamweaverCS5中，可以快速检查站点中网页的链接，以免出现链接错误。
检查网页链接的具体步骤如下：
1、在DreamweaverCS5中，选择“站点”“检查站点范围的链接”菜单命令，此时会激活链接检查器。
图29链接检查器
2、从“属性”面板左上角的“显示”下拉列表中可以选择“断掉的链接”、“外部链接”、或“孤立的文件”等选项。
例如选取“孤立的文件“选项，DreamweaverCS5将对当前链接情况进行检查，并且将孤立的文件列表显示出来。
图30站点中孤立的文件
3、对于有问题的文件，直接双击鼠标左键，即可将其打开进行修改。
为网页建立链接时要经常检查，因为一个网站是由多个页面组成的，一旦出现空链接或链接错误的情况，就会对网站的形象造成不好的影响。
5.6应用实例
链接是网页中必不可少的一部分，使用链接可以将网站中的网页连接在一起，通过编辑网站中的链接，达到管理网页内容的目的。
在本实例中，请根据“时尚娱乐”网站首页页面的实际需要，在页面中合理创建文本链接、图像链接、图像热点链接、锚点链接、下载链接、电子邮件链接和空链接等，使整个网站构成一个有机的整机。
图31“时尚娱乐”网站首页链接设置示意图
升级会员 