第五章让网页动起来.docx
- 文档编号:5331033
- 上传时间:2022-12-15
- 格式:DOCX
- 页数:16
- 大小:665.64KB
第五章让网页动起来.docx
《第五章让网页动起来.docx》由会员分享,可在线阅读,更多相关《第五章让网页动起来.docx(16页珍藏版)》请在冰豆网上搜索。
第五章让网页动起来
第5章让网页动起来
通过前面的学习,相信大家已经能够制作出简单的网页;不过,细心的人可能已经发现,前面所讲的网页中只有一些静止的图片和文字,显得过于单调。
本章主要讲解如何为网页添加动画和多媒体元素,以使我们的网页更加丰富多彩。
5.1应用Flash动画:
Flash动画是目前最流行的矢量动画,它具有文件尺寸小和变化丰富的优点,因而很多网页中都用到了它。
利用Dreamweaver,可以方便地在网页文档中插入Flash动画。
5.1.1Flash文件格式:
Flash文件有3种格式,下面我们就来简单了解一下这3种格式。
Flash源文件(.fla):
它是所有Flash动画的源文件,此类型的文件只能在Flash中创建、打开并编辑,不能插入网页文档中。
Flash动画文件(.swf):
它是fla文件的压缩版本,已经进行了优化处理。
我们可以在Flash中创建fla文件,然后将它导出或发布为swf文件,以便在网页中使用它们。
此种类型的文件是在网页中最常使用的动画文件,但不能在Dreamweaver中进行编辑。
Flash模板文件(.swt):
可以直接在Dreamweaver中编辑这类文件,它包括Flash按钮和Flash文本两种对象。
5.1.2插入Flash动画:
Step01在Dreamweaver中定义“shop”站点,打开“shop”站点中的文档“index.html”。
Step02在“最新商品”下方的单元格中单击定位插入点,然后单击“常用”插入栏中的“媒体:
Flash”按钮
,如图5-1-1所示。
图5-1-1单击“媒体:
Flash”按钮
Step03在“插入Flash按钮”对话框中的“链接:
”栏右侧,单击“浏览”按钮,打开“选择文件”对话框,在“查找范围”下拉列表中选择动画所在文件夹(此处为shop文件夹中的“images”文件夹),在文件列表中选择一个扩展名为“.swf”的Flash动画(此处为banner1.swf),如图5-1-2所示。
图5-1-2“选择文件”对话框
Step04单击“确定”按钮,弹出“对象标签辅助功能属性”对话框,再次单击“确定”按钮,Flash动画就被插入到了网页中,如图5-1-3所示。
图5-1-3插入Flash动画
知识库:
默认情况下,在设计视图中只能看到Flash动画的占位符(占位符的大小代表了Flash动画的实际大小)。
如果观看播放效果,可在选中占位符后,单击“属性”面板上的“播放”按钮
。
Step05在单击选中网页中的Flash动画后,可以在“属性”面板中对该动画的各项属性进行修改,如图5-1-4所示。
图5-1-4Flash动画“属性”面板
5.1.3将Flash动画背景设置为透明:
默认情况下,网页中文本的字体、字号等,与该网页“页面属性”中设置的相同。
另外,用户也可利用“属性”面板上的“格式”下拉列表为文本设置系统提供的格式化样式(段落、标题1、标题2等),或直接设置所选文本的字体、大小、颜色、粗体、斜体、对齐方式和列表方式等。
Step01接着在前面的文档中操作,在网站标志所在单元格右侧的单元格中插入“\shop\images”文件夹中“nihong.swf”,如图5-1-5所示。
图5-1-5插入动画文件
Step02在保存文档并在IE浏览器中预览效果,可以看到Flash动画遮盖了报告的背景图像,如图5-1-6所示。
图5-1-6预览网页
Step03回到Dreamweaver操作界面。
选中Flash动画,单击“属性”面板中的“参数”按钮,打开“参数”对话框。
在“参数”列第一行单击,输入“wmode”,在对应的“值”列输入“transparent”。
单击“确定”按钮,关闭“参数”对话框,如图5-1-7所示。
图5-1-7“参数”对话框
Step04体再次保存文档,并在浏览器中预览,可以看到动画后面的背景图像出现了,如图5-1-8所示。
图5-1-8预览透明背景动画效果
5.1.4插入Flash按钮:
Flash按钮包括两类,一类是利用Flash软件制作的按钮;另一类是Dreamweaver中集成的Flash按钮。
前者的插入方法与Flash动画类似,此处主要讲解后者的插入。
Step01将插入点置于要插入Flash按钮的位置,选择“插入”→“媒体”→“Flash按钮”菜单,打开“插入Flash按钮”对话框。
Step02在“样式”列表框中选择一种样式(此处选择“TranslucentTab(down)”),其效果将显示在“范例”栏中;在“按钮文本”编辑框中输入要在按钮上显示的文本内容(此处为“Company”);在“字体”下拉列表中选择一种字体(此处为“TimesNewRoman”),作为按钮文本的字体;在“大小”编辑框中设置按钮文本的大小(此处为“15”);在“链接”编辑框中设置按钮的链接目标(此处为“index.html”);在“目标”下拉列表中选择打开链接文档的方式(此处为“_blank”),在“另存为”编辑框中设置按钮的保存位置,如图5-9左图所示。
Step03单击“确定”按钮,即可插入Flash按钮,如图5-1-9所示。
图5-1-9插入Flash按钮
知识库:
在插入Flash按钮时,保存按钮的路径和文件名中不能含有中文字符。
选择“插入”→“媒体”→“Flash文本”菜单,可打开“插入Flash文本”,对话框。
可像插入“Flash按钮”一样插入Flash文本。
5.2应用音乐
除了可以在网页中插入动画外,还可以为网页设置背景音乐或插入音频文件。
5.2.1网页中可用的音乐文件格式
网页中可用的音乐文件有多种,常见的有MP3、WAV、MIDI、RA和RAM等。
下面分别介绍。
MP3(运动图像专家组音频,即MPEG-音频层-3)格式:
能在保证声音品质的情况下大大压缩声音文件,是目前最常用的声音文件格式。
该格式的声音文件具有流媒体功能,即访问者可以一边下载一边播放。
WAV格式:
具有较好的声音品质,其优点是适应性强,在所有安装有声卡的电脑中都可以播放。
同时,许多浏览器都支持此类格式文件并且不要求插件。
其缺点是占用空间大。
MIDI(乐器数字接口)格式:
用于乐器,许多浏览器都支持MIDI格式的文件并且不要求插件。
其特点是占用空间小,一般为十几KB、几十KB不等,适于网上传播,缺点是音色单调。
RA和RAM(RealAudio)格式:
具有非常高的压缩比,相同长度的声音文件大小比MP3格式小。
与MP3一样,该格式的声音文件也具有流媒体功能,但浏览者必须下载安装RealPlayer辅助应用程序或插件才可以正常播放此类文件。
5.2.2为网页添加背景音乐
为网页添加背景音乐后,用户浏览网页时背景音乐会自动播放,完全不会影响浏览者的操作。
Step01在Dreamweaver中打开“shop”站点文件夹中的文档“index.html”。
Step02选择“插入”→“标签”菜单,打开“标签选择器”对话框,如图5-1-10所示。
图5-1-10“标签选择器”对话框
Step03依次单击“HTML标签”和“页元素”,将其展开。
在右侧的列表框中选择“bgsound”标签,如图5-1-11所示。
图5-1-11选择标签
Step04单击“插入”按钮,弹出“标签编辑器”对话框,单击“源”文本框后的“浏览”按钮,在弹出的“选择文件”对话框中选择背景音乐文件(本例为shop站点中images文件夹中的“car.mp3”),如图5-1-12所示。
图5-1-12选择“文件”对话框
Step05单击“确定”按钮,返回“标签编辑器”对话框,在“循环”下拉列表框中选择“(-1)”选项,单击“确定”按钮,完成背景音乐的添加,如图5-1-13所示。
图5-1-13设置参数
知识库:
“标签编辑器”对话框“循环”下拉列表框用来设置播放次数,“(-1)”表示循环播放,也可以直接输入要播放的次数。
Step06返回“标签选择器”对话框,单击“关闭”按钮,返回文档操作界面。
Step07保存网页文档,预览网页时即可听到添加的背景音乐效果。
5.2.3在页面中嵌入音乐文件
在Dreamweaver中除了可为网页添加背景音乐外,还可以通过插入插件的方式在网页中嵌入音乐文件。
嵌入音乐文件后,在浏览网页时,页面中将会出现一个播放控件,通过该控件可以控制音乐的播放。
下面就来看在页面中嵌入音乐文件的方法。
Step01启动Dreamweaver后,打开“5-2”文件夹中的文档“wma.html”。
Step02将插入点置于网页中要插入音乐文件的位置(此处为表格最下方的空白单元格),选择“插入”→“媒体”→“插件”菜单,如图5-1-14所示。
图5-1-14定位插入点
Step03打开“选择文件”对话框,在“查找范围”下拉列表中选择文件所在位置(此处为“5-2\music”文件夹),在文件列表中选择要插入的文件(此处为“ybzdgd.wma”),如图5-1-15所示。
图5-1-15选择插入文件
Step04单击“确定”按钮,插入音乐文件,效果如图5-1-16所示。
图5-1-16插入音乐文件
Step05选中插入的音乐文件,在“属性”面板中将宽和高分别改为280和45,接着将对齐方式设为“居中”,如图5-1-17所示。
图5-1-17修改插件属性
Step06保存文档并在IE浏览器中预览。
在美妙的音乐传来的同时,可以看到白色单元格中出现了WindowsMediaPlayer播放器的控制面板,如图5-1-18所示。
图5-1-18预览文档
5.3使用其它动态元素
在网页中除了可以插入Flash动画和音乐文件外,还可以插入Shockwave影片、Applet和视频文件等其它媒体元素。
5.3.1插入Applet插件
用户在浏览网页时,可能看到过一些特殊效果,如下雨、涟漪等,它们中的一部分是利用Applet插件实现的。
Applet插件是非常小的Java应用程序,在插入Applet插件是需要安装Java虚拟机(用户可以在网上搜索并下载)。
在网页中插入Applet插件的方法如下。
Step01打开“yanhua”文件夹中的文档“yanhua.html”,将插入点置于文本上方,选择“插入”→“媒体”→“Applet”菜单。
Step02打开“选择文件”对话框,从中选择要插入的Applet文件(此处为“yanhua”文件夹中的“yanhua.class”),如图5-1-19所示。
图5-1-19插入Applet插件
Step03单击“确定”按钮,弹出“Applet标签辅助功能属性”对话框,在“替换文本”和“标题”文本框中输入相应文本,如图5-1-20所示。
图5-1-20“Applet标签辅助功能属性”对话框
Step04单击“确定”按钮,插入的Applet文件以一个图标的形式显示,如图5-1-21所示。
图5-1-21插入的Applet文件
Step05在“属性”面板上“宽”和“高”文本框中分别输入“300”和“200”,然后单击“参数”按钮,如图5-1-22所示。
图5-1-22设置“宽”和“高”
Step06打开“参数”对话框,参照图5-1-23所示添加并设置各项参数,然后单击“确定”按钮关闭对话框。
图5-1-23Applet插件属性面板
Step07保存文档后按【F12】键预览网页,在黑色背景上不断单击,会出现各种颜色的烟花,如图5-1-24所示。
图5-1-24预览网页
5.3.2插入视频文件
很多企业网站的首页上都有其电视广告的片段,这不仅宣传了自己的产品,还可以为网站增色不少,下面我们就来看看如何在网页文档中插入视频文件。
Step01打开“video”文件夹中的文档“cat.html”。
Step02在“影片介绍”左侧的空白单元格中单击,然后选择“插入”→“媒体”→“插件”菜单。
Step03打开“选择文件”对话框,从中选择要插入的视频文件(此处为“video\images”文件夹中的“cat.mpeg”),单击“确定”按钮插入视频,如图5-1-25所示。
图5-1-25插入视频文件
Step04选中视频文件,在“属性”面板的“宽”和“高”文本框中分别输入“320”和“240”,重新设置视频文件大小,如图5-1-26所示。
图5-1-26重新设置视频文件大小
Step05按【Ctrl+S】组合键保存文档,然后按【F12】键预览网页,如图5-1-27所示。
图5-1-27预览网页
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第五章 让网页动起来 第五 网页 起来