网页设计制作中超链接的运用论文

网页设计制作中超链接的运用论文

　　摘要：超链接是网页间联系的桥梁，是网页的魅力所在。超链接按链接范围分有外部链接和内部链接；按链接路径来说，一般包含文档链接、书签链接、电子邮件链接、空链接、脚本链接。网页制作工具Dreamwraver提供了非常简便的创建超链接的方法，用户可将文字、图片、Flash等网页元素设置为链接对象，进而美化链接，让网页更丰富多彩。

　　关键词：网页；超链接；分类；应用；美化

　　超链接可将因特网上众多分散的网页联系起来，构成一个有机整体。如何制作和应用超链接？网页制作工具Dreamwraver提供了非常简便的创建超链接的方法，用户可以将文字、图片、Flash等网页元素设置为链接对象，实现网页间的跳转功能。

　　1超链接的分类

　　按链接范围一般分为内部链接和外部链接。外部链接：与外部网站的页面间的链接；内部链接：网站内部页面间的链接。按链接路径来说，一般包含以下类型：文档链接：链接到其他文档，最为常见；电子邮件链接：创建允许用户给网页制作人员发送邮件的链接；书签链接：链接到相同文档或其他文档的书签位置；空链接：不会跳转到任何位置，用于附加Dreamweaver行为；脚本链接：执行JavaScript代码或调用JavaScript函数。

　　2超链接的创建及应用

　　2.1外部链接和内部链接

　　建立超链接到外部站点有两种方法可以实现：一是直接输入地址，在属性面板中的“链接”文本框中直接输入外部链接的地址，如http://www.sohu.com；二是使用“常用”插入栏中的“超级链接”对话框，分别对文本、链接、目标、标题、访问键等五个属性进行设置。如何快速在站点内创建链接？有三种创建和修改的方法：一是使用“属性”面板创建链接，键入文件路径或单击浏览按钮选取需链接的文件；二是使用“指向文件”图标直接指向想要链接的文件；三是使用“资源”面板创建或修改超级链接。

　　2.2电子邮件链接

　　在网页中设置电子邮件链接已经非常普遍，电子邮件链接可以附加在按钮图片上，也可以附加在文本上。当页面浏览者单击具在电子邮件链接的文本或按钮时，可以直接打开安装在系统中的电子邮件应用程序，例如Outlook等并且在“收件人”位置已经自动填写好电子邮件的地址，浏览者只需在填写完内容后，直接发送即可。若要在图片或文字上直接附加电子邮件链接，可选中该对象，然后在“属性”面板的“链接”栏中输入“mailto：电子邮件”。在“mailto：”后面不要添加空格，例如：mailto:39989511@qq.com，按回车键确定。

　　2.3书签链接

　　“书签链接”可让用户在页面内容较多时只浏览自己感兴趣的内容。制作“书签链接”通常会在网页上端位置设置一个内容列表，列表下面分别是针对各列表项的详细说明位置。当用户单击内容列表中感兴趣的某一项后，网页会自动跳转到该列表项的详细说明位置。“书签”一词是转译而来的，它的英语原词是anchor，意即“锚”，所以“书签链接”也常称为“锚点链接”。“书签链接”可让用户根据需求更方便快捷地找到相应内容，而不必浏览网页中的所有内容，使网页更具人性化。“书签链接”的制作方法：将光标定位到内容介绍的标题处―――单击“插入记录/命名锚记”或按Cutrl+Alt+A快捷键，在出现的对话框中输入书签名，然后单击“确定”按钮―――选取列表中的文字，在“属性”面板的“链接”域中，输入符号“#”和书签名。数字和字母都可以作为书签名，但是最好不要使用中文。除了使用菜单命令外还可以通过“插入栏”中的“常用”项插入“命名锚记”进行操作。

　　2.4无址链接和脚本链接

