中华网通行证
用户名 密码

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所示。

12430192_2005062411431949791800.gif


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

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

12430192_2005062411431952922900.gif


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

50款最具性价比数码相机/MP3推荐!
作者: 来源:赛迪网

发表言论:
笔  名:
查看评论
﹣相关报道
巧用DreamweaverMX设计导航栏特效 (2005-06-15 13:04:24)
Dreamweaver MX制作文字特效 (2005-06-14 10:05:07)
下拉菜单全攻略之Dreamweaver篇 (2005-06-02 18:20:54)
个性化表单设计技巧五则 (2005-05-24 18:29:35)

﹣精彩回顾
·揭秘越南姑娘的“性契约”(组图)
·中国研制成功银河麒麟操作系统
·近处偷拍野狮性爱 野草丛中见柔情(图)
·难得一见“水下分娩”全程跟拍(组图)
·古代性器具及性惩罚工具(组图)
·揭密中外历史上乱伦的名人们(组图)
·探秘世界各地诡异的干尸新娘(组图)
·隋唐两个王朝的九大著名"绿帽子"(组图)
·另类的惨烈:螳螂血战壁虎谁更凶猛(图)
·一分钟平静死去 注射死刑全过程(图)

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

潮流·时尚
·市场上的天价手机全搜罗
·一周降幅最大手机导购
·FM调频收音功能手机选购
·索尼爱立信三新机曝光
·诺基亚N73音乐版精品赏
·热门便携笔记本搜索导购
·近期最新上市机型大盘点
·矩阵Matrix鼠标垫细评测
·19寸20寸22寸液晶该买谁
·近期几款热卖MP3大推荐
·四大即将退市经典MP3选购
·06年最火七大DC缺点曝光
·六百万像素超值机型推荐
·诺基亚推出随身小音箱
·LG直板巧克力KG99评测
·MOTO新机即将国内上市
·超低价蓝牙手机导购
·130万像素一样拍出好照片
·诺基亚两款蓝牙耳机新品
·索爱纯美折叠机Z558评测

软件下载
·豪杰大眼睛 V2.5
·Foxmail V6.5
·天网防火墙Athena
·极品五笔 V6.8
·PPS网络电视
·超级兔子魔法设置
中华网搜索
站内搜索
全网搜索




热门搜索
耳机 印刷 手机 拖鞋
减速机 钟表 成人用品
减肥 枸杞 T恤 升降机
心理 健康 彩票 招聘
礼品 旅游 猎头 培训

产品服务
·机会!机会不容错过
·中华商机,搜索创新
·准确快捷,搜你所搜
·¥来¥往,尽在中华邮
·中华搜索,贴心搜索




科技频道主编信箱