13计算机姚甜甜毕业论文 - 图文(9)

潍坊工商职业学院2013届毕业论文

第五章 建立网页链接

链接”，又称“超链接\（Hyperlink）,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver cs6中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。

5.1 文字链接

“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。操作步骤：

步骤1 、准备好已经制作完成的首页的各个栏目页面

步骤2、在Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。 步骤3、观察“属性面板”，其中包括一个“链接”文本框。 步骤4、接下来需要把链接的位址加入到文本框中。

步骤5、在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。如图：

图 5-1 文字连接

步骤6、还可以设置一些“链接”的属性，单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。

潍坊工商职业学院2013届毕业论文

步骤7、至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，如图：

图5-2 链接效果

当鼠标放在“公司简介”这4个文字上时将变成手形，并且浏览器窗口下面的状态区中会显示链接到的网页的位址，单击文字，页面会立即跳转到第1个栏目中，这表示链接已经制作成功了。

步骤8、同理，按照以上步骤，再为“新闻资讯”和“运力展示”等其它栏制作指向对应栏目的链接。

至此，整个“文字链接”的实例就全就全部完成了。

5.2 图像链接

“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容，接下来以我的网站“my web“为例，讲解如何建立“图像链接”。操作步骤：

步骤1、首先仍然要准备好已经制作完成的首页和各个栏目的页面 步骤2、在Dreamweaver中打开网站的首页，之后选取要制作“链接”的图像。

步骤3、观察“属性面板”，在“链接”文本框中输入链接的文字位址。 步骤4、如果有需要，可以在“目标”下拉列表中选择“链接”网页显示的窗口方式，分别为-blank 、-parent 、-self或 top。

步骤5、至此，第1个栏目的图像链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，将鼠标放在“动画制作”4个文字上时将变成手形，同时浏览器窗口下面的状态区中会显示出链接到的网页的地址，并且会显示出“替代”文本“动画制作”，单击文字，页面会立即跳转到第3个栏目中，

潍坊工商职业学院2013届毕业论文

这表示链接已经制作成功了。

步骤6、同理，按照以上步骤，再为其它几幅图像制作指向对应栏目的链接。 步骤7、在栏目页面中制作“返回首页”的链接，使得单击后可以跳转回首页。

至此，整个“图像链像”的实例就全部完成了。

5.3在HTML语言中建立网页链接

（1）文字链接

在HTML语言中用超链接标记指向一个目标。其基本格式为：举个简单的“文本链接”的实例，该实例相对应的HTML代码如下

所示。

a href-“index2.html”target=”-blank”> 平面设计（新开窗口，-blank)

相册（原窗口，默认为空）

留言

解释 ：href:是标记的一种属性，该属性中的URL等于链接目标文件的地址。Target:也是标记的一种属性，相当于Dreamweaver“属性面板”中的“目标”，它的值等于-blank,效果是在新窗口中打开。除此之外还包括其它3种：-parent,-self和-top。这和Dreamweaver中“目标”下拉列表中的内容是一模一样的。文本内容：如代码实例中的“平面设计”。这些文本将放在使用了链接属性href和目标属性target的 与标记之间，产生了链接的效果。