第11章 在网页中插入图像

11.1.2
JPEG格式
JPEG是英文Joint Photographic Experts Group（联合图像专家组）的缩 写，该图像格式是用于摄影连续色调图像的高级格式，因为JPEG文件可以包 含数百万种颜色。通常JPEG文件需要通过压缩图像品质和文件大小之间来达 到良好的平衡，因为随着JPEG文件品质的提高，文件的大小和下载时间也会 随之增加。
11.3.1
鼠标经过图像
鼠标经过图像是一种在浏览器中查看并使用鼠标指针经过它时发生变 化的图像。鼠标经过图像实际上由两个图像组成：主图像（当首次载入页 面时显示的图像）和次图像（当鼠标指针经过主图像时显示的图像）。鼠 标经过图像中的这两幅图像应该大小相等；如果这两幅图像大小不同， Dreamweaver将自动调整第2幅图像的大小匹配第1幅图像的属性。下面向大 家介绍一下插入鼠标经过图像的相关属性。
动手实践——制作交互导航菜单
最终文件：光盘\最终文件\第11章\11-3-1.html 视频：光盘\视频\第11章\11-3-1.swf

11.3.2
插入Fireworks HTML
在Dreamweaver中整合了很多Fireworks 的功能，这里讲到的也是其中之一，用户可 以轻松插入Fireworks制作的HTML文档。
11.4.5
使用HTML 5画布实现圆形图片
在使用画布绘图时还有一种对路径的处理方法叫做剪裁方法clip()，与图 片的剪裁相似，在画布中分割一块区域来保留图片的一部分。
图像可以使网页充满生命力和说服力，能够体现出网页及其网站独有 的风格。在拥有了华丽视觉效果的同时，也一定要留意图像的占用的空间 大小，在页面效果和大小之间找到一个合适的交叉点。下面通过一个旅游 信息网站页面的实例，讲解制作图像页面的方法。
目前虽然有很多种图像格式，但是在网站页面中常用的只有GIF、JPEG、 PNG这3种格式，其中PNG文件具有较大的灵活性且文件比较小，所以它对 于目前任何类型的Web图形来说都是最适合的，但是只有较高版本的浏览 器才支持这种图像格式，而且也不是对PNG文件的所有特性都能很好地支 持。都可以支持。
11.1.1
在Dreamweaver CC 中，可以直接插入图像，也可以将图像作为页面的 背景。另外，还可以创建出图像交替的交互效果。想在制作网页的过程中 直接修改图像，可以调出外部图像编辑器。
11.2.1
插入图像
在网页中插入图像可以有效地提高网页的 观赏性，并且可以反映出网站的主题，下面我 们将向大家介绍一下如何在网页中插入图像。
11.4.4
使用HTML5画布绘制矩形
在Dreamweaver CC的画布工具在网页中绘制矩 形需要添加相应的脚本代码，矩形绘制有两种专用 方法：strokeRect()和fillRect()，分别用于绘制矩形 的边框和填充的矩形区域。
动手实践——使用HTML5画布绘制矩形
最终文件：光盘\最终文件\第11章\11-4-4.html 视频：光盘\视频\第11章\11-4-4.swf
动手实践——插入图像
11.2.2
最终文件：光盘\最终文件\第11章\11-2.html 视频：光盘\视频\第11章\11-2.swf
设置图像属性
如果需要对图像进行属性设置，首先需要在Dreamweaver设计视图中选 中需要设置属性的图像，可以看到该图像的属性出现在“属性”面板上。
Dreamweaver中还提供了一些其他相关的图像元素，单击“插入”面 板上的“常用”选项卡中的“图像”按钮右侧的下三角形，即可弹出下拉 菜单，可以看到“鼠标经过图像”和Fireworks HTML两种图像元素。下面 主要向大家介绍如何在页面中插入其他两种图像元素。
11.1.3
PNG格式
PNG是英文Portable Network Graphic（可移植网络图形）的缩写，该 图像格式是一种替代GIF格式的专利权限制的格式，它包括对索引色、灰度 、真彩色图像以及Alpha通道透明的支持。PNG是Fireworks固有的文件格式 。PNG文件可保留所有的原始图层、矢量、颜色和效果信息，并且在任何时 候都可以完全编辑所有元素。
11.4.2
设置画布属性 如何使用画布在网页中绘制图
单击选中刚刚在网页中插入的画布图标，在 “属性”面板中可以对画布的相关属性进行设置。
11.4.3
形
画布元素本身是没有绘图能力的，画布元素提 供了一套绘图API。在开始ห้องสมุดไป่ตู้图之前，先要获取画布 元素的对象，再获取一个绘图上下文，接下来就可 以使用绘图API中丰富的功能了。
画布是Dreamweaver CC新增的基于HTML5的全新功能，通过该功能可 以在网页中自动绘制出一些常见的图形，例如矩形和椭圆形等，并且能够 添加一些图像。
11.4.1
插入画布
在网页中插入画布，像插入其他网页 对象一样简单，然后利用JavaScript脚本调 用绘图API（接口函数），在网页中绘制出 各种图形效果。画布具有多种绘制路径、 矩形、圆形、字符和添加图像的方法，还 能实现动画。
GIF格式
GIF是英文Graphics Interchange Format（图形交换格式）的缩写， GIF采用LZW无损压缩算法，而且最多使用256种颜色，最适合显示色调不 连续或具有大面积单一颜色的图像。 另外，GIF图片支持动画。GIF动画的显示不需要特定的插件，在制作 简单的、只有几帧图片交替的动画时，GIF动画也有着特定的优势。
动手实践——使用HTML 5画布实现圆形图片
动手实践——制 作旅游信息网站 页面
最终文件：光盘\最终文件\第11章\11-4-5.html 视频：光盘\视频\第11章\11-4-5.swf
最终文件：光盘\最终文件\第11章 \11-5.html 视频：光盘\视频\第11章\11-5.swf
本章主要讲解了图像元素在网页中的应用，包括图像和鼠标经过图像 的使用方法。并且还向读者介绍了Dreamweaver CC中新增的画布功能，通 过使用该功能可以在网页中实现许多特殊的图像显示效果。如今，图像在 网页中已是不可或缺的一部分，了解了网页中图像的这几种运用技巧，可 以在以后的网页制作中发挥到很大的作用。