开启左侧

Dreamweaver4教程全接触

[复制链接]
 楼主| 发表于 2012-2-5 01:50:23 | 显示全部楼层
0912092124033df27e3f4b22e0.gif
图十一点击左上角的"+"号,在弹出的菜单中选择 Swap Image ,如图十二:

0912092124f5760da46723766c.gif
图十二然 后弹出的设置窗口如图十三:

0912092124a2881f0abb7649c3.gif
图十三Images:图片列表框,其中罗列了所有网页中的图片,如 blank 、Image1 等等,对了,那两个 Unnamed <img> 指的是 School 与 Computer.jpg 图片,由于它们没有特殊效果,所以没有给它们起名。

要变换哪幅图,只需点选相应的图片就行了。


提示:在一对一的翻滚图中用到的插入命令,只能决定选中图本身的替换图,而不能决定其他图片的替换图;用行为命令却可以向其他图片发出命令进行替换。如鼠标移上 phone.jpg 图片,不但告诉该图片用 phone-2.jpg 图片进行替换,还用 hint-phone 替换 "blank" 图片。而这,也就形成了一对多的关系。

Set Source to:设置替换图片,可以通过点按右边的 "Browse"按钮在文件夹中找到替换图片,也可以直接输入图片的地址。

Preload Images:预取图片,其原理在前面我们已经讲过,建议勾选。

Restore Images onMouseOut:当鼠标移出图片时恢复为一般状态下的原图像,建议勾选。

我们知道了原理,就可以非常轻易地对 phone.jpg 进行设置了。先在 Images 中选择 image "Image1"(确定 Image1 图片将发生替换),在 Set Source to 中找到 phone-2.jpg ;现在不要按 OK ,我们马上进行信息显示图片的行为设置:在 Images 中选择 Image "blank"(确定 Image1 图片发生替换的同时,blank 图片也发生替换),在 Set Source to 中找到 hint-phone.gif 文件,最后点按 OK ,这样,我们就完成了第一个图标的一对多翻滚图设置。

以此类推,为其他两个图标进行相应的设置就成功了。

四.总结:

翻滚图确实是非常简单的一项动态技术,但它的最终效果却具有如此令人着迷的魅力,以致于从简单的一对一翻滚,到一对多的翻滚替换,在互联网上都得到了大量的应用,而这,也正是我们将它列为第一项动态网页技术进行讲解的最主要原因!
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:28 | 显示全部楼层
行为(Behavior)


一.行为(Behavior)基础:

前面在制作一对多关系的翻滚图时,我们用到了行为(Behavior),那么, Dreamweaver 中的行为倒底是些什么东西?

实际上,Dreamweaver 中的行为,只不过是一系列 JavaScript 程序的集成,它包括两部分的内容,一个部分是事件,另一个部分是动作,动作是特定的 JavaScript 程序,只要在事件发生(如鼠标点击,或者页面装载)后,该程序(动作)就会自动运行。

Window/Behaviors 命令可以打开行为面板,如图一 :

0912092124838b97c7de022885.gif
图一点击左上角的 "+" 号,弹出一个长长的菜单,里面全是一些"特效动作",所有当前不可用的选项都是灰色的,只有在设定一定条件下那些灰色的动作才能使用。如图 二:

09120921248b7a47a76812e6b8.gif
图二对这些"动作"的解释如下:

Call JavaScript:调用 Javascript 脚本。 Dreamweaver 虽然内集了丰富的可供调用的 Javascript ,但如果你觉得不满意的话,可以调用自己制作的 Javascript 或第三方开发的 Javascript ,而这时就需要使用本选项。

Change Property:改变属性,如发生某个事件后,自动改变文本或图片信息,等等。

Check Browser:检查浏览器。同一个网页,在不同的浏览器上的显示可能大为不同,如果你要让自己的网页适合于大多数浏览器的话,可以分别针对不同的浏览器将所有的网页制作成几个不同的类别,然后再调用 Check Browser ,根据访问者浏览器的不同,进入相应的网页,从而让你的网页在每种浏览器上都是完美无缺的。

Check Plugin:检查插件。插件?比如你做了个 Flash 动画并放到自己的网页上,当访问者的浏览器有 Flash 播放插件,则可以播放动画,如果没有,这时如果你的网页具有 Check Plugin 功能,则可按你的解决方案对访问者进行提醒,如"你应该安装 Flash 播放器,下载地址......"。

Control Shockwave or Flash:控制 Flash 影像。为什么要控制 Flash 影像?其实,并不是每个 Flash 动画都是随网页打开就开始播放了,更多的是在网页上做一些按钮之类的带交互作用的图标,可以点击它开始播放动画,也可以通过拖拉进度条前进或后退,等等,而这,就需要 Control Shockwave or Flash 功能的支持。

Set Text/Set Text of Status Message:在状态栏显示信息。一般情况是,当鼠标放到某幅图像上会自动弹出信息提示;或者当鼠标指向某个链接会在该处自动显示链接信息,而状态栏中始终只有一个网页图标。要充分利用网页的有效空间,避免信息混杂现象,可以把那些事件信息通过壮态栏进行显示,这就需要在网页中进行 Set Text of Status Message 的设置。

