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

第五章网页中的多媒体本章要点5.1图像5.1.1图像基本知识5.1.2插入图像5.1.3插入背景图像5.1.4插入鼠标经过图像5.1.5插入导航条5.1.6Deamweaver与Fireworks5.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．矢量图与位图矢量图（VectorGraphics）不是直接描述图形图像中每个点的信息，而是描述其中所有像素点的产生过程和方法，即用指令集来描述图形。优点：占空间小、进行各种变形（如缩放、旋转、扭曲）时几乎没有误差产生缺点：不易精细位图（BitMappedGraphics）由描述构成图像中各个像素点颜色属性的数字阵列组成。该数字阵列的大小与位图像素点的个数及颜色属性的复杂度有关。优点：描述细致，适于场景复杂，色彩丰富并含有大量细节信息的图像。缺点：占空间大，进行各种变形时会产生较大的误差。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插入图像属性面板热点：areashape=rectcoords=46,32,73,59href=dw1-1.htm【例5-1】向网页中插入一幅图像，在其内建立热点，并分别建立超链接。85.1.3插入背景图像提起背景图像，首先要介绍网页背景颜色，这两者均属于网页页面属性中的选项之一。网页背景颜色在默认情况下为白色，可以根据网页风格随意设置网页背景颜色。方法是单击【属性】面板中的【页面属性】按钮，设置【背景颜色】选项即可。5.1.4插入鼠标经过图像原始图像（OriginalImage）翻滚图像（RolloverImage）2幅图片大小一样【例5-2】插入一个鼠标经过图像，并为其建立超链接。2.3.4插入导航条导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。虽然鼠标经过图像也可以制作导航条，但是通过【插入】|【图像对象】|【导航条】命令创建的导航条，可以包括4种状态：【状态图像】、【鼠标经过图像】、【按下图像】和【按下时鼠标经过图像】。5.1.5插入导航条导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。虽然鼠标经过图像也可以制作导航条，但是通过【插入】|【图像对象】|【导航条】命令创建的导航条，可以包括4种状态：【状态图像】、【鼠标经过图像】、【按下图像】和【按下时鼠标经过图像】。5.1.6Deamweaver与Fireworks1．在Dreamweaver中编辑图像在Dreamweaver中将Fireworks设为主图像编辑器（“编辑”|“首选参数”|“文件类型/编辑器”类）。在Dreamweaver中单击图像“属性”面板中的按钮进入Fireworks的文档编辑窗口编辑完成后，单击按钮返回Dreamweaver，图像即更新。在Fireworks中保存PNG文件。5.1.4Deamweaver与Fireworks2．插入Fireworks图形或代码插入Fireworks生成的GIF、JPG图像。插入的FireworksHTML文件（包含HTML源文件关联的图像、切片和JavaScript脚本）。【例5-3】试在Dreamweaver中导入Fireworks制作的滚动按钮。5.1.4Deamweaver与Fireworks3．制作网络相册优点：使页面布局更合理、加快下载速度。Deamweaver与Fireworks协同工作。执行菜单命令“命令”|“创建网站相册”5.2动画5.2.1动画基本知识传统动画就是系列静图（称为帧）的连续播放。现代动画软件实现了插值动画（过渡动画），即仅仅定义关键帧，关键帧之间的帧由系统自动进行插值计算而成。从计算机制作动画的方式，将动画分为帧动画、位块动画、实时动画、插值动画、色彩动画和变形动画等。动画文件的格式主要有以下几种：fli、flc、mmm、fla、swf、gif等。5.2.2插入动画1.Flash动画同时使用HTML中的Object标签和Embed标签，以确保在InternetExplorer和NetscapeNavigator中都获得应有的效果。文件格式：swf属性面板：Autoplay、Loop、Quality、Scale（比例）、Play/Stop、Parameters（输入属性面板中没有的额外参数）。【例5-5】在网页中插入Flash动画，并将背景设为透明。2.Flash按钮3.Flash文本5.3音频5.3.1音频基本知识1．音频格式（1）波形音频采样频率（SamplingRate）是将模拟声音波形转换为数字时，每秒钟所抽取声波幅度样本的次数，采样频率的计算单位是kHz。量化数据位（也称为量化级）是每个采样点能够表示的数据范围。（2）MIDI音频（3）CD音频5.3音频5.3.1音频基本知识2.编辑音频5.3.2插入音频音频包括背景音乐、解说词和音效。ActiveX按钮或插件按钮都可以插入音频。从属性面板中的按钮设置参数:hidden值为true（声音播放器隐藏）。autostart值为true（网页加载时自动播放）。【例5-8】在网页中增加背景音乐。插件的代码为：embedsrc=back.midwidth=31height=26hidden=trueautostart=trueloop=true/embedActiveX控件的代码为：objectwidth=208height=32……5.4视频5.4.1视频基本知识视频（Video）是由一幅幅单独的图像（称为帧frame）组成的序列，这些画面以24f/s（帧/秒）到30f/s速率连续地投射到屏幕上，而具有图像连续运动的感觉。我国及欧洲大部分国家采用PAL制式，PAL标准为25f/s，每帧625行。数字视频产生的文件很大，而且视频的捕捉和回放要求很高的数据传输速率，因此视频压缩和解压缩是需要解决的关键技术之一。视频格式：AVI、MPG、RA、WMV等视频编辑软件AdobePremiere，编辑AVI格式文件5.4.2插入视频【例5-9】分别使用ActiveX按钮及插件按钮插入视频。【例5-10】插入RealPlayer流格式的视频文件属性面板中设置:ClassID为RealPlayer……。选中Embed复选框。Src为zhaodan.rpm（是纯文本文件，内容为指向的RealPlayer文件名）。单击按钮，设置属性。制作RealPlayer视频播放控制。TheEnd