创建链接Word下载.docx

1、建立一个文本超链接的方法非常简单，首先选中要建立超链接的文本，然后在“属性”面板的“链接”框中输入要跳转的目标网页的路径及名称即可。（2）图像超链接图像超链接的创建方法和文本超链接的创建方法基本一致，选中图像，在“属性”面板中输入链接地址即可。较大的图片中如果要实现多个链接可以使用“热点”帮助实现。（3）E-mail链接在页面中为E-mail添加链接的方法是利用mailto标签，在“属性”面板的“链接”框中输入要提交的邮箱即可，如图4-*所示。图 4 E-mail链接（4）锚记链接锚点就是在文档中设置标记，并给该位置一个名称，以便引用。通过创建锚点，可以使链接指向当前文档或不同文档中指定的位置

2、。锚点常常被用来跳转到特定的主题或文档的顶部，使访问者能够快速浏览到选定的位置，加快信息检索速度。（5）多媒体文件链接该种链接方法分为链接和嵌入两种。使用与外联图像类似的语句可把影视文件链接到html文档，差别只是文件扩展名不同。与链接外联影视文件不同，对嵌入有影视文件的html文档，浏览器在从网络上下载该文档时就把影视文件一起廿来，如果影视文件很大，则下载的时间就会很长。（6）空链接在制作或研发网页中，有时候需要利用空链接来模拟链接，以响应鼠标事件，防止页面出现各种问题。在“属性”面板上的“链接”框内输入#符号即可创建空链接。2、合理安排超链接在网页中创建超链接时，需要综合整个网站中的所有页

3、面进行考虑。合理的安排超链接，才能使整个网站中的页面具有一定的条理性。对创建超链接的建议如下：（1）避免孤立文件的存在应该避免存在孤立的文件，这样将来在修改和维护链接时就会有一个清晰的思路。（2）在网页中避免使用过多的超链接在一个网页中设置过多超链接会导致网页的观赏性不台，文件过大。如果避免不了过多的超链接，可以尝试使用下拉列表框、动态链接等一些链接方式。（3）网页中的超链接不要超过4层链接层数过多容易让上产生厌烦的感觉，在力求做到结构化的同时，尖注意链接避免超过4层。（4）页面较长时可以使用书签当页面较长时，可以定义一个书签，从而使浏览者方便地找到想要的信息。（5）设置主页或上一层的链接有些

4、浏览者可能不是从网站的主页进入网站的，此时，设置主页或上一层的链接，会让浏览者更加方便地浏览全部网页。5.2 链接路径为了明确链接路径并能正确地使用路径，下面介绍一下路径的概念和种类。每个页面都有一个唯一的地址，称为统一资源定位符（URL,即Uniform Resourde Locator的缩写）。URL的功能就是提供一种在Internet上查找任何资源的标准方法。实际上，在链接中正是以URL的表达方式来书写链接路径的。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。URL地址通常由4部分组成，分别是文件传输协议、域名（或IP地址）、文件路径和文件名，如图4-

5、*所示。图 5 URL地址结构一般来说，Dreamweaver允许使用使用的链接路径有3种：绝对路径、文档相对路径和根相对路径。1、绝对路径绝对路径为文件提供完整的路径，包括使用的协议（如http、ftp、rtsp等）。常见的绝对路径如、ftp:/172.16.33.1等。尽管本地链接也可以使用绝对路径，但不建议采用这种方式，因为一旦将此移动到时其他服务器，则所有本地绝对路径链接将断开。图 6绝对路径采用绝对路径的好处：路径同链接的源端点无关。只要网站的地址不变，无论文件在站点中如何移动，都可以正常实现跳转。另外，如果希望链接其他站点上的内容，则必须使用绝对路径。（2）相对路径最适合网站的内部

6、链接。只要是属于同一网站之下的，即使不在同一目录下，相对路径也非常适合。如果链接到同一目录下，则只需要输入要链接文档的名称。要链接到下一级目录中的文件，只需先输入目录名，然后加“/”，再输入文件名。如果要链接到上一级目录中的文件，则先输入“./”，再输入目录名、文件名。（1）如果要链接到同一目录下的4-2.html，则只需要在设置链接地址的地方输入4-2.html即可。图 7 设置链接地址（2）如果要链接到本文件所在目录下的images文件夹中的2406.png文件，则只需要在设置链接地址的地方输入images/2406.png即可。图 8设置链接地址（3）如果要链接到当前目录以外的chap0

