次课网页和动态图形.pptVIP

第13章 网页和动态图形 学习要点 切片的应用 ImageReady建立图像映射 动画制作 一、常用概念 13.1.1 关于创建和编辑图像 13.1.2关于切片的概念 13.1.3 关于图像映射的概念 13.1.4 关于动画的概念 13.1.5 关于翻转的概念 二、GIF动画 GIF动画是在一段时间内显示的一系列图像或者帧，每一帧较前一帧有轻微的变化，当连续、快速地显示这些帧时会产生运动的错觉。 13.4.1 过渡和调整 “过渡”命令大大减少了创建动画效果所需的时间。 13.4.2 过渡样式 13.4.3 位置过渡 13.4.4 过渡变形文字 13.4.5 逐帧动画 在photoshop中准备一系列的图片，并有序地进行图层排列，在photoshop或ImageReady中通过显示和隐藏图层，得到一系列动画的效果，我们称之为“逐帧动画”。 它的最大特点就是每一帧多需要通过手动进行调整。 三、透明背景图像制作 1、图像不能有背景层，可以把背景图层转换成普通图层， 2、新建文件时可以把背景内容设为透明，如图。 3、保存文件时，选择存储类型为：GIF(gif)格式 四、优化用于WEB的图像 关于优化 准备Web页面中的图像时一个权衡的工作，图像不但要有良好的质量和颜色，而且要尽可能地压缩图像，减少文件尺寸，以求更快的下载速度。但图像质量和速度之间是相互矛盾的，需要文件保留的细节和颜色细节越多，压缩过后的文件大小也将越大，下载的速度也将越慢。 优化是微调图像显示品质和文件大小的过程，在压缩图像文件大小的同时又能优化在线显示的图像品质。 使用在Web上的格式来优化图像：GIF、JPEG和PNG_8或PNG-24 JPEG格式：可保留照片和连续调图像的亮度和色调的广泛细微的多种变化，并且被大多数浏览器支持的格式。 GIF格式：使用8位颜色，在保留锐化细节的同时可以有效压缩颜色。例如线条稿、标志或文字的图解，也可以使用GIF格式创建动画，被大多数浏览器支持。 PNG-8格式：与GIF格式相同，不被所有的浏览器支持，避免使用该格式。 PNG-28格式：与JPEG格式相似，还可以支持背景透明和背景杂边，也不能被所有的浏览器支持。 优化图像 执行“文件” “存储为Web和设备所用格式”命令 五、将图像存储为网页的HTML格式 1、绘制好网页图像后，执行“文件” “存储为Web和设备所用格式”命令，在弹出的对话框中设置好优化 格式，单击“存储”按钮。 2、在弹出的存储对话框中，选择保存类型为“HTML和图像”单击保存。 六、图像映射和切片 制作图像的热点和使用切片来创建链接。图像热点和图像切片的主要区别是图像导出为Web页的方式时，热点的图像是作为一个文件按原样导出；而切片的图像是把每个一个切片作为一个单独的文件导出。 1.图像映射 在网页中，可以在图像中设置多个链接区域称为图像映射区域， 图像映射是网页制作的基础，我们可以在图像中设置多个链接区域，设定各种形状的区域与其他各种文件相链接。 （1）、打开要编辑的图像，然后执行“文件”“在ImageReady中编辑”命令，弹出Adobe ImageReady”编辑窗口。 （2）、使用矩形/椭圆/多边形图像映射工具，在图像上要定义的区域拖移，绘制出相应的选框。 （3）、执行“窗口”“图像映射”命令，打开图像映射面板，设置链接属性 创建映射名称：在面板中名称中输入该映射的名称。 创建URL:在面板中URL的中输入要进行链接的网页或网站的地址。 相对URL和绝对URL，(如果是绝对的URL，一定要 包括正确的协议的网址：如) 设定打开目标：在目标选项中，输入新网页打开的位置。 -blank:在新的窗口中显示链接文件。 -Self：在原网页中显示链接文件，为默认选项 设定ALT文本框：为图像或映射区域的代替文本，当把鼠标放在该区域时，Alt文本会出现。 （4）、存储为HTML格式 2、图像切片 图像切片是网页制作的基础内容，它是网页对象，它们不是以图像的形式存在的，而是以HTML代码的形式出现在网页中。图像切片除了可以像热点区域创建链接外，另一个重要的作用是切割图像，可以将一个大图片切割成若干块小图像，每个切片图像可以单独优化，导出后为一个包含表格代码的HTML文件，在Dreamweaver CS3中使用时可以按顺序拼合起来，这样的网页在浏览时，可以将分块显示，减少下载等待时间。 （1）使用切片工具创建切片 在图像中使用切片工具拖拉矩形区域定义的切片被称为“用户切片”，一旦定义了一个用户切片，其他周围的区域生成“自动切片。 要确保所创建的切片之间没有间隙，因为任何间隙都会生成自动切片。 执行“视图”\“对齐到“\“切片”命令，可以使用切片工具时自动捕捉其他切片的边框，以保证不会绘制出又重叠区域的切片。