为网页添加动态素材（模块四）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt

《为网页添加动态素材（模块四）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt》由会员分享，可在线阅读，更多相关《为网页添加动态素材（模块四）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt（69页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、为网页添加动态素材（模块四）电子课件 中职Dreamweaver+CS3网页制作任务实训教程（高教版）模块四 为网页添加动态素材 主讲老师：*Dreamweaver CS3 网页制作任务实训教程学习目标u掌握Flash动画、Flash按钮、Flash文本以及Flash视频的插入与设置方法u熟悉Shockwave影片以及视频插件的插入方法u熟悉并掌握背景音乐、音乐链接以及嵌入页面音乐的添加方法任务一 制作“员工培训”网页u任务目标在“员工培训”网页中插入各种Flash动态素材，包括Flash动画、Flash视频、Flash按钮和Flash文本等，完成后的最终效果如图4-1所示。“员工培训”网页的

2、最终效果任务一 制作“员工培训”网页u操作思路（1）为提供的“training.html”网页制作文本并进行格式设置。（2）在网页中插入表格，并为表格添加图片背景。（3）在表格中插入Flash动画和Flash视频，并进行适当设置。（4）在文本的适当位置插入Flash按钮和Flash文本，并进行相应设置。制作“员工培训”网页的操作思路操作一 制作“员工培训”网页文本和图像（1）打开光盘中提供的“training.html”网页素材，在水平线下输入“新一期员工培训正式开课”文本，并将其格式设置为“字体-方正粗倩简体、大小-25、颜色-#FF0000”，如图所示。输入并设置文本操作一 制作“员工培训

3、”网页文本和图像（2）继续输入如图所示的文本，格式默认为Dreamweaver提供的初始值。（3）在红色文本右侧定位插入点，按“Enter”键分段，然后选择【插入记录】【表格】菜单命令，如图所示。输入文本选择命令操作一 制作“员工培训”网页文本和图像（4）打开“表格”对话框，将行数和列数分别设置为“1”和“2”、表格宽度设置为“640”、单元格间距设置为“10”，单击“确定”按钮，如图6所示。（5）此时将在网页当前插入点处插入1行2列的表格，单击插入表格左侧的单元格定位插入点，然后在属性检查器中单击“背景”文本框右侧的“单元格背景URL”按钮，如图所示。设置表格结构 设置单元格背景操作一 制作

4、“员工培训”网页文本和图像（6）打开“选择图像源文件”对话框，在其中选择光盘提供的“training.jpg”图像文件，单击“确定”按钮，如图所示。（7）此时文本插入点所在的单元格背景将应用所选的图像文件，将属性检查器中该单元格的宽度和高度分别设置为“320”和“240”，如图所示。选择背景图像设置单元格宽度与高度操作一 制作“员工培训”网页文本和图像（8）此时插入的表格效果如图所示。设置后的表格操作二 插入Flash 动画和视（1）将文本插入点定位到表格左侧的单元格中，单击插入栏中“常用”选项卡的“媒体”按钮右侧的下拉按钮，在弹出的下拉菜单中选择“Flash”命令，如图所示。选择命令操作二

5、插入Flash 动画和视（2）打开“选择文件”对话框，在其中选择光盘提供的“spark.swf”文件，单击“确定”按钮，如图所示。（3）打开“对象标签辅助功能属性”对话框，在“标题”文本框中输入“spark”，单击“确定”按钮，如图所示。选择Flash动画文件 设置标题信息操作二 插入Flash 动画和视（4）此时将在单元格文本插入点所在的单元格中插入如图4所示的对象，它是Flash动画在Dreamweaver中的显示标识，尺寸与Flash动画的大小相等。（5）选择插入的Flash动画，在属性检查器中将其宽度和高度分别设置为“320”和“240”，如图所示。插入的Flash动画文件 调整Fla

6、sh动画文件的大小操作二 插入Flash 动画和视（6）单击插入的表格边框，使其自动适合调整后的Flash动画文件大小，如图所示。（7）选择插入的Flash动画文件，在属性检查器中选中“循环”和“自动播放”复选框，如图所示，表示浏览者在浏览此网页时该动画将自动且循环进行播放。使表格适合动画文件大小设置动画播放方式操作二 插入Flash 动画和视（8）保持Flash动画文件的选中状态，单击属性检查器的“品质”下拉列表框右侧的下拉按钮，在弹出的下拉列表中选择“自动高品质”选项，如图所示。（9）接着单击属性检查器的“比例”下拉列表框右侧的下拉按钮，在弹出的下拉列表中选择“无边框”选项，如图所示。设置