7、3文件夹下的3-1.html，则只需要在设置链接地址的地方输入./chap03/3-1.html即可。图 9设置链接地址5.3 超链接设置5.3.1 创建网站内的文本链接通过Dreamweaver，可以使用多种方法创建内部链接。可以使用站点地图查看、创建、更改和删除链接，或在文档窗口中选择“修改”“创建链接”菜单命令选择指向的文件；可以使用“属性”面板来链接文件，单击“浏览文件”图标来选择文件，也可以使用“指向文件”图标来选择文件，或直接输入文件路径。使用“属性”面板创建网站内文本链接的具体步骤如下。1、启动Dreamweaver CS5，打开“时尚娱乐”站点的首页文件“index.html”

8、。2、选定“三楼新民众乐园又将为大家奉献两款全新主题广场”这一串字，将其作为建立链接的文本。单击“属性”面板中的“浏览文件”图标，打开“选择文件“对话框。图 10“浏览文件”图标设置超链接3、在“选择文件”对话框中，选择网页文件“zhutiguangchang.html”，然后单击“确定”按钮。图 11 “选择文件”对话框此外，还可以使用拖动的方法来创建链接。选定文本后，在“属性”面板中单击“指向文件”图标，将其拖动到“文件”面板中的网页“zhutiguangchang.html”上，然后松开鼠标，即可完成链接的建立。图 12 “指向文件”图标设置超链接也可以使用“属性”面板直接输入链接地址的

9、方法来创建链接。选定文本后，选择“窗口”“属性”菜单命令，打开“属性”面板，然后在“链接”下拉列表文本框中直接输入链接文件名“zhutiguangchang.html”即可。在“属性”面板的“目标”下拉列表中，可以选择链接文档打开的框架，其中各选项的含义如下。图 13“属性”面板的“目标”下拉列表框（1）_blank将链接的文件载入一个未命名的新浏览器窗口中。（2）_new将链接的文件载入一个新的浏览器窗口中。（3）_parent将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的不是嵌套的，链接文件则加载到整个浏览器窗口中。（4）_self将链接的文件载入该链接所在的同一框架

10、或窗口中。此目标是默认的，所以通常不需要指定它。（5）_top将链接的文件载入整个浏览器窗口中，会删除所有的框架。4、保存文档，按“F12”快捷键在浏览器窗口中预览效果。5.3.2 创建网站内的图像链接使用“属性”面板创建网站内图像链接的具体步骤如下。选定要创建链接的图像，然后单击“属性”面板中的“浏览文件”图标图 14设置图像超链接2、在“选择文件”对话框中，选择网页文件“zhutiguangchang.html”，然后单击“确定”按钮。图 15“选择文件”对话框3、在“属性”面板的“目标”下拉列表中，选择链接文档打开的框架，在“替换”文本框中输入图像的替换文本“秋季U2女装”。图 16设置

11、“替换”文本框与文本链接一样，也可以使用拖动或直接输入链接地址的方法来创建图像链接。5.3.3 创建锚点链接创建命名锚记（简称锚点）就是在文档的指定位置设置标记，给该标记一个名称，以便引用。通过创建锚点，可以使链接指向当前文档或不同文档中的指定位置。锚点常常被用来实现到特定的主题或文档顶部的跳转链接，以使访问者能够快速地浏览到选定的位置，加快信息检索的速度。创建锚战袍链接要先设置一个命名锚点，然后建立到命名锚点的链接。创建命名锚记的具体步骤如下：2、将光标放置到要命名锚记的位置，或选中要为其命名锚记的文本。图 17设置命名锚记位置3、进行以下操作之一。（1）在“插入”面板的“常用”选项卡中，单

12、击“命名锚记”图标。（2）选择“插入”“命名锚记”菜单命令，或按“Ctrl+Alt+A”组合键。3、在弹出的“命名锚记”对话框中输入“top”，单击“确定”按钮，此时即可在文档窗口中看到锚记图 18“命名锚记”对话框图 19创建命名锚点注：如果命名锚记没有出现在插入点，可以选择“查看”“可视化助理”“不可见元素”菜单命令使之可见。在文档中定义了锚记后，只做好了链接的一半任务，要链接到文档中锚记所在的位置，还必须创建锚记链接。具体的操作步骤如下：1、在文档的底部选中“网站导航”作为链接文字。图 20 选中链接文字2、在“属性”面板的“链接”文本框中输入一个字符符号“#”和锚记名称。例如，要链接到

