当前位置:学者斋 >

设计制作 >网页设计 >

Dreamweaver怎样实现飘浮光球特效

Dreamweaver怎样实现飘浮光球特效

大家都知道,Dreamweaver是一款专业的网页设计工具,提供了许多方便、实用的功能,使得以前许多网页效果的实现从繁琐的代码中解脱出来,只要轻点鼠标即可实现。其中为网页图像增添特效就是其具有特色的功能之一,利用它可以为图像添加诸如阴影、运动、波浪、及淡入淡出等特效。这种特效不会增加图像的大小,当然也不会影响其下载速度。其具体的实现方法如下:

Dreamweaver怎样实现飘浮光球特效

1、在Dreamweaver编辑窗口中,点击菜单命令“Window/Css Styles”打开样式浮动面板,在浮动面板中点击右键菜单中的“New Style”选项或者点击右下角带“+”的按钮,打开新增样式对话框(如图1),在“Name”栏中输入新增特效名称,并选择Type的第一个选项:“Make custom style”,然后点击“OK”按钮,并在出现的保存对话框中输入文件名保存样式文件。

[ 图1 填上特效名称 ]

2、在随即出现的样式定义设置对话框中,选择Category列表框中的最后一项“Extensions”选项(如图2),打开扩展窗口参数设置窗口,其中“Page Break”选项用于设置样式应用前后的位置,可以不予设置,而“Visual Effect”下的“Cursor”则用于自定义鼠标指针形状,“Filter”用于选择效果的类型,共有16个选项。用户选择好效果类型以后,将其中有问号的地方改成自己希望的参数,点击“OK”即完成样式的定义。

[ 图2 选择设置参数 ]

3、点击菜单“Insert/Image”打开图片,选择对话框插入希望应用特效的图像,然后在编辑窗口中选中该图像,并点击样式浮动面板中刚才创建的样式,按下“F12”键,在浏览器中即可看到特效显示的最终效果。如图3即为Filter类型为“Wave”,参数为:“Add=1,Freq=6,LightStrength=20,Phase=8,Strength=15”的样式在图片上应用以后的效果对比。

[ 图3 最终效果 ]

4、如果用户应用后对效果不很满意的话,可以在样式浮动面板中点击快捷菜单中“Edit”选项,重新打开样式定义窗口进行参数设置,直到满意为止。

  【拓展阅读】

  Dreamweaver时线的应用

时线面板负责改变层或图片在整个时间上的属性。如果要打开这个面板可以选Window菜单中的timelines命令。下面我们看这个面板的`具体内容。请看图B一。面板上最上一栏是控制项。下面标有大写B(Behavior)的栏是行为栏,中间是时间标尺,标尺上有一个红色的小块是监视块,这个小方块表明了当前的显示状况。最下面是各个项目,图中有两个项目,一个是层项目,一个是图片项目。下面我来介绍时线面板的具体用法。

选择栏中包含对时线名称的选择和修改,当我们建立多个时线时可以用这个选择项快速地在各时线间穿插,在网页比较复杂时建立多个时线可以更好的编辑或组织。图中显示的时线是“timeline1”。接下来的几个按钮是监视位置的选择,最左边一个是将监视块调到最左边。

倒退按钮是将监视块向左移动一小格,播放按钮是将监视块向右移动一小格,如果当前位置上没有任何项目则使用播放按钮监视块不会向前滑动,而使用倒退按钮则立即回到项目的尾端(最右端)。这几个按钮中间是监视块所在的具体位置。可以通过这个框确定监视块的详细位置。“Fps”框允许作者指定动画每秒的帧数,缺省值为15,这是一个平均数,每秒15帧在大多数情况下可以达到较好的显示效果。

如果浏览者的机器更好的话我们还可以增加每秒的帧数,这样显示效果更加平滑。这一栏右面的“Autoplay”检查框是设置动画的播放方式。选中时会弹出对话框告诉用户这一项已选中,当网页被开启的时候会自动播放动画。如果我们选中“Loop”检查框,也会弹出对话框告诉用户这一项已选中,动画会循环播放。一般情况下这些项都可以选中,除非我们为了使网页更灵活而设定在浏览者执行某种动作时播放动画。比如当传输速度十分有限时,我们可以先使用一幅静止的图片,当浏览者点击这幅图片时播放动画。这样既分散了等待的时间,使浏览者不至于因为长时间看不到网页而放弃浏览,又兼顾了网页的质量。我们可以随时点击带有问号的按钮来获得帮助,就像其它浮动面板上的问号按钮一样。

时线面板中的行为栏功能不凡。我们可以在任意位置上增加相应的行为以增强对页面的控制和对外界的适应。图一中的时间栏中有两个方块,一个黑色,另一个是中间有黑色减号标志的淡紫色方块。黑色的一个在我们点中行为栏上某个区域后出现表明已选中这个区域,可以在这个时间上设置行为,选中的同时监视块也滑到选中的时间上,这样作者可以看到执行行为时页面的状态。

  • 文章版权属于文章作者所有,转载请注明 https://xuezhezhai.com/sjzz/sjzz/z4g922.html