教学材料HTML DHTML教程-第三章

上传人：1*** IP属地：广东上传时间：2026-03-24 格式：PPT 页数：59 大小：1.20MB 积分：15 举报 版权申诉

已阅读5页，还剩54页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章超链接与图像

本章将介绍如何在HTML中添加超链接以及插入图像，主要内容如下:超链接的基本知识;使用标记符a创建常见的页面间链接、页面内链接和指向电子信箱的链接;使用标记符img在页面中插入图像，并设置图像的属性;使用标记符map创建图像映射，设置不同形状的区域指向不同的文档。返回3.1超链接基础

本节将介绍有关超链接的基础知识，使读者了解什么是URL、绝对URL、相对URL以及HTML中几种常见的超链接。3.1.1什么是URL

HTML利用URL(UniversalResourceLocator，统一资源定位符)来定位Web上的文件信息。URL通常包含二部分内容:一个协议方式、一个装有所击文件的计算机地址(也可以是电子邮件地址或新闻组名称)，以及包含有文件名和文件地址的信息。防议是指在Web上获取信息的方法，Web上最常用的防议有以下儿种:http:超文本传输协议;ftp:文件传输协议;mailto:电子邮件协议。下一页返回3.1超链接基础

超文本传输协议是最常用的协议之一。我们在浏览网页时都是使用该协议，它的用法是在协议后面加一个冒号，然后再加两个斜杠，最后是信息的主机地址(实际访问的是主机上默认的首页)。例如:如果我们要访问新浪网，只要在浏览器的地址栏中输入，然后再按回车键就可以了。由于浏览器的默认协议是超文本传输协议，所以我们可以直接通过输入信息的主机地址来访问默认网页。上面的例了中，我们也可以直接输入，然后按回车键访问新浪网。使用文件传输协议表小的URL与用超文本传输协议类似，即"ftp://ftp主机地址/文件路径”的形式。例如，/zhaofengnian。对于使用电子邮件防议的URL，它的表示方法是在防议后面加一个冒号，然后加一个电子邮件的地址。例如:mailto:jackcr263.net。上一页下一页返回3.1超链接基础

3.1.2绝对URL