13、当前文档中名为top的锚记，则输入#top。若要链接到同一文件夹内其他文档（如main.html）中名为top的锚记，则应输入“main.html#top”。图 21 创建锚点链接同样，也可以使用“属性”面板中的“指向文件”图标来创建锚记链接。单击“属性”面板中的“指向文件”图标，将其拖至要链接到的锚记（可以是同一文档中的锚记，也可以是其他打开文档中的锚记）上即可。3、保存文档，按“F12”键 在浏览器中将网页打开，然后单击网页底部的“网站导航”，网页中导航栏就会出现在页面顶部。5.3.4 创建图像热点链接在网页中，不但可以单击整幅图像跳转到链接文档，也可以单击图像中的不同区域而跳转到不同的链

14、接文档。通常将处于一幅图像上的多个链接区域称为热点。单击“属性”面板上的指针热点工具，将鼠标指针恢复为标准箭头状态，可以在图像上选取热点。被选中的热点边框上会出现控点，拖动控点可以改变热点的形状，选中热点为后，按“Delete”键可以删除热点。也可以在“属性”面板中设置热点相对应的URL链接地址。如何创建一幅图像中的多个热点呢？2、选定图像，单击“属性”面板中相应的热点工具按钮，然后在图像上需要创建热点的位置拖动鼠标，即可创建热点。图 22创建热点热点工具有3种：矩形热点工具、椭圆形热点工具和多边形热点工具3、在“属性”面板的“链接”文本框中设置链接路径即可。5.3.5 创建电子邮件链接好的站

15、点总在不断地自我完善和提高，从浏览网站的人那里及时获得需要的意见和建议是非常必要的。很多情况下，需要将网站管理员的E-mail地址保留在网页上，以便于及时在获取外界反馈信息，这时可以在网页中使用电子邮件链接。电子邮件链接是一种特殊的链接，单击这种链接，不是跳转到相应的网页上，也不是超载相应的文件，而是会启动计算机中相应的E-mail程序，允许书写电子邮件，然后发往指定的地址。创建电子邮件链接的具体步骤如下：2、将光标置于文档窗口中要显示电子邮件链接的地方，或选定即将显示为电子邮件链接的文本或图像（这里选择Skychina-），然后进行以下操作之一。图 23 设置电子邮件链接位置（1）选择“插入

16、”“电子邮件链接”菜单命令。（2）在“插入”面板的“常用”标签下单击“电子邮件链接”图标3、在弹出的“电子邮件链接”对话框的“文本”文本框中，输入或编辑作为电子邮件链接显示在文档中的文本，在“电子邮件”文本框中输入送达的E-mail地址，然后单击“确定”按钮。图 24“电子邮件链接”对话框同样，也可以利用“属性”面板创建电子邮件链接，在“属性”面板的“链接”文本框中输入“mailto：和电子邮件地址”。图 25 “属性”面板4、保存文件，按“F12”按在浏览器中预览，可以看到电子邮件链接的效果。单击电子邮件链接文本，可以打开用于发送邮件的E-mail程序窗口以书写邮件。5.3.6 创建下载文件

17、的链接下载文件的链接在软件下载网站或源代码下载网站中应用得较多。下载文件的链接的创建方法与一般的链接的创建方法相同，只是所链接的内容不是文字或网页，而是一个软件。创建下载文件的链接的具体步骤如下：在文档窗口中，选中要设置为下载文件的链接的文本“Flash player9”。图 26 设置下载文件的链接位置2、单击“属性”面板中的“浏览文件”图标，在打开的“选择文件“对话框中，选择要链接的下载文件，如“Install_Flash_player9.exe”，然后单击“确定”按钮，即可完成下载文件的链接的创建。如果链接指向的文档不是HTML文档，而是其他类型的文档，那么单击链接后，出现的结果也不相同

18、。如果是GIF、JPG或PNG图像，则会在浏览器窗口中载入图像。如果是浏览器不识别的文档，如带有.exe扩展名的可执行文件，则会打开“文件下载安全警告”对话框，询问是否运行或保存该文件。图 27 “文件下载安全警告”对话框5.3.7 创建空链接所谓空链接，不是没有目标端点的链接。利用空链接，可以激活文档中链接对应的对象和文本。一旦对象或文本被激活，就可以为之添加一个行为，以实现当光标移动到链接上时进行切换图像或显示分层等动作。对一般首页中导航栏里的“本站首页”文本就没有必要设置带有目标的链接，因为当前所在的位置就是“本站首页”页面的位置，但是为了能够看到链接的效果，在这里需要设置一个空链接。创

