第9章多媒体课件制作.docx
- 文档编号:12815229
- 上传时间:2023-06-08
- 格式:DOCX
- 页数:46
- 大小:1.83MB
第9章多媒体课件制作.docx
《第9章多媒体课件制作.docx》由会员分享,可在线阅读,更多相关《第9章多媒体课件制作.docx(46页珍藏版)》请在冰点文库上搜索。
第9章多媒体课件制作
第九章网络课件中多媒体信息的呈现
文本是网络课件教学内容的核心部分,同时为了使得网络课件更加生动,还经常需要在网络课件使用图片、声音、视频、动画等多媒体内容。
通过本章的学习,读者应了解和掌握以下内容:
●在网络课件中呈现和编辑文本的方法
●使用CSS控制文本样式
●在网络课件中呈现图片的方法
●在网络课件中呈现音、视频的方法
●在网络课件中呈现Flash动画的方法
9.1在课件页面中呈现文本信息
文本是网络课件的重要组成部分,在制作网络课件时往往需要使用大量的文本,以向课件使用者提供完整和详细的教学内容。
当用户启动Dreamweaver,打开已有的HTML文档或创建一个新的HTML文档时,在设计窗口中会有一个闪烁的光标,这就是文本插入点的默认位置。
用户可以在此通过键盘输入文本。
用户也可以使用“复制”或者“剪切”命令,将选择的文本复制到Windows剪贴板中,然后使用“粘贴”命令将文本将剪贴板中的文本插入到光标所在的文本插入点。
【实例9_1】木兰诗-课文导读-全文欣赏(qwxs.html)页面的制作
(1)启动Dreamweaver8,双击打开“木兰诗\kwdd\”文件夹中的qwxs.html文档。
(2)选择“插入”栏中的“布局”选项卡,切换到布局插入栏在文本插入点。
(3)单击布局插入栏的“布局表格”按钮
,当鼠标指针变为+形状时,在文档中拖动鼠标绘制一个布局表格,如图9-1所示。
图9-1绘制布局表格
(4)单击布局插入栏的“布局单元格”按钮
,当鼠标指针变为+形状时,在绘制的布局表格中拖动鼠标绘制如图9-2所示的两个布局单元格。
(5)将光标定位在左侧的布局单元格内,输入《木兰诗》的标题和正文内容,每一段落输入完毕按回车键确认,如图9-3所示。
(6)选中标题,单击文本属性检查器中的【居中对齐】按钮
,将标题“木兰诗”居中,单击文本属性检查器中的【文本颜色】按钮
设置标题文本的颜色为红色,单击文本属性检查器中的【大小】下拉列表框,设置标题文本的大小为18,如图9-4所示。
图9-2绘制布局单元格
图9-3输入标题和正文
图9-4设置标题的对齐、颜色和大小
操作提示1:
如何在正文段落的开头输入连续的空格?
使用“编辑”→“首选参数”命令,在【首选参数】对话框中选中【常规】分类,然后在编辑选项中选中【允许多个连续的空格】即可。
操作提示2:
在网络课件的制作中,经常需要设置文本的大小、字体、颜色等属性,那么如何对文本进行编辑呢?
在Dreamweaver中,用户可以使用文本的属性检查器,完成文本格式的设置。
图9-5文本属性检查器
●设置文本的字体
选中需改变字体的文本,单击文本属性检查器中的【字体】下拉列表框,选择合适的字体组合即可,如图9-6所示。
图9-6“字体”下拉列表框
用户还可以使用“编辑字体列表”编辑字体组合,如图9-7所示。
图9-7“编辑字体列表”对话框
在“编辑字体列表”对话框中,“字体列表”列表显示当前已编辑好的字体组合,“可用字体”列表显示了当前可以使用的,欲添加进字体组合的字体,“选择的字体”列表显示当前选中的字体列表中包含的字体,
为添加和删除字体按钮。
●设置文本的字号
选中需改变字号的文本,单击文本属性检查器中的【大小】下拉列表框,选择所需的字号。
在文本字号的设置过程中会自动产生与文本大小相对应的样式。
●设置文本的颜色
选中需改变颜色的文本,单击文本属性检查器中的【文本颜色】按钮
,打开“颜色”对话框选择所需的文本颜色,如图9-8所示。
图9-8设置文本颜色图9-9应用标准格式
●运用段落和标题
在Dreamweaver中定义了多种标准文本格式,只需要将光标定位在段落内或选中段落中的全部或部分文本,使用文本属性检查器中的【格式】下拉菜单应用标准文本格式,如图9-9所示。
●设置文本的对齐
在制作网络课件的过程中,要设置文本段落在页面上的对齐方式,只需选中要设置对齐方式的文本,单击文本属性检查器中的【左对齐】按钮
,【居中对齐】按钮
,【右对齐】按钮
,【两端对齐】按钮
。
操作提示3:
插入特殊字符
在制作网络课件的过程中,经常需要插入多种特殊符号,如版权符号,货币符号,注册商标号等。
选择“插入”工具栏中的“文本”选项,然后单击【字符:
其他字符】按钮
旁边的下拉箭头,在弹出的菜单中选择要插入的字符类型即可。
操作提示4:
插入水平线
要在文档中插入水平线,可以选择“插入”工具栏中的“HTML”选项,然后单击【水平线】按钮
即可。
或者使用“插入”→“HTML”→“水平线”命令。
操作提示5:
插入日期
要在文档中添加日期,可以使用“插入”→“日期”命令,或者选择“插入”工具栏中的“常用”选项,切换到常用插入栏,单击【日期】按钮
,打开“插入日期”对话框,在其中选择“星期格式”、“日期格式”、“时间格式”后,确定即可。
9.2控制页面文本――使用CSS样式
在HTML语法中,常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签,而CSS就是在开始制作网页时就将这些设定做好,不需要在制作网页文档时再反复写入同样的标签。
9.2.1CSS简介
CSS样式是CascadingStyleSheet(层叠样式表)的简称,利用它可以对网页中的文本进行精确的格式化控制。
在CSS样式之前,HTML样式被广泛应用,HTML样式用于控制单个文档中某范围内文本的格式。
而CSS样式与之不同,它不仅可以控制单个文档中的多个范围内文本的格式,而且可以控制多个文档中文本的格式。
用户使用属性检查器或菜单命令应用于文本的样式将自动创建CSS规则,也可以使用“CSS样式”面板创建和编辑CSS规则和属性。
操作提示6:
认识CSS样式面板
使用“CSS样式”面板可以创建CSS样式、查看CSS样式的属性以及将CSS样式应用于当前文档中。
选择“窗口”→“CSS样式”,按Shift+F11键,可以打开“CSS样式”面板。
在Dreamweaver中打开《木兰诗》网络课件中的index.html文档,然后打开“CSS样式”面板,如图9-10所示。
图9-10“CSS样式”面板
Dreamweaver中的“CSS样式”面板分为上下两部分,上边部分列出了所有样式的名称。
如.STYLE5,.STYLE8,.STYLE9(自己定义的样式都是以“.”开头,)和css.css。
下边部分列出了该CSS样式的具体内容。
单击“CSS样式”面板底部的
、
、
、
按钮,可以对CSS样式进行附加样式表、新建CSS规则、编辑样式和删除操作CSS规则。
9.2.2创建和使用CSS样式
默认情况下,Dreamweaver使用层叠样式表(CSS)设置文本格式。
CSS样式有两种存在方式:
一、“内嵌”到当前文档中
该方式将CSS语法直接写在标签内(置于head文件头中),仅在其所在的网页使用。
其他网页要使用时需要先将内部样式表通过选择“文件”→“导出”→“CSS样式”命令的方式导出才可使用。
用户使用文本属性检查器或菜单命令应用于文本的样式将自动创建CSS规则,这些规则嵌入在当前文档的头部。
【实例9_2】创建和使用当前文档中嵌入样式
(1)启动Dreamweaver8,双击打开“木兰诗”文件夹中的index.html文档。
(2)选择“窗口”→“CSS样式”,或按Shift+F11键,打开“CSS样式”面板。
(3)单击“CSS样式”面板底部的【新建CSS规则】
按钮,打开“新建CSS规则”对话框。
(4)在“新建CSS规则”对话框的“选择器类型”选项区域选择“类”单选按钮,在名称文本框输入文字“STYLE8”,在“定义在”选项区域选择“仅对该文档”单选按钮,然后单击“确定”按钮,如图9-11所示。
图9-11“新建CSS规则”对话框
(5)在“新建CSS规则”对话框中单击“确定”按钮后,打开“CSS规则定义”对话框,在“分类”列表框中选择“类型”选项,然后在对话框右侧的“类型”选项区域设置“大小”为16,“粗细”为粗体,如图9-12所示。
(6)在“CSS规则定义”对话框中单击“确定”按钮后,即可在CSS样式面板中创建名称为“STYLE8”的CSS样式。
(7)对index.html中的文本应用STYLE8样式
●方法一:
选择文本“课文导读”,然后再CSS样式面板中选中STYLE8样式,在STYLE8样式上右键单击,在弹出的快捷菜单中选择“套用”命令。
●方法二:
选择文本“课文导读”,单击文本属性检查器中的“样式”下拉列表,选择STYLE8样式。
●方法三:
选择文本“课文导读”,右键单击,在弹出的快捷菜单中选择“CSS样式”命令中的STYLE8样式。
●依次选取文本“脉络梳理”、“历史述评”、“快乐影音”、“巩固提高”,应用STYLE8样式。
图9-12“STYLE8的CSS规则定义”对话框
操作提示7:
认识“新建CSS规则”对话框中的“选择器类型”选项区域
“新建CSS规则”对话框中的“选择器类型”选项区域中有三个选项,分别是:
●类
●标签
●高级
“类”选项针对自行设计的CSS样式,若要创建可作为class属性应用于文本范围或文本块的自定义样式,请选择“类”选项,并自定义样式名称,然后在“CSS规则定义”对话框设计样式组合。
“标签”选项针对HTML标签的默认格式设置,用户只能选取列表中的标签名称进行样式调整,而无法新建名称。
因此,若要对如
、、
、
等特定HTML标签的默认格式设置重新定义,请选择“标签”选项。“高级”选项主要是使用在超级链接上的设定,可以在其中设定鼠标交互效果,包括一般状态、已链接状态、鼠标滑过状态、鼠标单击后的状态。
二、独立存放在一个文件中
这类文件的扩展名为.css。
【实例9_3】外部CSS文件css.css的创建
(1)启动Dreamweaver8,双击打开“木兰诗”文件夹中的index.html文档。
(2)选择“窗口”→“CSS样式”,或按Shift+F11键,打开“CSS样式”面板。
(3)单击“CSS样式”面板底部的【新建CSS规则】
按钮,打开“新建CSS规则”对话框。
(4)在“新建CSS规则”对话框的“选择器类型”选项区域选择“高级”单选按钮,单击“选择器”下拉列表按钮,在弹出的列表中选择“a:
link”选项,在“定义在”选项区域选择“新建样式表文件”,然后单击“确定”按钮,如图9-13所示。
图9-13“新建CSS规则”对话框
(5)在“新建CSS规则”对话框中单击“确定”按钮后,打开“保存样式表文件为”对话框,在该对话框选择保存路径和保存文件名,然后单击“确定”按钮如图9-14所示。
图9-14“保存样式表文件为”对话框
(6)在“保存样式表文件为”对话框中单击“确定”按钮后,打开“CSS规则定义”对话框,在“分类”列表框中选择“类型”选项,然后在对话框右侧的“类型”选项区域设置“颜色”为黑色,然后单击“确定”按钮,如图9-15所示。
图9-15“a:
link的CSS规则定义(在css.css中)”对话框
(7)重复步骤(4)和,但在“新建CSS规则”对话框的“选择器”下拉列表按钮,选择“a:
visited”选项,在“定义在”选项区域选择“css.css”,然后单击“确定”按钮。
在打开的“a:
visited”的CSS规则定义(在css.css中)”对话框中,在“分类”列表框中选择“类型”选项,设置“颜色”为黑色,然后单击“确定”按钮。
(8)重复步骤(4),但在“新建CSS规则”对话框的“选择器”下拉列表按钮,选择“a:
hover”选项,在“定义在”选项区域选择“css.css”,然后单击“确定”按钮。
在打开的“a:
hover”的CSS规则定义(在css.css中)”对话框中,在“分类”列表框中选择“类型”选项,设置“颜色”为红色,并选中“装饰”“下划线”复选框,然后单击“确定”按钮。
(9)重复步骤(4),但在“新建CSS规则”对话框的“选择器”下拉列表按钮,选择“a:
active”选项,在“定义在”选项区域选择“css.css”,然后单击“确定”按钮。
在打开的“a:
active”的CSS规则定义(在css.css中)”对话框中,在“分类”列表框中选择“类型”选项,设置“颜色”为红色,然后单击“确定”按钮。
【实例9_4】使用css.css修改链接的样式
(1)启动Dreamweaver8,双击打开“木兰诗\index.html”文档。
(2)选择“窗口”→“CSS样式”,按Shift+F11键,可以打开“CSS样式”面板。
(3)单击“CSS样式”面板底部的【附加样式表】按钮
,打开“链接外部样式表”对话框,如图9-15所示。
图9-15“链接外部样式表”对话框
(4)在“链接外部样式表”对话框中,单击“浏览”按钮,在打开的“选择样式表文件”对话框中选择“木兰诗\css.css”样式表文件,然后单击确定,如图9-16所示。
图9-16“选择样式表文件”对话框
(5)在“链接外部样式表”对话框中,选择“添加为”选项区域中的“导入”单选按钮,然后单击“确定”按钮将CSS样式表导入。
如果选择“添加为”选项区域中的“链接”单选按钮,则将CSS样式表链接到文档。
9.3编辑图像页面
图像是网络课件中重要的信息表现形式之一,图像不仅能使网页生动、形象、美观,而且能使网页中的内容更加丰富多彩,因此图像在网页中的作用是举足轻重的,是决定一个网络课件视觉效果的关键因素。
网络课件中使用最广泛的图像格式为GIF和JPEG图像。
GIF图像最多只能支持256种颜色,因此一般来说文件体积较小,适合在网络中使用。
JPEG支持的颜色数目较多,适合在需要表现细腻颜色细节的图像上使用,因此JPEG格式生成的文件体积较大,但由于JPEG格式图像具有较高的压缩率,也被广泛使用在网页中。
9.3.1插入并设置图像
一、插入图像
在Dreamweaver中插入图像非常方便,可以有以下方法:
●如果图像文件已经保存在站点中,只需要在站点管理器相应的文件夹下选中图像,用鼠标拖动到文档编辑窗口即可。
●可以使用“插入”→“图像”命令,或者选择“插入”工具栏中的“常用”选项,切换到常用插入栏,单击【图像:
图像】按钮
。
【实例9_5】在木兰诗\index.html文档中插入图像back3.gif
(1)启动Dreamweaver8,双击打开“木兰诗”文件夹中的index.html文档。
(2)将光标定位在index.html文档如图9-17所示的表格行中。
图9-17图像插入位置
(3)使用“插入”→“图像”命令,打开“选择图像源文件”对话框,选择“木兰诗\images\back3.gif”文件,然后单击“确定”按钮,如图9-18所示。
图9-18“选择图像源文件”对话框
操作提示8:
如果选择的文件不在定义的站点目录内,将弹出对话框询问是否将图像复制到根文件夹,如图9-19所示。
请选择“是”按钮,否则在以后将站点上传到服务器之后该图像就无法正常显示。
图9-19询问是否复制到根文件夹对话框
(4)在“选择图像源文件”对话框中,单击“确定”按钮后,将打开“图像标签辅助功能属性”对话框,如图9-20所示。
在该对话框中不做设置,直接单击“确定”按钮,就可将back3.gif图像插入到网页中,如图9-21所示。
图9-20“图像标签辅助功能属性”对话框
图9-21图像插入后的效果
操作提示9:
在“图像标签辅助功能属性”对话框的“替换文本”文本输入框中,可以输入图片的文字解释,当图片无法正常显示时,图片的位置就会显示文字注释。
二、设置图像属性
和输入文本之后需要进行编辑一样,在将图像插入到网页后也需要进行布局排版,同时来设定图像的各种属性。
当在网页中选中图像后,图像上会出现缩放手柄,如图9-22所示。
用鼠标拖动缩放手柄可以改变图像大小,但仅仅是改变在网页中显示的大小,并不能改变原图像尺寸。
图9-22缩放手柄
当在网页中选中图像后,可以在“属性”面板设置图像的属性。
【实例9_6】在木兰诗\index.html文档设置back3.gif的属性
(1)启动Dreamweaver8,双击打开“木兰诗”文件夹中的index.html文档。
(2)在图像back3.gif上单击,选中该图像。
(3)在图像属性面板中,设置图像宽为200,高为325。
设置后的效果如图9-23所示。
图9-23图像属性设置后的效果
操作提示10:
图像属性面板的使用
图像属性面板入图9-24所示。
图9-24图像属性面板
●宽、高:
设置图像的尺寸,默认单位为像素。
●源文件:
是图像的路径,单击后面的文件夹图标也可以选择其他图片。
●链接:
是链接的目标页面或者定位点的URL。
●目标:
链接时的目标窗口或框架。
_blank将链接的文件载入一个未命名的新浏览器窗口中。
_parent将链接的文件载入含有该链接的框架的父框架集或父窗口中。
如果包含链接的框架不是嵌套的,则链接文件加载到整个浏览器窗口中。
_self将链接的文件载入该链接所在的同一框架或窗口中。
此目标是默认的,所以通常不需要指定它。
_top将链接的文件载入整个浏览器窗口中,因而会删除所有框架。
●替换:
是图片的文字解释,当图片无法正常显示时,图片的位置就会显示文字注释。
●编辑:
启动图像编辑软件Firework图像进行编辑。
还可以执行优化、裁剪、重新取样亮度和对比度、锐化等操作。
●地图:
用于创建图像热点链接。
●垂直边距、水平边距:
沿图像的边缘添加边距(以像素为单位)。
●低解析度源:
指定在载入主图像之前应该载入的图像,即当前图片的低分辨率副本的路径。
如果图片很大,则先让浏览器下载显示一个文件较小的图片副本,浏览器装载完其他内容后再回头来下载较大的图像,这样做既可以暴政网页的完整性,又可以减少用户的等待时间。
●边框:
以像素为单位的图像边框的宽度。
默认为无边框。
●对齐:
对齐同一行上的图像和文本。
9.3.2其它图像元素
一、图像占位符
图像占位符是在网站排版布局中经常使用的功能,可以随意定义它的大小,然后放置在准备放置图像的位置,用自定义的颜色来替代图像的出现。
【实例9_7】在木兰诗\index.html文档中使用图像占位符
(1)重复【实例9_5】步骤1和步骤2。
(2)使用“插入”→“图像对象”→“图像占位符”命令,弹出“图像占位符”对话框。
(3)在“图像占位符”对话框中填写图像占位符的名称,设定宽度、高度、颜色和替换文本,如图9-25所示。
图9-25“图像占位符”对话框的设置
(4)设置完毕,单击“确定”按钮,如图9-26所示。
图9-26添加图像占位符
(5)鼠标单击选中图像占位符后,击“源文件”文本输入框后的文件夹图标,打开“选择图像源文件”对话框,选择“木兰诗\images\back3.gif”文件,然后单击“确定”按钮,图像占位符就被指定的图像取代。
也可以直接在“源文件”文本输入框填写图像路径,或者用鼠标拖动“指向文件”按钮至站点管理器中相应的图像,均可以指定源文件。
二、鼠标经过图像
鼠标指针经过图像属于动态网页中的一部分。
当鼠标经过或者按下按钮的时候,图像,按钮的形状或颜色就会发生变化,如图像变换,发光,或者阴影出现等等。
使网页变的生动活泼起来。
【实例9_8】在木兰诗\index.html文档中使用鼠标经过图像
(1)重复【实例9_5】步骤1和步骤2。
。
(2)使用“插入”→“图像对象”→“鼠标经过图像”,打开“插入鼠标经过图像”对话框。
(3)在“插入鼠标经过图像”对话框中设置如图9-27所示。
图9-27“插入鼠标经过图像”对话框
(4)设置完毕,单击“确定”按钮。
使用浏览器预览,当鼠标经过时,图像的变化如图9-28所示。
图9-28鼠标经过图像
操作提示11:
“插入鼠标经过图像”对话框的使用
●“图像名称”:
鼠标经过图像的名称,名称是自定义的,只要不与同页面另一个鼠标经过图像名称相同即可。
●“原始图像”:
页面开始显示的图像
●“鼠标经过图像”:
鼠标经过的时候显示的图像。
●“替换文本”:
图像无法正常显示的时候出现的文本注释,也是图像正常显示时鼠标指向链接时的说明。
●“前往的URL”:
点击鼠标后链接的目标。
●“预载鼠标经过图像”:
浏览网页时两个图片都同时被下载,当鼠标经过时无需从网上下载,而是调用预先下载的图像,减少延迟,使效果平滑流畅。
三、网页背景图像
通过设置背景图像可以改变网页的背景,但不是所有的图像都能用作背景。
【实例9_9】修改网页背景
(1)启动Dreamweaver8,新建一个HTML文档。
(2)使用“修改”→“页面属性”命令,或者在属性面板点击【页面属性】按钮,打开“页面属性”对话框。
(3)在“页面属性”对话框的“分类”列表框中选择“外观”选项,单击“背景图像”文本输入框后的“浏览”按钮,选择背景图像,如图9-29所示。
图9-29设置背景图像
(4)图片被平铺成为网页背景图像,如图9-30所示。
图9-30使用背景图像后的效果
操作提示12:
不论图片尺寸多大,一旦将它设置为背景图像,Dreamweaver就会将它反复拼接,铺满整个背景区。
因此选择背景图片的时候,不能选择颜色太深的图片,以免文档内容不能衬托出来,为了使用背景图像,网页中其他元素的背景应该是透明的,否则背景图片将会被其他元素的背景遮挡,影响整个页面的美观。
四、跟踪图像
跟踪图像用于指定一幅图像作为网页创作时的草稿图,它显示在文档的背景上,便于在进行网页设计时进行定位和安放对象,但跟踪图像不会显示在网页中。
【实例9_10】使用跟踪图像
(1)启动Dreamweaver8,新建一个HTML文档。
(2)使用“修改”→“页面属性”命令,或者在属性面板点击【页面属性】按钮,打开“页面属性”对话框。
(3)在“页面属性”对话框的“分类”列表框中选择“跟踪图像”选项,单击“跟踪图像”文本输入框后的“浏览”按钮,选择跟踪图像,并设置其“透明度”为70%,如图9-31所示。
图9-31设置跟踪图像
(4)单击“页面属性”对话框中的“确定”按钮,即可在文档中载入跟踪图像。
载入跟踪图像之后,网页设计窗口中出现蓝图,用户就可以根据蓝图进行网页制作,如图9-32所示。
图9-32载入跟踪图像
9.4编辑多媒体页面
Dreamweaver具有强大的多媒体功能,用户可以迅速、方便地为网络课件添加动画、声音、影片等多媒体内容,使网络课件更加生动。
用户可以插入和编辑多媒体文件和对象,主要分为Flash类(包括Flash影片、Flash按钮与文本)、Javaapplets类、ActiveX控件类,以及各种音频、视频文件(如Shockwave影片、QuickTime、RM、WMA等)。
9.4.1在网络课件中使用Flash动画
要在浏览器中播放Flash动画,必须在浏览器中集成Flash播放器。
MicrosoftInternetExplorer通过ActiveX控件来实现的。
在最新的MicrosoftInternetExplorer中,已集
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 多媒体 课件 制作