所谓绝对URL就是指Internet上资源的完整地址。它所包含的内容有i办议名称、计算机域名以及包含路径的文件名，具体形式为:}办议名称:刀计算机域名/路径和文件名。下面是一个使用绝对URL的例子/news/0181511.htm1，其中http表示访问协议的名称是超文本传输协议，表小文件所在的计算机的域名(所谓域名就是指一个能够反映出Web服务器上实际位置的化名而/news/0181511.htm表小路径和文件名。一船情况下，存指定外部Internet咨源时应使用绝对URL。上一页下一页返回3.1超链接基础

3.1.3相对URL

所谓相对URL就是指Internet上的资源相对当前页面(即i1，在访问的页面)的路径。下面是一个使用相对URL的例子，images/bgl.gif，它表示当前文件所在的目录下image子目录中的bgl.gif文件。在使用相对URL时，经常会使用两个与文件目录相类似的符号:句点“.”和双重点“….”，它们分别表示当前目录和上一级目录(父目录)。例如，二//logo/sinia.gif表示与当前文件所在目录同级的logo目录下的sinia.gif文件。制作网站时，只要站点中各个资源的相对位置不变，我们就可以使用相对URL。这样，当网站制作完成并上传到服务器时，各个页面之间的超链接仍然能够正常地工作。例如，在图3.1中，如果在Web2目录中的index.htm中使用相对URL.../folded/flle.htm访问相应的页面，那么当将Web目录或Web2目录整体移动时，这些文件之间的相对位置保持不变，于是可以确保页面间的正确链接。上一页下一页返回3.1超链接基础

3.1.4HTML中的超链接HTML中的超链接主要有以下三种:

1.页面间的超链接。该链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。

2.页面内的超链接。该链接指向页面内的某一个地方，单击该链接可以完成页面内的跳转。

3.指向电子信箱的链接。该链接指向某一个电子信箱，单击该链接将启动当前默认的收发邮件程序，如OutlookExpress或Outlook等。上一页下一页返回3.2创建超链接

3.2.1a标记符语法<a></a>说明:a是英文单词“anchor(锚标)”的缩写。HTML是通过a标记符来实现超链接的。开始标记符和结束标记符之间的内容就是超链接的源，而超链接指向的内容则称为超链接的目标。超链接标记符a主要有以下几个属性:href:它用来定义超链接所指向的文档的URL。如果该属性指定的文件格式不是浏览器支持的格式，例如zip压缩文件格式，那么浏览器将自动弹出文件下载对话框，读者可以选择合适的目录下载该文件。如果该属性指定的格式是浏览器支持的格式，例如网页文件.html格式或图像文件Jpg格式，那么浏览器将在窗口中显示相应的文件内容。上一页下一页返回3.2创建超链接

target:目标窗目。如果页面使用了框架结构，那么使用target属性就可以指定在哪个框架中显示所链接的文件。有关框架的内容，请参见本书5第4章;如果页面中没有使用框架，那么可以将target属性设置为“_lank"，以便在新的浏览器窗口中打开超链接的目标文档。name:锚名称。该属性一般是在创建页面内超链接时使用。

页面上的文字和图像都可以添加超链接。默认状态下，文字被添加了超链接后会变成蓝色，而且文字下自动添加下划线;如果是图像添加了超链接，则图像会添加蓝色边框。在默认状态下当鼠标移动到添加了超链接的页面元素上方时，鼠标指针会变成小手的形状。上一页下一页返回3.2创建超链接

3.2.2创建页面间超链接语法<ahref"URL"></a>说明:使用a标记符创建页面间超链接时，既可以使用相对路径(指向同一网站内的文件)，也可以使用绝对路径(指向本站点以外的文件)。下面我们创建一个包含有页面间超链接的例子Clink.htm，其源代码如下所示:<html><head><title>心跳的感觉</title></head><body>上一页下一页返回3.2创建超链接

<h3align=“center”>心跳的感觉</h3>同学张某，某日他和倾慕己久的个女孩单独在起，两个人边吃小吃边聊天。突然，女孩叫了句”张郎”，他几乎幸福得晕了过去，然而幸福总是短折的，女孩纤纤玉手直指饼干上的半只<ahref="cockroach.htm">嶂虫郎</a>!<palign=“right”><ahref--“/index.htm”>《笑话园地》</a></body></html>其中文件cockroach.htm与link.htm位于同一目录，它的源代4己如下所小<html><head><title>蟑螂简介</title></head>上一页下一页返回3.2创建超链接

<body><h3align="center">蟑螂简介</h3>嶂螂是种繁殖能力非常强的昆虫。</body></html>

在浏览器中打开link.htm文档，文字“虫章螂”变成了蓝色，并自动添加了下划线。当鼠标移动到“蟑螂”上时，鼠标变成小乎的形状;单击该链接，页面自动跳转到蟀螂简介页面，效果如图3.2所示。如果单击link.htm中的“《笑话园地》”链接，则将链接到>当然如果当前没有处于在线状态则无法i1，确链接，此时会显示一个链接出错的页面，如图3.3所示。一般情况下，如果碰到图3.3所示的页面，最常见的原因是超链接的目标路径指定错误，或者是由于指定了绝对路径而又未处于在线状态。上一页下一页返回3.2创建超链接

3.2.3创建页面内超链接语法<aname="锚点名称”></a>……<ahref="#锚点名称”></a>

说明:创建页面内超链接逻辑上分两步，首先定义锚点，如:<aname="example"></a>>然后再创建指向锚点的超链接，如:<ahref"#example"></a>。这两部分在网页中并没有先后顺序，也就是说可在网页任意位置用<aname="xx"></a>定义锚点，而在另一个任意位置用<ahref"#xx"></a>指向该锚点。上一页下一页返回3.2创建超链接

当同一页面中包含有很多信息，而且这些信息分别属于不同的类别或者划分为不同的部分时，我们可以创建多个页面内超链接，以方便浏览者阅读。下面是一个使用页面内超链接的例子，其源代码如下所示:<html><head><title>球类运动</title></head><body><h2>球类运动</h2>大球类<ul><li><ahref--"#篮球”>篮球</a></li><li><ahref--"#足球”>足球</a></li>上一页下一页返回3.2创建超链接

</ul><aname=”篮球>现代篮球</a>起源于20世纪初，当时<aname=”足球”>现代足球</a>起源于19世纪末，当时<aname=”排球>现代排球</a>起源于上一页下一页返回3.2创建超链接

<aname=”乒乓球”>乒乓球</a>是我国传统的体育强项之，<aname="}}毛球”>羽毛球</a>也是我国传统的体育强项之，<aname="网球”>}ax}球</a>运动在我国开展得比较晚，</body></html>在浏览器中打开该文档，当鼠标移动到“篮球”上时，鼠标变成小乎的形状;单击“篮球”后，页面自动跳转到页面下方，完成了页面内的跳转，效果如图3.4所示。上一页下一页返回3.2创建超链接

