第4章文本2.ppt

第4章 应用多媒体l随着多媒体技术的发展，网页已由原先单一的图片、文字内容发展为多种媒体相结合的表现形式。在网页中应用多媒体技术，如音频、视频、Flash动画等内容，取消了之前版本中不常用到的插入Flash按钮及Flash文字功能。可以增强网页的表现效果，使网页更生动，激发访问者兴趣。4.1 在网页中添加声音l在浏览音乐网站时经常看到一些网站上提供音频播放器，可以在线欣赏音乐。在Dreamweaver CS4中提供了专门的插件可以实现此功能。现在就来学习如何在网页中添加声音。在网页中添加声音有两种方式：一是以插入音频的形式，可以通过播放器控制音频；二是以添加背景音乐的形式，在加载页面时自动播放音频。4.1.1 插入音频l在网页中插入音频时，考虑到下载速度、声音效果等因素，一般采用rm或mp3格式的音频。在网页中插入音频的效果如图8.1所示，系统自动生成默认的播放器。具体操作步骤如下：1、在设计视图中，将插入点放置在要嵌入文件的地方，然后执行下面操作之一：l在插入面板的常用类别中，单击媒体按钮，选择“插件”图标；l选择插入 媒体 插件；2、浏览音频文件，单击确定。3、调整插件占位符的大小来确定音频插件在浏览器中以多大显示。4.1.2 添加背景音乐l背景音乐，顾名思义，就是在加载页面时，自动播放预先设置的音频，可以预先设定播放一次或重复播放等属性。具体操作步骤如下：l使用标签：用Dreamweaver打开需要添加背景音乐的页面，点击“代码”打开代码编辑视图，在之间输入。lbgsound标签共有五个属性，其中balance是设置音乐的左右均衡，delay是进行播放延时的设置，loop是循环次数的控制，src则是我们音乐文件的路径，volume是音量设置。l其中，loop=-1表示音乐无限循环播放，如果你要设置播放次数，则改为相应的数字即可。4.2 插入视频l常见的视频格式有“wmv”、“avi”、“mpg”、“rmvb”等等，Dreamweaver会根据视频格式不同，选用不同的播放器，默认的播放器是Windows Media Player。在Dreamweaver中插入视频文件具体操作步骤如下：1、在设计视图中，将插入点放置在要嵌入文件的地方，然后执行下面操作之一：l在插入面板的常用类别中，单击媒体按钮，选择“插件”图标；l选择插入 媒体 插件；2、浏览视频文件，单击确定。3、调整插件占位符的大小来确定视频插件在浏览器中以多大显示。4.3 插入FlashlFlash是网上流行的矢量动画技术，近几年很多站点都采用了Flash技术，把传统网页无法做到的效果准确表现出来，增强了网页的吸引力，如使用Flash制作的导航条、按钮动感十足。Dreamweaver中提供的Flash元素主要包括Flash动画、FlashPaper、Flash视频，以及内建的Flash按钮和Flash文本。本小节将分别学习各个Flash元素的插入与设置。常见的Flash文件类型：lFLA 文件(.fla)：是Flash文件的原始格式。此类型的文件只能在 Flash 中打开（而无法在 Dreamweaver 或浏览器中打开）。可以在 Flash 中打开 FLA 文件，然后将它导出为 SWF 或 SWT 文件以在浏览器中使用。lSWF 文件(.swf)：FLA(.fla)文件的压缩格式，已进行优化，可以在 Web 上查看。此文件可以在浏览器中播放并且可以在 Dreamweaver 中进行预览，但不能在 Flash 中编辑此文件。通常作为Flash按钮和Flash文本对象的格式。lFLV 文件(.flv)：一种视频文件，它包含经过编码的音频和视频数据，用于通过 Flash Player 进行传送。lFlash模板(.swt):允许用户修改并替换Flash文件中的一些信息。常用于Flash按钮。模板文件保存在Dreamweaver/Configuration/Flaah Objects/Flash Buttons and Flash Text文件夹中。4.3.1 插入Flash动画lFlash动画中的元素都是矢量的，可以随意放大，都不会降低画面质量。此外，Flash动画文件较小，适合在网络上使用。Flash动画的扩展名为“.swf”。下面就来学习在Dreamweaver中如何插入Flash动画。1、插入 SWF 文件1、在“设计”视图中，将插入点放置在您要插入内容的位置，然后执行以下操作之一：l在“插入”面板的“常用”类别中，选择“媒体”，然后单击 SWF 图标。l选择“插入”“媒体”“SWF”。2、在出现的对话框中，选择一个 SWF 文件(.swf)，然后在“文档”窗口中显示一个 SWF 文件占位符。l此占位符有一个选项卡式蓝色外框。此选项卡指示资源的类型（SWF 文件）和 SWF 文件的 ID。此选项卡还显示一个眼睛图标。此图标可用于在 SWF 文件和用户在没有正确的 Flash Player 版本时看到的下载信息之间切换。3、保存此文件。lDreamweaver 通知您正在将两个相关文件（expressInstall.swf 和 swfobject_modified.js）保存到站点中的 Scripts 文件夹。在将 SWF 文件上传到 Web 服务器时，不要忘记上传这些文件。除非您还上传了这些相关文件，否则浏览器无法正确显示 SWF 文件。2、编辑下载信息和预览文件1 1、编辑、编辑 Flash Player Flash Player 下载信息下载信息l在页面中插入 SWF 文件时，Dreamweaver 会插入检测用户是否拥有正确的 Flash Player 版本的代码。如果没有，则页面会显示默认的替代内容，提示用户下载最新版本。您可以随时更改此替代内容。l此过程也适用于 FLV 文件。2 2、在、在“文档文档”窗口中预览窗口中预览 SWF SWF 文件文件l在“文档”窗口中，单击 SWF 文件占位符以选定内容。l在属性检查器（“窗口”“属性”）中，单击“播放”按钮。单击“停止”可以结束预览。也可以通过按 F12 在浏览器中预览 SWF 文件。3、设置 SWF 文件属性可以使用属性检查器设置 SWF 文件的属性。这些属性也适用于 Shockwave 影片。lID：为 SWF 文件指定唯一 ID。l宽和高：以像素为单位指定影片的宽度和高度。l文件：指定 SWF 文件或 Shockwave 文件的路径。l源文件：指定源文档（FLA 文件）的路径（如果计算机上同时安装了 Dreamweaver 和 Flash)。若要编辑 SWF文件，请更新影片的源文档。l背景:指定影片区域的背景颜色。在不播放影片时（在加载时和在播放后）也显示此颜色。l编辑:启动 Flash 以更新 FLA 文件（使用 Flash 创作工具创建的文件）。如果计算机上没有安装 Flash，则会禁用此选项。l类:可用于对影片应用 CSS 类。3、设置 SWF 文件属性l循环:使影片连续播放。如果没有选择循环，则影片将播放一次，然后停止。l自动播放:在加载页面时自动播放影片。l垂直边距和水平边距:指定影片上、下、左、右空白的像素数。l品质:在影片播放期间控制抗失真。高品质设置可改善影片的外观。但高品质设置的影片需要较快的处理器才能在屏幕上正确呈现。低品质设置会首先照顾到显示速度，然后才考虑外观，而高品质设置首先照顾到外观，然后才考虑显示速度。自动低品质会首先照顾到显示速度，但会在可能的情况下改善外观。自动高品质开始时会同时照顾显示速度和外观，但以后可能会根据需要牺牲外观以确保速度。l比例:确定影片如何适合在宽度和高度文本框中设置的尺寸。默认设置为显示整个影片。3、设置 SWF 文件属性l对齐:确定影片在页面上的对齐方式。l播放 在“文档”窗口中播放影片。l参数 打开一个对话框，可在其中输入传递给影片的附加参数。影片必须已设计好，可以接收这些附加参数。4.3.2 插入FlashPaperlFlashPaper是Macromedia公司的一款文件转换软件，允许把任何的可打印的文档直接转换成Flash文档或pdf文档，并且保持原来的文件的排版格式，如图8.14所示。l例如，用FlashPaper可以方便地将Powpoint文档转换为Flash格式动画，在IE浏览器中预览的效果如图4.19所示。FlashPaper会自动生成控制条，可以实现缩小放大画面、翻页、移动等操作。4.3.2 插入FlashPaper1、在“文档”窗口中，将插入点放在页面上想要显示 FlashPaper 文档的位置，然后选择“插入”“媒体”“FlashPaper”。2、在“插入 FlashPaper”对话框中，浏览到一个 FlashPaper 文档并将其选定。3、如果需要，通过输入宽度和高度（以像素为单位）指定 FlashPaper 对象在网页上的尺寸。4、单击“确定”在页面中插入文档。l因为 FlashPaper 文档是 SWF 文件，所以页面上将出现一个 SWF 文件占位符。5、若要预览 FlashPaper 文档，请单击该占位符，然后单击属性检查器中的“播放”按钮。6、单击“停止”可以结束预览。FlashPaper 工具栏在浏览器中具有全部功能。7、如果需要，在属性检查器中设置其它属性。4.3.3 插入Flash视频lFlash 视频是一种新的流媒体视频格式，其文件扩展名为“.flv”。Flash视频文件极小、加载速度极快，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。网站的访问者只要能看Flash动画，就能看flv格式视频，而无需再额外安装其它视频插件，使得网络观看视频文件成为可能。l目前国内外网站提供的视频内容可谓各有千秋，但它们无一例外的都使用了flv格式作为视频播放载体，下面来学习如何在Dreamweaver CS4中插入Flash视频。具体操作步骤如下：4.3.3 插入Flash视频l累进式下载视频 将 FLV 文件下载到站点访问者的硬盘上，然后进行播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视频文件。l流视频 对视频内容进行流式处理，并在一段可确保流畅播放的很短的缓冲时间后在网页上播放该内容。若要在网页上启用流视频，您必须具有访问 Adobe Flash Media Server 的权限。lURL 指定 FLV 文件的相对路径或绝对路径。l外观 指定视频组件的外观。l宽度 以像素为单位指定 FLV 文件的宽度。若要让 Dreamweaver 确定 FLV 文件的准确宽度，请单击“检测大小”按钮。如果 Dreamweaver 无法确定宽度，您必须键入宽度值。4.3.3 插入Flash视频l高度 以像素为单位指定 FLV 文件的高度。若要让 Dreamweaver 确定 FLV 文件的准确高度，请单击“检测大小”按钮。如果 Dreamweaver 无法确定高度，您必须键入高度值。l注：“包括外观”是 FLV 文件的宽度和高度与所选外观的宽度和高度相加得出的和。l限制高宽比 保持视频组件的宽度和高度之间的比例不变。l自动播放 指定在 Web 页面打开时是否播放视频。l自动重新播放 指定播放控件在视频播放完之后是否返回起始位置。4.3.3 插入Flash视频1、编辑 FLV 组件l在 Dreamweaver 的“文档”窗口中，单击视频组件占位符中央的 FLV 图标以选择该占位符。l打开属性检查器（“窗口”“属性”）进行更改。l注：不能使用属性检查器更改视频类型（例如，从“累进式下载”更改为“流式”）。若要更改视频类型，请删除 FLV 组件，然后通过选择“插入”“媒体”“FLV”重新插入该组件。2、删除 FLV 组件l 在 Dreamweaver 的“文档”窗口中选择 FLV 组件占位符，然后按 Delete。4.4 插入Shockwave动画lShockwave是Adobe公司开发的标准的网络交互多媒体的压缩文件格式。Shockwave提供了强大的、可扩展的脚本引擎，使得它可以制作聊天室、操作html、解析xml文档、控制矢量图形。Shockwave动画是用Director制作，文件扩展名是“.dcr”。同Flash一样，播放Shockwave动画，需要安装播放器插件。从Adobe网站上即可下载Adobe Shockwave player。下面具体介绍如何在Dreamweaver CS4中插入Shockwave动画。4.5 插入Applet对象l名称 指定用来标识 applet 以撰写脚本的名称。l宽和高 指定 applet 的宽度和高度（以像素为单位）。l代码 指定包含该 applet 的 Java 代码的文件。单击文件夹图标以浏览到某一文件，或者输入文件名。l基址 标识包含选定 applet 的文件夹。l对齐 确定对象在页面上的对齐方式。l替换 指定在用户的浏览器不支持 Java applet 或者已禁用 Java 的情况下要显示的替代内容（通常为一个图像）。如果您输入文本，Dreamweaver 会插入这些文本并将它们作为 applet 的 alt 属性的值。如果您选择一个图像，Dreamweaver 将在开始和结束 applet 标签之间插入 img 标签。l垂直边距和水平边距 以像素为单位指定 applet 上、下、左、右的空白量。l参数 打开一个用于输入要传递给 applet 的其它参数的对话框。