片 学习目标本章主要是理解网络图片的概念、掌握如何在HTML中插入图片、设置图片的绝对路径和相对路径等基本知识,熟悉图文混合排版的方法。
核心要点■两种常用的路径。
■网络图片的基本格式。
■插入图片的标签。
■图文混排。
3.1文件路径 HTML超文本标签语言能够利用URL,将不同格式、不同属性、不同位置的各种网络资源,用统一的方式互相链接起来。
常见的文件路径有两种:一种是绝对路径,另一种是相对路径,下面分别来介绍。
3.1.1绝对路径 绝对路径是指带域名文件的完整路径。
一个完整的绝对路径包括以下几个部分:•一个传输协议(如HTTP协议);•网络域名或者服务器IP地址;•网站结构的目录树;•文件名(文本、图片、音频和视频等)。
这些部分就构成了一个完整的绝对路径,例如:/news/2011/0801/article_3439.html。
3.1.2相对路径 相对路径这个概念,在网页制作中经常遇到,例如超链接、图片、背景音乐、CSS文件、JS文件和数据库等,都要用到相对路径。
什么是相对路径?
相对路径就是指由这个文件所在的位置引起的跟其他文件(或文件夹)的路径关系,也就是自己相对于目标的位置。
网页设计与制作实例教程(第2版)【实例3-1】【实例描述】目前在本地硬盘有这样的一个文件结构,具体介绍和展示如图3-1所示。
30 图3-1示例的文件结构 ◆一个网页3-1.html:需要浏览的网页。
◆一幅图片heart.jpg:心的图片。
◆一个文件夹image:里面有一幅花的图片f.jpg。
图3-2是在页面中插入两幅图片后的显示效果,注意区分两种路径的不同。
图3-2在网页中插入图片 【实例分析】在文本编辑器中输入如下代码。
htmlheadtitle相对路径/title/headbody imgsrc="heart.jpg"/这是心的图片imgsrc="image/f.jpg"/这是那幅花的图片/body/html 【实例说明】通过代码发现,两张图片的路径不相同:
(1)对于心的图片heart.jpg,直接写名字即可,因为这张图片和网页文件3-1.html放在一起,同处一个文件夹内。

(2)对于花的图片f.jpg,则需要先写文件夹的名字image,然后再写图片名称。
因为相 对于网页3-1.html来说,需要先进入image文件夹,然后才能看见花的图片。
路径真实地 反映了两个文件的存储位置。
总结归纳起来,对于各种相对路径主要有三种情况。

(1)当前目录:src="**.jpg" 如果源文件和引用文件在同一个目录里,直接写引用文件名即可,**代表图片的名称。

(2)下级目录:src="**/**.jpg" 引用下级目录中的文件,直接写下级目录文件的路径即可,其中**代表具体的文件名 或者目录名。

(3)当前目录上一层:src="../**.jpg" ../表示源文件所在目录的上一级目录,../../表示源文件当前目录的上上级目录,以 此类推。
【知识拓展】 现实中的网页都是先在本地计算机制作完成,然后上传到Web服务器。
而本地计算机 和服务器的目录结构是不一样的,如果使用绝对路径,浏览器就会找不到被引用的文件,而 使用相对路径就不会出现这种问题。
在做网页的过程中使用到任何资源,都要先复制到网页专用的文件夹中,然后使用相对 路径进行链接,路径中不能出现包含驱动器盘符的地址(如“D:\我的文件”),也不能出现 中文。
【常见错误】 图片不能正常显示,如图3-3所示。
出现这种情况,一般有三种可能: ◆文件名称不正确,请检查图片的扩展名是jpg、 jpeg还是gif等。
◆网页调用图片时,没有使用相对路径。
◆文件路径不对。
路径中含有中文或者非法字 符,服务器无法识别。
图3-3图片无法显示 3.2图像格式 图片有很多格式,常见的有JPG、GIF、BMP、PNG等,网页设计中最常用的是JPG和 GIF两种。
JPG格式是目前网络上最流行的图像格式,它可以压缩文件,并提供多种压缩级别。
JPG格式的文件扩展名为jpg或jpeg,数码相机所采用的图片格式大多是JPG。
GIF图像文件的数据是经过压缩的,而且是采用了可变长度等压缩算法。
所以GIF的 图像深度从1bit到8bit,也就是说GIF最多支持256种色彩的图像。
GIF格式的另一个特 点是可以在一个GIF文件中同时存多幅彩色图像,构成GIF动画。
31 BMP是一种与硬件设备无关的图像文件格式,使用非常广泛。
它采用位映射存储格 式,除了图像深度可选以外,不采用其他任何形式的压缩,因此,BMP文件占用的存储空间第
3 很大。
由于BMP文件格式是Windows环境中数据的一种标准,因此在Windows环境中运章 图片 网页设计与制作实例教程(第2版) 行的图形图像软件都支持BMP图像格式,比如Windows操作系统自带的画图工具。
PNG是为了替代GIF和TIFF格式而出现的文件存储格式,它增加了一些GIF文件格 式所不具备的特性。
Photoshop和Fireworks都可以处理PNG图像文件,也可以用PNG32文件格式存储图像。
为了加快网页的浏览速度,应避免在网页中使用体积较大的图片。
【知识拓展】GIF和PNG的图片格式支持透明效果,可以根据需要选择保存图片的文件格式。
3.3在网页中使用图片 HTML中插入图片用的是标签,它的属性包括图片的路径、宽度、高度和替代文字等。
基本语法格式如下: imgsrc="URL"title=""/ src的属性值URL:代表图片的路径和名称,一般都用相对路径。
title的属性值:代表鼠标经过时的文字提示,可以对图片加以解释,推荐使用。
【实例3-2】【实例描述】图3-4是在HTML文件中插入图片和相应的替代文字后页面的显示效果。
图3-4插入图片和替代文字 【实例分析】在文本编辑器中输入如下代码。
htmlheadtitle插入图片/title/headbody imgsrc="taiji.jpg"height="181"title="这是经典的太极图形"//body/html width="177" 【实例说明】图3-4中通过width和height属性控制图片宽度和高度,默认的图片尺寸单位是像素。
在缺省状况下,图片显示原有的尺寸。
可以用width和height属性改变图片的宽度和高度,图片会相应放大或缩小,如果比例不合适,显示出来的图片效果可能不会太好看。
【实例3-3】【实例描述】图3-5是通过background-image属性在页面中添加背景图片,文字可以写在背景上面。
图3-5添加背景图片 【实例分析】在文本编辑器中输入如下代码。
htmlheadtitle背景图片/title/headbodystyle="background-image:url(bg.jpg)"h2在图片上可以随心所欲地写字哦~/h2/body/html 【实例说明】background-image:url():是style的一个子属性,给页面添加背景图片。
url的参数值是背景图片的路径。
3.4习题 某网站文件的目录结构如图3-6所示。
图3-6文件目录结构 33 第3章 图片 网页设计与制作实例教程(第2版) 请根据上面的目录结构,完成下面题目。

(1)使用相对路径分别写出在ex1.htm、ex2.htm及ex3.htm中插入图片1.gif的 代码。
34
(2)使用相对路径分别写出在ex1.htm、ex2.htm及ex3.htm中插入图片2.jpg的 代码。

(3)使用相对路径分别写出在ex1.htm、ex2.htm及ex3.htm中插入图片3.jpg的 代码。