dreamweaver教程06.ppt

第六课 给网页加入图像 课前导读 基础知识 重点知识 提高知识 基础知识 网页支持的图像格式及图像的来源。 重点知识 插入图像的方法、图像属性设置的方法、网站相册的制作。读者应结合上机实战认真练习。 提高知识 图像链接的设置。读者只需了解即可。 课堂讲解 图像的格式及来源 插入图像 设置图像的一般属性 给图像加入链接 图像热点链接 图像高级设置 图像的格式及来源 由于受网络速度等方面的影响，因此在网页的制作中图像的格式有一定的要求，一般用于网页的图像要求是GIF、JPEG或PNG3种格式中的一种。目前大部分的浏览器都支持GIF和JPEG文件格式，只有Microsoft Internet Explorer（4.0及更高版本）和NetScape Navigator（4.0及更高版本）部分支持PNG格式。 GIF（Graphics Interchange Format）意为图像交换格式。GIF是第一个支持网页的图像文件，它最多支持256种颜色，可以使图像变得相当小。GIF图像可以在网页中以透明方式显示，还包含动态信息，也就是网页上大量使用的GIF动画。GIF在网页中大量用于站点图标LOGO、广告条BANNER及网页背景图像，但由于GIF受颜色数目的限制，GIF不适合用作照片级的网页图像。 JPEG（Join Photograph Graphics）意为联合照片专家组，通常称为JPG。JPEG图像格式可以高效地压缩，丢失人眼不易察觉的部分图像，使得图像文件在变小的同时基本不丢失颜色，通常用来显示照片等颜色丰富的图像。 PNG（Portable Network Graphics）意为便携网络图像，是逐渐流行的网络图像格式。PNG格式可以说是GIF格式和JPEG格式的综合应用，既融合了GIF格式透明显示的特点，又具有JPEG处理精美图像的优势，因此PNG图像很可能取代GIF图像和JPE图像格式。 图像的来源有多种方式，可以自己利用图像处理软件（如Photoshop、CorelDRAW、Fireworks等软件）制作，也可以到网上下载或购买一些网页素材光盘，进行加工后用到自己的网页中，下面给出网上提供网页素材的一些网站。 网页制作大宝库：一个专业的网页制作网站，提供各种网页制作技术、素材等，网址为。 主页素材随便找：网页素材提供网站，含网页制作工具、网页动画、网页背景、网页图片、网页边框、网页音乐。网址为。 素材：网页素材提供网站，提供背景图片、按钮、文本框、水平线、人物头像等。网址为。 梦幻作坊：网页素材提供网站，网址为。 素材精品屋：网页素材提供网站，含壁纸、图库、设计素材、动画宝库、矢量图、特色图标等。网址为。 插入图像 直接插入图像 用占位符插入图像 图像既可插入到网页内容中也可作为网页背景，这里介绍将图像插入到网页中作为网页内容的方法。 网页中一般是图文混排结构，除了添加文本内容、设置文本格式外，还需要插入有说服力的资料图片。下面介绍图片的插入与属性设置的方法。 在Dreamweaver MX 2004中插入图像的方法主要有直接插入和占位符插入两种。 直接插入图像 直接插入图像的具体操作如下。 （1）将光标定位到要插入图像的位置（文本、层或表格中）。 （2）执行如下方法之一： 选择[插入]?[图像]菜单命令，打开“选择图像源”文件对话框，如图6-1所示； 单击“插入栏”的“常用”选项卡中的 按钮，打开“选择图像源文件”对话框； 按【Ctrl+Alt+I】键打开“选择图像源文件”对话框。 （3）在“选择文件名自”栏中选中 单选项，在“查找范围”下拉列表框中指定要插入图像的路径并在文件列表中选择需要的文件名称，如图6-1所示。 （4）在“相对于”下拉列表框中选择“站点根目录”选项，如图6-2所示。 （5）单击 按钮，若所选择的图像文件不在定义的本地站点中，系统会打开如图6-3所示的询问对话框，询问是否保存到本地站点目录下。 （6）在提示对话框中单击 按钮，打开“复制文件为”对话框，在该对话框中选择保存路径，并在“文件名”文本框中更改图像的名称，如图6-4所示。 （7）单击 按钮即可将所选的图像插入到网页中指定的位置，如图6-5所示。 用占位符插入图像 如果目前还不确定该插入哪幅图像，但可以确定图像的大小，则可以使用占位符的方式插入图像，当确定好要插入的图像时再进行插入即可。用占位符插入图像的具体操作如下。 （1