Drag Layer:拖曳图层,主要用来制作随鼠标移动而发生位移的网页特效。

Go to URL:跳转页面。在输入栏中输入网址,然后回车,就可以到想去的网站。但在整个过程中,全是手工操作,而 Go to URL 却不同,只要你到了某个网页,不用你再动手,它自己就会把你带到另外的指定的网址去。最常见的例子是那些网址发生变化的网站,它们常常在旧网址的首页上注明网址已变,然后通过设置旧网页的 Go to URL 自动将访问者带到新的地址去。

Open Browser Window:打开浏览器。

Popup Message:弹出信息提示框。最常见的例子是访问者进入某个页面,该页面就会自动弹出一个消息框,显示先设定好的文本,如"欢迎访问本站"等等。

Preload Images:预取图片,主要功能在于保持效果的连续性,避免事件发生时的读取延迟。

Show/Hide Layers:显示/隐藏图层,非常通用的网页特效,如当鼠标移到某个对象上时,原来隐藏的图层显示出来,从而显示出该图层中的对象;当鼠标离开原对象,显示和图层再次隐藏。

Swap Image:翻滚图,用它不仅可以建立一对一的翻滚图,还可以建立一对多等更为复杂的"替换"特效。

Timeline中,Play Timeline/Stop Timeline/Go to Timeline Frame:主要是对等时线控制。等时线犹如一个动画过程集合,在不同的时间可以播放不同的动画,关于它的详细介绍我们将在下一节中讲解。本节中,你只需知道 Behavior 可以控制复杂的等时线并产生非常智能化的特效就行了。

Validage Form:表单验证。表单中如果有诸如密码式,字符数目等的限制,就可以应用表单验证功能。

二.行为示例:

上面我们就大部分常用的动态技术进行了解释,现在来看一看如何将这些特效变成实实在在的东西。由于内容太多,我们只是选择了几个比较简单的例子,以便于大家能够很容易地进行掌握。

1.在状态态显示信息:

从上面我们知道,Set Text/Set Text of Status Message 可以控制状态栏的显示信息,现在我们来看如何制作。

<1>.最终效果如图三(详见 16.htm ):

09120921247c1951896b7796a1.gif
图三图三中,当将鼠标移到"请看状态栏"这几个字上的时候,状态栏中会显示"请看状态栏"字样,当鼠标移开时状态栏中的信息消失,本例显示了带链接的内容在状态栏显示信息的方法;当将鼠标移动到图像上时,状态栏中会显示"这是索尼网站的一个图片"字样,当鼠标移开,状态栏中信息消失,本例显示了普通内容如图片在状态栏中显示信息的办法。

<2>.制作步骤:

先在编辑区域输入"请看状态栏"字样,并随便为它加上个链接信息。 如图四:

091209212418b926d7f68174fe.gif
图四全选几个字,用 Window/Behaviors 命令打开行为窗口。点击左上角的 "+"号,然后在弹出的窗口中选择 Set Text/Set Text of Status Bar 命令 ,如图五:

09120921243cf18959a458d6e4.gif
图五然后弹出如图六的窗口,其中, Message 对话框中的内容就是要在状态栏中显示的信息。这时只需向其中输入"请看状态栏"字样就行 了。如图六:

0912092124012626cdae080f03.gif
图六从前面我们已经知道,行为其实是一种针对事件(Event)触发的特殊效果,效果与事件缺一不可。刚才我们设置了效果(就是在状态栏中显示的信息),现在得设置事件了。

回到行为面板上,看左边 Events 下是什么事件。此处是 onmouseover (鼠标移上),那就不需要改了,因为我们正是要在鼠标移上那几个字样上时在状态栏显示特别信息,但这只是系统的默认事件,而且在本例中这个默认事件又恰恰合适,而在许多其他情况下,这种事件是需要另行选择的。要进行选择,只需点按 onmouseover 右边那个向下的小三角形,然后在弹出的菜单中进行选择就 行了。如图七:

0912092124b251983c72da8a53.gif
图七设置完鼠标移上效果,还得设置鼠标移出,状态栏信息消失的效果。办法很简单,还是选中那几个字,Set Text/Set Text of Status Bar ,然后在弹出的窗口中什么也别写(以便在状态栏中什么也不显示),点按 OK 后回到动作面板上,最后再将动作由 onMouseOver (鼠标移上)改为 onMouseOut (鼠标 移出)。如图八:

091209212494626e6663269e88.gif
图八带链接的文本设置完毕,下面我们加入图片(image/photo.gif),并按刚才的原理给它添加效果。不同的地方只是不用给图片添加链接信息,在状态栏中显示的信息不同,其他的设置完全一样,大家可以自己试着做一下。

2.弹出信息:

Popup Message 可以制作弹出信息效果,也就是打开页面,页面自动弹出对话窗口并提示预设好的信息。

<1>.最终效果如图九(详见 17.htm ):

