第13章网页中链接的设置

1、使用Dreamweaver创建链接即简单又方便，只要选中要设置成链接的文字或图像，然后在“属性”面板上的“链接”文本框中添加相应的URL地址即可，也可以拖动指向文件的指针图标指向链接的文件，同时可以使用“浏览”按钮在当地和局域网上选择链接的文件。每一个文件都有自己的存放位置和路径，理解一个文件到要链接的另一个文件之间的路径关系是创建链接的根本。在Dreamweaver CC 中，可以很容易的选择文件链接的类型并设置路径。链接路径主要可以分为相对路径、绝对路径和根路径3种。13.1.1相对路径相对路径相对路径最适合网站的内部链接。只要是属于同一网站，即使不在同一个目录中，相对路径也非常的适合。如

2、果链接到同一目录中，则只需输入要链接文档的名称；如果要链接到下一级目录中的文件，只需先输入目录名，然后加“/”，再输入文件名；如果要链接到上一级目录中的文件，则先输入“./”，再输入目录名、文件名。13.1.2创建内部链接创建内部链接本节中所设置的链接都属于内部链接，简单的说，内部链接就是链接站点内部的文件，在“链接”文本框中用户需要输入文档的相对路径，一般使用“指向文件”和“浏览文件”的方式来创建。课堂案例课堂案例创建内部链接创建内部链接课堂案例：创建内部链接最终文件：光盘最终文件第13章13-1-2.html视频：光盘视频第13章13-1-2.swf13.1.3绝对路径绝对路径绝对路径为文

3、件提供完整的路径，包括使用的协议（如http、ftp、rtsp等）。一般常见的绝对路径如http:/、/等。绝对路径也会出现在尚未保存的网页上，如果在没有保存的网页上插入图像或添加链接，Dreamweaver CC 会暂时使用绝对路径，网页保存后，Dreamweaver CC 会自动将绝对路径转换为相对路径。13.1.4创建外部链接创建外部链接外部链接比内部链接更好理解，即在“链接”文本框中直接输入所链接页面的URL绝对地址，并且包括所使用的协议（例如对于Web页面，通常使用http:/，即超文本传输协议）。课堂案例课堂案例创建外部链接创建外部链接课堂案例：

4、创建外部链接最终文件：光盘最终文件第13章13-1-4.html视频：光盘视频第13章13-1-4.swf13.1.5根路径根路径根路径同样适用于创建内部链接，但大多数情况下，不建议使用此种路径形式。通常它只在以下两种情况下使用，一种是当站点的规模非常大，放置于几个服务器上时；另一种情况是当一个服务器上同时放置几个站点时。13.2.1创建文字链接创建文字链接文字链接即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有文件小、制作简单和便于维护的特点。13.2.2创建图像链接创建图像链接图像也是常被使用的链接媒体，它和文字链接非常相似。Dreamweaver CC 为文字与图像提供了多种

5、创建链接的方法，而且可以通过对其属性的控制，达到一种较好的视觉效果，同时它还有效地使页面之间形成一个庞大而紧密联系的整体。课堂案例课堂案例创建文字链接创建文字链接课堂案例：创建文字链接最终文件：光盘最终文件第13章13-2-1.html视频：光盘视频第13章13-2-1.swf课堂案例课堂案例创建图像链接创建图像链接课堂案例：创建图像链接最终文件：光盘最终文件第13章13-2-2.html视频：光盘视频第13章13-2-2.swf13.2.3链接打开方式链接打开方式无论是为文字设置链接还是为图像设置链接，在“属性”面板上的“链接”文本框旁都有一个“目标”下拉列表，该选项主要用于设置链接页面的打

6、开方式，在该选项的下拉列表中包含5个选项。_blank：打开一个新的浏览器窗口，原来的网页窗口仍然存在，这种方法可以应用在用户希望保留主要的窗口时。new：与_blank类似，将链接的页面以一个新的浏览器打开。_parent：如果网页中使用“框架”，新链接的网页将回到上一级“框架”所在的窗口中，这种链接方式多用于“框架”文件中需要回到使用“框架”首页的情况。_self：表示在当前文档中打开。_top：表示在链接所在的最高级窗口中打开。在网页中使用超链接除了可以实现文件之间的跳转之外，还可以实现文件下载链接、E-mail链接、图像映射等其他的一些链接形式。本节将向读者详细介绍其他一些特殊链接形式

