网页中不论是什么文章，基本会看到一些图片插入进去。在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.图像标签<img/>，使用方法：<img src=“所保存的图像位置”/>

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

表2-4  <img/>标签的常用属性

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

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

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

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

 输入代码，如图1.

图1

正常显示如图2

                  

                                                               图2

不能正常显示时如图3

图3

（2）<title>标签

    Title和alt是类似的,tilte用来设置鼠标指针悬停时图像的提示文字，下面通过一个案例来演示title的使用方法。

    先写好代码，保存，如图4

图4

保存后如图5

                                                                           图5

   (3).图像的宽度和高度属性width、height

一般情况下，不对图像设置宽高，图像会按照它原来的尺寸显示，当然也可以用width、height属性定义图像的宽高。通常只需要设置一个，另外一个属性会依据前一个设置的属性自动调整，保持原图的宽高比。如果同时设置两个属性，且宽度和高度与原来图像的宽高不一致会导致显示的图像变形或者失真。

   (4).图像的边框属性border

默认情况下，图片是没有边框的，通过border属性可以为图像添加边框并设置边框的宽度，下面来做一个案例来演示一下border的使用方法，先输入代码，如图6

图6

显示效果如图7

图7

 （5）图像的边距属性vspace、hspace

在网页中，由于排版需要，有时候需要调整图像的边距。HTML中通过使用属性vspace、hspace来调整图像的垂直边距和水平边距。

 （6）图像的对齐属性align

图文混排是网页中常见的现象，默认情况下图像的底部会与文本的第一行文字对齐。

3.以上就是图片插入的一些内容以及一些的简单的案例演示。