网站建设与网页制作-电子教案-姚翠友08第八章节.pptVIP

尚辅网 / 网站建设与网页设计 第八章 使用图像和多媒体 说明：本章节中的具体操作步骤参见书籍的对应章节。 第八章 使用图像和多媒体 8.1 图像格式基础 8.2 插入图像 8.3 处理图像 8.4 使用Flash动画 8.5 使用声音与视频 8.1 图像格式基础 图像和多媒体是网页上最常用的对象之一，制作精美的图像和多媒体文件可以大大增加网页的视觉效果。图像和多媒体文件所蕴含的信息量对于网页而言愈加重要。 图像是网页中不可缺少的组成元素。在Dreamweaver CS4中，可以Web页面中插入图像，并利用软件自带的功能设置各种图像效果，例如导航栏、链接和鼠标经过效果等。 实际上，虽然计算机支持多种图像格式，但由于网络带宽和浏览器的限制，在Web页面上常用的图像格式有3种：JPEG（JPG）、GIF和PNG，它们都是位图。 注意：位图，亦称为点阵图像或绘制图像，是由称作像素的单个点组成的。放大位图，可以看见赖以构成整个图像的无数单个方块。处理位图时要着重考虑分辨率，一般位图编辑软件有Photoshop和Fireworks。 8.1.1 图像格式介绍 8.1 图像格式基础 图像虽然会导致网页下载速度缓慢，但是如果合理安排使用它们，可以形成独特的网站风格。 在Web页面的图像使用过程中，通常要考虑下面3个问题。 文件的大小 为了保证网页的流畅性，文件可以从两个方面来处理：1）注意图像所具有的像素大小；2）对正确的格式使用适当的优化处理。 图像的数量和质量 为了网页文件的下载速度，对于图像的质量问题，可以从两个方面来处理：1）注意图像的分辨率；2）使用合适的优化方法。 动画的使用 合适的动画，才会对整个?Web页面起到画龙点睛的作用。反之，如果使用设计不合理的动画，很可能会像劣质的电视广告一样，不仅没有吸引浏览者，而且起到反作用。 8.1.2 图像使用原则 8.2 插入图像 一般来说，站点中的图像最好集中存放到某个文件夹中。习惯上将图像保存到站点根目录下的“images”文件夹中。 图像可被添加到Web页面中的段落、表单、Div标签等HTML标签内。一般使用Dreamweaver中【插入】栏中的【常用】类别中的【图像】按钮，添加图像。下图为添加图像操作的截图。 8.2.1 添加图像 8.2 插入图像 在为Web页面添加图像之后，可以使用属性检查器设置属性。图像属性检查器如下图所示。 8.2.2 图像属性 一般来说，图像属性常用的是源文件、链接、替换等，其他属性通常不需要修改。如果要修改图像其他的属性（如“对齐”、“边框”或者“边距”属性等），可使用为图像添加CSS样式的方式进行修饰，具体介绍见后面章节。 8.3 处理图像 在Web页面制作过程中，有时需要对图像进行一系列的处理，例如修改图像的尺寸、对图像进行优化和导出等。 Dreamweaver CS4集成了Fireworks的基本图像编辑技术，可以不用借助外部图像编辑器直接对图像进行修剪、重新取样、调整图像的亮点和对比度以及锐化图像等操作。 注意：使用内部图像编辑器（即使用Dreamweaver的图像编辑功能）仅适用于两种图像文件格式（JPEG和GIF）。在进行图像处理之前，最好制作一个图像文件的副本，保存好原始图像。在处理图像时，可以使用【编辑】︱【撤销】命令恢复原始图像。 剪裁图像 重新抽样 调整图像的亮点和对比度 锐化 8.3.1 使用内部图像编辑器 8.3 处理图像 对于Dreamweaver CS4文档中的图像，也可以使用外部图像编辑器来编辑，在外部编辑器中编辑图像后，保存并返回Dreamweaver时，网页文档窗口中的图像也随之同步更新。一般使用的外部图像编辑器有Fireworks、Photoshop等图像编辑软件。下图为操作中的截图。 8.3.2 使用外部图像编辑器 8.4 使用Flash动画 目前，Flash动画是网页上最流行的动画格式，被大量运用于网页中。在Dreamweaver中，Flash也是最常用的多媒体插件之一。它将通过压缩把声音、图像和动画等内容加入到一个文件中，使得文件较小，而且有较好的动画效果。 目前，Flash的文件类型有4种：.fla、.swf、.swt、.swc。 Flash源文件（.fla）：这是使用Flash应用程序创建的项目的原始文件。该类型文件只能在Flash打开，不能在Dreamweaver或浏览器中打开。 Flash电影文件（.swf）：这是一种压缩的Flash源文件，可以在浏览器中播放，也可在Dreamweaver中预览，但不能编辑。 Flash库