第5章 插入并编辑图像.pptVIP

第5章 插入并编辑图像 主讲人：黄庆华 电 话信 箱：hqh566@163.com 图像具有直观、形象、生动等特点，是网页中最为重要的元素之一。 插入的图像可以作为网页背景，也可以创建交互式图像效果，还可以插入到网页的层中。 对插入图像的属性可以重新设置或修改。 5.1 插入并编辑图像 为了能使网页文件快速传递，必须尽可能地缩小网页文件大小，而网页文件的大小与图像质量紧密相关。 GIF、JPEG、PNG等图像格式很好地解决了文件大小较小、图像质量又高的问题，并能被绝大多数浏览器所支持。 5.1.1 Web中的图像 GIF JPEG PNG 5.1.2 插入图像 几种方法： 注意，一般来说，插入的图像文件必须位于当前站点中。如果不在，DW将会询问用户是否将此文件复制到当前站点中。否则，当使用浏览器进行浏览时，插入的图像将不能正确显示。 5.1.3 设置图像属性 ID： 宽和高： 源文件 链接 对齐 替换： 底图名称和热点工具 垂直边距和水平边距 目标： _blank _parent _self _top 低解析度源 边框 编辑 优化 裁剪 重新取样 亮度和对比度 锐化 重设大小 5.1.4 调整图像大小 以可视方式调整图像大小可以直观地看到不同尺寸的图像对布局的影响情况，但不会将图像文件所放到用户所指定的比例。 在调整图像大小时，可以对图像进行重新取样，以适应其新尺寸。 重新取样可以对已调整的JPG和GIF图形文件中的像素进行增加或减少，使其变大或变小，以与原始图像的外观尽可能的匹配。 对图像进行“缩小”重新取样会减小该图像的文件大小并提高下载性能。 调整图像大小，既可以使用可视化方式，也可以在【属性】面板中直接输入相应数值。 但是以可视化方式最小只能够将元素大小调整到8x8像素。若要将元素调整到更小的大小，只能使用【属性】面板输入数值。 若要将已调整大小的元素返回到原始尺寸，可以在【属性】面板中删除【宽】和【高】文本框中的值，也可以单击【重设大小】按钮。 5.1.5 裁剪DW图像 裁剪时，DW将会修改磁盘上源图像的大小。因此，在裁剪之前应当备份源图像文件，以便随时恢复到原始图像。 5.1.6 调整图像亮度和对比度 改变图像的高亮显示、阴影和中间色调。通过修正过暗或过亮的图像，调节图像中像素的亮度或对比度。 5.1.7 锐化图像 扫描图像或拍摄数码照片时，大多数图像捕获软件的默认操作是柔化图像中各对象的边缘。 插入到DW中的扫描图像或拍摄的数码照片，要详细显示其中的细节，可以通过对图像进行锐化来完成。 锐化通过增加图像中边缘的对比度来调整图像的焦点，从而提高边缘的对比度，使图像更清晰。 5.2 插入与替换图像占位符 图像占位符是在准备好将最终图形添加到Web页面之前使用的图形。 使用图像占位符【属性】面板可以为占位符图像设置名称、宽度、高度、图像源文件、替代文本说明、对齐方式和颜色。 5.2.1插入并设置图像占位符 5.2.2替换图像占位符 图像占位符在浏览器中显示的并不是图形图像，因此在发布站点之前，应该用合适的图形图像替换图像占位符。 5.3创建鼠标经过图像 鼠标经过图像：使用浏览器查看某图像时，鼠标指针滑过的瞬间，图像发生变化。 但是这一对或多对鼠标经过的图像必须分辨率相同。否则，DW将自动调整第二个图像的分辨率以匹配第一个图像的属性。 5.4使用Fireworks CS4优化图像 DW CS4和Fireworks CS4具有识别并共享多种相同的文件编辑过程，一起提供了在HTML页中编辑、优化和放置Web图形文件的简化工作流程。 如果在DW中以可视化方式调整了图像分辨率，但是没有使用图像编辑程序（ Fireworks ）将图像缩放到所需大小，则在加载页面时浏览器将会缩放该图像，可能会导致浏览器中页面下载延迟和图像显示不正确。 使用图像编辑程序（ Fireworks ）缩放图像可以缩短下载时间并确保所有图像以原始分辨率显示。 5.4.1 在DW中插入Fireworks 图像 5.4.2在DW文档中使用Fireworks HTML代码 用户可以将Fireworks HTML插入到DW中，也可以将其 HTML代码粘贴到DW “代码”视图中。 使用Fireworks 中【文件】/【更新HTML】命令，更新放置在DW中的Fireworks 文件。利用该命令可以在Fireworks中编辑源PNG图像，然后自动更新导入DW文档中的HTML代码和图像文件。 5.5 在PS中编辑网页图像 插入到DW中的图像，可以在DW中启动PS来进行编辑。 5.6 案例：E-Book遨游网 * * *