09120922070c30a4a5a6aa1a75.gif
图九<2>.制作步骤:

现在我们用现成的 16.htm 文件来制作弹出式效果。用 Dreamweaver 打开 16.htm ,并用 File/Save As 命令将文件另存为一个新文件。

请仔细找到编辑窗口中左下角的 <Bo dy>符号,如图十:

09120922077cebc45909c360d2.gif
图十选中 <body>符号,然后在行为面板的行为菜单中点按 Popup Messa ge 命令,如图十一:
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:29 | 显示全部楼层
091209220727e3d1e2e92e7fbd.gif
图十一然后会弹出如图十二的窗口, Message 输入框中输入的信息将作为提示信息弹出。在输入框中输入"欢迎 大家来到我的网页"字样。

0912092207a0fee093ea61aabd.gif
图十二最后点按 OK 并进行保存,弹出式效果制作完毕。

三.总结:

关于 Dreamweaver 的行为介绍,我们暂时就讲这么多,重点在于教你学会运用的方法,而不是具体的一个一个的介绍,况且,网上关于这方面的资料也非常多,大家可以从他们那里得到很多的启迪。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:33 | 显示全部楼层
等时线(Timeline)


等时线犹如一个舞台,不同的时间,不同的演员,共同组成一个完整的演出。利用等时线技术,可以轻松制作最简单的位移动画;在 Behavior 的辅助下,又可以制作多个等时线交互,甚至相互影响的动画。

一.等时线基础:

等时线面板如图一 :

091209220749bb12d50fd7ffd6.gif
图一
0912101941309cd2456559665a.gif :等时线选择框,如果你在网页中使用了多个等时线,就可以在选择框进行等时线的选择,并可在动画中进行等时线的自动切换。

0912101941bac80b0cf700d769.gif :返回 第一帧。

091210194125d75044a8424afc.gif : 前进一帧。

09121019416f47e44a9092f687.gif :当前帧序号。

FPS:动画的播放速度,即每秒播放多少帧的意思。

Autoplay:自动播放,也就是网页打开后动画自动播放。

Loop:循环,也就是动画播放完毕后又重 新开始播放。

0912101941db0d62c7fcff6176.gif 横向标尺状数字:帧序号,可以方便地知道目前处于哪一帧(红色块状)。

二.等时线示例:

最终效果如图二:(详见 18.htm)

0912092207f1d2a2bcad8b5d4f.gif
图二
其中,"欢迎光临本站"几个字会从左上角自动向中下方移动,然后又自动向右上角移动。

制作步骤:

1.本例仍套用了 16.htm 网页,只是添加了一个等时线动画而已,所以先用 Dreamweaver 打开 16.htm ,然后另存为新文件。

2.用 Insert/Layer 命令,在编辑区域的左上角建立一个新图层,并在图层中输入"欢迎光临本站"字样,字 取红色。如图三:

09120922075e121c522290a127.gif
图三

提示:前面我们说过,Timeline 犹如一个舞台,既然是舞台就得有不同的剧情,而每一个不同的"剧情",我们都可以将其作为一个单独的图层看待;而且,还有一个值得注意的问题,那就是 Timeline 常常与图层操作紧密相连,缺一不可。所以提到 Timeline ,大部分情况下,你就得想到图层!

3.选定本图层,用 Window/Timelines 命令打开等时线面板,然后用鼠标拖动图层左上角的矩形到等时线的第一帧处,等时线面板会 变成如图四的样子:


0912092207d5556067c1428569.gif
图四
同时还会弹出如图五的面板,告诉你:可以改变该层的大小,位置,层顺序,以及可见性。 点按 OK 就行了。

0912092207a209ea7b9a16315f.gif
图五
用鼠标点一下第十五帧(即选 中第十五帧),如图六:
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:36 | 显示全部楼层
0912092207db7717396672b6bc.gif
图六
将第十五 帧拖到第三十帧,如图七:

0912092207b4f12d034d90273f.gif
图七

提示:为什么要将第十五帧拖到第三十帧?这是因为所有动画如果在十五帧内完成显得太仓促了,而三十帧作为整个动画的长度,在本例中比较合适。

再选择第十五帧,点击鼠标右键,从弹出菜单中选择"Add Keyframes "(添加关键帧),如图八:


0912092207e0d3be88d0f88216.gif
图八
结果如图九,请 注意看图中多出的关键帧标示:

0912092207ee6656c48ab1ad69.gif
图九
将图层移到 中下部你想放置的位置,如图十:

09120922072dc9dfe4a0e62078.gif
图十
选择第三十帧, 然后将图层移到右上部,如图十一:

0912092207e0109af35e3df886.gif
图十一
点选 Autoplay ,最后存盘并浏览。

三.总结

上面我们讲到的例子,确实是非常简单,但丝毫不影响对等时线基本技术的掌握,同时我们也看到,用等时线还可以改变图层大小,甚至图层属性等重要参数,因此,我们现在所掌握的东西,还远远不够,至于它们的深入了解,则不是本教程所涵盖的了。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表