网页制作技术——Dreamweaver Flash Fireworks 作者 赵丰年 第3章.pptVIP

* 人民邮电出版社 * 第3章 使用图像 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 3.1 Web 图像基础 3.2 在网页中使用图像 3.1.1 矢量图与位图 在图像处理过程中，用户需要区分矢量图和位图。 1．矢量图 矢量图形使用称为矢量的线条和曲线（包括颜色和位置信息）描述图像。例如，一片叶子的图像可以使用一系列的点（这些点最终形成叶子的轮廓）描述；叶子的颜色由轮廓（即笔触）的颜色和轮廓所包围的区域（即填充）的颜色决定，如图3.1 所示。 3.1 Web 图像基础 图3.1 矢量图 2．位图 位图图形由排列成网格的称为像素的点组成。例如，在一个位图的叶子图形中，图像由网格中每个像素的位置和颜色值决定；每个点被指定一种颜色；在以正确的分辨率查看时，这些点就像马赛克那样拼合在一起形成图像，如图3.2 所示。 3.1.1 矢量图与位图 在图像处理过程中，用户需要区分矢量图和位图。 1．矢量图 矢量图形使用称为矢量的线条和曲线（包括颜色和位置信息）描述图像。例如，一片叶子的图像可以使用一系列的点（这些点最终形成叶子的轮廓）描述；叶子的颜色由轮廓（即笔触）的颜色和轮廓所包围的区域（即填充）的颜色决定，如图3.1 所示。 2．位图 位图图形由排列成网格的称为像素的点组成。例如，在一个位图的叶子图形中，图像由网格中每个像素的位置和颜色值决定；每个点被指定一种颜色；在以正确的分辨率查看时，这些点就像马赛克那样拼合在一起形成图像，如图3.2 所示。 3.1.2 常用 Web 图像格式 虽然有很多种计算机图像格式，但由于受网络带宽和浏览器的限制，在 Web 上常用的图像格式只包括以下 3 种：GIF、JPEG 和 PNG。 1．GIF 格式 2．JPEG 格式 3．PNG 格式 （3）如果所选择的图像文件不是站点中的文件，则将打开“Macromedia Dreamweaver MX”对话框，如图3.3 所示。提示是否将图像文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮即可。 图3.3 “Macromedia Dreamweaver MX”对话框 图3.2 位图 3.1.2 常用 Web 图像格式 虽然有很多种计算机图像格式，但由于受网络带宽和浏览器的限制，在 Web 上常用的图像格式只包括以下 3 种：GIF、JPEG 和 PNG。 1．GIF 格式 2．JPEG 格式 3．PNG 格式 3.1.3 Web 图像的处理流程 1．创建图形图像 2．创建 Web 对象 3．优化图像 4．导出图形 3.1.4 Web 图像使用要点 1．确保文件较小 2．控制图像的数量和质量 3．合理使用动画 3.2 在网页中使用图像 3.2.1 插入图像 在 Dreamweaver中插入图像的步骤如下。 （1）将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中单击“图像”按钮 或选择“插入”菜单中的“图像”命令。 （2）此时将打开“选择图像源”对话框，选取存放在站点中的图像文件，最后单击“确认”按钮即可将图片插入到指定区域。 （3）如果所选择的图像文件不是站点中的文件，则将打开“Macromedia Dreamweaver MX”对话框，如图3.3 所示。提示是否将图像文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮即可。 图3.3 “Macromedia Dreamweaver MX”对话框 3.2.2 修改图像属性 将图像插入指定位置后，可以利用“属性检查器”设置图像的属性，如图3.4 所示。 图3.4 图像的“属性检查器” 3.2.3 图像与超链接 1．图像超链接 在网页中指定图像作为超链接非常简单，步骤如下。 （1）在文档窗口中，单击插入的图像，然后在“属性检查器”中的“链接”文本框旁单击“浏览文件”按钮 。 （2）打开“选择文件”对话框，定位到要跳转的文件后单击“确认”按钮即可。 * 人民邮电出版社