实际上，这种指向页面内某个具体位置的超链接也可以用在不同的页面之间。例如，如果要从A页面的超链接跳转到B页面中的某个具体位置，只要在B页面中用<aname=""></a>定义锚点，然后在A页面中定义超链接<ahrefB的URL#锚点></a>即可。例如，在filel.htm中用<aname="xx"></a>定义了锚点，那么可以在同一目录下的file2.htm中用<ahref"fllel.htm#xx"></a>创建指向filel.htm中锚点的链接。

另外，如果将href属性之值指定为一个单独的“#”，则表示创建了一个空的超链接，单击该超链接时不进行任何跳转。在制作网页时，如果暂时无法确定超链接目标文件，就可以将其指定为空链接。上一页下一页返回3.2创建超链接

3.2.4指向电子信箱的链接语法<ahref"mailto:电子信箱地址”></a>说明:创建指向电子信箱的超链接时，属性href中使用的是mailto协议。该协议后面直接跟一个具体的电子信箱地址。下面是一个包含页面间超链接的例子，其源代码如下所示:<html><head><title>联系信息</title></head><body>联系人:<ahref="mailto:wym0619@">大头</a> 电话:12345678传真:87654321 地址:北京123信箱 上一页下一页返回3.2创建超链接

邮编:111000 </body></html>

在浏览器中打开该文档，当鼠标单击“大头”后，浏览器将自动启动默认的收发电子邮件程序，如OutlookExpress，并打开一个新邮件窗口，在收件人栏中自动添加所指定的电子信箱，效果如图3.5所示。上一页下一页返回3.3插入图像

3.3.1Web图像格式在向网页中插入图像之前，我们首先来了解一下Web中最常用的两种图像格式。1.GIF格式GIFCGraphicsInterchangeFormat,图形交换格式)格式是一种采用尤损失压缩方法处理图像的格式。它最多只能包含256种颜色，因此适合于线条图和使用大块纯色的图像。在实队、应用中，GIF格式的图像往往用于制作标题文字、按钮和小图标等。

GIF格式另外一个很大的特点就是它能够设置透明色，这一点在创建某些效果时非常重要。另外，GIF格式还支持动画效果。动画GIF在Web上应用很广，多数动画小图标都采用这种格式。上一页下一页返回3.3插入图像

不论是什么类型的GIF图像，它的文件后缀都是.gif,可以通过图像处理软件将图像保存为GIF格式。2.JPEG格式

JPEGCJointPhotographicsExpertGroup，联合图形专家组图片格式)格式是一种采用有损失压缩方法处理图像的格式。由于它支持的颜色数几乎没有限制，所以适用于真彩色或平滑过渡色的照片和图像。JPEG格式可以采用不同的压缩比率，压缩比率越大，图像效果的损失越大，图像文件就越小。JPEG格式不支持透明色和动画效果。JPEG格式文件的后缀是jpg或jpeg，同样也需要用图像处理软件将图像文件保存为该格式。上一页下一页返回3.3插入图像

