第5章 超链接.ppt

第5章 超链接 建议：1课时 5.1 超链接简介 超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。 5.2 创建超链接 超链接能够让浏览者在各个独立的页面之间方便地跳转；通过创建超链接来建立一个页面和下一个页面的联系，也可以用来建立到其他web服务器上的网页联系。 5.2.1 超链接语法 在网页文件中，超链接通常使用链接标记a的href属性建立，当前文档便是链接源，href设置的属性值便是目标文件。 基本语法 a href=”url” name=”” title=”提示信息” target=”窗口名称”超链接名称/a 语法说明 超链接由目的地址、链接标签、打开位置等三部分组成： 1.href：链接指向的目标文件 2. name：创建文档内的标签。 3.title：指向链接的提示信息 4.target：指定打开的目标窗口 5.2.2 超链接路径 在HTML文件中提供了三种路径：绝对路径、相对路径、根路径。 绝对路径指文件的完整路径，包括文件传输的协议http、ftp等，一般用于网站的外部链接，例如：。 相对路径是指相对于当前文件的路径，它包含了从当前文件指向目地文件的路径。 5.2.3 超链接分类 超链接可以分为内部链接和外部链接两种。内部链接是指网站内部文件之间的链接，而外部链接是指网站内的文件链接到站点内容外的文件。 基本语法 a href=”url”超链接内容/a 【例5-2-1】内部链接和外部链接的应用 5.3.1 下载文件链接 网站经常提供软件、文件等资料下载，下载文件的链接指向文件所在的相对路径或绝对路径，文件类型：*.doc/*.pdf/*.exe/*.rar等。 基本语法 a href=“url”链接内容/a 5.3.2 书签链接 书签是指到文章内部的链接，可是实现段落间的任意跳转。实现这样的链接要先定义一个书签作为目标端点，再定义到书签的链接。 定义书签基本语法 a name=name书签标题/a Name属性用来给被链接的部分起名字并加标记，text是可选项。 定义书签链接基本语法 a href=#name书签标题/a !-- 同一页面内 -- a href=URL#name书签标题/a !-- 不同页面间 -- 其中URL是放置标记的HTML文件的URL，name是标记名，对于同一文件，可以直接写成a href=”#name”text/a。 【例5-3-2】书签链接 5.3.3 FTP链接 FTP服务器链接和网页链接区别在于所用协议不同，浏览网页采用http协议，而FTP服务器采用FTP协议连接。 基本语法 a href = ftp://服务器IP地址或域名链接的文字/a 5.3.4 图片链接 链接的目标端点可以是一个图像文件，浏览时单击链接源点，就可以打开目标端点的图像文件。 基本语法 img src=“url” width=“” height=“” hspace=“” vspace=“” align=“” border=“” alt=“” 语法说明 alt ：添加图片的提示文字； width/height：设置图片的宽度和高度(px,%) border：设置图片边框(px) align ：设置图片对齐方式（水平/垂直两个方向） hspase/vspase ：设置图片的间距设置(px) 【例5-3-4】下载文件链接 5.3.4 图片链接 基本语法 img src=”图片地址” usemap=”#映射图片名称” map name=”映射图片名称” area shape=”热区形状” coords=”热区坐标” href=”URL” /map 【例5-3-5】图片热区链接 5.3.5 电子邮件链接 超级链接还可以进一步扩展网页的功能，比较常用的有电子邮件、FTP等链接。完成以上的功能只需要修改超级链接的href值。 基本语法 a href=“mailto:E-mail地址[ ?subject=邮件主题[参数=参数值]]”链接内容/a 5.4 Web页面设计实例——实例 Page: * Web前端开发技术 清华大学出版社