第7章 创建链接

第5、6章主要内容（1）普通图像和特殊图像元素插入的方法（2）图像属性的设置（3）图像地图的创建（4）Flash元素、音频、视频等多媒体元素的插入方法及属性设置第7章创建链接本章主要内容超链接概述链接路径创建超链接创建网站导航7.1超链接概述

超链接是指从一个网页指向一个目标的连接关系。这个网页又称为源端点，目标称为目标端点，超链接就是将源端点与目标端点连接起来，源端点是被链接的对象，目标端点是链接的对象。一个网页中用来创建超链接的对象，可以是文本、图像或其他网页元素。而目标端点可以是任何网络资源，如一个网页、相同网页上的不同位置、一张图片、一个电子邮件地址、多媒体文件，甚至是一个应用程序等。当浏览者将鼠标指针移至有超链接的网页元素上时，指针会变为手形，在状态栏中将显示连接目标的地址，单击链接后，链接目标将显示在浏览器上，并根据目标的类型来打开或运行。7.2链接路径

路径是指从源端点指向目标端点的一种途径。链接路径可以分为3种形式：（1）绝对路径：是指被链接文件的完整URL，包括所使用的协议，如：c:/website/web/index.htm链接到

和c:/website/img/photo.jpg采用绝对地址的好处是，它同链接的源端点无关，只要网站的地址不变，无论文件在站点中如何移动，都可以正常实现跳转，如果希望链接其他站点上的内容，即在创建外部链接时必须需使用绝对路径绝对路径也会出现在尚未保存的网页上，如果在没有保存的网页上插入图像或添加链接，Dreamweaver会暂时使用绝对路径，网页保存后，Dreamweaver会自动将绝对路径转换为相对路径。如：file:///D|/chapter7/示例文件/images/doudou.gif7.2链接路径（2）相对路径：是指以当前文件所在位置为起点到被链接文件经由的路径。当把当前文件与处于同一文件夹的另一文件链接，或者把同一网站下不同文件夹中的文件相互链接时，可使用相对路径。链接到同一目录下，只需输入链接文档的名称：如从“第7章”文件夹中的7-1.html链接到7-2.html：链接到下一级目录，需先输入目录名，然后加”/”，再输入文件名：从“第7章”文件夹中的7-1.html链接到该文件夹下images文件夹中的某个文件：链接到上一级目录中的文件，先输入“../”，再输入目录名、文件名：将“第7章”文件夹下images文件夹中的文件page1.html链接到“第7章”文件夹中的page2.html：7.2链接路径（3）根路径：是指从站点根文件夹到被指文件经由的路径。在这种路径表达式中，所有的路径都是从站点根目录开始的，同源端点的位置无关。根路径由斜杠“/”开头，代表站点根文件夹。在网站内链接文件时一般使用根路径的方法。7.3创建超链接1.创建文本链接：即以文本作为媒介的链接，是网页中最常被使用的链接方式，具有文件小、制作简单和便于维护的特点。其创建方法：（1）打开需要编辑的网页文件，在设计视图中选择要创建链接的文本。（2）使用【属性】面板创建超链接：在【属性】面板中激活HTML按钮，如果知道目标端点网页文档的确切路径，可以直接在【链接】文本框中输入该文档的路径，如果要创建站点外部的链接，则必须输入绝对路径。如果创建站点内部链接，也可单击【链接】文本框右侧的【链接文件】按钮，打开【选择文件】对话框，从本地站点中选择要创建的目标文档，单击【确定】按钮，即可创建链接；或者，使用【链接】文本框右侧的【指向文件】图标按钮创建链接，此时，在【连接】文本框中将显示链接地址。7.3创建超链接【目标】下拉列表：用来设置链接的打开方式_blank：在一个新的未命名的浏览器窗口中打开链接的页面_new：与_blank类似，将链接的页面用一个新的浏览器窗口打开_parent：如果是嵌套的框架，链接会在父框或窗口中打开，如果不是嵌套的框架，则等同于_top，链接会在整个浏览器窗口中显示_self：默认值，在当前网页所在窗口或框架中打开链接的网页_top：会在完整的浏览器窗口中打开网页7.3创建超链接（3）使用【超级链接】对话框创建超链接：单击【插入】面板上的【常用】选项卡中的【超级链接】按钮，或者选择【插入】菜单|【超级链接】菜单项，打开【超级链接】对话框。用于输入或显示创建超链接的文字内容输入或选择指定的链接地址设置超链接打开的方式输入超链接的标题用于在浏览器中选择该链接的等效键盘键输入Tab顺序编号7.3创建超链接（4）保存文件，按F12键在浏览器中预览，默认的浏览器浏览方式下，超链接的文字统一为蓝色并且具有下划线，使用过的下划线则为紫色并且具有下划线。7.3创建超链接（5）CSS设置超链接的各种属性：选择【修改】|【页面属性】命令，或按Ctrl+J快捷键，在打开的【页面属性】对话框中选择【链接（CSS）】选项，设置链接属性。未被访问的超文本颜色已被访问的超文本颜色将鼠标指针移至超文本上的颜色在超链接上单击时的超文本颜色CSS提供了4个伪类（指对同一个HTML元素在不同的状态下的一种定义方式），用于控制链接进行样式控制，每个伪类用于控制链接在一种状态下的样式。a:link——用于设置a对象在正常状态下，即没有被访问时的样式。a:visited——用于设置被访问后的链接样式a:active——用于设置单击链接，而且释放之前的样式a:hover——用于设置鼠标悬停在链接之上时的样式7.3创建超链接7.3创建超链接2.创建图像链接：即以图像作为媒介的链接，其创建方法：（1）打开需要编辑的网页文件，在设计视图中选择要创建链接的图像。（2）在【属性】面板上的【链接】文本框中输入链接的文件地址，也可使用【指向文件】或【浏览文件】按钮，选择链接的文件。（3）保存文件，预览页面。7.3创建超链接3.创建锚记链接：如果一个页面的内容较多，则页面会较长，用户需要拖动滚动条才能看到页面下面的内容。这时，为了方便用户浏览网页，在DreamweaverCS5中，可以创建一种指向文档中特定位置的链接，单击该链接，可以快速跳转到同一页面中或同一文件夹内其他文档中的指定位置，这种链接就称为锚记链接。创建这种链接时，需要先插入命名锚记，以便在文档中设置标记，然后再创建链接。7.3创建超链接（1）打开需要编辑的网页文件，将光标置于命名锚记插入处，在【插入】面板的【常用】分类中单击【命名锚记】按钮或者选择【插入】|【命名锚记】命令，弹出【命名锚记】对话框，输入锚记名称，单击【确定】按钮，则在光标处插入了锚记标记。7.3创建超链接（2）添加锚记链接，在网页文档中选中需要建立锚记链接的文本或其他网页元素，在【属性】面板的【链接】文本框中输入需要链接的锚记名称，该名称前必须加上符号“#”。（3）保存文件，按F12键进行预览，单击设置锚记的元素，页面将自动跳转到该锚记名称的位置。7.3创建超链接4.创建电子邮件链接：其操作步骤为：（1）在文档窗口中，将光标定位在要创建电子邮件链接的位置处。（2）在【插入】面板中单击【电子邮件链接】按钮，或者选择【插入】|【电子邮件链接】菜单命令，弹出【电子邮件链接】对话框。【文本】文本框中输入用于创建链接的文本，【电子邮件】文本框中输入链接的电子邮件地址，单击【确定】按钮，即可创建电子邮件链接。7.3创建超链接也可以在文档窗口中选择要创建电子邮件链接的文本或图像，然后在【属性】面板的【链接】文本框中输入“mailto：电子邮箱地址”。（3）保存文件，按F12键在浏览器中预览，当用户单击超连接时，将自动打开默认的电子邮件应用程序OutlookExpress创建新邮件，新邮件书写完毕后，单击【发送】按钮即可发送。7.3创建超链接5.创建脚本链接：当单击链接时引发的一个定义的动作脚本。其操作步骤为：（1）在文档窗口中，选择要创建脚本链接的文本或图像。（2）在【属性】面板的【链接】文本框中输入javascript:，并在其后输入Javascript代码或函数调用，例如：window.close();,即关闭窗口。（3）保存文件，按F12键在浏览器中预览，当用户单击超连接时会触发动作。7.3创建链接6.创建空链接：没有目标端点的链接，利用空链接，可以激活文件中的链接对应的对象和文本，当文本或对象被激活后，可以为其添加行为，如当鼠标经过后变换图片等。其操作步骤为：（1）在文档窗口中，选择要创建空链接的文本或图像。（2）在【属性】面板的【链接】文本框中输入空链接#。7.3创建链接7.创建文件下载链接：当被链接的文件是exe文件或zip文件等浏览器不支持的类型时，这些文件会被下载，这就是网上下载的方法。其操作步骤为：（1）在文档窗口中，选择要创建下载链接的文本或图像，单击右键。（2）在快捷菜单中选择【创建链接】命令，打开【选择文件】对话框，进行目标文件选择即可，单击“确定”按钮，在【属性】面板的【链接】文本框中显示了所要链接下载的文件名称。

