DW_04在网页中插入图像教程.ppt

网站建设;第4章;第一节 认识网页图像 图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。 用户可以在网页中使用GIF、JPEG(JPG）、PNG三种图象格式，其中使用最广泛的是GIF和JPEG两种格式。 Gif文件：无损压缩，可以使用透明背景,可以叠加多张Gif图使用Gif动画，但色彩数少，可用于Logo等于色彩不太丰富的图片。 JPEG(JPG）：有损压缩，压缩时忽略某些细节，色彩丰富，照片级的格式。 ;PNG：网络专用图像格式，兼有Gif、JPEG(JPG）格式的双重优点，属于无损压缩，但色彩丰富。;第二节 在网页中插入图像和图像对象 一、插入图像 方法：单击欲插入图像处，在“插入”栏的“常用”类别中，单击“图像”图标或选择“插入／图像”→选择一个图形文件。或者从站点文件夹中拖动一个图像文件到网页中欲插入处。 特别说明：与添加文本不同，插入的图像不能从别的文档中复制；必须特别说明的是，插入到网页中的图像只能以文件的形式独立存在于站点文件夹中。;;插入一幅图像后显示下列对话框： 替换文本：用于指定图像显示之前或图像无法显示时显示的文本。当浏览网页时，鼠标指向图片上时将作为图片提示信息显示文本框中的文本。 ;尽量将网站中的所有图像文件统一复制到站点的images文件夹中，如果图像文件不在站点目录中，DW会提示保存到站点目录中。 注意图像一般较大，不可过多地插入，一般情况下，将网页文件控制在40K左右，通过状态栏知道。 通常做法：先在图像处理软件中降低分辨率，改变文件大小，尤其是对数码相机拍摄的照片。 ;二、插入鼠标经过图像（翻转图像） 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像，单击则转向指定的超级链接。用Java语言控制。 需要两张图片：一张是一般状态下的图片，另一张是鼠标经过时显示的图片。 方法：将插入点置于要建立鼠标经过图像的位置，单击“插入”面板“常规”的“图像”中的“鼠标经过图像”按钮。或者“插入—图像对象—鼠标经过图像”。 实际上用于制作网页中的超级链接。;*;*;三、插入图像占位符 图像占位符：顾名思义，仅表示显示指定大小图像的位置，并没有指向一个具体的图像。在代码中，是没有指定SRC源文件的图像标签，显示为灰色空白。 实际作用在于先确定图像的显示位置大小，以后再插入具体图像。 方法：将插入点置于要插入图像占位符的位置，单击“插入”面板“常规”的“图像”中的“图像占位符”按钮。或者“插入—图像对象—鼠标经过图像”。;图像占位符的属性面板：;四、插入FireworksHTML Fireworks是网页三剑客（Dreamweaver 、Flash 、Fireworks）之一，用于设计制作图像，也可以生成HTML文档。 本操作用于在网页中插入一个由Fireworks制作的HTML文档。 方法：将插入点置于要插入图像占位符的位置，单击“插入”面板“常规”的“图像”中的“FireworksHTML”按钮。或者“插入—图像对象—FireworksHTML”。 ;*;第三节 设置图像属性 方法：单击选中图像，在属性面板中，设置图像的属性。 “源文件”指定图像文件的存放路径。单击文件夹图标以浏览到源文件，或者键入路径。 “垂直边距”和“水平边距”沿图像的边缘添加边距（以像素为单位），实为与其它内容的间距，即其它内容靠近图像的程度。?;“垂直边距”沿图像的顶部和底部添加边距。 “水平边距”沿图像左侧和右侧添加边距，如文字与图片的距离。 特别注意“对齐”，左右可使图片与文本的位置相对协调。 “边框”是以像素为单位的图像边框的宽度。默认为无边框，相当于加一个相框。 “编辑”启动在首选参数的“文件类型/编辑器”参数选择中指定的图像编辑器并打开选定的图像。 “替代”中用于输入图像的提示文字。 ;“宽”、“高”显示图像的大小尺寸。 如果改变了图像的原始大小尺寸，则在宽、高文本框右侧会显示出“重高图像大小”按钮，单击则恢复到原始的大小。 “原始”：指定载入正式图像前显示的低分辨率图像。 ;第四节 编辑网页图像 一、调整图像大小 放大、缩小图像大小：拖动尺寸控点或直接在属性面板中输入宽度与高度的像素值； 等比例放大、缩小图像大小：按住Shift同时拖动右下角控制点； 一般不提倡修改图片的大小，应提前用图像处理软件修改到合适的大小。 恢复图像大小：删除其属性面板中的宽度、高度值，或者单击“重高图像大小”按钮，即可恢复到原来的大小。 ;二、重新优化图像 是指改变图像大小后，按照改变以后的大小进行重新优化，增加或者删除像素，以使其变大或者变小。 图例尺寸变小后，会删除像素，重新优化会使数据丢失，品质下降，文件变小（即图像源会改变）。 方法：选中图像，单击“重新取样”按钮。 ;三、裁剪