《中文Dreamweaver MX案例教程 教学课件 ppt 作者 杜金 等 第5章 时间轴和网页中的其他对象》由会员分享，可在线阅读，更多相关《中文Dreamweaver MX案例教程 教学课件 ppt 作者 杜金 等 第5章 时间轴和网页中的其他对象（76页珍藏版）》请在金锄头文库上搜索。
1、第5章,时间轴和网页中的其他对象,第2页,主要内容,插入Flash动画的网页 插入Flash按钮和文字 插入Shockwave动画和Fireworks HTML 插入Java Applet程序的网页 插入ActiveX的网页 有移动动画的网页 有沿曲线路径移动动画 有交替变化图像的网页 有浮动广告条的网页,第3页,插入Flash动画的网页,Flash对象的属性栏,第4页,在网页中插入Flash动画后的显示效果,第5页,技术分析,Flash是Macromedia公司开发的另一个著名产品，它是一个优秀的矢量绘图和动画制作软件。Flash可以制作出一种扩展名为.SWF的动画文件，这种文件可以插到HT
2、ML里，也可以单独成为网页。它不但可以制作出一般的动画，还可以制作出带有背景声音，具有较强的交互性能的动画。 Flash制作的这种动画可以在所有安装了Shockwave Flash插件的浏览器中播放，这也是它之所以快速广泛流行的一个重要原因。另外，1998年Macromedia公司公布了Flash动画格式文件的全部代码，方便了众多软件开发公司和其设计人员用它开发相关产品，从而加快了它的推广与应用。各个公司和个人推出的可以制作.SWF文件的软件越来越多。 使用Dreamweaver在网页中插入Flash就像插入图像一样简单，插入Flash后还可在编辑状态播放Flash，甚至直接调出Flash软件
3、对动画进行编辑。,第6页,操作步骤,新建一个网页文档，将背景颜色设置成“黄色”。在网页内单击鼠标，将光标移到网页内，并设置成居中对齐。单击“插入”面板中的Flash按钮 ，调出“选择文件”对话框。,第7页,“选择文件”对话框,第8页,接上,在“选择文件”对话框中选择Flash文件夹中的SHEEP.SWF文件，单击“确定”按钮，完成选择Flash文件。Flash动画在网页文档中的显示效果如图所示，单击“Flash”属性面板中的“播放”按钮 即可在编辑状态下查看动画的播放效果。 单击“文件”“保存”菜单命令，将网页文档保存为“5-1.HTM”，按【F12】键，在浏览器中查看Flash动画网页的显示
4、效果。,第9页,网页编辑状态下的Flash动画,第10页,插入Flash按钮和文字的网页,“插入Flash按钮”对话框中各选项含义 “插入Flash文本”对话框中各选项含义,第11页,初始状态下的FLASH按钮和鼠标按下时的FLASH按钮显示效果,第12页,初始状态下的FLASH文字和鼠标按下时的FLASH文字显示效果,第13页,技术分析,使用Flash文字最大的好处是它特有的版权保护功能。将需要在网页中显示的文字制作成Flash文字后，在浏览器中的显示效果和直接插入文字的显示效果相似，但是网页中的文字不能被复制，即使将网页文件保存到硬盘中也不能得到Flash文字。 而Flash文字的另一个好
5、处就是能够精确定位，可以准确控制文字的高度和宽度而不必担心浏览器的设置。另外，还可以制作出鼠标经过的效果，增加了Flash文字的交互性。 利用Dreamweaver中自带的Flash按钮制作工具，可以很方便的制作出Flash按钮而不必启动Flash编辑软件。利用“插入Flash按钮”和“插入Flash文字”对话框制作Flash按钮和Flash文字，将在相应的文件夹下建立一个.SWF的Flash文件。,第14页,操作步骤,制作Flash按钮 制作Flash文字,第15页,制作Flash按钮,新建一个网页文档，在“插入”面板中选择“媒体”标签，调出“媒体”面板，单击面板中的“Flash按钮” 调出
6、“插入Flash按钮”对话框。,第16页,“插入Flash按钮”对话框,第17页,接上,在“插入Flash按钮”对话框中的“样式”列表框中选择Blue sarper项目，“范例”标签中将显示出该样式按钮的显示效果。在“按钮文本”文本框中输入“Flash按钮”文字，在“字体”下拉列表框中选择“黑体”项目。单击“确定”按钮，完成“插入Flash按钮”操作，在网页中将插入如图所示的FLASH按钮。 单击“文件”“保存”菜单命令，将网页文档保存为“5-5.HTM”，按【F12】键，在浏览器中查看插入FLASH按钮网页的显示效果。,第18页,制作Flash文字,新建一个网页文档，在“插入”面板中选择“媒
7、体”标签，调出“媒体”面板，单击面板中的“Flash文本”按钮 ，弹出“插入Flash文本”对话框。 在“字体”下拉列表框中选择“黑体”；单击“颜色”按钮 ，将文字颜色设置成“黑色”；单击“转滚颜色”按钮 ，将转滚颜色设置成“蓝色”；在“文本”文本框中输入“FLASH文字的显示效果”文本；单击“背景色”按钮 ，将背景色设置成“黄色”。单击“确定”按钮，完成“插入Flash文本”操作，在网页中将插入如图所示的FLASH文本。,第19页,“插入Flash文本”对话框,第20页,接上,单击“文件”“保存”菜单命令，将网页文档保存为“5-6.HTM”，按【F12】键，在浏览器中查看插入FLASH文字网
8、页的显示效果。,第21页,插入Shockwave动画和Fireworks HTML,Shockwave影片对象的属性栏 Fireworks HTML对象的属性栏 插入插件,第22页,Shockwave影片在网页中和Dreamweaver中的显示效果,第23页,技术分析,Shockwave影片是由Macromedia公司的Director软件创建的。利用Director软件，不但可以制作出丰富多彩的动画，还可以制作出复杂的交互游戏。利用它，可以使网页变得丰富多彩。 想要在自己的电脑中播放Shockwave影片。条件是在“Macromedia Dreamweaver MXConfiguration
9、”目录下有播放Shockwave影片的插件。如果没有相应的插件，则单击该按钮后，会弹出一个提示框。播放Shockwave影片的插件可以从网上免费下载，网址是：http:/ 来创建、编辑、处理网页图片与网页动画，为网页中增加先进的互动性，可以在专业环境中优化图像。Fireworks 是编辑矢量和位图的综合工具，使用它可以轻松地输出带有HTML 和 JavaScript并适应使用要求的HTML文件。,第25页,插入Shockwave影片 插入Fireworks HTML,操作步骤,第26页,插入Shockwave影片,新建一个网页文档，在“插入”面板中选择“媒体”标签，调出“媒体”插入项目。在“插
10、入”面板中单击“Shockwave”按钮 ，弹出“选择文件”对话框。 在“选择文件”对话框中选择PICTURE/NEW.DCR影片文件，单击“确定”按钮，完成插入Shockwave动画操作。 单击“文件”“保存”菜单命令，将网页文档保存为“5-9.HTM”，按【F12】键，在浏览器中查看插入Shockwave影片网页的显示效果。,第27页,插入Fireworks HTML,新建一个网页文档，在“插入”面板中单击“Fireworks HTML”按钮 ，弹出“插入Fireworks HTML”对话框。 在“Fireworks HTML 文件”文本框内输入Fireworks文件目录与文件名，或单击“
11、浏览”按钮，弹出“选择Fireworks HTML 文件”对话框，选择Fireworks生成的“FIREWORKS.HTML”网页文档，单击“确定”按钮，即可插入Fireworks图像或动画。 单击“文件”“保存”，将网页文档保存为“5-10.HTM”，按【F12】键，在浏览器中查看插入Fireworks HTML网页的显示效果。,第28页,“插入Fireworks HTML”对话框,第29页,插入Java Applet程序的网页,Java Applet对象的属性栏,第30页,“插入JavaApplet程序”网页在浏览器中显示的两幅画面,第31页,技术分析,Java是个面向网络的程序设计语言，
12、用来让程序员创建应用程序，这些应用程序可以通过网络下载，而且可在任何计算平台上安全地运行。Applet是Java的小型应用程序。Java Applet可以嵌入HTML程序中，通过主页发布到Internet网上。可以从网上下载Java Applet程序文件及有关文件，存放在本地站点的一个子目录下。,第32页,操作步骤,新建一个网页文件，设置背景色为浅黄色。 使用Photoshop软件将5幅图像加工成一样大小，均为宽300个像素，高200个像素。然后将它们保存到站点目录下的GIF文件夹中。 将含有Java Applet程序的文件和其他文件复制到站点目录下，然后打开它的使用说明文件，观察该Java
13、Applet程序的使用方法。,第33页,使用说明,主题：特效显示图的Applet 文件名：Efficient.class 适用浏览器：IE v4.0、IE v4.01、Netscape v4.03、Netscape v4.04 功能说明：这是一个显示图的Applet，图一张一张的被显示出来，这个效果是下一张慢慢的从中间扩大，已致将整个Applet覆盖住。以下是HTML的说明： ,第34页,接上,这个Applet可以让使用者显示5张图，上面参数（image1image5）便是图文件的文件名，你可以选择自己喜欢的图像。最多可以使用5张图，如果图像少于5张，则需把其他没有用到的image参数设成同一
14、个文件名，文件名可以重复。delay参数代表一张图像显示在屏幕上的时间，单位是ms，可以更改value 里面的值。 原始程序：请看Efficient.java,第35页,接上,单击网页编辑器窗口内某位置，使光标出现在要插入插件的地方。 单击“插入”（媒体）面板中的Applet按钮 ，弹出“选择文件”对话框。利用该对话框调入刚刚复制的名字为Efficient.class的Java Applet程序文件。 再单击网页文档窗口右下角启动器中的“显示代码视图”按钮 ，弹出“代码检查器”对话框。然后用上面使用说明中的程序去替换“代码检查器”对话框中的程序段。,第36页,接上,将HTML程序的内容进行修改
15、如下： 单击“代码检查器”对话框右上角的“关闭”按钮 ，关闭“代码检查器”对话框。 单击“文件”“保存”菜单命令，将网页文档保存为“5-4.HTM”，按【F12】键，在浏览器中查看插入Java Applet程序网页的显示效果。,第37页,插入ActiveX的网页,ActiveX对象的属性栏中各选项的作用,第38页,Active X在网页中和Dreamweaver中的显示效果,第39页,技术分析,ActiveX控件是Microsoft对浏览器的功能扩展，其作用与插件基本一样。所不同的是：如果浏览器不支持网页中的ActiveX控件，浏览器会自动安装所需的软件。如果是插件，则需要用户自己安装所需的软
16、件。,第40页,操作步骤,新建一个网页文档，在“插入面板中”选择“媒体”标签，调出“媒体”插入项目。单击“插入”面板中的ActiveX按钮 ，在网页中插入一个ActiveX控件。 双击网页中的ActiveX控件，弹出“选择Netscape的插入文件”对话框。在对话框中选择和网页文档在同一个目录下的“A.SWF”文件，单击“确定”按钮，完成插入ActiveX操作。 单击“文件”“保存”菜单命令，将网页文档保存为“5-5.HTM”，按【F12】键，在浏览器中查看插入ActiveX网页的显示效果。,第41页,有移动动画的网页,“时间轴”面板中各选项的含义 通道,第42页,移动动画开始前和开始后的显示效果,第43页,技术分析,利用时间轴功能，可以在网页中插入一个动画，增加网页的动态效果。它通过在不同