3.3.2常用Web图像处理软件目前几乎所有的图像处理软件都能够处理Web图像，以下是一些常用的图像处理软件。1.Windows画图Windows画图软件能够提供基本的图像处理功能，并可以将图像保存为GIF格式或者JPEG格式。目前很多图库中都包含很好的BMP(标准位图图像格式)图像，读者可以使用Windows画图软件将这些图像转换为GIF格式或者JPEG格式(使用“文件”菜单中的“另存为”命令)。需要注意的是:只有种经用画图软件打开过GIF格式或JPG格式的图像，它才能够用于另存GIF格式或JPG格式。上一页下一页返回3.3插入图像

2.PhotoshopPhotoshop是Adobe公司出品的世界上最一著名的图像处理软件。Photoshop软件的功能非常强大，是进行专业图像处理和图像创作的必备软件。它能够进行专业化的图像处理，例如将一个TIFF格式的图像输出为GIF格式并设置图像中的透明色等。

3.PaintShopProPaintShopPro是Jasc公司出品的一款共享软件。该软件具有短小精悍、功能强大、操作简单等特点，也能够满足专业化图像处理的要求。另外，由于该软件是共享软件，可以方便地在Internet上下载，所以使用起来比较方便。4.FireworksFireworks是Macromedia公司出品的Web图形工具软件。该软件完全立足于Web应用，能创建各种Web效果，它与DreamweaverC最著名的网页编辑软件之一)和Flash(最著名的矢量动画软件)共称为“网页制作梦幻组合(Dreamteam)。上一页下一页返回3.3插入图像

3.3.3img标记符和相应属性语法<img>说明:img是英文单词“image(图像)’’的缩写。在HTML文档中插入图像是通过img标记符来实现的。<img>标记符是单独使用的标记符，该标记符包含多种属性，用于控制图像的显示。1.src属性使用该属性可以设置被引用的图像文件所在的位置，既可以使用相对URL也可以使用绝对URL。下面是一个在Web页面中插入图像的例子，其源代码如下所示:上一页下一页返回3.3插入图像

在浏览器中打开该文件，效果如图3.6所示(注意，只有当前目录中包含Zebra.jpg文件才能i正确显示)。2.alt属性使用该属性可以设置图像的简单文字说明。当使用老版本的浏览器或者访问者关闭了浏览器的“显示图像”功能时，这个属性非常有用。使用alt属性将大大加强文档的可读性，方便访问者浏览页面信息。上一页下一页返回3.3插入图像

下面是一个使用alt属性的例子，其源代码如下:<html><head><title>我是大头</title></head><body><imgsrc="me.gif"alt=”大头!大头!下雨不愁!别人有伞!我有大头!”></body></html>

在浏览器中打开该文档，将鼠标移动到图像上方并停顿片刻，此时将显示替换文字，效果如图3.7所示。上一页下一页返回3.3插入图像

3.width(宽度)和height(高度)属性使用这两个属性可以设置图像的宽度和高度，浏览器根据这个数值为图像留出显示的空间(以像素为单位)，等图像完全下载以后再在这个空间显示图像，这样能够加快整个页面的显示速度。该属性的值既可以是以像素为单位的具体数值，也可以是白分比值。使用百分比值时实际上是相对于当前窗口的宽度和高度。虽然通过设置图像的宽度和高度可以实现对图像的缩放，但是这样做并没有改变图像文件的实际大小，因为这样只是调整了图像在网页中的显示大小。如果要加快网页的下载速度，最好的办法是在图像处理软件中将图像调整到合适的大小，然后再置入到网页中。上一页下一页返回3.3插入图像