7、Flash动画品质 设置Flash动画比例操作二 插入Flash 动画和视（10）继续保持Flash动画文件的选中状态，单击属性检查器右下方的“参数”按钮，如图所示。（11）打开“参数”对话框，在“参数”栏的文本框中输入“wmode”，如图所示。单击按钮设置参数操作二 插入Flash 动画和视（12）单击“值”栏下方的空白区域，在出现的文本框中输入“transparent”，单击“确定”按钮，如图所示。（13）在属性检查器中单击“播放”按钮，此时将在网页中预览动画效果，且“播放”按钮将变为“停止”按钮，单击该按钮停止Flash动画的播放，如图所示。设置参数值 预览动画效果操作二 插入Flash

8、 动画和视（14）将文本插入点定位到表格右侧的单元格中，单击插入栏中“常用”选项卡的“媒体”按钮右侧的下拉按钮，在弹出的下拉菜单中选择“Flash视频”命令，如图所示。（15）打开“插入Flash视频”对话框，在“视频类型”下拉列表框中选择“累进式下载视频”选项，然后单击下方的“浏览”按钮，如图所示。选择命令设置视频类型操作二 插入Flash 动画和视（16）打开“选择文件”对话框，在其中选择光盘提供的“opening.flv”文件，单击“确定”按钮，如图6所示。（17）返回“插入Flash视频”对话框，单击“检测大小”按钮，如图所示。选择Flash视频文件自动检测视频文件大小操作二 插入Fl

9、ash 动画和视（18）此时“宽度”和“高度”文本框中将自动输入所插入的Flash视频大小，选中“自动播放”和“自动重新播放”复选框，然后单击“确定”按钮，如图所示。（19）此时将在文本插入点所在的单元格中插入如图所示的对象，它是Flash视频在Dreamweaver中的显示标识。设置播放模式完成Flash视频的插入操作三 插入Flash 按钮（1）将文本插入点定位到网页中文本的最后，单击插入栏中“常用”选项卡的“媒体”按钮右侧的下拉按钮，在弹出的下拉菜单中选择“Flash按钮”命令，如图所示。（2）打开“插入Flash按钮”对话框，在“样式”列表框中选择Dreamweaver自带的Flash

10、按钮样式，这里选择“Glass-Silver”选项，如图所示。选择命令选择Flash按钮样式操作三 插入Flash 按钮（3）在“按钮文本”文本框中输入Flash按钮上需要显示的文本内容，这里输入“返回首页”，如图所示。（4）在“字体”下拉列表框中设置Flash按钮上显示文本的字体格式，这里选择“楷体-GB2312”选项，默认文本大小为“12”，然后单击下方“链接”文本框右侧的“浏览”按钮如图所示。选择Flash按钮样式输入Flash按钮文本操作三 插入Flash 按钮（5）打开“选择文件”对话框，在其中选择“index.html”文件，单击“确定”按钮，如图所示。（6）返回“插入Flash按

11、钮”对话框，在“目标”下拉列表框中选择“-self”选项，单击“确定”按钮，如图所示。选择链接文件 设置链接文件的打开方式操作三 插入Flash 按钮（7）打开“Flash辅助功能属性”对话框，在“标题”文本框中输入“fanhuishouye”，单击“确定”按钮，如图所示。（8）此时将在网页的文本插入点处插入Flash按钮，按照调整图像大小的方法，拖动鼠标适当增大按钮尺寸，如图所示。设置标题文本信息调整按钮大小操作三 插入Flash 按钮（9）保持Flash按钮的选中状态，单击属性检查器中的“参数”按钮，如图所示。（10）打开“参数”对话框，按照设置Flash动画文件的方法对Flash按钮的参

12、数进行相同设置，完成后单击“确定”按钮，如图所示。单击按钮设置参数操作四 插入Flash 文本（1）将文本插入点定位到“【课程对象】”下的正文后面，单击插入栏中“常用”选项卡的“媒体”按钮右侧的下拉按钮，在弹出的下拉菜单中选择“Flash文本”命令，如图所示。（2）打开“插入Flash文本”对话框，在“字体”下拉列表框中选择“楷体-GB2312”选项，并在“大小”文本框中输入“18”，如图所示。选择命令设置Flash文本格式操作四 插入Flash 文本（3）单击“颜色”栏右侧的色块，在弹出的列表中单击编号为“#003366”对应的色块选项，如图所示。（4）用相同方法将“转滚颜色”设置为“#00

