dreamweaver网页设计之：建立超链接.pptVIP

1 建立超链接 第四章 第4章 建立超链接 第4章 建立超链接 本章简介： 前面两章中所做的工作仅仅是使网页中可以显示文本和图像，虽说是“图文并茂”了，但这对于网页来说还很不够。为了使网站中的众多网页构成一个整体，必须使各网页通过超链接的方式联系起来，也就是说，使访问者能够在各个页面之间跳转。 网络中的每个网页都是通过超链接的形式关联在一起的，超链接是网页中最重要、最根本的元素之一。浏览者可以通过鼠标单击网页中的某个元素，轻松的实现网页之间的转换或下载文件、收发邮件等。 第4章 建立超链接 主要内容： 了解超链接的概念和路径知识; 掌握超级链接的基本概念和创建方法； 从HTML的角度理解超链接; 使用Dreamweaver 8设置超链接. 第4章 建立超链接 超链接就是当用鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据其指示载入一个新的页面或跳转到页面的其他位置。 与超链接相关的一个概念是定位点（也称锚点），它指明了网页中一个确定的位置，以便超链接跳转时定位。 4.1从HTML的角度理解超链接 4.1.1 理解路径的概念 1、超级链接及路径的概念 超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。例如，当浏览者单击已经链接的文字或图像时，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。 4.1从HTML的角度理解超链接 2．超级链接的分类 （1）按链接载体分类，把链接分为文本链接与图像链接两大类。 文本链接：用文本作链接载体，简单实用。 图像链接：用图像作为链接载体能使网页美观、生动活泼，它既可以指向单个的链接，也可以根据图像不同的区域建立多个链接。 （2）按链接目标分类，将超级链接分为以下几种类型： 内部链接：同一网站内文档之间的链接。 外部链接：不同网站文档之间的链接。 锚点链接：同一网页或不同网页中指定位置的链接。 E-mail链接：发送电子邮件的链接，可直接点击发送电子邮件。 执行文件链接：链接站点空间里的可执行程序，用于下载在线运行。 4.1从HTML的角度理解超链接 3、链接路径 路径的作用就是定位一个文件的位置，使用过Windows的用户都会了解文件夹和子文件夹，这本身就是路径的概念。 例如：链接到的“1.html”就是一个路径，直接使用文件名表示这个文件和原来的网页文件在同一个文件夹中。如果链接到的网页不和原网页在同一个文件夹中，就不能这样写了。 4.1从HTML的角度理解超链接 （1）绝对路径 绝对路径是指某个文件在网络上的完整路径，包括协议、Web服务器、路径和文件名等。简单地说，如果在浏览器地址栏中输入就能直接访问的文件地址，就可以看作是绝对路径。例如，下面的地址就是绝对路径： /index.asp 绝对路径指的是精确位置，如果目标文件被移到其他位置，则超级链接无效。如果用户要创建的是外部链接，即创建不同网站文档之间的链接，则必须使用绝对路径。 4.1从HTML的角度理解超链接 （2）文件相对路径 文件相对路径是指和当前文档所在的文件夹相对的路径。 若要创建从站点根目录的index.htm到list.htm的链接，链接路径为“list.htm”。 若要创建从list.htm到help目录下的help.htm的链接，链接路径为“help/help.htm”。 4.1从HTML的角度理解超链接 （2）文件相对路径 4.1 从HTML的角度理解超链接 4.1.2 文字超链接 建立超链接所使用的HTML标签为a和/a。 在“a”标签中，“href”属性是必要属性，用来放置超链接的目标地址，该目标可以是本机上的某个HTML文件，也可以是其他网站上的URL地址。 “a” 和“/a”之间的内容为超链接名称。 4.1 从HTML的角度理解超链接 文字超链接示例 html head title超链接/title /head body 单击a href=1.html这里/a链接到一个图片网页超链接的建立 /body /html 4.1 从HTML的角度理解超链接 4.1.3 设置文字链接的颜色 超链接可以通过设置链接的颜色来表示链接是否已经被单击，注意这是在body标签中设置的，而不是在a标签中。 【例】 超链接颜色设置示例 html head title链接颜色的变化/title /head body text=blue alink=red vlink=yellow link=green 注意a href=1.html颜色/a的变化 /body /