如果没有在src属性中指定要显小的图像或者指定的图像不存在，但是却指定了图像的width和height属性，那么浏览器也会根据这两个值留出显小图像的空间。下面是一个使用了width和height属性的例子，其源代码如下所小:<html><head><title>ImageesWidthandHeight实例</title></head><body><imgsrc="donkey.jpg">原大<imgsrc="donkey.jpg"width="25%"height="90">指定大小<imgsrc=""width="50"height="50">小指定I冬I像I}}J位置

</body></html>上一页下一页返回3.3插入图像

在浏览器中打开该文档，效果如图3.8所示。4.align(对齐方式)属性图像的对齐方式分为两种情况，一种为水平方向的对齐，另一种为垂直方向的对齐。水平方向对齐方式可以取的值有:left(左对齐):该属性表示图像居左，文字在图像右面;right(右对齐):该属性表示图像居右，文字在图像左面。垂直方向对齐方式可以取的值有:top(顶部对齐):该属性表示文字与图像的顶部对齐;bottom(底部对齐):该属性表示文字与图像的底部对齐;middle(中部对齐):该属性表示文字与图像的中部对齐。上一页下一页返回3.3插入图像

在使用align属性时，每次只能设定一个值。下面的例子中使用了多个图像来说明align属性的作用，其源代码如下所示:<html><head><title>Image_align实例</title></head><body><imgsrc="me2.gif"align="top">与文字项部对齐!<imgsrc="me2.gif"align="middle">与文字中部对齐!<imgsrc="me2.gif"align="bottom">与文字底部对齐!<imgsrc="me2.gif"align="right">位于文字的右而!位于文字的右而!位于文字的右面!位于文字的右而!位于文字的右而!位于文字的右而!位于文字的右而!上一页下一页返回3.3插入图像

<imgsrc="me2.gif"align="left">位于文字的左面!位于文字的左面!位于文字的左面！位于文字的左面!位于文字的左面!位于文字的左面!</body></html>在浏览器中打开该文档，效果如图3.9所示。5.border(边框)属性可以利用border属性来指定图像边框的宽度(边框的宽度可以为0).Border属性的取值是数字，表示边框宽度的像素数。下面是一个包含border属性的例子，其源代码如下所示上一页下一页返回3.3插入图像

<html><head><title>Image_Border实例</title></head><body>下面的图像具有小同粗细的边框:<imgsrc="handshake.jpg"border="1"><imgsrc="handshake.jpg"border="8">

</body></html>在浏览器中打开该文件，效果如图3.10所示。上一页下一页返回3.3插入图像

6.hspace(垂直方向的间距)和vspace(水平方向的间距)属性

这两个属性定义了图像与周围元素的水平和垂直间距。vspace属性用于指定图像与其垂直方向上相邻页面元素之间的距离，hspace用来指定图像与其水平方向相邻页面元素之间的距离。这两个属性的参数都是数字，表示空出距离的像素点数。当图像被文字包围时，这两个属性可以使图像与文字之间具有一定的间距，从而使图像更加醒目。下面的例子中包含有这两个属性，其源代码如下所示<html><head><title>Image_HspaveandVspace实例</title></head><body><imgsrc="dove.jpg"border="1"align="left">上一页下一页返回3.3插入图像

一次小公正裁判的恶果甚至超过10次犯罪。这是囚为犯罪仅仅是无视法律，好比污染了水流;而小公正的审判则毁坏了法律，好比污染了水源。<imgsrc="dove.jpg"border="1"vspace="60"hspace="60"align="left">一次小公正裁判的恶果甚至超过10次犯罪。这是囚为犯罪仅仅是无视法律，好比污染了水流;而小公止的审判则毁坏了法律，好比污染了水源。

</body></html>在浏览器中打开该文档，效果如图3.11所示。上一页下一页返回3.3插入图像