13、99FF”，如图所示，表示当鼠标指针移至Flash文本上时显示的颜色。设置Flash文本颜色 设置Flash文本转滚颜色操作四 插入Flash 文本（5）在“文本”列表框中输入具体的Flash文本内容，这里输入“了解公司介绍”，然后单击“链接”文本框右侧的“浏览”按钮，如图所示。（6）打开“选择文件”对话框，在其中选择“index.html”文件，单击“确定”按钮，如图所示。设置Flash文本内容选择链接文件操作四 插入Flash 文本（7）返回“插入Flash文本”对话框，在“目标”下拉列表框中选择“-self”选项，单击“确定”按钮，如图所示。（8）此时将在网页的文本插入点处插入Flash

14、按钮，按照调整图像大小的方法，拖动鼠标适当增大文本尺寸，如图所示。设置链接目标打开方式调整Flash文本尺寸操作四 插入Flash 文本（9）保持Flash文本的选中状态，单击属性检查器中的“参数”按钮，如图所示。（10）打开“参数”对话框，按照设置Flash动画文件的方法对Flash文本的参数进行相同设置，完成后单击“确定”按钮，如图所示。单击按钮设置参数操作四 插入Flash 文本（11）将设置的网页文件进行保存后按“F12”键预览，此时将自动播放插入到网页中的Flash动画和Flash视频内容，如图所示。预览插入的Flash动画和Flash视频操作四 插入Flash 文本（12）将鼠标指

15、针指向插入的Flash文本上时，文本颜色会发生改变，此时单击鼠标将跳转到指定的链接目标中，如图所示。（13）将鼠标指针指向插入的Flash按钮上时，按钮会发生一定的变化，此时单击鼠标将跳转到指定的链接目标中，如图所示。应用Flash文本效果 应用Flash按钮效果任务二 制作“动物世界”网页u任务目标为“动物世界”网页插入Shockwave影片和视频插件，完成后的最终效果如图所示。在“动物世界”网页中插入影片和视频后的效果任务二 制作“动物世界”网页u操作思路（1）将网页中的单元格拆分为两个单元格。（2）在拆分后左侧的单元格中插入并设置Shockwave影片。（3）在拆分后右侧的单元格中插入并

16、设置视频插件。制作“动物世界”网页的操作思路操作一 插入和设置Shockwave 影片（1）打开光盘提供的“animal world.html”文件，在网页表格中最后一行单元格中单击鼠标右键，在弹出的快捷菜单中选择【表格】【拆分单元格】菜单命令，如图所示。（2）打开“拆分单元格”对话框，选中“列”单选项，将“列数”数值框中的数值数值设置为“2”，单击“确定”按钮，如图所示。选择命令拆分单元格操作一 插入和设置Shockwave 影片（3）将鼠标指针移至拆分后的单元格中间的边框上，当其变为 形状时按住鼠标左键不放向右拖动，当显示拆分后的两个单元格的宽度均为“407”时释放鼠标，如图所示。（4）将

17、文本插入点定位到拆分后的左侧的单元格中，单击插入栏中“常用”选项卡的“媒体”按钮右侧的下拉按钮，在弹出的下拉菜单中选择“Shockwave”命令，如图所示。调整拆分后的单元格宽度选择命令操作一 插入和设置Shockwave 影片（5）打开“选择文件”对话框，在其中选择提供的“animal.dcr”文件，单击“确定”按钮，如图所示。（6）打开“对象标签辅助功能属性”对话框，在“标题”文本框中输入“animal”，单击“确定”按钮，如图所示。选择Shockwave文件设置标题辅助信息操作一 插入和设置Shockwave 影片（7）此时将在文本插入点所在的单元格中插入如图所示的标识为Shockwav

18、e影片的图标。（8）保持Shockwave影片的选中状态，在属性检查器中将其宽度和高度分别设置为“407”和“260”，如图所示。插入Shockwave影片调整Shockwave影片大小操作一 插入和设置Shockwave 影片（9）继续保持Shockwave影片的选中状态，在属性检查器的“对齐”下拉列表框中选择“居中”选项，调整Shockwave影片的对齐方式，如图所示。设置Shockwave影片对齐方式操作二 添加视频插件（1）将文本插入点定位到前面拆分单元格后的右侧的单元格中，单击插入栏中“常用”选项卡的“媒体”按钮右侧的下拉按钮，在弹出的下拉菜单中选择“插件”命令，如图所示。（2）打开

