教育专题：dreamweaver8网页制作教程04.ppt

《教育专题：dreamweaver8网页制作教程04.ppt》由会员分享，可在线阅读，更多相关《教育专题：dreamweaver8网页制作教程04.ppt（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、l课堂讲解课堂讲解 l上机实战上机实战 第第4课课 为网页添加图像为网页添加图像 课堂讲解课堂讲解 l l网页图像的格式及来源网页图像的格式及来源l l插入图像插入图像 l l设置图像属性设置图像属性 l l图像高级设置图像高级设置 网页图像的格式及来源网页图像的格式及来源lGIF格式格式 lJPEG格式格式 lPNG格式格式 l网页图像来源网页图像来源 GIF格式格式 GIFGIF全称为全称为全称为全称为“Graphics Interchange Format”Graphics Interchange Format”，意为可交换图像格式，它是第一个支持网页的图像意为可交换图像格式，它是第一个

2、支持网页的图像意为可交换图像格式，它是第一个支持网页的图像意为可交换图像格式，它是第一个支持网页的图像格式，在格式，在格式，在格式，在PCPC机和苹果机上都能被正确识别。它最多机和苹果机上都能被正确识别。它最多机和苹果机上都能被正确识别。它最多机和苹果机上都能被正确识别。它最多支持支持支持支持256256种颜色，可以使图像变得容量相当小。种颜色，可以使图像变得容量相当小。种颜色，可以使图像变得容量相当小。种颜色，可以使图像变得容量相当小。GIFGIF图像可以在网页中以透明方式显示，还可以包含动态图像可以在网页中以透明方式显示，还可以包含动态图像可以在网页中以透明方式显示，还可以包含动态图像可以

3、在网页中以透明方式显示，还可以包含动态信息，即信息，即信息，即信息，即GIFGIF动画。动画。动画。动画。JPEG格式格式 JPEGJPEG全称为全称为全称为全称为“Joint Photographic Joint Photographic Experts Group”Experts Group”，意为联合图像专家组，意为联合图像专家组，意为联合图像专家组，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉它可以高效地压缩图片，丢失人眼不易察觉它可以高效地压缩图片，丢失人眼不易察觉它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本的部分图像，使文件容量在变小的

4、同时基本的部分图像，使文件容量在变小的同时基本的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。不失真，通常用来显示颜色丰富的精美图像。不失真，通常用来显示颜色丰富的精美图像。不失真，通常用来显示颜色丰富的精美图像。PNG格式格式 PNG全称为全称为“Portable Network Graphics”，意为便携网络意为便携网络图像，它是逐渐流行的网络图像格式。图像，它是逐渐流行的网络图像格式。PNG格式既融合了格式既融合了GIF能透明显示的特能透明显示的特点，又具有点，又具有JPEG处理精美图像的优势，处理精美图像的优势，且可以包含图层等信息，常常用于制作且可以包

5、含图层等信息，常常用于制作网页效果图。网页效果图。网页图像来源网页图像来源 网页图像的素材有很多来源，网页图像的素材有很多来源，如可以使用图形处理软件（如如可以使用图形处理软件（如Photoshop、Fireworks和和FreeHand等软件）制作；可以购等软件）制作；可以购买网页素材光盘；可以从网络上下买网页素材光盘；可以从网络上下载等。载等。插入图像插入图像 l直接插入直接插入 l占位符插入占位符插入 l图像的放大显示图像的放大显示 直接插入直接插入 l l选择选择插入插入 图像图像菜单命令。菜单命令。l l单击插入栏的单击插入栏的“常用常用”选项卡中的按钮。选项卡中的按钮。l l按按【

