网页设计与制作_教学ppt课件 朱金华 第5章 超链接.pptxVIP

第5章 超链接 教学目标1. 了解超链接的概念2. 掌握超链接的分类3. 掌握链接对象的不同类型4.学会创建超链接的方法 5. 学会设置网页链接的属性6. 掌握图像映射教学内容5.1 创建超链接5.2 链接对象5.3 网页链接属性设置5.4 图像映射教学重点和难点重点：创建超链接、链接对象、网页链接属性设置、图像 映射难点：创建超链接、链接对象导入：例：搜狐网页上的不同链接对象 网页文件的最大魅力是超越各个文件的空间，通过超链接相互连接构成一个纷繁复杂的互联网世界。 超链接（hyperlink）是一个网站的精髓，超链接在本质上属于一个网页的一部分，它是一种允许一个网页同其他网页或站点之间进行链接的元素。各个网页链接在一起后，才能真正构成一个网站。5.1 创建超链接超链接的标记：建立超链接的标记是a（anchor, 锚），以a开始，以/a结束。基本语法：a href=“url” title=“指向链接显示的文字” target=“目标窗口的打开方式超链接名称/a语法说明：（1）a：标记a表示一个链接的开始，/a表示链接的结束。5.1 创建超链接（2）href：链接的属性，和URL结合定义了这个链接所指的 目标地址。url资源地址，是要链接到的网页或者文件的地址。URL可以是一个绝对的网页，或是一个相对网页，还可以是一个pdf等其他文档。5.1 创建超链接（3）target：用于指定目标窗口的打开方式，其默认方式是原窗口，其具体的值如下： _blank：在新窗口载入文档，可同时打开多个相同窗口。但如无特殊需要请勿滥用。 _self：在被点击的同一框架中打开被链接文档（默认）。 _parent：在父框架集中打开被链接文档。 _top：在窗口主体中打开被链接文档。 new：在新窗口载入文档，但只打开一个窗口（受浏览器限制）。说明：_self、_parent 和_top 这三个值大多数时候与iframe一起使用。5.1 创建超链接（4）title：用于指定指向链接时所显示的提示信息。（5）超链接名称：链接目标资源的文字显示说明，浏览时单击“超链接名称”，就会链接到指定URL的资源。5.1 创建超链接示例HTML代码：5.1 创建超链接5.1.1 设置超链接路径 在HTML文件中，主要提供了三种路径：绝对路径、相对路径和根路径，不同的路径使用在不同的链接中。5.1 创建超链接1. 绝对路径 绝对路径指文件的完整路径，包括完整的协议名称、主机名称、文件夹名称和文件名称。一般用于网站的外部链接。常见的绝对路径有：（1）http链接：。（2）ftp链接：10。5.1 创建超链接2. 相对路径 相对路径是以当前文件所在的路径为起点，进行相对文件的查找，包含了从当前文件指向目标文件的路径。如：（1）如果链接到同一目录下的文件main.html，则路径的设置方法为：href=”main.html”。（2）如果要链接到下级子目录中的文件，如main.html是本地当前路径下称为“web”子目录下的文件，则路径的设置方法为：href=”web/main.html”。5.1 创建超链接（3）如果要链接到上一级子目录中的文件，如main.html是本地当前目录的上一级子目录下的文件，则路径的设置方法为：href=”../main.html”。（4）如果要链接到上两级子目录中的文件，如main.html是本地当前目录的上两级子目录下的文件，则路径的设置方法为：href=” ../../main.html”。思考：a href=”./main.html”表示什么意思？/a3. 根路径 根路径适用于创建内部链接，但是大多数情况下，不建议使用根路径。书写方法，一般以一个斜线开头代表根目录。5.1 创建超链接5.1.2 内部链接 所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件（即当前页），哪个是被链接文件。 内部链接一般采用相对路径链接比较好。假如某网站的news子目录下有两个文件news1.html和news2.html，如表5-1所示展示了内部链接语句中相对路径的写法。5.1 创建超链接表5-1 站点内部链接5.1 创建超链接5.1.3 外部链接 所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。这种链接的URL地址一般要用绝对路径（以http://、ftp://等开头），要有完整的URL地址。5.2 链接对象5.2.1 图片链接基本语法：a href=url target=目标窗口的打开方式img src=图片地址/a语法说明：（1）href：用来设置图片链接的页面地址URL。（2）target：用来设置目标窗口的打开方式。（3）img：表示插入图