Dreamweaver制作网页幻灯片效果(1)

中华网科技 http://tech.china.com 2005-06-24 11:42:55

【进入BBS】【进入聊天室】【 推荐给朋友 】【浏览字号：大 中 小】【关闭窗口】

　　作为一位不懂代码的业余网页制作爱好者，常常羡慕专业程序人员在浏览器中编制出的效果超酷的一些多媒体作品。唉，无奈程序那东东，酶涩南学，非一日之功，需要良好的逻辑思维能力和足够的磨练方可成就。是不是不会程序，就永远就不能实现自己的创意和想法了呢？非也！现在我们要制作的就是在网页中的一个幻灯片播放器。当用户按下控制盘上的“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所示。

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

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

首页 上页 | 1 | 2 | 下页 尾页  共 2 页