　　在Dreamweaver中除了上述内容所讲到的链接方式外，还有无址链接和脚本链接，这两种链接方式不再是实现简单意义上网页间的跳转，而是赋予了链接更多的含义。无址链接如同它的名字一样，它不会跳转到任何地方。但是，这种链接对于读取某些JavaScript事件是非常有用的，例如：在大多数浏览器中，图像不能识别onMouseOer事件，可以通过使用无址链接实现图像变换，此外，在制作具有较多内容的网页时，通常都要在网页最底端添加“返回页首”的链接，以方便浏览者在浏览完所有网页内容后直接返回页面顶端。创建无址链接的方法很简单，选取“返回页首”，在“属性”面板的“链接”域中键入“#”号，在“目标”下拉菜单中选取“-top”。脚本链接能够在不离开当前Web页面的情况下为访问者提供有关某项的附加信息。通过javaScript脚本链接，可以执行JavaScript代码或调用JavaScript函数，也可以用来在用户单击时执行计算、表单验证和其他处理任务。如在介绍某一景点的旅游网站中，选取网页logo“***旅游网”，在“属性”面板的“链接”框中输入“javascript:”后接JavaScript代码或函数调用，即可在“链接”域中键入“javacript:alert(‘欢迎光临***旅游网’)”，在预览网页效果时，单击网页logo，就会弹出一个JavaScript提示框“欢迎光临***旅游网”。因为Javascript代码中出现在双引号之间，因此在脚本代码中必须使用单引号或在双引号之前加斜杠，例如：”欢迎光临”。

　　3超链接的目标窗口

　　当用户在互联网上浏览网页时，一般都是通过单击网页上的超级链接，跳转到不同的页面。当新页面出现时，可能会出现三种情况：原有的页面被覆盖；原有的网页并不被覆盖，而是弹出一个新的.窗口；原有的网页内部分被替换。这三种情况的出现是由于网页在制作时对超级链接的目标窗口进行了设置。在Dreamweaver中通过“属性”面板中的选项可以轻松的完成这项工作。在“目标”下拉菜单中可以设置4个超级链接目标，其意义分别为：_blank：将文件载入新的无标题浏览器窗口中。_parent：将文件载入到上级框架集或包含该链接的框架窗口中。_self：将文件载入到相同框架或窗口中。_top：将文件载入到整个浏览器窗口中，取消所有框架。

　　4超链接的美化

　　在制作超链接时，可通过“超级链接”对话框设置相关属性或利用导航条、fash按钮、fash文本等对超链接进行美化。使用“超级链接”对话框是美化链接的基本方法。在对话框中，文本用来设置超链接显示的文本；链接用来设置超链接的路径，最好是相对路径；目标用来设置超链接的打开方式；标题用来设置超链接的标题；访问键用来设置键盘等价键，可输入一个字母，在浏览器中打开网页后，单击键盘上的这个字母将选中这个超链接。导航条制作的超链接可在链接时产生图像变换的效果，在插入记录/图像对象/导航条中执行。在导航条中，可设置原始图像、鼠标经过图像、按下鼠标时图像，在“按下时，前往的URL”处设置链接地址。值得注意的是每个页面只能有一个导航条。Flash按钮制作的超链接可在经过和点击链接标题时产生立体感和动态感，在插入记录/媒体/fash按钮中执行。用户可根据网页的美化效果添加丰富多彩的按钮样式，在按钮文本中添加所链接网页的标题，在“链接”对话框中输入所要链接的网址。必须注意的是按钮要保存在与相应网页的同一路径下。Flash文本中转滚颜色的设置可在经过和点击链接时产生色彩变换的动态效果，在插入记录/媒体/fash文本中执行。用户可根据网页的美化需要设置链接标题的转换颜色，如标题初始颜色为黑色，在点击链接时可转换为蓝色。和fash按钮一样，fash文本也要保存在与相应网页的同一路径下。

　　5结语

　　超链接是网页间联系的桥梁，是网页的魅力所在，通过链接，浏览者可在信息海洋中尽情遨游！在制作网页时应综合运用外部链接和内部链接让网页更丰富！同时充分利用文字、图片、Flash等网页元素设置链接来增添网页魅力。

　　参考文献

　　[1]陆莹.网页制作DreamweaverCS3[M].上海市：华东师范大学出版社，2010（04）.

　　[2]马增友,于俊丽,刘辉.Dreamweavercs3网页设计与制作技能实训教程[M].北京：科学出版社，

　　[3]孙良军.网页设计与制作全方位学习[M].北京：中国青年出版社，2003.

　　[4]王书娟.网页制作中超链接的应用-使用Dreamweaver创建超链接[J].科技风,2012(05).

　　[5]张烨.关于网页设计中路径使用的思考[J].漯河职业技术学院学报,2005(02).