第9章 插入多媒体

.,第9章插入多媒体,.,9.1网页的动感效果设计9.2插入Flash对象9.3插入其它多媒体元素9.4插入第三方插件9.5实战演练,.,多媒体是由多种媒体构成的共同表示、传播和存储信息的媒体。如声音、动画、交互控件。可插入的多媒体元素包括：Flash动画，Flash按钮，Flash文本、JavaApplet小程序或者其他一些音频或视频对象。,.,插入多媒体文件src-用来设置插入的多媒体文件的地址或名称。注意：文件后面一定要加上后缀名称,.,9.1插入Flash对象,Flash是一种高质量的矢量动画，它由Macromedia的Flash动画制作软件创建。Flash动画的优点：文件小，网上传输快。可以任意调整大小而仍保持清晰效果，可播放mp3声音，可设置超级链接。在Dreamweaver8中可以插入多种Flash对象包括：Flash动画、Flash按钮、Flash文本、Flash视频、Flash元素（图像查看器）、Flash文档等。,.,插入Flash动画的操作步骤：将插入点置于要插入Flash影片的位置。选择【插入】|【媒体】|【Flash】命令，或【常用】/【媒体Flash】插入栏中Flash命令。在弹出的对话框中选择一个*.swf文件。插入的Flash动画显示为一个灰色的方框，里面有Flash标志。单击【属性】面板上的【播放】按钮，可预览动画。,9.2.1插入Flash动画,.,插入Flash动画,设置Flash影片属性：【Flash】:影片的名称。【宽】和【高】：以像素为单位指定影片的宽度和高度。【文件】：指定指向Flash（*.swf）或Shockwave文件的路径。【源文件】指定指向Flash源文档(fla)的路径。,.,【编辑】可以启动MacromediaFlashMX2004以更新fla文件。【重设大小】将选定影片返回到其初始大小。【循环】选中则连续播放。,.,插入Flash动画属性：,【自动播放】选中则在加载页面时自动播放。【垂直边距】和【水平边距】指定空白的像素值。【品质】控制抗失真度。【比例】确定影片如何适合在【宽】和【高】文本框中设置的尺寸。,.,【对齐】确定影片在页面上的对齐方式。【背景颜色】指定影片区域的背景颜色。【参数】打开一个对话框，可在其中输入传递给影片的附加参数,.,9.2.2插入Flash按钮,可制作根据鼠标的显示不同效果的按钮。操作步骤如下：将光标放到要插入Flash按钮对象的位置。选择【插入】|【媒体】|【Flash按钮】命令，或单击【插入】面板上【常用】|【媒体】|【Flash按钮】，打开【插入Flash按钮】对话框.设置完成后单击“确定”按钮。,.,9.2.3插入Flash文本,使用Flash文本功能可以在Dreamweaver中制作滚动效果的文本。而且可以设定链接。Dreamweaver制作的Flash按钮和Flash文本将另存为*.swf文件,.,插入Flash文本,操作步骤如下：将光标放到要插入Flash文本对象的位置。选择【插入】|【媒体】|【Flash文本】命令，或单击【插入】栏上【常用】|【媒体】|【Flash文本】，打开【插入Flash文本】对话框.可设置转滚颜色。当鼠标经过文本，则文本变色。设置完成后单击“确定”按钮。,.,操作步骤如下：将光标放到要插入Flash元素的位置。选择【插入】|【媒体】|【图像查看器】命令，打开【保存Flash元素】对话框。输入一个文件名，单击“保存”按钮。在属性面板中设置宽和高，设置对齐方式。,9.2.4插入图像查看器,.,Flash图象查看器的属性设置,选中Flash图象查看器，在右侧的面板中会看见“Flash元素”面板。在这个面板中进行相关参数的设置。,.,主要设置属性：,imageLinks(图片的链接)，单击文本框右边的图标，在打开的编辑对话框中添加图象链接,.,imageURLs(图片的位置)单击文本框右边的图标，在打开的编辑对话框中添加图象源文件,.,设置其他属性：ShowControls=否（不显示控制条）SlideAutoPlay是（自动播放）SlideLoop是（循环播放）SlideDelay5（切换间隔的时间）设置完成后，预览,.,JavaApplet程序Java是一种允许开放并可以嵌入Web页面的应用程序语言。JavaApplet是在Java的基础上演变而成的应用程序，它可以嵌入到网页中用来执行一定的任务。,9.3插入JavaApplet小程序,.,操作步骤如下：将光标放到要插入Applet小程序的位置。选择【插入】|【媒体】|【Applet】命令，或者单击【插入】面板上【常规】|【媒体】|【Applets】按钮，打开【选择文件】对话框，从对话框中选择扩展名为.class的文件。选中插入到页面中的Applet图标，打开属性面板，设置其属性。,插入JavaApplet小程序,.,插入ActiveX控件,ActiveX控件是一种由特定功能的软件。可以充当浏览器插件的可重复使用的组件。如在网页中加上一些不同功能的ActiveX控件可以播放AVI图象文件,.,操作步骤如下：将光标放到要插入ActiveX对象的位置。选择【插入】|【媒体】|【ActiveX】命令或者单击【插入】面板上【常规】|【媒体】|【ActiveX】按钮，即可在文档中插入ActiveX对象。选中ActiveX对象图标，打开它的属性面板，设置其属性。,8.6插入ActiveX控件,.,插入ShockWave影片,ShockWave是Macromedia公司制定的一种用于网页中进行媒体交互的标准，是一种被压缩的文件。ShockWave在网络上能被快速下载，并可在绝大多数浏览器中播放播放ShockWave影片必须使用相应的播放器。在IE中用Activex控件来实现。,.,操作步骤如下：将插入点置于要插入Shockwave影片的位置。选择【插入】|【媒体】|【Shockwave】命令，或【常用/媒体】插入栏中Shockwave图标。插入的Flash动画显示为一个灰色的方框，里面有Shockwave标志。选中此影片标记，在属性面板中设置其相关属性。,插入Shockwave影片,.,9.4插件,插件：当在互联网浏览时，常常会遇到一些浏览器无法自行处理的文件，如三维动画文件。为了解决这些问题，发展出一些软件模块，可以和浏览器结合在一起处理这些文件。这些软件就是插件,.,插入第三方插件,安装扩展插件利用插件可以增强Dreamweaver8的功能。在网站可以下载第三方插件，大部分是免费的。插入第三方插件的操作方法：在【文档】窗口中，将插入点置于要插入ActiveX控件的地方。选择【插入】栏|【常用】|【媒体】|【插件】图标，或【插入】|【媒体】|【插件】出现的图标会标记出页面中插件将在页面上出现的位置。,.,9.5实战演练,一、实战要求添加Flash元素。添加Applet小程序。添加背景音乐。,.,实战演练,网页的动感效果设计页面基本制作创建站点设其默认的文件夹为D:cf-duomeitiimages创建主页文件设置标题,.,Banner条的制作,（透明背景的Flash)插入11的表格T1，宽为770px，高为123px，边框等均为0。选中表格，将其背景图象设为imagesbanner.jpg将光标置于表格中，单击插入栏|常用|媒体|Flash,.,在弹出的对话框中，选择flashhengline.swf单击“确定”。再选中Flash，在属性面板中设置宽度为770px，高为123px。将动画背景设为透明。再选中Flash，在属性面板中单击“参数”按钮，设置参数为wmode,值为transparent.,.,导航条的制作,在表格T1下插入11表格T2，宽为770px，边框均为0。将光标置于表格T2中，设为居中对齐插入Flash按钮。选择样式”Soft-Raspberry”,在按钮文本处输入文字“页面1”。单击确定以同样的方法在页面中再插入3个Flash按钮。按钮文本分布为“页面2”，“页面3”，“页面4”,.,制作正文区,在表格T2下插入21表格T3，宽为770px，边框均为0。打开素材“正文文本.txt”，复制标题下的第一自然段到第1个单元格。其余文本复制到第2单元格。打开CSS样式面板，可以用CSS格式化页面。,.,双击body样式，在“body的CSS规则定义”对话框中，设置正文文字大小为12pt，行高为24px在CSS样式面板中，单击“”按钮，添加自定义样式.line。在新建CSS规则中，选择器类型为类，名称输入”.line”选择定义在“仅对该文档”,.,在打开的“.line的CSS规则定义”对话框中，选择“边框”类别，设置参数，如图所示,.,插入Flash文本,选择表格T3，在其属性面板的“类”下拉列表框中选择”.line”.插入Flash文本将光标置于表格T3的第一单元格最前面单击Flash文本在弹出的对话框中，文本输入“真的,想牵一次你的手”，设置文本颜色和转滚颜色，以及字体和字号等。,.,在插入的Flash文本后回车换行。设置其他文本为“华文行楷”，大小为18，颜色为”#FF33CC”,.,插入图象查看器,将光标定位于Flash文本后，选择菜单插入|媒体|图象查看器在弹出的“保存Flash元素”对话框中指定所生成的Flash动画文件的名称和存放位置。单击保存将该元素设为200135px大小，右对齐修改imagelinks和imageURLs属性,.,ShowControls=否（不显示控制条）SlideAutoPlay是（自动播放）SlideLoop是（循环播放）SlideDelay5（切换间隔的时间,.,插入Applet小程序,将光标定位于T3第2单元格的最前面。插入APPLET按钮在弹出的对话框中选择“Lake.class”文件在页面中选择Applet图标，在属性面板中，单击“参数”按钮，设置参数为image，参数值