19、建空链接的具体步骤如下：1、在文档窗口中，选中要设置为空链接的文本或图像。2、打开“属性“面板”，然后在“链接”文本框中输入一个“#”号，即可创建空链接。图 28 设置空链接5.3.8 创建脚本链接脚本链接是另一种特殊类型的链接，通过单击带有脚本的文本或对象，可以运行相应的脚本及函数（JavaScript和VBScript等，下面以JavaScript为例进行说明），从而为浏览者提供许多附加的信息。脚本链接还可以被用来确认表单。在脚本链接中，由于JavaScript代码出现在一对双引号中，因此代码中原先的双引号应该相应地改为单引号。创建脚本链接的具体步骤如下：1、在文档窗口中，选择要创建脚本链

20、接的文本、图像或其他对象。2、在“属性”面板的“链接”文本框中输入“JavaScript：”，接着输入相应的JavaScript代码或函数，例如输入“JavaScript：windows.close（）”，表示关闭当前窗口。3、保存网页后，按“F12”键在浏览器中将网页打开。单击创建脚本链接的文本，就会弹出对话框，单击“是”按钮，将关闭当前窗口。考虑截图（关闭窗口对话框）JPG格式图片不支持脚本链接，如果为图像添加脚本链接，则应将图像格式转换为GIF格式。5.4超链接属性控制超链接属性控制通过CSS样式实现。CSS对于链接的样式控制是通过伪类来实现的，在CSS中提供了4个伪类，用于对链接样式进

21、行控制，每个伪类用于控制链接在一种状态下的样式。根据访问者的操作，可以对超链接进行4种状态的样式设置：1、a:link未被访问过的链接。该种伪类链接应用于链接未被访问过的样式。2、a:active光标单击的链接。该种伪类链接应用于链接对象在被用户激活时的样式。在实际应用中，这种伪类链接状态很少使用，且对于无href属性的a对象，此伪类不发生作用。3、a:hover光标经过的链接。该种伪类链接用来设置对象在光标经过或停留时的样式，该状态是非常实用的状态之一。当光标指向链接时，改变其颜色或改变下划线状态，这些效果都可以通过a:hover状态控制实现，且对于无href属性的a对象，此伪类不发生作用。

22、4、a:visited已经访问过的链接。a:visited能够帮助用户设置被访问后的样式，对于浏览器而言，每一个链接被访问过之后在浏览器内部会做上一个特定的标记，这个标记能够被CSS所识别，a:visited能够对已经被访问过的链接进行样式设计。通过a:visited的样式设置，能使访问过的链接呈现为其它的颜色或删除线的形式，能够提示用户该链接已经被单击过。通过以下的CSS代码，使设置链接的文本在没有被访问之时呈现深黄绿色（#706c46），不带下划线；当鼠标经过设置有链接的文本时呈现更深颜色（#666633），并带有下划线。a color: #706c46; text-decoration:

23、nonehover color: #666633; underline; 在很多链接应用中，都会直接使用a这样的样式。在默认的浏览器显示下，超链接文本显示这蓝色并且有下划线，被单击过的超链接则为紫色，并且也有下划线。通过CSS样式的text-decoration属性可以轻松控制超链接下划线的样式及清除下划线。5.5链接的检查创建好一个站点之后，由于一个网站中的链接数量很多，因此在上传服务器之前，必须先检查站点中所有的链接。如果发现站点中存在着中断的链接，还必须将它们修复之后才能上传到服务器。在Dreamweaver CS5中，可以快速检查站点中网页的链接，以免出现链接错误。检查网页链接的具体步

24、骤如下：1、在Dreamweaver CS5中，选择“站点”“检查站点范围的链接”菜单命令，此时会激活链接检查器。图 29 链接检查器2、从“属性”面板左上角的“显示”下拉列表中可以选择“断掉的链接”、“外部链接”、或“孤立的文件”等选项。例如选取“孤立的文件“选项，Dreamweaver CS5将对当前链接情况进行检查，并且将孤立的文件列表显示出来。图 30站点中孤立的文件3、对于有问题的文件，直接双击鼠标左键，即可将其打开进行修改。为网页建立链接时要经常检查，因为一个网站是由多个页面组成的，一旦出现空链接或链接错误的情况，就会对网站的形象造成不好的影响。5.6 应用实例链接是网页中必不可少的一部分，使用链接可以将网站中的网页连接在一起，通过编辑网站中的链接，达到管理网页内容的目的。在本实例中，请根据“时尚娱乐”网站首页页面的实际需要，在页面中合理创建文本链接、图像链接、图像热点链接、锚点链接、下载链接、电子邮件链接和空链接等，使整个网站构成一个有机的整机。图 31“时尚娱乐”网站首页链接设置示意图