插入图像、Flash及其他多媒体对象

Page1/23第2章内容回顾了解HTML文档的基本结构，以及HTML文档的基本标记的基本用法HTML文档是包含标记的文本文件，这些标记告诉Web浏览器如何显示页面HTML标记不区分大小写标记都具有属性。属性进一步描述网页上HTML元素的附加信息META标记放置在网页的标题处，以提供关于页面的信息。搜索引擎通常会用到这些标签在HTML文档中可以插入特殊字符介绍链接的几种类型以及应用方法，制作网站应用相对文档链接锚记A标签用于标识充当HTML文档中超级链接的文本或图像。HREF参数指定要链接的文件地址即URLVersion2.0插入图像、Flash及其他多媒体对象第3章Page3/23本章目标了解适用网页的图像格式掌握在网页中插入图像、Flash对象的方法掌握正确设置图像的边框、对齐方式的方法掌握合理设置Flash影片的参数值的方法Page4/23本章结构创建图像导航条网页图像片处理插入图片、创建图像地图插入Flash媒体对象插入其他多媒体对象插入Flash动画插入Flash按钮插入Flash文本创建轮替图像网页图片的格式插入图像、Flash及其他多媒体对象Page5/23网页图片的格式适用于网页图片的格式有三种GIF格式•采用无损压缩方案，图像压缩后细节损失小•支持部分背景透明•磁盘空间占用较少JPEG格式•具有调节图像质量的功能•用不同的压缩比例压缩文件，可以在图像质量和文件尺寸之间找到平衡点PNG格式•存储形式丰富，兼有GIF和JPG的色彩模式•能把图像文件压缩到极限，又能保留所有与图像品质有关的信息，有利于网络传输GIF格式JPEG格式演示演示PNG格式在图像处理程序中演示一幅图像保存不同格式的效果比较GIF支持透明和多帧动画，体积比较小JPEG支持真彩静态图像，体积也比较小PNG虽然综合了两者优势，但是对浏览器支持不够好Page6/23插入图片2-1在网页中插入图片在网页中插入图片和图像占位符•插入图像：单击插入栏中的插入图像按钮，直接插入图像•插入图像占位符：先单击插入栏中的插入占位符按钮，插入占位符，再将占位符替换为图像在插入窗口中插入占位符双击占位符，在“选择图像源”对话框中，选择要替换的图像Page7/23替代：图片在浏览器中无法显示时或鼠标经过时，代替图像显示的说明文本插入图片2-2设置网页的图像属性演示演示源文件：此处显示图像源文件在站点内的相对路径编辑按钮：单击此按钮可以在默认的图像编辑软件中打开图像进行处理地图：在图像上设置热区，具体操作方法在后面的内容将详细介绍重设大小按钮：单击此按钮图像宽、高的值将恢复原始大小边框：此项默认值为空。在此处可以输入图像边框的宽度，单位也是像素对齐：此选项对于制作网页的图文混排也非常重要，此处的下拉列表提供了多种图像与同一行内文本或全部文本的对齐方式垂直边距(水平边距)：在图像的上下或左右根据在文本域中设置的值大小添加空白区域，单位是像素在Dreamweaver插入图像和占位符并设置其属性Page8/23创建图像地图图像地图是指具有超链接功能的图像热区是指图像中设置的指向不同超链接的区域绘制热区：绘制各种形状的热区•热区分为：圆形、矩形、多边形热区创建后在属性面板上设置热区的属性•链接•目标•替代热区演示演示浏览器中测试热区在Dreamweaver创建图像地图Page9/23创建轮替图像创建轮替图像选择菜单：插入交互式图像鼠标经过图像或在插入栏单击“鼠标经过图像”按钮演示演示浏览器中输出的轮替图像在Dreamweaver插入轮替图像Page10/23创建图像导航条创建图像导航条选择菜单：插入交互式图像导航条或单击插入栏上的“导航条”按钮导航条完成后，还可以修改浏览器中输出的轮替图像演示演示在Dreamweaver插入和修改导航条Page11/23阶段总结网页图像片处理网页图片的格式插入图片、创建图像地图创建轮替图像创建图像导航条Page12/23插入Flash多媒体对象Flash文件的三种格式Flash源文件格式•扩展名为.fla，在Flash环境中创建•只能在Flash程序中打开的文件格式•此格式不能插入到网页中Flash影片文件•Flash程序中发布或导出的影片扩展名为.swf•可以插入到网页上载到web，可以直接在浏览器或媒体播放软件中播放观看•不能在Flash应用程序中进行编辑Flash模板文件•扩展名是.swt，用户可以用它修改和替换Flash影片中的信息Page13/23插入Flash动画插入到网页的SWF影片包含在object以及embed标记内要在页面内插入Flash动画选择菜单“插入”“媒体”或单击插入栏上的“FLASH”按钮插入Flash按钮和文本是Dreamweaver的内置命令选择菜单“插入”“交互式图像”Flash按钮＼Fash文本或单击插入栏上的按钮或文本插入Flash多媒体对象需要为插入到网页的影片设置属性影片透明以显示背景•属性面板上的“参数”选项•Wmode=transparent•为网页中的影片设置“参数”属性，包括Flash动画、按钮、文本对影片未设置参数以前对影片设置参数以后Page14/23插入Flash多媒体对象Flash影片的其他属性设置演示演示属性面板宽和高：以像素值指定动画的规格大小，可根据需要修改比例：确定影片显示的尺寸。此项为默认值时，显示影原大小对齐：确定电影和页面的对齐方式，通常与文字混排的情况下设为左或右对齐水平边距（垂直边距）:指定影片与页面上其他元素的空白像素大小在Dreamweaver插入Flash对象并设置相应的属性Page15/23阶段总结Flash文件的三种格式Flash模板文件Flash影片文件Flash源文件插入Flash对象插入Flash按钮、Flash动画、Flash文本为Flash对象设置属性Page16/23插入其他多媒体对象网页上还可以插入Applet小程序、QuickTime影片、音频、视频插件等插入插件可在网页中播放音频、视频，但系统必须安装有相应的播放软件，如WindowsMediaPlayer或RealPlay两种播放软件分别支持的音频视频文件类型播放软件支持的文件类型WindowsMediaPlayerasf，wmaRealPlayrm，rmvbwav，mid，rmi，mp3（音频）；avi，mpg（视频）Page17/23插入其他多媒体对象在网页插入声音可以插入到网页的声音格式有很多Au、Midi、Wav、Mp3等声音格式网站常用的格式就是Midi格式的声音文件，此格式包含音阶，非常小，可跨平台播放在网页中插入音频和视频对象的方法相同Page18/23插入其他多媒体对象在网页插入声音文件，做背景音乐单击插入栏中媒体面板上的“插件”按钮设置属性：宽、高等属性为默认值设置“参数”，隐藏播放器界面以及自动开始、循环播放插入网页中的音频设置参数Page19/23阶段总结插入其他多媒体对象插入音频对象设置参数Page20/23图像地图本章总结插入图像、Flash及其他多媒体对象网页图片格式为影片设置属性内置命令Flash对象图像导航条其他媒体类型设置媒体属性网页图片处理其他媒体对象插入多媒体插入到网页的图片适用于网页的图片格式有三种：GIF、PNG、JPEG，最常用是GIF和JPEG正确设置图片的边框、对齐等属性为图片创建热区，可以实现图像地图的功能在网页中插入图像式的导航条，可以增强网页的交互性插入音频对象以后，可以根据使用目的不同设置其属性可以插入到网页的多媒体对象，常用的就是Flash对象，包括Flash动画、Flash按钮和Flash文本插入Flash按钮和Flash文本是Dreamweaver的内置命令插入到网页上的影片要进行相应属性的设置和修改以达到不同的使用要求为影片应用透明背景时，设置参数选项中的附加参数“Wmode”为透明可以插入到网页的媒体对象还包括音频、视频插件和Applet小程序Page21/23实验任务1：插入导航条、图片并创建图像地图任务2：创建广告页面并添加Flash按钮、设置链接Page22/23任务1注意事项提示1：为已经创建的页面替换图像时，要把新图像按布局表格的位置放置，轮替图像也要用隐形布局表格装载。提示2：整个导航条在页面上的对齐方式要合理，建议右对齐或左对齐。Page23/23任务2注意事项提示1：在页面上插入的Flash按钮要放在布局表格内，以便整体布局。提示2：为音频设定参数值，注意值的类型为布尔型。