Dreamweaver制作网页幻灯片效果


  作为一位不懂代码的业余网页制作 爱好者, 一般艳羡专业程序人员在阅读器中编制出的 动机超酷的一些多媒体作品 。唉,无奈程序那东东,酶涩南学,非一日之功,需求良好的逻辑思维 威力和足够的 磨难方可成就 。是否不会程序,就永远就不能实现自己的创意和想法了呢?非也!现在我们要制作的便是在网页中的一个幻灯片播放器 。当消费者按下操纵盘上的“PLAY”键时图片将作幻灯片似的延续循环播放 。按下“PAUSE”时,播放中的图片就停留在目前位置 。按下“RESTART”键时,幻灯片又从头播放 。而这 所有,仅仅采纳Dreamweaver3的内嵌的层(Layer)、 工夫链(Timeline)和行为(Behavior)技术,就可实现,所有的JavaScript代码都会在Dreamweaver中自动生成 。这里不是鼓舞大家不要接触程序代码,相反,若读者 主宰了一些编程技术的 根底,会在网页制作中起到相当主要的作用 。实际上,这已是当今专业WEB页面制作人员的一项 根本素养要求 。

下面分步骤对这个播放器的制作加以 注明 。

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

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

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

利用Photoshop制作一个金属 动机的播放器外观 。(具体 动机就看你的 爱好啦, 兴许你可从Winamp的skin中受点启示) 。作最佳优化后,输出一个透明的GIF图片 。为了让鼠标移上后按钮有些 变迁,你只能每个按钮制作2张图片(共6个),两个按钮 惟独有 色彩上的差别即可 。先建三个层,调整好位置,并插入三个播放键的各自的二张翻滚图片(Rollover Image)(Insert-Rollover Image) 。通过调节层的Index-Z的值,确保播放器所在的层在Layer_main层的上面,在按钮所在层的下面 。排版好的各层如图1所示 。

12430192_2005062411431949791800.gif

步骤三: 缔造幻灯片播放 工夫链 。

按Ctrl+F9键 打开 工夫链浮动工具面板 。选取其中幻灯片所在层(Layer_main)中的初始图片(确保选取的是图像,而不是层),用鼠标拖至 工夫链浮动工具面板,在 工夫链起始处 开释鼠标 。设定帧速率为Fps为5,并勾选Loop框 。 取舍 工夫链中的其中一帧,右击鼠标, 取舍"Add Keyframe"(增加 要害帧), 取舍另一幅幻灯片图片,以改换层(Layer_main)中的初始图片 。 反复这个操作,将剩下的5幅图片所有加到该 工夫链的不同 要害帧上 。最终适当调节各 要害帧中间的 间隔 。并将该 工夫链命名为TimeLine_main 。 构建好的 工夫链如图2所示 。

12430192_2005062411431952922900.gif

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

点击 取舍PLAY按钮所在的图片,在行为浮动工具面板中,从+(增加)动作下拉列表中 取舍Timeline-Play Timeline(播放 工夫链),并在弹出的对话框中 取舍 工夫链Timeline_main 。单击OK 。默许 模式下,就会为切换动作设置一个onClick事件 。点击 取舍PAUSE所在的图片 。在行为浮动工具面板中,从+(增加)动作下拉列表中 取舍Timeline---Stop Timeline( 停留播放 工夫链),并在弹出的对话框中 取舍 工夫链Timeline_main 。单击OK 。默许 模式下,就会为切换动作设置一个onClick事件 。

点击 取舍REPLAY所在的图片 。在行为浮动工具面板中,从+(增加)动作下拉列表中 取舍Timeline---Go to Timeline Frame(转向放 工夫链帧),并在弹出的对话框中 取舍 工夫链Timeline_main,在Frame文本框中输入1 。单击OK 。默许 模式下,就会为切换动作设置一个onClick事件 。再增加下一个动作 。从+(增加)动作下拉列表中 取舍Timeline---Play Timeline(播放 工夫链),并在弹出的对话框中 取舍 工夫链Timeline_main 。单击OK 。默许 模式下,就会为切换动作设置一个onClick事件 。REPLAY的图片增加好的行为如图3所示 。

12430192_2005062411431954573200.gif

本例中做好的播放器,可在下列地址阅读:http://webart.myrice.com/sample/index.htm 。进一步,为了让播放器更加 活泼,你 可以同时给幻灯片的播放外加声音 。

若要把这个播放器放到网上,同时图片总容量超过150K, 可以给页面作一个“Loading(加载)层”,待所有内容下载 结束后,才显示出来 。 免得因为图片未下载完而产生播放不畅的觉得 。对于“Loading”层的制作 步骤,在众多地方有介绍,这里就不再详述了 。

把这个例子变通一下,我们 可以作一个相册 。你 可以把你的家庭或女朋友的相片加在幻灯片所在的 工夫链上,而且外加Last(上一张)、 Next(下一张)等按钮,便于阅读者逐张观赏 。若觉得相片太小不能看清晰细节,你还 可以加一个Zoom In(放大)按钮,链接到一个有单张放大相片的新窗口页面 。最终把它放到网上,相信 定然会给你的家人或女朋友带去一份惊喜 。