6、Ctrl+Alt+I】键。键。占位符插入占位符插入 制作网页时还未选定需插入的图像，制作网页时还未选定需插入的图像，制作网页时还未选定需插入的图像，制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用占位符但确定了图像大小的时候，可以使用占位符但确定了图像大小的时候，可以使用占位符但确定了图像大小的时候，可以使用占位符来代替图像的方式插入到文档中。来代替图像的方式插入到文档中。来代替图像的方式插入到文档中。来代替图像的方式插入到文档中。将图像确定后双击占位符，在打开的对将图像确定后双击占位符，在打开的对将图像确定后双击占位符，在打开的对将图像确定后双击占位符，在打开的对话框中设置后

7、插入即可。话框中设置后插入即可。话框中设置后插入即可。话框中设置后插入即可。图像的放大显示图像的放大显示 DreamweaverDreamweaver 8 8新增的放大镜功能新增的放大镜功能新增的放大镜功能新增的放大镜功能可以让用户更方便地进行对齐图像、选择较可以让用户更方便地进行对齐图像、选择较可以让用户更方便地进行对齐图像、选择较可以让用户更方便地进行对齐图像、选择较小的对象以及查看较小的文本、动画或网页小的对象以及查看较小的文本、动画或网页小的对象以及查看较小的文本、动画或网页小的对象以及查看较小的文本、动画或网页元素等操作。元素等操作。元素等操作。元素等操作。设置图像属性设置图像属性

8、在网页中插入图像后可通过属性面板对其属性进行修在网页中插入图像后可通过属性面板对其属性进行修在网页中插入图像后可通过属性面板对其属性进行修在网页中插入图像后可通过属性面板对其属性进行修改等设置。改等设置。改等设置。改等设置。图像命名图像命名 图像大小图像大小 编辑图片编辑图片 源文件设置源文件设置 文本说明文本说明 图像与文本的对齐图像与文本的对齐 图像边距图像边距 图像边框图像边框 图像命名图像命名 为了在使用为了在使用为了在使用为了在使用DreamweaverDreamweaver行为（如行为（如行为（如行为（如交换图像）或脚本撰写语言（如交换图像）或脚本撰写语言（如交换图像）或脚本撰写语

9、言（如交换图像）或脚本撰写语言（如JavaScriptJavaScript或或或或VBScriptVBScript）时可以引用该图像，可在属性时可以引用该图像，可在属性时可以引用该图像，可在属性时可以引用该图像，可在属性面板的面板的面板的面板的“图像图像图像图像”文本框中为图像命名。文本框中为图像命名。文本框中为图像命名。文本框中为图像命名。图像大小图像大小 在在在在DreamweaverDreamweaver 8 8中插入图像后系统中插入图像后系统中插入图像后系统中插入图像后系统会自动将图像的原始大小显示在会自动将图像的原始大小显示在会自动将图像的原始大小显示在会自动将图像的原始大小显示在“

10、宽宽宽宽”和和和和“高高高高”文本框（以像素为单位）中。文本框（以像素为单位）中。文本框（以像素为单位）中。文本框（以像素为单位）中。编辑图片编辑图片 在网页中选择图像之后，单击属性面板中的按钮，打在网页中选择图像之后，单击属性面板中的按钮，打在网页中选择图像之后，单击属性面板中的按钮，打在网页中选择图像之后，单击属性面板中的按钮，打开图像处理软件，对图像进行处理。如果安装了开图像处理软件，对图像进行处理。如果安装了开图像处理软件，对图像进行处理。如果安装了开图像处理软件，对图像进行处理。如果安装了FireworksFireworks，那么那么那么那么FireworksFireworks将被默

11、认为图像处理软件。如果没有安装，用将被默认为图像处理软件。如果没有安装，用将被默认为图像处理软件。如果没有安装，用将被默认为图像处理软件。如果没有安装，用户也可自己设置使用其他软件中处理图像。户也可自己设置使用其他软件中处理图像。户也可自己设置使用其他软件中处理图像。户也可自己设置使用其他软件中处理图像。源文件设置源文件设置 在属性面板的在属性面板的“源文件源文件”文本框中文本框中显示了图像的保存路径，如果要重新插显示了图像的保存路径，如果要重新插入一幅新图像，可以在选取图像后的属入一幅新图像，可以在选取图像后的属性面板中的性面板中的“源文件源文件”文本框中重新输文本框中重新输入要插入图像的地

