第11章在网页中插入图像

11.1网页图像的基本知识目前虽然有很多种图像格式，但是在网站页面中常用的只有GIF、JPEG、PNG这3种格式，其中PNG文件具有较大的灵活性且文件比较小，所以它对于目前任何类型的Web图形来说都是最适合的，但是只有较高版本的浏览器才支持这种图像格式，而且也不是对PNG文件的所有特性都能很好地支持。都可以支持。11.1.1

GIF格式

GIF是英文GraphicsInterchangeFormat（图形交换格式）的缩写，GIF采用LZW无损压缩算法，而且最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像。另外，GIF图片支持动画。GIF动画的显示不需要特定的插件，在制作简单的、只有几帧图片交替的动画时，GIF动画也有着特定的优势。

11.1.2

JPEG格式

JPEG是英文JointPhotographicExpertsGroup（联合图像专家组）的缩写，该图像格式是用于摄影连续色调图像的高级格式，因为JPEG文件可以包含数百万种颜色。通常JPEG文件需要通过压缩图像品质和文件大小之间来达到良好的平衡，因为随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。

11.1.3

PNG格式

PNG是英文PortableNetworkGraphic（可移植网络图形）的缩写，该图像格式是一种替代GIF格式的专利权限制的格式，它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。PNG是Fireworks固有的文件格式。PNG文件可保留所有的原始图层、矢量、颜色和效果信息，并且在任何时候都可以完全编辑所有元素。

11.2在网页中插入图像在DreamweaverCC中，可以直接插入图像，也可以将图像作为页面的背景。另外，还可以创建出图像交替的交互效果。想在制作网页的过程中直接修改图像，可以调出外部图像编辑器。

11.2.1插入图像在网页中插入图像可以有效地提高网页的观赏性，并且可以反映出网站的主题，下面我们将向大家介绍一下如何在网页中插入图像。动手实践——插入图像

11.2.2设置图像属性

如果需要对图像进行属性设置，首先需要在Dreamweaver设计视图中选中需要设置属性的图像，可以看到该图像的属性出现在“属性”面板上。

最终文件：光盘\最终文件\第11章\11-2.html视频：光盘\视频\第11章\11-2.swf

11.3插入其他图像元素Dreamweaver中还提供了一些其他相关的图像元素，单击“插入”面板上的“常用”选项卡中的“图像”按钮右侧的下三角形，即可弹出下拉菜单，可以看到“鼠标经过图像”和FireworksHTML两种图像元素。下面主要向大家介绍如何在页面中插入其他两种图像元素。11.3.1鼠标经过图像鼠标经过图像是一种在浏览器中查看并使用鼠标指针经过它时发生变化的图像。鼠标经过图像实际上由两个图像组成：主图像（当首次载入页面时显示的图像）和次图像（当鼠标指针经过主图像时显示的图像）。鼠标经过图像中的这两幅图像应该大小相等；如果这两幅图像大小不同，Dreamweaver将自动调整第2幅图像的大小匹配第1幅图像的属性。下面向大家介绍一下插入鼠标经过图像的相关属性。动手实践——制作交互导航菜单最终文件：光盘\最终文件\第11章\11-3-1.html视频：光盘\视频\第11章\11-3-1.swf

11.3.2插入FireworksHTML在Dreamweaver中整合了很多Fireworks的功能，这里讲到的也是其中之一，用户可以轻松插入Fireworks制作的HTML文档。

11.4插入HTML5画布画布是DreamweaverCC新增的基于HTML5的全新功能，通过该功能可以在网页中自动绘制出一些常见的图形，例如矩形和椭圆形等，并且能够添加一些图像。11.4.1

插入画布在网页中插入画布，像插入其他网页对象一样简单，然后利用JavaScript脚本调用绘图API（接口函数），在网页中绘制出各种图形效果。画布具有多种绘制路径、矩形、圆形、字符和添加图像的方法，还能实现动画。11.4.2设置画布属性单击选中刚刚在网页中插入的画布图标，在“属性”面板中可以对画布的相关属性进行设置。11.4.3如何使用画布在网页中绘制图形画布元素本身是没有绘图能力的，画布元素提供了一套绘图API。在开始绘图之前，先要获取画布元素的对象，再获取一个绘图上下文，接下来就可以使用绘图API中丰富的功能了。11.4.4使用HTML5画布绘制矩形在DreamweaverCC的画布工具在网页中绘制矩形需要添加相应的脚本代码，矩形绘制有两种专用方法：strokeRect()和fillRect()，分别用于绘制矩形的边框和填充的矩形区域。动手实践——使用HTML5画布绘制矩形最终文件：光盘\最终文件\第11章\11-4-4.html视频：光盘\视频\第11章\11-4-4.swf11.4.5使用HTML5画布实现圆形图片在使用画布绘图时还有一种对路径的处理方法叫做剪裁方法clip()，与图片的剪裁相似，在画布中分割一块区域来保留图片的一部分。

11.5制作旅游信息网站页面图像可以使网页充满生命力和说服力，能够体现出网页及其网站独有的风格。在拥有了华丽视觉效果的同时，也一定要留意图像的占用的空间大小，在页面效果和大小之间找到一个合适的交叉点。下面通过一个旅游信息网站页面的实例，讲解制作图像页面的方法。

动手实践——使用HTML5画布实现圆形图片动手实践——制作旅游信息网站页面最终文件：光盘\最终文件\第11章\11-4-5.html视频：光盘\视频\第11章\11-4-5.swf最终文件：光盘\最终文件\第11章\11-5.html视频：光盘\视频\第11章\11-5.swf

11.6本章小结本章主要讲解了图像元素在