[第五章网页中的多媒体对象.pptVIP

第五章 网页中的多媒体 本章要点 5.1 图像 5.1.1 图像基本知识 5.1.2 插入图像 5.1.3 插入背景图像 5.1.4 插入鼠标经过图像 5.1.5 插入导航条 5.1.6 Deamweaver与Fireworks 5.2 动画 5.2.1 动画基本知识 5.2.2 插入动画 5.3 音频 5.3.1 音频基本知识 5.3.2 插入音频 5.4 视频 5.4.1 视频基本知识 5.4.2 插入视频 5.1 图像 图像会使网页下载时间大大增加，应控制图像的数量和质量。要使图像具有必须的像素大小，并且采用正确的格式进行优化处理。 在网页中常用的图像格式是GIF和JPG。 5.1.1 图像基本知识 1．矢量图与位图 矢量图（Vector Graphics）不是直接描述图形图像中每个点的信息，而是描述其中所有像素点的产生过程和方法，即用指令集来描述图形。 优点：占空间小、进行各种变形（如缩放、旋转、扭曲）时几乎没有误差产生 缺点：不易精细 位图（Bit Mapped Graphics）由描述构成图像中各个像素点颜色属性的数字阵列组成。该数字阵列的大小与位图像素点的个数及颜色属性的复杂度有关。 优点：描述细致，适于场景复杂，色彩丰富并含有大量细节信息的图像。 缺点：占空间大，进行各种变形时会产生较大的误差。 5.1.1 图像基本知识 2．图像质量与容量 图像分辨率与屏幕分辨率 位图的容量 文件容量 ＝ （位图高度×位图宽度×位图深度）/ 8 矢量图的容量 与图形的复杂度有关 3. 颜色 RGB模型、HSB模型和CMYK模型。 4. 图形图像的压缩 5.1.2 插入图像 图像使用单标签img /，格式为： img 属性名=属性值 … / 属性名包括： src（图片文件名及路径）、 alt（图片说明文字）、name（图像名）、 width（宽）、 height（高）、 border（边框宽度）、hspace（左右边缘空白）、 vspace（上下边缘空白）、 align（对齐方式）等，均可在Dreamweaver中面向对象设置。。 5.1.2 插入图像 属性面板 热点：area shape=rect coords=46,32,73,59 href=dw1-1.htm 【例5-1】向网页中插入一幅图像，在其内建立热点，并分别建立超链接。 5.1.4 插入鼠标经过图像 原始图像（Original Image） 翻滚图像（Rollover Image） 2 幅图片大小一样 【例5-2】插入一个鼠标经过图像，并为其建立超链接。 5.1.6 Deamweaver与Fireworks 1．在Dreamweaver中编辑图像 在Dreamweaver中将Fireworks设为主图像编辑器 （“编辑” | “首选参数” | “文件类型/编辑器”类 ）。 在Dreamweaver中单击图像“属性”面板中的按钮 进入Fireworks的文档编辑窗口编辑完成后 ，单击按钮 返回 Dreamweaver，图像即更新。 在Fireworks中保存PNG文件。 5.1.4 Deamweaver与Fireworks 2．插入Fireworks图形或代码 插入Fireworks生成的GIF、JPG图像 。 插入的Fireworks HTML文件 （包含HTML源文件关联的图像、切片和JavaScript脚本 ）。 【例5-3】试在Dreamweaver中导入 Fireworks 制作的滚动按钮。 5.1.4 Deamweaver与Fireworks 3．制作网络相册 优点：使页面布局更合理 、加快下载速度。 Deamweaver与Fireworks协同工作。 执行菜单命令“命令”|“创建网站相册” 5.2 动画5.2.1 动画基本知识 传统动画就是系列静图（称为帧）的连续播放。现代动画软件实现了插值动画（过渡动画），即仅仅定义关键帧，关键帧之间的帧由系统自动进行插值计算而成 。 从计算机制作动画的方式，将动画分为帧动画、位块动画、实时动画、插值动画、色彩动画和变形动画等。 动画文件的格式主要有以下几种： fli、flc、 mmm 、fla 、swf 、gif等。 5.2.2 插入动画 1. Flash 动画 同时使用HTML中的Object标签和Embed标签，以确保在Internet Explor