7、的创建方法。13.3.1空链接空链接有些客户端行为的动作，需要由超链接来调用，这时就需要用到空链接了。访问者单击网页中的空链接，将不会打开任何文件。13.3.2文件下载链接文件下载链接链接到下载文件的方法和链接到网页的方法完全一样。当被链接的文件是exe文件或zip文件等浏览器不支持的类型时，这些文件会被下载，这就是网上下载的方法。例如要给页面中的文字或图像添加下载链接，希望用户单击文字或图像后下载相关的文件，这时只需要将文字或图像选中，直接链接到相关的压缩文件就可以了。课堂案例课堂案例在网页中创建在网页中创建空链接空链接课堂案例：在网页中创建空链接最终文件：光盘最终文件第13章13-3-1.

8、html视频：光盘视频第13章13-3-1.swf课堂案例课堂案例在网页中创建在网页中创建文件下载链接文件下载链接课堂案例：在网页中创建文件下载链接最终文件：光盘最终文件第13章13-3-2.html视频：光盘视频第13章13-3-2.swf13.3.3E-Mail链接链接无论是个人网站还是商业网站，都经常在网页的最下方留下站长或公司的E-mail地址，当网友对网站有意见或建议时，就可以直接单击E-mail超链接，给网站的相关人员发送邮件。E-mail超链接可以建立在文字中，也可以建立在图像中。课堂案例课堂案例在网页中创在网页中创建建E-Mail链接链接课堂案例：在网页中创建E-Mail链接最

9、终文件：光盘最终文件第13章13-3-3.html视频：光盘视频第13章13-3-3.swf课堂案例课堂案例在网页中创在网页中创建脚本链接建脚本链接课堂案例：在网页中创建脚本链接最终文件：光盘最终文件第13章13-3-4.html视频：光盘视频第13章13-3-4.swf13.3.4脚本链接脚本链接脚本链接对多数人来说是比较陌生的词汇，脚本链接一般用于提供给浏览者有关于某个方面的额外信息，而不用离开当前页面。脚本链接具有执行JavaScript代码的功能，例如校验表单等，下面为页面添加一个脚本链接。13.3.5图像热点链接图像热点链接不仅可以将整张图像作为链接的载体，还可以将图像的某一部分设为

10、链接，这要通过设置图像映射来实现。热点链接的原理就是利用HTML语言在图像上定义一定形状的区域，然后给这些区域加上链接，这些区域被称为热点。图像映射就是一张图片上多个不同的区域拥有不同的链接地址。课堂案例课堂案例在网页中创建图像热点链接在网页中创建图像热点链接课堂案例：在网页中创建图像热点链接最终文件：光盘最终文件第13章13-3-5.html视频：光盘视频第13章13-3-5.swf使用HTML中的超链接标签创建的超链接非常普通，除了颜色发生变化和带有下划线，其他的特征和普通文本没有太大的区别，这种传统的超链接样式显然无法满足网页设计制作的需求，这时就可以通过CSS样式对网页中的超链接样式进

11、行控制。对于超链接的修饰，通常可以采用CSS伪类。伪类是一种特殊的选择器，能被浏览器自动识别。其最大的优势是在不同状态下可以对超链接定义不同的样式效果，是CSS本身定义的一种类。在CSS样式中提供了4种用于超链接状态的伪类，分别介绍如下。a:link：定义超链接对象在没有访问前的样式。a:hover：定义当鼠标移至超链接对象上时的样式。a:active：定义当鼠标单击超链接对象时的样式。a:visited：定义超链接对象已经被访问过后的样式。在了解了超链接的CSS伪类后，我们就可以通过对超链接CSS伪类的定义来实现网页中各种不同的超链接效果。课堂案例课堂案例美化网页中的超链接文字美化网页中的超链接文字课堂案例：美化网页中的超链接文字最终文件：光盘最终文件第13章13-4.html视频：光盘视频第13章13-4.swf课堂案例课堂案例制作音乐类网站页面制作音乐类网站页面课堂案例：制作音乐类网站页面最终文件：光盘最终文件第13章13-5.