第4课--为网页添加图像

tel：[phone]思科资讯计算机培训中心：0991-4544103思科资讯计算机培训中心：0991-4544103思科资讯计算机培训中心：0991-4544103思科资讯计算机培训中心全称为“GraphicsInterchangeFormat”，意为可交换图像格式，它是第一个支持网页的图像格式，在PC机和苹果机上都能被正确识别。它最多支持256种颜色，可以使图像变得容量相当小。GIF图像可以在网页中以透明方式显示，还可以包含动态信息，即GIF动画。tel：[phone]思科资讯计算机培训中心全称为“JointPhotographicExpertsGroup”，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。tel：[phone]思科资讯计算机培训中心全称为“PortableNetworkGraphics”，意为便携网络图像，它是逐渐流行的网络图像格式。PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。tel：[phone]思科资讯计算机培训中心网页图像来源网页图像的素材有很多来源，如可以使用图形处理软件（如Photoshop、Fireworks和FreeHand等软件）制作；可以购买网页素材光盘；可以从网络上下载等。tel：[phone]思科资讯计算机培训中心：0991-4544103思科资讯计算机培训中心直接插入选择[插入][图像]菜单命令。单击插入栏的“常用”选项卡中的按钮。按【Ctrl+Alt+I】键。tel：[phone]思科资讯计算机培训中心占位符插入制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用占位符来代替图像的方式插入到文档中。将图像确定后双击占位符，在打开的对话框中设置后插入即可。tel：[phone]思科资讯计算机培训中心新增的放大镜功能可以让用户更方便地进行对齐图像、选择较小的对象以及查看较小的文本、动画或网页元素等操作。tel：[phone]思科资讯计算机培训中心设置图像属性在网页中插入图像后可通过属性面板对其属性进行修改等设置。图像命名图像大小编辑图片源文件设置文本说明图像与文本的对齐图像边距图像边框tel：0991-4544103思科资讯计算机培训中心行为（如交换图像）或脚本撰写语言（如JavaScript或VBScript）时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。tel：[phone]思科资讯计算机培训中心中插入图像后系统会自动将图像的原始大小显示在“宽”和“高”文本框（以像素为单位）中。tel：[phone]思科资讯计算机培训中心编辑图片在网页中选择图像之后，单击属性面板中的按钮，打开图像处理软件，对图像进行处理。如果安装了Fireworks，那么Fireworks将被默认为图像处理软件。如果没有安装，用户也可自己设置使用其他软件中处理图像。tel：[phone]思科资讯计算机培训中心源文件设置在属性面板的“源文件”文本框中显示了图像的保存路径，如果要重新插入一幅新图像，可以在选取图像后的属性面板中的“源文件”文本框中重新输入要插入图像的地址，或单击右侧后的按钮，在打开的“选择图像源文件”对话框中重新选择需要的图像。tel：[phone]思科资讯计算机培训中心文本说明在选取图像后的属性面板的“替换”下拉列表框中可以输入图像的文本说明。tel：[phone]思科资讯计算机培训中心图像与文本的对齐选取图像后，在属性面板的“对齐”下拉列表框中可设置处于同一行上的图像与文本的对齐方式。tel：[phone]思科资讯计算机培训中心图像边距选取图像在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与页面上方和左侧之间的距离，也可以设置图像与其他网页元素之间的距离。tel：[phone]思科资讯计算机培训中心图像边框选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“0”表示无边框。tel：[phone]思科资讯计算机培训中心：0991-4544103思科资讯计算机培训中心鼠标经过图像设置鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像。tel：[phone]思科资讯计算机培训中心文件。使用Dreamweaver可直接插入保存到所需的Dreamweaver站点文件夹中。tel：[phone]思科资讯计算机培训中心上机实战本课上机实战主要练习在网页中插入图像并对其进行属性设置。在练习过程中，将用到课堂讲解中所学的插入图像的方法、图像属性设置的方法、热点链接的设置及鼠标经过图像的创建方法等知识。tel：[phone]思科资讯计算机培训中心三、图像及图像占位符属性面板的使用主要属性：图像的名称、大小、源文件、链接、替代文字、对齐方式等。图文环绕的设置：只能设置图像的属性为左对齐，才可以产生图文环绕的效果。四、图像的热区使用图像地图，可以在单个图像上创建多个热点或热区（可单击的区域），并使每一个热点连接到不同的URL。绘制热区：矩形，椭圆形，多边形。选择热区：按下SHIFT键的同时单击要选择的其他热点。移动热区及调整热区的大小。五、插入交互式图像鼠标经过图像（简单的翻转图）•插入栏——常规——鼠标经过图象•插入菜单——交互式图像——鼠标经过图像导航条（每个页面只能有一个）•插入栏——常规——导航条•插入菜单——交互式图像——导航条六、Fireworks切图及导入FireworksHTML切片将Fireworks文档分割成多个较小的部分，并将每个部分导出为单独的文件，同时创建一个包含表格代码的HTML文件，以便在浏览器中重新配置图形。插入菜单——交互式图像——FireworksHTML插入栏——常用——FireworksHTML主要适用于大型图像文件分割与显示，以利下载。七、图像的优化及格式的转换用Fireworks优化页面图像•右击图像——在Fireworks中优化•命令菜单——在Fireworks中优化用Photoshop和Fireworks转换图像文件格式和优化处理tel：0991-4544103思科资讯计算机培训中心总结：1.插入图像2.设置图像属性3.裁剪图像4.添加图片的提示信息5.调整图片与文字的间距（hspacevspace）6.热点地图7.编辑和优化网页图像8.创建文字环绕图像效果《对齐》9.创建网站相册10.图像特效11.文件批处理12.图像占位符13.鼠标经过图像tel：0991-4544103思科资讯计算机培训中心作业:1.图像交换特效(鼠标经过图像)2.创建网站相册(命令--创建网站相册)3.FIREWORKS中对图像的批处理4.特效代码—图像渐出现效果5.网页间特效转换代码