（3）保存页面，按F12键预览，单击页面中的链接，弹出“文件下载”对话框，单击“保存”按钮，弹出“另存为”对话框，选择保存在本地计算机的目录，单击“保存”，所链接的下载文件即可保存在该位置。7.3创建链接8.在HTML源代码中创建链接：使用<a>标记，结合href属性创建文本链接。使用<a>标记，结合href属性，以及<imag>标记和src属性创建图像链接。7.4创建导航链接网页导航相当于一个网站的目录，用来告诉访问者网站所包含的的内容，引导用户快速找到自己感兴趣的内容。网页导航是整个网站中所有主要网页的链接所在地，无论用户当前浏览到何处，只要单击相应的链接就可以进入所链接的页面，实现网上冲浪的感觉。同时，网页导航作为网页设计的主要组成部分，一定要放置在网页最明显的位置，这样，浏览者可以在第一时间看到它，同时做出判断，进入他们想要浏览的信息栏目。7.4创建导航链接导航的方向：指导航按钮的排列方式横排导航：占用页面空间少，适合信息量大的门户站点，导航较多时，可以选择多排导航。竖排导航：占用页面空间较多。倾斜导航：打破了网页由于表格排版造成的横向和竖向导航的格局，拥有很强的视觉冲击力，个性特征鲜明，不适用信息量丰富的网站。7.4创建导航链接1.传统Table布局创建导航：

