多媒体应用、模板及库.ppt

$知识目标掌握在Dreamweaver8中插入音频文件的方法掌握在Dreamweaver8中插入Flash文件的方法掌握在Dreamweaver8中嵌入视频文件的方法8能力目标掌握在网页中插入各种音频文件的操作掌握在网页中插入Flash文件的操作掌握在网页插入视频文件的操作,第10章网页中的多媒体应用,10.1在网页中插入音频10.2在网页中插入Flash动画10.3在网页中插入视频本章小结,第10章网页中的多媒体应用,10.1在网页中插入音频,10.1.1链接到音频文件10.1.2在网页中嵌入音频文件10.1.3在网页加入背景音乐,1打开网页文档，选择链接到音频文件的链接载体。2在“属性检查器”中单击“链接”后的“浏览”按钮，打开选择文件对话框，如图所示。3选择要链接的音频文件,如yxdchb.wam4单击“确定”，退出对话框，文字加入了音频链接。5保存并在浏览器中预览网页，播放音频文件。,10.1.1链接到音频文件,10.1在网页中插入音频,1打开要嵌入音频文件的网页，定位光标在要插入音频的位置。如左图所示。2单击菜单栏中“插入”|“媒体”|“插件”命令，打开选择文件对话框，选择要插入的音频文件，在网页插入相应的音频文件，如右图所示。,10.1.2在网页中嵌入音频文件,10.1在网页中插入音频,3保存并在浏览器中预览网页，播放器没有完全显示出来，如左图所示。4返回Dreamweaver8，选择插件，在属性面板中设置高度和宽度值，到播放器完全显示，浏览者可以对音频文件的播放进行控制。如右图所示。,10.1.2在网页中嵌入音频文件,10.1在网页中插入音频,1打开要加入背景音乐的网页，定位光标在网页起始位置，如图所示。2单击菜单栏中“插入”|“媒体”|“插件”命令，打开选择文件对话框。3在“选择文件”对话框，选择要插入的音频文件，单击“确定”，网页中插入了音频插件。,10.1.3在网页加入背景音乐,10.1在网页中插入音频,4选择音频插件，单击“属性检查器”中的“参数”按钮，打开参数对话框，如图所示。5在对话框中,“+”可以增加参数,输入下列参数和值:参数“hidden”，值为“true”;参数“autostart”，值为“true”;参数“loop”，值为“infinite”。6单击“确定”，为网页添加了背景音乐。7保存并在浏览器中预览网页，观看效果。,10.1.3在网页加入背景音乐,10.1在网页中插入音频,10.2在网页中插入Flash动画,10.2.1插入Flash文本10.2.2插入Flash按钮10.2.3插入Flash动画,1新建并保存网页,定位光标在插入Flash文本的位置.2执行以下操作之一：单击菜单栏中“插入”|“媒体”|“Flash文本”命令。在“插入”栏的“常用”类别中，选择“媒体”，单击“Flash文本”如图所示。,10.2.1插入Flash文本,10.2在网页中插入Flash动画,3打开插入Flash文本对话框，如图所示。,10.2.1插入Flash文本,10.2在网页中插入Flash动画,4对话框主要设置如下：“字体”:设置Flash文本的字体,设为“华文新魏”。“大小”:设置Flash文本的字号大小，设为“18”。“颜色”：设置Flash文本的颜色。“转滚颜色”:设置当鼠标经过文本时，文本的颜色。“文本”：输入文本内容。“链接”：设置Flash文本的链接目标。“背景色”：设置Flash文本的背景颜色。“另存为”：保存插入的Flash文本的文件，单击浏览可以选择文件的存放位置。,10.2.1插入Flash文本,10.2在网页中插入Flash动画,5对话框设置完成，单击“确定”按钮，在网页插入了Flash文本，如图所示。6保存并在浏览器中预览网页，观看效果。,10.2.1插入Flash文本,10.2在网页中插入Flash动画,1新建并保存网页，定位光标在要插入Flash按钮的位置。2执行以下操作之一：单击菜单栏中“插入”|“媒体”|“Flash按钮”命令。在“插入”栏的“常用”类别中，选择“媒体”，单击“Flash按钮”。,10.2.2插入Flash按钮,10.2在网页中插入Flash动画,3打开插入Flash按钮对话框，如图所示。,10.2.2插入Flash按钮,10.2在网页中插入Flash动画,4对话框主要设置如下：“样式”：在下拉列表中选择Flash按钮的样式，如选择“DiamondSpinner”。“范例”：预览选择的样式。“按钮文本”：输入Flash按钮上的文本，如输入“返回首页”。“字体”：设置Flash按钮上文本的字体，如设置为“华文行楷”。“大小”：设置Flash按钮上文本的字号大小，如设置为“16”。“链接”：设置Flash按钮的链接目标。“背景色”：用于设置Flash按钮的背景颜色。“另存为”：保存插入的Flash按钮的文件，单击浏览可以选择文件的存放位置。,10.2.2插入Flash按钮,10.2在网页中插入Flash动画,5对话框设置完成，单击“确定”按钮，在网页插入了Flash按钮，如图所示。6保存并在浏览器中预览网页，观看效果。,10.2.2插入Flash按钮,10.2在网页中插入Flash动画,1新建并保存网页，定位光标在要插入Flash动画的位置。2执行以下操作之一：单击菜单栏中“插入”|“媒体”|“Flash”命令。在“插入”栏的“常用”类别中，选择“媒体”，单击“Flash”。3打开选择文件对话框。选择要插入的Flash文件，如选择“huanyin.swf”。,10.2.3插入Flash动画,10.2在网页中插入Flash动画,4单击“确定”按钮，则Flash动画插入了网页中。5选中插入的Flash动画，单击属性检查器上的“播放”按钮，播放动画观看效果，也可以在浏览器中观看。,10.2.3插入Flash动画,10.2在网页中插入Flash动画,10.3在网页中插入视频,10.3.1链接到视频文件10.3.2在网页中嵌入视频文件,链接到视频文件与链接到音频文件是一样的，是一种超链接，链接的目标是一个视频文件。链接到视频文件的操作与链接到音频文件是一样，只在选择文件时，选择视频文件就可以了。,10.3.1链接到视频文件,10.3在网页中插入视频,嵌入视频是将视频直接插入到页面中，页面带有播放器，浏览者可以控制播放。但只有在访问者具有所嵌入视频文件的播放器时，才可以播放。嵌入音频文件的操作与嵌入音频文件的操作相同，在“选择文件”对话框，选择要嵌入的视频文件就可以了。,10.3.2在网页中嵌入视频文件,10.3在网页中插入视频,本章小结,第10章网页中的多媒体应用,$知识目标了解Dreamweaver8模板和库的作用熟悉Dreamweaver8模板和库的操作方法8能力目标掌握模板和库项目的创建操作能够应用模板和库设计网页掌握利用模板和库更新页面的方法,第11章模板和库,11.1模板11.2库本章小结,第11章模板和库,11.1模板,11.1.1创建模板11.1.2删除模板11.1.3.编辑模板11.1.4由模板创建网页11.1.5更新模板,（一）创建空白模板1单击菜单栏中“窗口”|“资源”命令，打开“资源”面板。2单击“资源”面板左边的“模板”按钮，显示“模板”类别，如图所示。,11.1.1创建模板,11.1模板,（一）创建空白模板3单击面板底部的“新建”按钮，面板中出现一个未命名的模板，如图所示。4输入新的模板名字，则新建一个空白模板。,11.1.1创建模板,11.1模板,（二）将己有网页文件保存为模板1打开己编辑好的要保存为模板的网页文件。2单击菜单栏中的“文件”|“另存为模板”命令。3打开“另存为模板”对话框，如图所示。4各项设置如下：“站点”：下拉列表中选择模板存放的站点。“另存为”：文本框中输入模板的名称。“现存模板”：显示当前系统中己有的模板文件。5单击“保存”按钮，新增的模板出现在“资源”面板的模板列表中。,11.1.1创建模板,11.1模板,对于没用的模板可以删除，删除模板的操作为：1打开“资源”面板，选择“模板”类别。2选择要删除的模板。3单击“删除”按钮，即可删除所选模板。,11.1.2删除模板,11.1模板,（一）设计模板以下图所示的模板为例设计模板的操作为：,11.1.3编辑模板,11.1模板,1在“资源”面板的“模板”类别中，双击新建的“index”模板，打开模板文件。2输入“长春介绍”，设置字体字号。3插入水平线，宽度设为85%，高度为“3”，无阴影。4插入“导航条”。5输入“长春是个具有欧洲田园城市规划特点的城市，”等文本，并排版。6添加网页背景图像“snow.gif”7单击菜单栏中“文件”|“保存”命令，保存己设计好的模板。,11.1.3编辑模板,11.1模板,（二）设置可编辑区域将上面建立的模板中“水平线”和“导航条”以外的部分设置为可编辑区域，设置可编辑区域的操作为：1打开己设计的模板文件index.dwt。2选择“长春介绍”。3单击菜单栏中“插入|模板对象|可编辑区域”命令4打开新建可编辑区域对话框，如图所示。,11.1.3编辑模板,11.1模板,5在“名称”文本框输入可编辑区域名称。6单击“确定”，退出“可编辑区域对话框”，建立的“可编辑区域”为绿色框线区域，如图所示。7用相同的操作将“长春是个具有欧洲田园城市规划特点的城市，”等文本设置为可编辑区域。8完成的模板页如图所示。,11.1.3编辑模板,11.1模板,（三）删除可编辑区域1打开模板文件，单击选择模板中的可编辑区域左上角的名称，选中可编辑区域，如图所示。2单击菜单栏中“修改”|“模板”|“删除模板标记”命令，即可删除可编辑区域。,11.1.3编辑模板,11.1模板,（一）由模板创建网页1单击菜单栏中“文件”|“新建”命令。2打开新建文档对话框，单击模板选项卡，如图所示。3选择要使用的模板，单击“创建”则由模板创建了一个新网页。4由模板创建的网页，只可对模板中“可编辑区域”进行编辑。,11.1.4由模板创建网页,11.1模板,（二）将己有网页应用模板除了可以由模板创建网页，也可以将网页应用己有的模板，应用模板的操作为：1打开要应用模板的网页文件。2执行以下操作之一：单击菜单栏中“修改”|“模板”|“套用模板到页”命令。在“资源”面板中，选择要应用的模板，单左下角的“应用”按钮。3网页应用了所选模板。,11.1.4由模板创建网页,11.1模板,（）更新模板在Dreamweaver8中，当模板被重新编辑或修改，保存模板后，会自动打开“更新模板文件”对话框（如图），单击“更新”按钮，更新文档。,11.1.5更新模板,11.1模板,（）更新模板手动更新的操作为：1执行以下操作之一，打开更新页对话框（图）在“资源”面板中，右击要更新的模板文件，在弹出的快捷菜单中选择“更新站点”。单击菜单栏中“修改”|“模板”|“更新站点”命令。,11.1.5更新模板,11.1模板,（）更新模板2在“查看”下拉列表中选择更新的范围。有一个选项：选择“整个站点”，在右侧可以选择站点名称，更新所选站点中的所有文件；选择“文件使用”，在右侧右以选择模板名称，更新当前站点中使用所选模板的所有页面。3在“更新”选项中，选择“模板”选项。4单击“开始”按钮，开始更新站点或网页。更新完毕后，系统会给出一个更新报告。5更新结束，关闭“更新页面”对话框即可。,11.1.5更新模板,11.1模板,（二）将网页从模板中分离由模板中创建的网页与模板有链接关系，模板改变会影响网页。如不希望网页与模板有联系，可以将网页从模板中分离，分离后的网页不再受模板的影响。网页从模板中分离的操作为：1打开要分离的网页。2单击菜单栏中“修改”|“模板”|“从模板中分离”命令，网页从模板中分离。,11.1.5更新模板,11.1模板,11.2库,11.2.1创建库项目11.2.2删除库项目11.2.3应用库项目11.2.4更新库项目,（一）创建空白库项目1单击菜单栏中的“窗口”|“资源”命令，打开“资源”面板,单击左下角的库按钮,切换到“库”类别,如左图所示2单击面板底部的“新建”按钮，面板中出现一个未命名的库，如右图所示。3输入新的库项目名字，则新建一个空白库项目。,11.2.1创建库项目,11.2库,（二）为库添加内容1在“资源”面板“库”类别中，双击要编辑的库，将库打开。2除了不能设置页面属性外，编辑库与编辑普通网页一样的操作是一样的。,11.2.1创建库项目,11.2库,（三）基于选定内容创建库项目以如把图中版权信息内容编辑为一个库项目为例1选中作为库项目的内容。2执行以下操作之一：单击菜单栏中“修改”|“库”|“增加对象到库”命令。拖动选中的内容到“资源”面板指向“库”类别按钮。,11.2.1创建库项目,11.2库,（三）基于选定内容创建库项目3“资源”面板“库”类别中，出现一个未命名的库，如图所示。4为库项目重新命名，如命名为“banquan”。,11.2.1创建库项目,11.2库,对于没用的库项目可以删除，删除库项