当前位置: 首页 > 网页教程

网页教程

网页作业如何让Dreamweaver实现漫天花雨效果

淡蓝色的天空下,一朵朵花瓣随风飘下,慢慢的在屏幕中飘荡。你一定要说这种效果用FLASH可以实现。其实用DREAMWEAVER也可以很轻松的实现!

   Dreamweaver网页作业之所以能够超过Frontpage而成为网页作业设计师的首选设计工具,在于它对DHTML的强大设计功能,上面所说的效果,其实是 DHTML的一种。但是使用Dreamweaver网页作业,你无须去编写冗长的代码,在DW的窗口里几个拖放,就能轻松搞定。

  首先用 Firework或Imageready一类的软件制作出几幅动态的GIF花瓣图片来。以ImageReady3.0为例子。按Ctrl+N 新建一个文件,大小100*100左右,背景色可根据网页的背景自行设定。按Ctrl + Shift + N新建一层,取名Flower1,用勾画工具(Polygonal Lasso Tool),勾画出一个花瓣的外形,如图1所示。然后将前景色设为粉红色(颜色代码为:FF99FF),按Edit / Fill 填充,然后在层面版的Flower1上按右键,选择Layer Style / Stroke ,如图2所示。在弹出的Stroke面板里的选择色彩的地方选择一个比刚才的粉红略深的颜色,(颜色代码为:C764B4),Size选择为1,这样花瓣 就被描边,看上去更真实一些。这样一个花瓣就制作完成了。

 

12460429_2005070611385510223400.gif

 

12460429_2005070611385516013500.gif

下 面我们来让花瓣动起来。将Flower1复制一层,在层上按右键,选择Duplicate Layer。取名为Flower2。打开Imageready的动画面板,操作方式为:Window / Show Animation,出现如图3的动画面板。按下最下面一排倒数第二个按纽,新建一个动画影格。回到并选中第一影格的位置,在层面板上将Flower2层 隐藏。操作方式为单击层前的那个眼睛,如图4所示。

 

12460429_2005070611385517835200.gif

 

按照上面的做法,我们再增加一个图层,在图层中插入另外一幅稍小的图片,重复上面的动作,只是图层移动的轨迹可以改变一下,只需要改边当选中某个关键影格的时候,图层在主面板的位置就可以了。以次类推,一般加到Flower10层以上的样子,才有满天花雨的效果。