《htmldhtml实用教程 教学课件 作者 赵丰年 第三章》由会员分享，可在线阅读，更多相关《htmldhtml实用教程 教学课件 作者 赵丰年 第三章（60页珍藏版）》请在金锄头文库上搜索。
1、第3章 超链接与图像,3.1 超链接基础 3.2 创建超链接 3.3 插入图像 3.4 图像映射,第3章 超链接与图像,本章将介绍如何在HTML中添加超链接以及插入图像，主要内容如下: 超链接的基本知识; 使用标记符a创建常见的页面间链接、页面内链接和指向电子信箱的链接; 使用标记符img在页面中插入图像，并设置图像的属性; 使用标记符map创建图像映射，设置不同形状的区域指向不同的文档。,返回,3.1 超链接基础,本节将介绍有关超链接的基础知识，使读者了解什么是URL、绝对URL、相对URL以及HTML中几种常见的超链接。 3.1.1 什么是URL HTML利用URL ( Universal
2、 Resource Locator，统一资源定位符)来定位Web上的文件信息。URL通常包含二部分内容:一个协议方式、一个装有所击文件的计算机地址(也可以是电子邮件地址或新闻组名称)，以及包含有文件名和文件地址的信息。 防议是指在Web上获取信息的方法，Web上最常用的防议有以下儿种: http:超文本传输协议; ftp:文件传输协议; mailto:电子邮件协议。,下一页,返回,3.1 超链接基础,超文本传输协议是最常用的协议之一。我们在浏览网页时都是使用该协议，它的用法是在协议后面加一个冒号，然后再加两个斜杠，最后是信息的主机地址(实际访问的是主机上默认的首页)。例如:如果我们要访问新浪网
3、，只要在浏览器的地址栏中输入，然后再按回车键就可以了。由于浏览器的默认协议是超文本传输协议，所以我们可以直接通过输入信息的主机地址来访问默认网页。上面的例了中，我们也可以直接输入，然后按回车键访问新浪网。 使用文件传输协议表小的URL与用超文本传输协议类似，即“ftp:/ftp主机地址/文件路径”的形式。例如，ftp:/ 对于使用电子邮件防议的URL，它的表示方法是在防议后面加一个冒号，然后加一个电子邮件的地址。例如:mailto: jack cr 。,上一页,下一页,返回,3.1 超链接基础,3 .1.2 绝对URL 所谓绝对URL就是指Internet上资源的完整地址。它所包含的内容有i办
4、议名称、计算机域名以及包含路径的文件名，具体形式为:办议名称:刀计算机域名/路径和文件名。 下面是一个使用绝对URL的例子 一船情况下，存指定外部Internet咨源时应使用绝对URL。,上一页,下一页,返回,3.1 超链接基础,3 .1.3 相对URL 所谓相对URL就是指Internet上的资源相对当前页面(即i1，在访问的页面)的路径。下面是一个使用相对URL的例子，images/bg l .gif，它表示当前文件所在的目录下image 子目录中的bg l .gif文件。 在使用相对URL时，经常会使用两个与文件目录相类似的符号:句点“.”和双重点“.”，它们分别表示当前目录和上一级目录
5、(父目录)。例如，二/logo/sinia.gif表示与当前文件所在目录同级的logo目录下的sinia.gif文件。 制作网站时，只要站点中各个资源的相对位置不变，我们就可以使用相对URL。这样，当网站制作完成并上传到服务器时，各个页面之间的超链接仍然能够正常地工作。例如，在图3.1中，如果在Web2目录中的index.htm中使用相对URL./folded/flle.htm访问相应的页面，那么当将Web目录或Web2目录整体移动时，这些文件之间的相对位置保持不变，于是可以确保页面间的正确链接。,上一页,下一页,返回,3.1 超链接基础,3 .1.4 HTML中的超链接 HTML中的超链接主
6、要有以下三种: 1.页面间的超链接。该链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。 2.页面内的超链接。该链接指向页面内的某一个地方，单击该链接可以完成页面内的跳转。 3.指向电子信箱的链接。该链接指向某一个电子信箱，单击该链接将启动当前默认的收发邮件程序，如Outlook Express或Outlook等。,上一页,下一页,返回,3.2 创建超链接,3.2.1 a标记符 语法 说明:a是英文单词“anchor(锚标)”的缩写。HTML是通过a标记符来实现超链接的。开始标记符和结束标记符之间的内容就是超链接的源，而超链接指向的内容则称为超链接的目标。 超链接标记符a主要有以
7、下几个属性: href:它用来定义超链接所指向的文档的URL。如果该属性指定的文件格式不是浏览器支持的格式，例如zip压缩文件格式，那么浏览器将自动弹出文件下载对话框，读者可以选择合适的目录下载该文件。如果该属性指定的格式是浏览器支持的格式，例如网页文件.html格式或图像文件Jpg格式，那么浏览器将在窗口中显示相应的文件内容。,上一页,下一页,返回,3.2 创建超链接,target:目标窗目。如果页面使用了框架结构，那么使用target属性就可以指定在哪个框架中显示所链接的文件。有关框架的内容，请参见本书5第4章;如果页面中没有使用框架，那么可以将target属性设置为“_lank“，以便在
8、新的浏览器窗口中打开超链接的目标文档。 name:锚名称。该属性一般是在创建页面内超链接时使用。 页面上的文字和图像都可以添加超链接。默认状态下，文字被添加了超链接后会变成蓝色，而且文字下自动添加下划线;如果是图像添加了超链接，则图像会添加蓝色边框。在默认状态下当鼠标移动到添加了超链接的页面元素上方时，鼠标指针会变成小手的形状。,上一页,下一页,返回,3.2 创建超链接,3.2.2 创建页面间超链接 语法 说明:使用a标记符创建页面间超链接时，既可以使用相对路径(指向同一网站内的文件)，也可以使用绝对路径(指向本站点以外的文件)。 下面我们创建一个包含有页面间超链接的例子C link.htm，
9、其源代码如下所示: 心跳的感觉 ,上一页,下一页,返回,3.2 创建超链接,心跳的感觉 同学张某，某日他和倾慕己久的个女孩单独在起，两个人边吃小吃边聊天。突然，女孩叫了句”张郎”，他几乎幸福得晕了过去，然而幸福总是短折的，女孩纤纤玉手直指饼干上的半只嶂虫郎! 笑话园地 其中文件cockroach.htm与link.htm位于同一目录，它的源代4己如下所小 蟑螂简介,上一页,下一页,返回,3.2 创建超链接, 蟑螂简介 嶂螂是种繁殖能力非常强的昆虫。 在浏览器中打开link.htm文档，文字“虫章螂”变成了蓝色，并自动添加了下划线。当鼠标移动到“蟑螂”上时，鼠标变成小乎的形状;单击该链接，页面自
10、动跳转到蟀螂简介页面，效果如图3.2所示。 如果单击link.htm中的“笑话园地”链接，则将链接到 当然如果当前没有处于在线状态则无法i1，确链接，此时会显示一个链接出错的页面，如图3.3所示。 一般情况下，如果碰到图3.3所示的页面，最常见的原因是超链接的目标路径指定错误，或者是由于指定了绝对路径而又未处于在线状态。,上一页,下一页,返回,3.2 创建超链接,3.2.3 创建页面内超链接 语法 说明:创建页面内超链接逻辑上分两步，首先定义锚点，如: 然后再创建指向锚点的超链接，如: 。这两部分在网页中并没有先后顺序，也就是说可在网页任意位置用 定义锚点，而在另一个任意位置用 指向该锚点。,
11、上一页,下一页,返回,3.2 创建超链接,当同一页面中包含有很多信息，而且这些信息分别属于不同的类别或者划分为不同的部分时，我们可以创建多个页面内超链接，以方便浏览者阅读。 下面是一个使用页面内超链接的例子，其源代码如下所示: 球类运动 球类运动 大球类 篮球 足球,上一页,下一页,返回,3.2 创建超链接,排球 小球类 乒乓球 羽毛球 网球 现代篮球起源于20世纪初，当时. 现代足球起源于19世纪末，当时. 现代排球起源于,上一页,下一页,返回,3.2 创建超链接,乒乓球是我国传统的体育强项之， 羽毛球也是我国传统的体育强项之， ax球运动在我国开展得比较晚， 在浏览器中打开该文档，当鼠标移
12、动到“篮球”上时，鼠标变成小乎的形状;单击“篮球”后，页面自动跳转到页面下方，完成了页面内的跳转，效果如图3.4所示。,上一页,下一页,返回,3.2 创建超链接,实际上，这种指向页面内某个具体位置的超链接也可以用在不同的页面之间。例如，如果要从A页面的超链接跳转到B页面中的某个具体位置，只要在B页面中用定义锚点，然后在A页面中定义超链接即可。例如，在file l.htm中用 定义了锚点，那么可以在同一目录下的file2.htm中用 创建指向filel.htm中锚点的链接。 另外，如果将href属性之值指定为一个单独的“#”，则表示创建了一个空的超链接，单击该超链接时不进行任何跳转。在制作网页时
13、，如果暂时无法确定超链接目标文件，就可以将其指定为空链接。,上一页,下一页,返回,3.2 创建超链接,3.2.4 指向电子信箱的链接 语法 说明:创建指向电子信箱的超链接时，属性href中使用的是mailto协议。该协议后面直接跟一个具体的电子信箱地址。 下面是一个包含页面间超链接的例子，其源代码如下所示: 联系信息 联系人:大头 电话:1234 5678传真:8765 4321 地址:北京123信箱,上一页,下一页,返回,3.2 创建超链接,邮编:111000 在浏览器中打开该文档，当鼠标单击“大头”后，浏览器将自动启动默认的收发电子邮件程序，如Outlook Express，并打开一个新邮
14、件窗口，在收件人栏中自动添加所指定的电子信箱，效果如图3.5所示。,上一页,下一页,返回,3.3 插入图像,3.3.1 Web图像格式 在向网页中插入图像之前，我们首先来了解一下Web中最常用的两种图像格式。 1. GIF格式 GIF C Graphics Interchange Format,图形交换格式)格式是一种采用尤损失压缩方法处理图像的格式。它最多只能包含256种颜色，因此适合于线条图和使用大块纯色的图像。在实队、应用中，GIF格式的图像往往用于制作标题文字、按钮和小图标等。 GIF格式另外一个很大的特点就是它能够设置透明色，这一点在创建某些效果时非常重要。另外，GIF格式还支持动画
15、效果。动画GIF在Web上应用很广，多数动画小图标都采用这种格式。,上一页,下一页,返回,3.3 插入图像,不论是什么类型的GIF图像，它的文件后缀都是.gif,可以通过图像处理软件将图像保存为GIF格式。 2. JPEG格式 JPEG CJoint Photographics Expert Group，联合图形专家组图片格式)格式是一种采用有损失压缩方法处理图像的格式。由于它支持的颜色数几乎没有限制，所以适用于真彩色或平滑过渡色的照片和图像。JPEG格式可以采用不同的压缩比率，压缩比率越大，图像效果的损失越大，图像文件就越小。 JPEG格式不支持透明色和动画效果。JPEG格式文件的后缀是jp
16、g或jpeg，同样也需要用图像处理软件将图像文件保存为该格式。,上一页,下一页,返回,3.3 插入图像,3.3.2 常用Web图像处理软件 目前几乎所有的图像处理软件都能够处理Web图像，以下是一些常用的图像处理软件。 1. Windows画图 Windows画图软件能够提供基本的图像处理功能，并可以将图像保存为GIF格式或者JPEG格式。目前很多图库中都包含很好的BMP(标准位图图像格式)图像，读者可以使用Windows画图软件将这些图像转换为GIF格式或者JPEG格式(使用“文件”菜单中的“另存为”命令)。需要注意的是:只有种经用画图软件打开过GIF格式或JP G格式的图像，它才能够用于另存GIF格式或JP G格式。,上一页,下一页,返回,3.3 插入图像,2. Photoshop Photoshop是Adobe公司出品的世界上最一著名的图像处理软件。Photoshop软件的功能非常强大，是进行专业图像处理和图像创作的必备软件。它能够进行专业化的图像处理，例如将一个TIFF格式的图像输出为GIF格式并设置图像中的透明色等。 3 .Paint Sho
