Dreamweaver制作网页幻灯片效果
发布时间:2010-07-06 13:48:00
作为一位不懂代码的业余网页制 * 好者,常常羡慕专业程序人员在浏览器中编制出的效果超酷的一些多媒体作品。唉,无奈程序那东东,酶涩南学,非一日之功,需要良好的逻辑思维能力和足够的磨练方可成就。是不是不会程序,就永远就不能实现自己的创意和想法了呢?非也!现在我们要制作的就是在网页中的一个幻灯片播放器。当用户按下控制盘上的“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所示。
图1
步骤三:创建幻灯片播放时间链。
按Ctrl+F9键打开时间链浮动工具面板。选取其中幻灯片所在层(Layer_main)中的初始图片(确保选取的是图像,而不是层),用鼠标拖至时间链浮动工具面板,在时间链起始处释放鼠标。设定帧速率为Fps为5,并勾选Loop框。选择时间链中的其中一帧,右击鼠标,选择"Add Keyframe"(添加关键帧),选择另一幅幻灯片图片,以更换层(Layer_main)中的初始图片。重复这个操作,将剩下的5幅图片全部加到该时间链的不同关键帧上。最后适当调节各关键帧之间的距离。并将该时间链命名为TimeLine_main。建立好的时间链如图2所示。
图2
步骤四:为按钮和其它添加行为(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所示。
图3
本例中做好的播放器,可在下列地址浏览:http://webart.myrice.com/sample/index.htm。进一步,为了让播放器更加生动,你可以同时给幻灯片的播放加上声音。
若要把这个播放器放到网上,同时图片总容量超过150K,可以给页面作一个“Loading(加载)层”,待全部内容下载完毕后,才显示出来。以免由于图片未下载完而产生播放不畅的感觉。关于“Loading”层的制作方法,在很多地方有介绍,这里就不再详述了。
把这个例子变通一下,我们可以作一个相册。你可以把你的家庭或女朋友的相片加在幻灯片所在的时间链上,并且加上Last(上一张)、 Next(下一张)等按钮,便于浏览者逐张欣赏。若觉得相片太小不能看清楚细节,你还可以加一个Zoom In(放大)按钮,链接到一个有单张放大相片的新窗口页面。最后把它放到网上,相信一定会给你的家人或女朋友带去一份惊喜。
猜你喜欢
- 做项目的时候,一位同事导数据的时候,不小心把一个表中的数据全都搞重了,也就是说,这个表里所有的记录都有一条重复的。这个表的数据是千万级的,而
- 由于现在在公司负责制作标准的静态页面,为了增强客户体验,所以经常要做些AJAX效果,也学你也和我一样在,学习AJAX。而设计AJAX时使用的
- 先说明一下,现在网上有一些功能很强大的动画类,如MOOFX之类,我为什么要写这三个动画函数?因为在写zDialog时需要且只需要用到透明度渐
- 目前,保护数据免受未授权用户的侵犯是系统管理员特别关心的问题。如果你现在用的是MySQL,就可以使用一些方便的功能来保护系统,来大大减少机密
- 1、查看数据库中有哪些用户? select username from all_users;2、查看数据库中有哪些DBA用户? select
- 下拉菜单平常见到的都是用js来实现的,本文介绍的方法是使用纯CSS实现导航下拉菜单功能,代码符合标准,兼容性好且环保,制作下拉菜单的不错选择
- MySQL中有很多的基本命令,show命令也是其中之一,在很多使用者中对show命令的使用还容易产生混淆,本文主要介绍了show命令的主要用
- 1、root函数格式root()功能描述返回一个路径串变量应用代码'sample string = c:\intels\jingca
- 异步操作数据的方式有两种常见的方式:XMLHttpRequest 和 iframe. 孰优孰劣在此我们不争论,只是想举一个例子说明在获取网片
- 关于数据库的逻辑设计,是一个很广泛的问题。本文主要针对开发应用中遇到在MS SQL Server上进行表设计时,对表的主键设计应注意的问题以
- 最近将Jesse James Garrett的《用户体验的要素》一书读了两遍,做一些简要的摘录并添加一些个人注释。当然,一本好书绝对不是简单
- jQuery 1.4 源码 449 行(core.js 431 行),判断是否为函数的方法如下(思路来源于 Douglas Crockfor
- 我正在开发一个档案管理系统,需要从数据库中同时调出图像及相关的文字说明,可我只做到了单纯地显示图片,像有一个数据库CHUNFENG,在数据库
- 研究好多天了,也试过好多办法了,总结出目前发现最好的方法:先说一下基本的东西:<%@ codepage=65001%>
- 通过 CSS transform (firefox文档, safari文档)属性. 无所不能的css也开始玩起3D效果了。在配合 CSS t
- 在你自己安装了一个新的MySQL服务器后,你需要为MySQL的root用户指定一个目录(缺省无口令),否则如果你忘记这点,你将你的MySQL
- 代码如下:vbcrlfvbs常量相当于vbcr & vblf 就是常见的那个 chr(13) & chr(10),用Chr(
- JS在firefox中的兼容性问题,自己也经常遇到.此文是网上资料,不过时间较久不记得原址了...1. document.form.item
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 13 - Regular ExpressionsM
- 为了应用方便,您可能需要给数据库的每条记录都添加日期/时间戳,以便确定各个记录添加到数据库的时间。在Access数据库应用中,使用Now()