3.1　插入图像与媒体文件

在向网页插入图像之前，通常先画好表格为插入的图像预留空间，再用图像处理软件将图像处理成预定的尺寸，然后才进行插入图像的操作。本节主要向读者介绍插入常见网页元素的方法，希望读者熟练掌握本节内容。

3.1.1　插入GIF格式图像

GIF格式的文件大多用于网络传输，可以将多张图像存储为一个档案，形成动画效果。GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。GIF文件尺寸较小，且支持透明背景，特别适合作为网页图像。

素材文件　　光盘\素材\第3章\3.1.1\index.html、2.gif

效果文件　　光盘\效果\第3章\3.1.1\index.html

视频文件　　光盘\视频\第3章\3.1.1　插入GIF格式图像.mp4

步骤01　单击“文件”|“打开”命令，打开一个网页文档，如图3-1所示。

步骤02　将光标定位于需要插入图像的位置，单击“插入”|“图像”命令，如图3-2所示。

步骤03　弹出“选择图像源文件”对话框，选择需要插入的图像，如图3-3所示。

步骤04　单击“确定”按钮，弹出“图像标签辅助功能属性”对话框，单击“取消”按钮，即可将图片插入到网页文档中，在设计窗口中，适当调整图像的大小，如图3-4所示。

步骤05　按【F12】键保存后，即可在打开的IE浏览器中看到图3-5所示的效果。

3.1.2　插入JPEG格式图像

JPEG格式是一种压缩率很高的文件格式，但在压缩时可以控制压缩的范围，选择所需图像的最终质量。由于高倍率压缩的缘故，JPEG格式的文件与原图像有较大的差别，印刷时最好不要采用这种格式。JPEG格式支持CMYK、RGB、灰度等颜色模式，但不支持Alpha。

JPEG格式是目前网络上流行的图像格式，是可以把文件压缩到最小的格式，在Photoshop软件中以JPEG格式存储时，提供11级压缩级别，以0～10级表示。其中0级压缩比最高，图像品质最差。

素材文件　　光盘\素材\第3章\3.1.2\Index.html

效果文件　　无

学习目标　　光盘\视频\第3章\3.1.2　插入JPEG格式图像.mp4

步骤01　单击“文件”|“打开”命令，打开一个网页文档，如图3-6所示。

步骤02　将光标定位于需要插入图像的位置，单击“插入”|“图像”命令，如图3-7所示。

步骤03　弹出“选择图像源文件”对话框，选择需要插入的JPEG图像，如图3-8所示。

步骤04　单击“确定”按钮，弹出“图像标签辅助功能属性”对话框，在“替换文本”文本框中输入“tu”，如图3-9所示。

步骤05　单击“确定”按钮，即可将图片插入到网页文档中，如图3-10所示。

步骤06　按【F12】键保存网页，在打开的IE浏览器中可查看JPEG图像效果，如图3-11所示。

说明

在Dreamweaver CS6中，可在网页中插入适当的图像以使其增色，但图像的大小会影响网页的下载速度，因此，图像要尽量少而精。

3.1.3　插入PNG格式图像

PNG（Portable Network Graphics，可移植性网络图像）能够提供长度比GIF小30％的无损压缩图像文件，它同时提供24位和48位真彩色图像支持以及其他诸多技术性支持。Photoshop可以处理PNG图像文件，也可以使用PNG图像文件格式存储图像文件。

素材文件　　光盘\素材\第3章\3.1.3\index.html、2.png

效果文件　　光盘\效果\第3章\3.1.3\index.html

视频文件　　光盘\视频\第3章\3.1.3　插入PNG格式图像.mp4

步骤01　单击“文件”|“打开”命令，打开一个网页文档，如图3-12所示。

步骤02　将光标定位于需要插入图像的位置，单击“插入”|“图像”|命令，弹出“选择图像源文件”对话框，选择需要插入的png图像，如图3-13所示。

步骤03　单击“确定”按钮，弹出“图像标签辅助功能属性”对话框，单击“取消”按钮，即可将图片插入到网页文档中，在设计窗口中，适当调整图像的大小，如图3-14所示。

步骤04　按【F12】键保存网页，在打开的IE浏览器中可查看PNG图像效果，如图3-15所示。

3.1.4　插入FLV视频文件

FLV（Flash Video）流媒体格式是随着Flash MX的推出发展而来的视频格式。由于FLV形成的文件极小、加载速度极快，使得网络观看视频成为可能，它的出现有效地解决了视频导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好地使用等问题。

素材文件　　光盘\素材\第3章\3.1.4\index.html、capture-2.flv

效果文件　　光盘\效果\第3章\3.1.4\index.html

视频文件　　光盘\视频\第3章\3.1.4　插入FLV视频文件.mp4

步骤01　单击“文件”|“打开”命令，打开一个网页文档，如图3-16所示。

步骤02　将光标定位于需要插入视频的位置，单击“插入”|“媒体”|“FLV”命令，如图3-17所示。

步骤03　弹出“插入FLV”对话框，单击“浏览”按钮，如图3-18所示。

步骤04　弹出“选择FLV”对话框，选择相应的FLV文件，如图3-19所示。

步骤05　单击“确定”按钮，返回“插入FLV”对话框，单击“检测大小”按钮，自动设置宽度和高度，并选中“自动播放”和“自动重新播放”复选框，如图3-20所示。

步骤06　单击“确定”按钮，插入FLV视频，按【F12】键保存网页，效果如图3-21所示。

3.1.5　插入SWF视频文件

在网页中插入动画比较简单，而且还可以对插入的动画进行设置，网页中最常用的动画格式是.swf。插入Flash动画常采用以下两种方法：

（1）确定插入点后，单击“插入”|“媒体”|“SWF”命令，如图3-22所示。

（2）确定插入点后，进入“插入”面板中，单击“媒体”选项前的下三角按钮，在弹出的列表框中选择“SWF”选项，如图3-23所示。

执行上述任一种操作，都会弹出“选择Flash文件”对话框，选择要插入的Flash文件，然后单击“确定”按钮将所选动画插入到当前位置。与图像类似，若插入的文件不在站点根目录文件夹中，将会提示是否将文件复制到站点文件夹中。

一个引人注目的网站，仅有文字和图片是远远不够的，也很难吸引浏览者的目光。适当添加一些精美的网络动画，可以使展示的内容变得栩栩如生。图3-24所示为使用Flash制作的全动画网页。动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者最有效的方法。另外，网页中的Banner一般都是动画的形式，如图3-25所示。

网页中除了这些最基本的元素，还包括横幅广告、字幕、悬停按钮、日戳、计数器、音频、视频等。

3.1.6　插入鼠标经过图像

用户可以在页面中插入鼠标经过图像，鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。

使用两个图像文件创建鼠标经过图像：主图像（当首次载入页面时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以匹配第一个图像的属性。鼠标经过图像自动设置为响应onMouseOver事件。

插入鼠标经过图像可以采用以下两种方法：

（1）确定插入点后，单击“插入”|“图像对象”|“鼠标经过图像”命令，如图3-26所示。

（2）确定插入点后，进入“插入”面板中，单击“图像”选项前的下三角按钮，在弹出的列表框中选择“鼠标经过图像”选项，如图3-27所示。