①确定导航栏目及方向，选择【插入】|【表格】命令，打开【表格】对话框，设置行列数、表格宽度，把边框、边距设为0以隐藏表格线，单击【确定】按钮，即在网页文档中插入了一个表格。②在每个单元格中插入导航文字，并使文字居中显示。7.4创建导航链接2.CSS设计网站导航导航实际上也是一种列表，可以理解为导航列表，导航中的每个栏目就是一个列表项，因此，使用CSS布局的形式制作导航，主要是使用无序列表ul。每个<ul></ul>表示其中的内容为一个列表块，块中的每一条列表数据用<li></li>来描述。其创建方法为：（1）在插入点位置输入各个导航栏目，每一个导航栏目为一个段落，将所有导航栏目选中，在【属性】面板中选择【项目列表】按钮，使导航栏目称为一个无序列表，并为每个列表项设置空链接。7.4创建导航链接（2）创建一个CSS样式规则，选择器类型为ID，名称为#nav，设置其CSS基本属性，应用于无序列表ul，即<ulid=“nav”>。如：#nav{ font-family:"宋体"; font-size:16px; list-style-type:none;}<ulid="nav"><li><ahref="#">首页</a></li><li><ahref="#">作品区</a></li><li><ahref="#">排行榜</a></li></ul>7.4创建导航链接（3）链接对象a的样式控制：新建一个CSS样式规则，选择器类型为复合内容，名称为#navlia，即为每个li下的每一个a链接对象设置其CSS样式。如：#navlia{ color:#000; text-decoration:none; background-color:#CCC; text-align:center; height:22px; width:97px; margin-left:3px; padding-top:4px; display:block;}使得a链接对象的显示方式由一段文本改为一个块状对象，从而可以使用CSS的填充、边界、边框等属性给a链接对象加上一系列的样式。7.4创建导航链接（4）竖向导航变为横向导航：新建一个CSS样式规则，选择器类型为复合内容，名称为#navli，每个li对象设置其float属性为left，使得其自身向左浮动，从而使下一个对象贴近该对象的右边，最终所有的li都具有了向左浮动的特性，从而形成了横向的排列方式。代码如下：#navli{ float:left;}7.4创建导航链接（5）交互式导航效果设计：新建一个CSS样式规则，选择器类型为复合内容，名称为#navlia:hover，为每个li下的a连接对象设置鼠标悬停在链接之上时的样式。代码如下：#navlia:hover{ color:#FFF; back