19、“选择文件”对话框，在其中选择提供的“Wildlife.wmv”文件，单击“确定”按钮，如图所示。选择命令 选择文件操作二 添加视频插件（3）此时将在文本插入点所在的单元格中插入如图所示的标识为插件的图标。（4）保持视频插件的选中状态，在属性检查器中将其宽度和高度分别设置为“407”和“260”，如图所示。插入视频插件调整插件大小操作二 添加视频插件（5）继续保持视频插件的选中状态，在属性检查器的“对齐”下拉列表框中选择“居中”选项，调整其对齐方式，如图所示。（6）保存设置的网页后按“F12”键预览，此时将自动播放Shockwave影片以及视频插件的内容，如图所示。设置对齐方式预览效果任务三

20、制作“在线音乐”网页u任务目标制作“在线音乐”网页，要求利用表格来创建网页内容。完成后的最终效果如图所示。“在线音乐”网页的最终效果任务三 制作“在线音乐”网页u操作思路（1）插入表格并设置宽度和插入的行列数。（2）添加适当的文本并进行格式设置。（3）设置页面背景颜色并插入图片。（4）为网页添加背景音乐。（5）在网页中嵌入页面音乐并添加音乐链接。制作“在线音乐”网页的操作思路操作一 编辑网页内容（1）启动Dreamweaver CS3，新建一个空白的网页，然后在文本插入点处单击鼠标右键，在弹出的快捷菜单中选择【对齐】【居中对齐】菜单命令，如图所示。（2）此时文本插入点将自动定位到网页中间，选择

21、【插入记录】【表格】菜单命令，如图所示。调整文本插入点对齐方式插入表格操作一 编辑网页内容（3）打开“表格”对话框，在“行数”和“列数”文本框中分别输入“5”和“1”；在“表格宽度”文本框中输入“800”；在“单元格边距”文本框中输入“1”；在“单元格边框”文本框中输入“1”，单击“确定”按钮，如图所示。设置表格属性操作一 编辑网页内容（4）此时将在文本插入点处插入设置的表格，在当前文本插入点处单击鼠标右键，在弹出的快捷菜单中选择【对齐】【居中对齐】菜单命令，如图所示。调整文本插入点对齐方式操作一 编辑网页内容（5）在文本插入点处输入如图所示的文本内容。（6）选择输入的文本，将其字号大小设置为

22、“12”、颜色设置为“#999999”，如图所示。输入文本 设置文本格式操作一 编辑网页内容（7）单击最后一行单元格，将文本插入点定位到其中，输入如图所示的文本。（8）选择输入的文本，将其字号大小设置为“12”、颜色设置为“#999999”，并加粗“申明：”文本，如图所示。输入文本设置文本格式操作一 编辑网页内容（9）选择【修改】【页面属性】菜单命令，如图所示。（10）打开“页面属性”对话框，将“外观”选项中的“背景颜色”设置为“#000000”，单击“确定”按钮，如图所示。选择命令设置背景首页操作一 编辑网页内容（11）此时网页背景将应用所设置的颜色，如图所示。更改后的网页页面颜色操作一 编

23、辑网页内容（12）将文本插入点定位到第2行单元格中，单击插入栏中“常用”选项卡的“图像”按钮，如图所示。（13）打开“选择图像源文件”对话框，在其中选择提供的“pic.jpg”图像文件，单击“确定”按钮，如图所示。单击按钮选择图像文件操作一 编辑网页内容（14）打开“图像标签辅助功能属性”对话框，直接单击“确定”按钮，如图所示。（15）此时将在文本插入点所在的单元格中插入选择的图像文件，如图所示。关闭对话框插入的图像文件操作二 添加背景音乐（1）选择【插入记录】【标签】菜单命令，如图所示。（2）打开“标签选择器”对话框，单击左侧列表框中“HTML标签”左侧的“展开”按钮，如图所示。选择命令“标

24、签选择器”对话框操作二 添加背景音乐（3）继续单击展开的目录中“页元素”选项左侧的“展开”按钮，然后在右侧的列表框中选择“bgsound”选项，单击“插入”按钮，如图所示。（4）打开“标签编辑器-bgsound”对话框，单击“浏览”按钮，如图所示。选择标签单击按钮操作二 添加背景音乐（5）打开“选择文件”对话框，在其中选择提供的“bg.mp3”音乐文件，单击“确定”按钮，如图所示。（6）返回“标签编辑器-bgsound”对话框，单击“确定”按钮，如图所示。选择音乐文件确定设置操作二 添加背景音乐（6）返回“标签选择器”对话框，单击“关闭”按钮，此时Dreamweaver将自动切换到“拆分”视图

