通行证: 用户 密码 域名空间  下载中心 社区论坛 信息公告 my小屋
联系我们
设为首页
加入收藏

 

qq,asp,php,jsp,xml,sql,.net,编程 程序 网页图象 建站经验 私服
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿
论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图
专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版
社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 韩国素材 | 素材图库 | 广告服务 | 服务
当前位置:首页>>网页设计>>dreamweaver>>正文 新版上线![旧版]
注:打开慢时请稍等

dreamweaver制作网页幻灯片效果

http://www.iyit.net  日期:2006-5-27 9:51:54  来源:网络转载    点击:
参加讨论

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

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

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

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

  本例中做好的播放器,可在下列地址浏览:

http://webart.myrice.com/sample/index.htm。进一步,为了让播放器更加生动,你可以同时给幻灯片的播放加上声音。

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

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



编辑:黑鹰 [发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇:在 dw 中插入 flash 的参数详解(二)
下一篇:dreamweaver mx打造弹出“向导”
转载请注明来源:www.iyit.net
特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。

 相关文章
最新更新 热点排行 推荐新闻
dreamwavermx与asp.net(十四)
dreamwavermx与asp.net(十三)
dreamwavermx与asp.net(十一)
dreamwavermx与asp.net(十)
dreamwavermx与asp.net(九)
dreamwavermx与asp.net(十四)
dreamwavermx与asp.net(十三)
dreamwavermx与asp.net(十一)
dreamwavermx与asp.net(十)
dreamwavermx与asp.net(九)
dreamwavermx与asp.net(八)
dreamwavermx与asp.net(七)
dreamwavermx与asp.net(六)
dreamwavermx与asp.net(五)
dreamwavermx与asp.net(四)
表格边框魔鬼教程
驯服不听话的网页表格
dreamweaver的行为事件
dreamweaver制作网页幻灯片效果
去除dw mx 2004表格宽度辅助
优秀公益广告作品欣赏(8)
java数据类型转换
windows xp专业版iis连接数的更改
新开放qq免费挂级网站
优秀公益广告作品欣赏(7)
免费在qq上看在线电影电视听音乐
office2007简体中文版浮出水面 美图抢
qq珊瑚虫外挂4.0版本发布!
web服务器配置全攻略(三)
免费把qq炫铃设为本机qq的系统提示音
msn8.0下载
asp 五大高效提速技巧
如何在win20003中更好的玩游戏
qq收费头像免费使用的方法 
微软将在华推分期付款,充值卡pc 可低价
 amd处理器am2测试 风扇竟运行7分钟
exeplorer.exe错误的问题的总结、解决
asp.net 2.0 中的异步页功能应用
硬盘坏道修复及数据恢复宝典
免费登录搜索引擎入口大全
 友情链接
设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接
copyrights © 2004-2006 iyit.net all rights reserved.
网站合作、广告联系qq:147007642、466949678
易特网络技术 点击这里给我发消息