2004中文版课件.ppt

第 四课 插入图像 课前导读 基础知识 重点知识 提高知识 了解知识 课堂讲解 网页图像的格式 网页图像素材的获取 插入图像 设置图像属性 图像的高级应用 网页图像的格式 受网络速度的影响，用于网页的图像一般有GIF、JPEG（也称为JPG）或PNG这3种格式。目前大多数的浏览器都支持GIF和JPEG格式，但只有IE4.0及更高版本和NE4.0及更高版本支持PNG格式。 GIF意为图像交换格式，是第一个支持网页的图像格式，它最多支持256种颜色，可以使图像变得相当小。GIF图像可以在网页中以透明方式显示，更为有用的是可以包含动态信息，也就是网页上大量使用的GIF动画。GIF在网页中大量用于站点图标Logo、广告条Banner及网页背景图像，但由于GIF受颜色数目的限制，GIF不适合用作照片级的网页图像。 JPEG意为联合照片专家组，它可以高效地压缩，丢失人眼不易察觉的部分图像，使图像文件在变小的同时基本不失真，通常用来显示照片等颜色丰富的精美图像。 PNG意为便携网络图像，是逐渐流行的网络图像格式。PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。 网页图像素材的获取 网页图像素材的来源很多，可以利用图形处理软件（如Photoshop、Fireworks和FreeHand等软件）制作，也可以到网上下载或购买一些网页素材光盘，进行加工后用到自己的网页中，下面给出一些提供网页素材的网站。 插入图像 直接插入图像 用占位符插入图像 用占位符插入图像 如果制作时不知道当前该插入哪幅图像，但知道该图像的大小，可以使用占位符来插入图像。当要插入的图像确定后再像直接插入图像一样进行插入即可。 设置图像属性 图像命名 图像大小 源文件设置 文本说明 图像与文本的对齐 图像边距 图像边框 图像命名 在选取图像的属性面板的“图像”文本框中可以给图像重新命名，如图4-9所示。该文件主要是为了在使用Dreamweaver行为（如交换图像）或脚本撰写语言（如JavaScript或VBScript）时可以引用该图像。 图像大小 在Dreamweaver MX 2004中插入图像时系统会自动计算图像的原始大小，并将其写入到“宽”和“高”文本框中，默认单位为像素。 源文件设置 插入图像后，“源文件”文本框中会显示图像文件的地址，如果要重新插入一幅新图像，可以在选取图像后打开属性面板，在“源文件”文本框中重新输入要插入图像的地址或单击“源文件”文本框后的 按钮，在打开的“选择图像源文件”对话框中重新进行设置。 文本说明 在选取图像后的属性面板的“替代”文本框中可以输入图像的文本说明。在浏览该网页时，当鼠标移动到图像上后，浏览器会在鼠标指针右下方弹出该图像的文本说明。另外，如果浏览器禁止显示图片时，可以在图像的位置显示该图像的文本说明。 图像与文本的对齐 选取图像后，在属性面板的“对齐”下拉列表框中可设置同一行上的图像与文本的对齐方式。 图像边距 选取图像后，在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与文本的距离。“垂直边距”用于设置图像顶部和底部的边距，“水平边距”用于设置图像距左侧和右侧的边距。如图4-17所示为设置不同值时的效果。 图像边框 选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，输入0表示无边框。 图像的高级应用 创建鼠标经过图像 创建网站相册 在Dreamweaver MX 2004中可以创建鼠标经过图像，以及利用相册功能轻松创建网站相册。 创建鼠标经过图像 鼠标经过图像是一种在浏览器中查看网页时，当鼠标光标移过它时发生图像变化的动态图像。鼠标经过图像由两幅图像（原始图像和鼠标经过图像）组成，当鼠标移动到原始图像上时，会显示鼠标经过图像，鼠标移出图像范围时则显示原始图像。 鼠标经过图像的两个图像其大小应相等，如果两个图像大小不同，Dreamweaver将自动调整鼠标经过图像的大小以匹配原始图像的大小。鼠标经过图像自动设置为响应onMouseOver事件（关于事件的相关知识将在第13课讲述）。 创建网站相册 利用Dreamweaver MX 2004的相册功能可以轻松创建网站相册。 上机实战 网站Logo的添加 鼠标经过图像的添加 主要内容区图像的属性设置 本课上机实战主要练习在网页中插入图像并进行属性设置。在练习过程中，应结合课堂讲解中所学知识进行，如插入图像的方法、图像属性设置的方法及鼠标经过图像的创建方法等知