25、模式，从中可看到插入的背景音乐代码，如图所示。完成背景音乐的添加操作三 嵌入页面音乐（1）将文本插入点定位到第3行单元格中，单击插入栏中“常用”选项卡的“媒体”按钮右侧的下拉按钮，在弹出的下拉菜单中选择“插件”命令，如图所示。（2）打开“选择文件”对话框，在其中选择提供的“safe.mp3”音乐文件，单击“确定”按钮，如图所示。选择命令选择文件操作三 嵌入页面音乐（3）此时将在文本插入点所在的单元格中插入如图6所示的标识为插件的图标。（4）保持音乐插件的选中状态，在属性检查器中将其宽度和高度分别设置为“800”和“40”，如图所示。插入的音乐插件调整插件大小操作三 嵌入页面音乐（5）继续保持音

26、乐插件的选中状态，在属性检查器的“对齐”下拉列表框中选择“居中”选项，调整插件的对齐方式，如图所示。设置插件对齐方式操作四 添加音乐链接（1）在倒数第2行单元格中输入如图所示的文本，并将其大小设置为“12”、颜色设置为白色。（2）选择输入的文本，单击属性检查器中“链接”文本框右侧的“浏览文件”按钮，如图所示。输入并设置文本格式单击按钮操作四 添加音乐链接（3）打开“选择文件”对话框，在其中选择“safe.mp3”文件，单击“确定”按钮，如图所示。选择链接文件操作四 添加音乐链接（4）此时选择的文本颜色将变为蓝色显示，如图所示。（5）保存设置的网页后按“F12”键预览，此时打开网页后便将自动播放

27、背景音乐和嵌入页面的音乐，如图所示。建立音乐链接预览效果操作四 添加音乐链接（6）单击建立了音乐链接的文本，如图所示。（7）此时将打开“另存为”对话框，通过设置文件的保存位置和名称后，单击“保存”按钮即可将链接的音乐文件下载到电脑中，如图所示。单击音乐链接保存链接的对象实训一 制作“车友之家”网页u实训目标通过为新建的网页创建表格，并在相应的单元格中输入文本、插入Flash动画、插入Flash按钮、插入图片以及插入Flash文本等对象，制作出如图所示的网页效果。“车友之家”网页效果实训一 制作“车友之家”网页u实训分析（1）新建空白网页，将其背景颜色设置为“#999999”。（2）插入5行1列

28、的表格，并设置表格边框为“1”，颜色为“#000000”。然后将第4行单元格拆分为两个单元格。（3）在第1行和最后一行单元格中分别输入标题文本和版权文本，并按光盘中的效果设置文本格式。（4）在第2行单元格中插入提供的“opening.swf”Flash动画文件，宽度与高度设置为“720”和“100”，并利用参数将其背景设置为透明。（5）在第3行单元格中分别插入4个Flash按钮，要求样式为“Blip Arrow”，字体为“楷体”，大小为“12”号，并分别设置这些按钮的链接目标文件（具体可参见提供的效果文件）。最后利用参数设置背景为透明。（6）在第4行左侧的单元格中插入提供的“pic01.jpg

29、”图片文件，设置其宽度和高度分别为“303”和“203”。实训一 制作“车友之家”网页（7）在第4行右侧的单元格中输入文本，并在分段后插入Flash文本，要求字体为“楷体”、大小为“14”、颜色为“蓝色（#0000FF）”、转滚颜色为“红色（#FF0000）”。接着设置其链接目标文件，最后利用参数设置其背景为透明。（8）保存设置的网页并预览效果。制作“车友之家”网页的操作思路实训二 制作“在线影院”网页u实训目标在提供的网页中输入文本和插入视频插件，制作出如图所示的网页效果。“在线影院”网页效果实训二 制作“在线影院”网页u实训分析（1）打开提供的“index.html”网页文件，将其背景颜色设置为“#006633”。（2）在已插入的表格的第1行单元格中输入标题文本，设置其字号大小为“16”，并加粗显示。（3）在第2行单元格中插入提供的“panda.WMV”视频插件，并设置其宽度和高度分别为“800”和“400”。（4）在最后一行单元格中输入申明内容，并加粗显示“申明：”文本。