第5章 图像.ppt

1、第五章图像，图像在网页中被广泛使用。新闻中有图片新闻，其中的照片被用作在网页中放置图像的结果。同样，随着数码相机的普及，互联网上的免费相册越来越多，所以免费相册中的照片也使用图像标签在网页上显示照片。在网页中，显示不同大小的图片，并提供给用户浏览。同时，添加一个链接地址成为一个图像链接。为了反映图像的效果，还可以给出图片的框架。在现实生活中，它被称为相框。因此，本章将学习图像标记，其标记由。学习后，将掌握以下内容：图像的基本语法图像和文本对齐框架处理图像的超链接图像客户端映射。5.1图像的基本语法。本节学习图像的基本语法。将图像放入网页非常简单，只需将图像标签插入标签对，其中图像标签用于链接图

2、像地址，还可以设置宽度和高度等其他参数。只要你能设置标记的语法点，你就可以放漂亮的图片。然而，如果你想控制它，你需要学习几个属性，如宽度，对齐，等等。本节将详细解释图像的基本操作。5.1.1在网页中插入图像。用于插入图像的属性是src，格式正确，其中#表示图像的url路径，下面的代码表示链接图像。上面的代码表示标签中插入了一张名为cn.jpg的图片。应该注意的是，标签被放置在内部，并且大多数标签被放置在网页主体中。代码5.1显示了插入图像的完整代码。代码5.1在源文件的第5章中插入图像。插入图像，5.1.2当图像无法显示时提示信息。浏览网页时，会出现图像无法正常显示的问题，如图像地址不存在，则

3、图像右上角会显示一个叉号，表示图像显示不正常。那么，是否存在这样的情况，即当图像不能正常显示时，有必要在第一时间让用户知道图像所表达的信息？答案是肯定的。这是第二个参数alt。Alt表示当鼠标指针在图片上时显示的交互式文本信息。当图像显示异常时，alt中的文本显示在图像区域中，即看不到图像，这可以为用户提供图像的主题。在实现应用程序时，为了避免图像的异常显示，应该设置alt参数。首先，图像应该在正常条件下显示。当鼠标指针位于图像位置时，将显示alt引号内的文本。其次，当图像没有正常显示时，图像的信息也被提供给用户，并且信息的设置只是alt的设置。以下代码表示用于描述图片的信息。你出来了吗？将a

4、lt参数设置为图像cn.jpg，并将alt设置为“横向”。当图像显示时，会有一个提示。同样，当图像显示异常时，通过使用alt参数可以知道答案。代码5.2指示alt的用法。5.1.3控制图像的大小，当图像不是所需的大小时，或者为不同的图像设置相同的宽度。您必须从图像标签中设置对象的大小。如前所述，设置图像的大小(大小包括宽度和高度)可以在制作网页时控制图像在特定位置的大小。设置图像尺寸非常容易，也就是说，在上面的代码中，宽度代表宽度，高度代表高度。例如，以下图片的大小为200*150像素，设置为400*300像素后，大小会发生变化，效果也会不同。下面的代码在代码5.2中添加了宽度=200px和高

5、度=150px的设置，其中px是像素和长度单位。在标签中设置宽度和高度后，显示的图像大小会改变，效果如图5.4所示。5.2图片链接，到目前为止，我们还不知道什么是超链接。本节简要介绍图像超链接。超链接是指从一个网页到目标的连接关系，目标可以是另一个网页、同一网页上的不同位置、图片、电子邮件地址、文件，甚至是应用程序。现在，只有图像的链接需要指向另一个网页。今天，我们将学习在图片上制作超链接，它可以将图片链接到我们想要链接的网页上，这样我们就可以在网络世界中漫游。对于图像链接，需要标记来表示链接，并且标签是图像标记，然后输入链接的地址。图片是一个插入的图片，也就是说，一个标记放在标记下，同样数量

6、的链接指向百度主页。制作超链接功能，将鼠标指针放在图像上形成手形，默认图像有边框。从图5.5可以看出，图片有一个默认的边框，状态栏上有一个到百度的超链接。5.3图像的边框，也许在某些地方，图像的四面都可以美化。这样，可以确定图像的实现尺寸。有时，您不希望显示图像边框。那么如何处理图像边界呢？让我们看看边界，它可以在互联网上使用。您也可以控制CSS中的层的边界，这将在以后学习。当有超链接时，默认情况下它是有边框的。您不能设置超链接。上面的代码将链后有边框的图像设置为无边框，其关键代码边框=0px。当鼠标指针放在图像上时，它是手形的，表示有一个链接。与默认链接不同，图像的边框设置为0，如图5.8所

7、示。现在，您不需要使用链接效果来获得边框，也就是说，移除内部的超链接，使用边框参数border来设置图像的边框，并在代码中添加10px的边框效果。代码如下：在图像标签中设置边框时，设置单位非常重要。在这个例程中，它被设置为10px，也就是说，边界是10个像素，效果如图5.9所示。5.4图像映射，有时。点击同一张图片中的不同位置会产生不同的链接，如矩形、圆形和多边形。这些分别用矩形、圆形和多边形实现，结果是图像是相同的，如果你点击不同的地方，链接也会不同。用户地图放在盒子里，后面跟着地图名称。声明地图时，请用。把名字放在它里面以表明它的名字，这样它就可以在其他地方被调用。在现有区域中，有指定要使

8、用的形状的属性，后跟形状。形状后面是矩形、圆形、多边形，坐标包含像素，href是要链接的地址。具体的例子，请看手中的图片示例。5.5图像示例手拉手，使用前面章节中的常用知识点，并且还学习了一些图像操作中的控制。为了让读者更好地理解图像。一个系统的例子一步一步贯穿整个知识点。从插入图像到完成图像，我们将一步一步地演示它们。首先，我在网上找到了一张600*450像素的风景地图。好，让我们现在开始第一步。5.5.1在网页中引入图像标签。首先，在网页上输入标签，表明使用了图像属性，然后是图像链地址。别忘了还有其他代码。每一步都将在中操作，也就是说，其他代码不会改变，代码如5.4所示。代码5.4源文件第

9、5章手持图像示例。手持图像示例。5.5.2设置图像参数alt。标签中的alt参数描述了图像的含义。本示例中的图像是一幅风景地图，因此将alt设置为“风景中的桥梁”。当鼠标放在图像上时，将显示这一行文本。同样，图像的大小由宽度和高度参数设置。此示例显示图像是景观中的一座桥，图像设置为120像素宽，90像素高。效果如图5.11所示。5.5.3超链接图片，并创建一个到百度的超链接。代码如下，效果如图5.12所示。5.5.4设置图像的框架，删除超链接，并将框架设置为10个像素。在基于原始代码添加帧标记之前，将帧值设置为10个像素。代码如下所示。设置图像的边框，即标签中的边框。设置参数边界意味着边界，边界值被设置为距离单位。例如，它是10像素，这意味着边界是10像素。值越大，图像的边界越宽。效果如图5.13所示。5.5.5将文本设置为与图像对齐，添加一些文本，并将文本向上、中间和向下对齐。想想吧。如果图案位于左侧，请在图案右侧输入文本，否则在左侧输入文本。在上面的代码中，文本显示在底部，文本显示在中间，文本显示在顶部，文本显示在顶部。设置图像和文本以显示图像和文本可以对齐，例如第一段的底部、第二段的中间和第三段的顶部。通过设置对齐参数，参数值为底部、中间和顶部，效果如图5.14所示。5.5.6设置图像的地图，并制作多个图像的地图。代码如