资源简介

第十二课 丰富网页内容
问题与任务
多媒体元素：不可或缺,让网页增色，有助于浏览者理解网页内容，使网站的表达更加直观、生动、形象。
本课将学习在“走进蝴蝶”网站的网页中插入多媒体元素，如图12-1所示。
图12-1 “走进蝴蝶”网站“基本情况”的部分页面
学习与实践
一、插入水平线
网页：清晰、方便浏览!
插入水平线的具体操作步骤如下。
(1)打开素材文件夹“hudie”站点下的网页文件“jiben.html”,将光标移动到需要插入水平线的位置。
(2)执行“插入→HTML→水平线”命令,即可完成水平线的插入,如图12-2所示。
讨论 如何设置水平线的宽度与高度?
二、插入滚动字幕
插入滚动字幕的具体操作步骤如下。
(1)在需要插入滚动字幕的单元格内输入“蝴蝶就是那穿着艳丽服装、翩翩飞舞在花丛中的小仙子! ”
(2)选中需要设置滚动字幕的文字,执行“插入→标签→HIML标签→marquee”命令后，单击“插入”按钮，即可插入滚动字幕，如图12-3所示。
资料室
插入滚动字幕后代码窗口的变化
单击拆分按钮,打开“拆分”视图可以看到网页的直观设计效果,还可以看到网页的设计代码,如图12-4所示。
插入滚动字幕以后,代码编辑窗口有如下变化,如图12-5所示。
试一试
打开素材文件夹中的网页文件“qushi.html”,在网页的顶部插入滚动字幕“蝴蝶,体态窈窕,艳丽多姿,给人们美的享受,成为美的象征,被人们誉为‘会飞的花朵’”,在属性面板中改变滚动文字的字体、字号、颜色等属性,保存并预览网页。
(3)设置滚动字幕的效果。在Dreamwaver中还可以设置滚动字幕的一些效果,如字幕的滚动方向和速度。选中已添加滚动字幕的文字后,执行“窗口-标签检查器”命令,在弹出的标签检查器面板中单击“未分类”前面的“+”按钮,设置标签的各种属性,如图12-6所示。其中, direction属性可以设置字幕的滚动方向, scrollamount属性可以设置字幕的运动速度。
图12-6自定义标签效果
练一练
打开素材文件夹“hudie\wenhua”下的网页文件“huazhong.html”,给文字“缥缈……为唱歌”添加滚动字幕，并为滚动字幕设置合适的方向和速度。
三、插入交替显示的图像
作用：给人动感效果,吸引人的眼球,起到很好的表现效果。
在网页中插入交替显示图像的具体操作步骤如下。
(1)将光标定位到需要插入交替显示图像的单元格中,执行“插入→图像对象→鼠标经过图像”命令。
(2)在弹出的“插入鼠标经过图像”对话框中,选择“原始图像”和“鼠标经过图像”,单击“确定”按钮，如图12-7所示。
试一试
打开素材文件夹“hudie”站点下的网页文件“gongyuan.html”,在网页左侧的单元格中插入交替显示的图像,保存并预览网页。
四、插入视频
在网页中插入视频文件的具体操作步骤如下。
(1)打开素材文件夹“hudie\qushi”下的网页文件“xiaoying.html”,执行“插入一媒体一插件”命令,如图12-8所示。
(2)在弹出的“选择文件”对话框中,选择视频文件“xiaoying.wmv”,单击“确定”按钮,即可插入视频。
五、插入背景音乐
打开素材文件夹中网页文件“jiben.html”,执行“窗口-行为”命令。打开“行为”面板,单击+按钮后选择“播放声音”命令,打开“播放声音”
对话框,选择声音文件后,单击“确定”按钮,即可插入音乐,如图12-9所示。
图12-9插入背景声音
小技巧
利用插入视频的方法也可以插入背景音乐。
六、插入Flash动画
试一试 打开素材文件夹“hudie”站点下的网页文件“jiben.html”,在“蝴蝶简介”文字下插入Flash动画,动画文件“butterfly.swf”在素材文件夹中。
练一练 打开素材文件夹“hudie\qushi”下的网页文件“zhizui.html”,将Flash动画“hdzz.swf”插入到合适位置，动画文件“hdzz.swf”在素材文件夹中。
讨论 比较插入“视频” “音频”“Flash动画”的操作方法在powerpoint与Dreamweaver中有什么异同?
思考与练习
打开自己设计的网站,在其中每一张网页合适的位置插入滚动字幕,交替显示的图像、视频等,并预览效果。
五 课堂小结
这节课，我通过插入水平线、滚动字幕、交替显示的图像、视频、背景音乐、Flash动画等操作，丰富网页内容，提高了审美、创造美的能力，体验到了合作探究学习的乐趣！
六 板书设计
插入水平线
插入滚动字幕
插入交替显示的图像
插入视频
插入背景音乐
插入Flash动画
丰富网页内容

展开更多......

收起↑