3.3.4使用图像创建超链接图像不仅能够给浏览者提供信息，而目图像也可以创建超链接。使用图像创建超链接的方法与创建文字超链接一样，只是标记符<a>与</a>之间是一幅图像。下面就是一个使用图像来建立超链接的例子，其源代码如下所示:<html><head><title>超链接图像实例</title></head><body><palign="center">时间观念<ahref--"bigclock.htm"><imgsrc="smallclock.jpg"vspace="6"hspace="20"align="left"alt="thisisaclock!"></a>上一页下一页返回3.3插入图像

世界各地的时间观念差别很远，形象的比喻就是有的像兔子跑，有的则像蜗牛爬，而你有的时候要跟得上兔子，有的时候却要和蜗牛起爬。你不得不调整好你的脚步，即使有的时候感觉好像是在浪费时间。</body></html>其中文件bigclock.htm的源文件如下所小:<html><head><title>超链接图像实例二</title></head><body><imgsrc="clock.jpg"alt="thisisabigclock!"></body></html>上一页下一页返回3.3插入图像

在浏览器中打开实例“超链接图像实例”，将鼠标移动到图像上方时，鼠标指针变成小乎形状，单击该图像，浏览器将自动跳转到面"bigclock.htm"，效果如图3.12所示。

需要说明的是，如果将超链接图像的border属性设置为0，将不会显示出蓝色的边框。另外，如果将超链接的目标文件直接指定为图像文件，那么也能获得图3.12所示的效果，请读者试一试。上一页返回3.4图像映射

3.4.1什么是图像映射所谓图像映射就是将图像分成不同的区域，然后将每一个区域与一个HTML文件建立链接。当浏览者单击图像的不同区域时，浏览器会自动跳转到不同的页面。图像映射一般用于网站的导航系统，另外也用于一些特定信息的组织(例如电子地图等)。例如，在图3.13中，当浏览者用鼠标单击页面中的“中文”部分时，就会跳转到该网站的中文版页面;而单击“English"部分时，则会跳转到该网站的英文版页面。下一页返回3.4图像映射

3.4.2创建图像映射语法<mapname=“图像映射名称”><area><area><area></map><imgsrc=，usemap="#图像映射名称’，>上一页下一页返回3.4图像映射

说明:设置图像映射的HTML代码主要分为两个部分。第一部分是标记符<map></map>它定义了图像映射的区域，<map>只有一个属性name(名称)，用于为图像映射命名。在map标记符中包含area标记符，它可以将图像划分为很多不同的区域。

第二部分是标记符img，通过使用属性usemap，可以确立与所建立的图像映射区域的关系。属性usemap与标记符map中的属性name必须一一对应。与页面内超链接类似，map标记符与img标记符的位置并没有先后顺序。使用标记符area可以定义图像的不同区域与不同的文档之间建立链接，它主要的属性如下:上一页下一页返回3.4图像映射

shape:形状。shape属性的取值可以为:“rect”(矩形)、“circle”(圆)和"poly"(多边形)。可以根据需要将图像划分为不同的形状。coords:坐标。根据划分的形状不同，坐标也不同。对于矩形来说，坐标是指矩形左上角的坐标和右下角的坐标，也就是说此时坐标共有四个数字;对于圆来说，坐标是指圆心的坐标和半径，这时只要有二个数字就够了;对于多边形来说，坐标是指多边形每一个点的坐标，这时共有2n个数字(假设多边形有n条边)。所有这些数字之间都是用逗号分隔开，这些数字的单位都是像素。target:目标窗口。可以使用该属性设置目标文件显示的窗口，有关概念请参见本书第四章。alt:替换文字。该属性给出了图像的替换文字。上一页下一页返回3.4图像映射

需要注意的是，为了能够精确地划分不同的区域，我们可以使用图像处理软件来帮助确定坐标。例如，在Windows“画图”中打开要作为映射的图像，将鼠标指针移到需要确定坐标的位置，则在状态栏中将出现当前鼠标指针

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

教学材料HTML DHTML教程-第三章

文档简介

温馨提示

最新文档

评论

教学材料HTML DHTML教程-第三章

文档简介

温馨提示

最新文档

评论

相关文档