您所在的位置:首页 > 教程首页 > 软件教程 > 网络工具 > Dreamweaver制作网页幻灯片方法

Dreamweaver制作网页幻灯片方法

来源:互联网 | 编辑:慕冰岚 | 时间:2014-08-30 11:21:08 | 阅读:

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

Dreamweaver制作网页幻灯片方法_52z.com

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

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

Dreamweaver制作网页幻灯片方法_52z.com

步骤四:为按钮和其它添加行为(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所示。

Dreamweaver制作网页幻灯片方法_52z.com

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

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

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

Dreamweaver CS6 官方中文版
Dreamweaver CS6 官方中文版

类型:主页制作  大小:278.7 MB  平台:

Vista/winXP/win7/win8

相关专题:

h5页面制作工具网页三剑客Dreamweaver
猎龙战记

你可能感兴趣的内容

  • wifi密码破解教程
    wifi密码破解教程
    1.准备工作网卡首先,你得有一个至少支持monitor模式的网卡(内置的,外接的均可),...

    互联网

    2016-02-23 14:49:11

  • 2014马年男孩取名字大全
    2014马年男孩取名字大全
    取名软件大全:https://www.52z.com/zhuanti/baobaoquming.html2014马年男宝宝起名方法:...

    互联网

    2014-08-04 10:47:18

  • 有效解决迅雷7下载速度慢的10种方法
    有效解决迅雷7下载速度慢的10种方法
    迅雷是目前使用的最广泛的下载软件,迅雷的下载速度可谓是同类软件最快的,不过迅雷的设置还是需要一...

    互联网

    2016-09-02 10:56:28

  • 马年取名草字头的字大全
    马年取名草字头的字大全
    取名软件大全:https://www.52z.com/zhuanti/baobaoquming.html起名草字头的字有哪些芝,...

    互联网

    2013-12-31 17:50:49

  • 腾达路由器怎么设置
    腾达路由器怎么设置
    现如今,市场上的路由器种类繁多。其中,Tenda路由器使用也比较广泛。下面,小编为大家介绍一下腾达Te...

    互联网

    2013-04-16 16:02:11

  • 猎豹wifi常见问题解决方法
    猎豹wifi常见问题解决方法
    1、手机显示WiFi已连接,却上不了网?请先检查开启免费WiFi的电脑是否有稳定的网络接入;...

    互联网

    2013-12-25 14:50:16

  • 王字旁的字大全
    王字旁的字大全
    部首为王的汉字部外笔画数0:王部外笔画数1:玌部外笔画数2:玎玑玐玏...

    互联网

    2014-02-14 14:44:04

  • Win7笔记本怎么做wifi热点
    Win7笔记本怎么做wifi热点
    WIn7本身就自带了WiFi和SoftAp(即虚拟无线AP)功能,只要激活它们,就可以让笔记本变身为一个“WiFi...

    互联网

    2013-11-20 09:54:03

  • 2014马年女孩子名字大全
    2014马年女孩子名字大全
    取名软件大全:https://www.52z.com/zhuanti/baobaoquming.html马年女孩子名字大全  名...

    互联网

    2013-12-31 17:41:58

  • 移动宽带路由器设置图文介绍
    移动宽带路由器设置图文介绍
    移动宽带路由器如何设置,我们下面来看一个移动宽带路由器设置案例:移动宽带(铁通宽带),路由...

    互联网

    2013-03-14 16:04:10

热门游戏

下载声明 | 法律声明 | 版权声明 | 友情链接 | 智能电视应用| 发布软件 | 网站地图

本站为非盈利网站,不接受任何广告。本站所有软件,都由网友上传,如有侵犯你的版权,请发邮件给 admin@52z.com 湘ICP备13012539号-1