12、址，或单击右侧后的入要插入图像的地址，或单击右侧后的 按钮，在打开的按钮，在打开的“选择图像源文件选择图像源文件”对对话框中重新选择需要的图像。话框中重新选择需要的图像。文本说明文本说明 在选取图像后的属性面板的在选取图像后的属性面板的“替换替换”下拉列表框中可以输入图像下拉列表框中可以输入图像的文本说明。的文本说明。图像与文本的对齐图像与文本的对齐 选取图像后，在属性面板的选取图像后，在属性面板的“对齐对齐”下拉列表框中可设置处于同一行上的下拉列表框中可设置处于同一行上的图像与文本的对齐方式。图像与文本的对齐方式。图像边距图像边距 选选选选取取取取图图图图像像像像在在在在属属属属性性性性面面

13、面面板板板板的的的的“垂垂垂垂直直直直边边边边距距距距”和和和和“水水水水平平平平边边边边距距距距”文文文文本本本本框框框框中中中中可可可可以以以以设设设设置置置置图图图图像像像像与与与与页页页页面面面面上上上上方方方方和和和和左左左左侧侧侧侧之之之之间间间间的的的的距距距距离离离离，也也也也可可可可以以以以设设设设置置置置图图图图像像像像与与与与其他网页元素之间的距离其他网页元素之间的距离其他网页元素之间的距离其他网页元素之间的距离。图像边框图像边框 选选选选取取取取图图图图像像像像后后后后，在在在在属属属属性性性性面面面面板板板板的的的的“边边边边框框框框”文文文文本本本本框框框框中中中中

14、可可可可以以以以设设设设置置置置图图图图像像像像边边边边框框框框的的的的宽宽宽宽度度度度，单单单单位位位位为为为为像像像像素素素素，“0”0”表示无边框。表示无边框。表示无边框。表示无边框。图像高级设置图像高级设置 l鼠标经过图像设置鼠标经过图像设置 l插入插入Fireworks HTML对象对象 鼠标经过图像设置鼠标经过图像设置 鼠标经过图像是一种在浏览器中查鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图看网页时，鼠标光标经过该图像时，图像发生变化的动态图像。像发生变化的动态图像。插入插入Fireworks HTML对象对象 MacromediaMacromedia公司的图

15、形处理软件公司的图形处理软件公司的图形处理软件公司的图形处理软件FireworksFireworks优化后的图像和优化后的图像和优化后的图像和优化后的图像和HTMLHTML文件。使文件。使文件。使文件。使用用用用DreamweaverDreamweaver可直接插入保存到所需的可直接插入保存到所需的可直接插入保存到所需的可直接插入保存到所需的DreamweaverDreamweaver站点文件夹中。站点文件夹中。站点文件夹中。站点文件夹中。上机实战上机实战 本课上机实本课上机实本课上机实本课上机实战主要练习在网战主要练习在网战主要练习在网战主要练习在网页中插入图像并页中插入图像并页中插入图像并页中插入图像并对其进行属性设对其进行属性设对其进行属性设对其进行属性设置。在练习过程置。在练习过程置。在练习过程置。在练习过程中，将用到课堂中，将用到课堂中，将用到课堂中，将用到课堂讲解中所学的插讲解中所学的插讲解中所学的插讲解中所学的插入图像的方法、入图像的方法、入图像的方法、入图像的方法、图像属性设置的图像属性设置的图像属性设置的图像属性设置的方法、热点链接方法、热点链接方法、热点链接方法、热点链接的设置及鼠标经的设置及鼠标经的设置及鼠标经的设置及鼠标经过图像的创建方过图像的创建方过图像的创建方过图像的创建方法等知识。法等知识。法等知识。法等知识。