现在的位置: 首页 > 综合 > 正文

Dreamweaver怎样制作网页幻灯片效果

2020年06月18日 综合 ⁄ 共 1638字 ⁄ 字号 评论关闭

  当用户按下控制盘上的“PLAY”键时图片将作幻灯片似的连续循环播放。按下“PAUSE”时,播放中的图片就停留在当前位置。按下“RESTART”键时,幻灯片又从头播放。而这一切,仅仅采用Dreamweaver3的内嵌的层(Layer)、时间链(Timeline)和行为(Behavior)技术,就可实现,所有的JavaScript代码都会在Dreamweaver中自动生成。下面学步园小编来讲解下Dreamweaver怎样制作网页幻灯片效果?

  Dreamweaver怎样制作网页幻灯片效果

  步骤一:图形元素的制作和预备。

  制作幻灯片所用的图片并将之放入Dreamweaver的层中。我们预备在每个幻灯片中实现7幅图片的交替变换,因此我们需要制作7幅内容不同的图片。注重图片要在Photoshop中进行优化压缩,并调整成相同的尺寸。建立一个层,插入初始图片,该图片就是幻灯片默认得头一张图片。将层命名为Layer_main,并把该层的Index值设为1。

  步骤二:制作播放器的外观和四个控制按钮。

  利用Photoshop制作一个金属效果的播放器外观。(具体效果就看你的喜好啦,也许你可从Winamp的skin中受点启发)。作最佳优化后,输出一个透明的GIF图片。为了让鼠标移上后按钮有些变化,你不得不每个按钮制作2张图片(共6个),两个按钮只需有颜色上的差异即可。先建三个层,调整好位置,并插入三个播放键的各自的二张翻滚图片(RolloverImage)(Insert-RolloverImage)。通过调节层的Index-Z的值,确保播放器所在的层在Layer_main层的上面,在按钮所在层的下面。

  Dreamweaver怎样制作网页幻灯片效果

  步骤三:创建幻灯片播放时间链。

  按CtrlF9键打开时间链浮动工具面板。选取其中幻灯片所在层(Layer_main)中的初始图片(确保选取的是图像,而不是层),用鼠标拖至时间链浮动工具面板,在时间链起始处释放鼠标。设定帧速率为Fps为5,并勾选Loop框。选择时间链中的其中一帧,右击鼠标,选择"AddKeyframe"(添加要害帧),选择另一幅幻灯片图片,以更换层(Layer_main)中的初始图片。重复这个操作,将剩下的5幅图片全部加到该时间链的不同要害帧上。最后适当调节各要害帧之间的距离。并将该时间链命名为TimeLine_main。

  步骤四:为按钮和其它添加行为(Behavior)。

  点击选择PLAY按钮所在的图片,在行为浮动工具面板中,从(添加)动作下拉列表中选择Timeline-PlayTimeline(播放时间链),并在弹出的对话框中选择时间链Timeline_main。单击OK。默认方式下,就会为切换动作设置一个onClick事件。点击选择PAUSE所在的图片。在行为浮动工具面板中,从(添加)动作下拉列表中选择Timeline---StopTimeline(停止播放时间链),并在弹出的对话框中选择时间链Timeline_main。单击OK。默认方式下,就会为切换动作设置一个onClick事件。

  点击选择REPLAY所在的图片。在行为浮动工具面板中,从(添加)动作下拉列表中选择Timeline---GotoTimelineFrame(转向放时间链帧),并在弹出的对话框中选择时间链Timeline_main,在Frame文本框中输入1。单击OK。默认方式下,就会为切换动作设置一个onClick事件。再添加下一个动作。从(添加)动作下拉列表中选择Timeline---PlayTimeline(播放时间链),并在弹出的对话框中选择时间链Timeline_main。单击OK。默认方式下,就会为切换动作设置一个onClick事件。

  以上就是关于“Dreamweaver怎样制作网页幻灯片效果”的内容,希望对大家有用。更多资讯请关注学步园。学步园,您学习IT技术的优质平台!

抱歉!评论已关闭.