网页中不论是什么文章，基本会看到一些图片插入进去。在Dreamweaver中是怎么编写代码实现效果的呢？

网页中不论是什么文章，基本会看到一些图片插入进去。在Dreamweaver中是怎么编写代码实现效果的呢？我们先了解图片插入的一些内容，然后做一个简单的案例演示。

一.了解图片的格式

目前网页上常见的图像主要格式主要有GIF、PNG、JPG三种，下面详细介绍。

1. GIF格式

GIF格式最大的特点就是支持动画，同时它也是一种无损的图像格式，即修改图片之后，图片质量没有任何损失，再加上GIF支持透明效果，因此很适合在互联网上使用。但是GIF只能处理256种颜色。因此在网页中，GIF格式常常用于Logo、小图标和其他色彩相对单一的图像。

    2.PNG格式

PNG包括PNG-8和真色彩PNG(PNG-24和PNG-32)。相对于GIF，PNG最大的优势是体积小，支持Alpha透明（全透明、半透明、全不透明），并且颜色过滤更平滑，但是PNG不支持动画。其中，PNG-8和GIF类似，只能支持256种颜色，当图片为静态图时可以使用PNG-8取代GIF，而真色彩PNG支持更多的颜色，同时真色彩PNG(PNG-32)支持半透明效果的处理。

    3.JPG格式

JPG能显示的颜色比GIF和PNG-8要多得多，可以用来保存超过2256种颜色的图像，但是JPG是一种有损压缩的图像格式，这意味着每修一次图都会造成一些图像数据的丢失。JPG专为照片图像设计的文件格式，网页制作过程中类似照片的图像都可以保存为JPG格式。

二.图像插入使用的标签

    1.图像标签，使用方法：

注意：src属性用于指定图像文件的路径和文件名，是标签的必备属性，的属性如表2-4所示。

表2-4  标签的常用属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素值	设置图像的宽度
height	像素值	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素值	设置图像顶部和底部的空白（垂直边距）
hspace	像素值	设置图像左侧和右侧的空白（水平边距）
align	left	将图像对齐到左边
	right	将图像对齐到右边
	top	将图像的顶端与文本的第一行文字对齐，其他文字居图像下方
	middle	将图像的水平中线与文本的第一行文字对齐，其他文字居图像下方
	bottom	将图像的底部与第一行文字对齐，其他文字居图像下方

  2.表2-4标签属性做了简要的概述，下面我们对alt、title、width、height、border、vspace、hspace、align属性进行详细了解，具体如下。

 （1）图像的替换文本属性alt

   有时页面中的图像可能无法正常显示，例如图片可能加载错误，浏览器版本过低等情况，因此为页面上的图像添加替换文本是一个很好的习惯，可以在图像无法显示时告诉用户该图片的信息，下面我们通过一个案例来演示一下alt属性的用法。

 输入代码，如图1.

图1

正常显示如图2

                  

                                                               图2

不能正常显示时如图3

图3

（2）