打印

[Dreamweaver教程] dreamweaver滑动菜单的制作

dreamweaver滑动菜单的制作


/ d! x/ i0 ^0 ]% y) @% P163k团购网站系统官方服务论坛
  c( K: L! n+ j# x( a163K网站系统官方论坛言归正传,废话少说。准备工作如下: bbs.163k.com9 M+ U' N! f  p# x1 d+ M! _
团购网站系统,团购网程序5 w# `5 x0 d# O6 N) X. j6 u
  1. 在dw中新建一个空白文档(或者打开你要添加效果的页面)。
! J" [& ]% Z6 f/ h# _& N! e% Q# z1 q$ V163K网站系统官方论坛163K网站系统官方论坛3 z4 U5 Y9 T( \$ C6 R( ?: `6 X
  2. 设置好你自己的css风格。
8 `  x/ y- U( Q4 H( ?0 U0 ?团购网站系统,团购网程序163k团购网站系统官方服务论坛% A2 ?' ]$ n$ i! E
  3. 在页面上插入一个长500pix的表格(这里说明:插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变,如果你的页面之前没有做相关设置,那么这一部你可能要费点功夫整理一下你的页面结构)。 163K网站系统官方论坛' L' f9 n7 Y" t; I/ j1 Y

/ b6 j% m8 ?; O9 n163K网站系统官方论坛  4. 将光标置入表格内,点击菜单 [插入——层] 插入一个长500高20的图层,并命名为layer1。 为互联网事业发展提供源动力!% m# W: j6 W* E& k. e. }
163k团购网站系统官方服务论坛2 V% Z/ g2 h+ ^" {) H3 I
  5. 然后再将光标置入图层layer1,点击菜单 [插入——层] 再插入一个长500高130的图层layer2;并将layer2的属性中左边距和上边距都设置为0,并为它指定一个你喜欢的背景色。
# j- g3 {, q! t& H: }; e% {bbs.163k.com
8 ]  B# c7 m$ x- C团购网站系统,团购网程序  6. 然后重复步骤5的方法,再插入一个图层layer3,这个图层没什么特殊的用处,在我的这个教程中,我只不过是为了放置几个按钮而已。最后我的开起来如图:
' K# c1 k: F6 h4 f3 B团购网站系统,团购网程序
$ S8 a. g" |4 V7 h+ g8 D6 _团购网站系统,团购网程序
$ Q" w* b/ ]7 T2 ^$ M& |2 g* }团购网站系统,团购网程序9 `& M  I% N4 e/ o
  tips:这里这么做的目的是为了给你要滑动的图层前面加一个挡板,只有当点击的时候图层才从你的这个图层下缓缓的滑动出来。 163K网站系统官方论坛; R3 f" Q# F; Z: S% O) y
团购网站系统,团购网程序$ ?% @" A% j+ `6 C# w) k; q
  现在开始,才正式进入到我们今天要制作的滑动菜单的制作过程中。
( u3 @) q; I6 C  u- v% mbbs.163k.com1.现在让我们再次重复上面的步骤5,再插入一个图层layer4,设置图层属性为宽500 、150高,刚好是刚才layer2和layer3的高度之和,并将图层layer4调整到另外两个图层下面。如图:团购网站系统,团购网程序4 p* X0 r9 ^+ O

, p" |4 t1 V& `; N  u163K网站系统官方论坛163K网站系统官方论坛5 n  O, X3 z' w  N- Z0 d0 R
  然后我们点击图层layer2前面的眼睛让他闭合,这样可以让我们看到它下面的图层layer4. 163K网站系统官方论坛) T; V) I% |! Z( ]2 `' ?

' b4 @9 X( M% `8 W5 [  a; j2.这时,我们点击alt + f9 打开时间轴面板,dw已经为我们添加了默认的时间轴timeline1,然后,我们选中我们要滑动的图层layer4,在上面点击右键,选择 [添加到时间轴] 这时我们可以在时间轴面板中看到我们刚刚制定的图层layer4,这说明,我们已经添加成功了!
' F6 a( \: F/ ]9 m* D) c# B163k团购网站系统官方服务论坛bbs.163k.com; D: G; p8 A" ~2 u
3.然后我们点击时间轴上的第15桢,将图层layer4的属性面板中的上边距调整为150。到这里,一个能滑动的图层就算做好了,你可以拖动时间轴上面的红色方块慢慢从1走向15,你就可以看到你的这个图层慢慢的从layer2和layer3下面滑动出来! 6 I3 E4 p& J, ?  `2 ^

5 m, ?+ A4 g3 ?( Y5 G( y  u4 l8 E团购网站系统,团购网程序4.好了,现在我们只需要给这个会滑动的图层layer4设置一个可以激活他的动作就算over了:)这之前,我已经在我添加的layer3上插入了一个表格,并为layer4设置了两个按钮。
4 |# Q+ ?" H7 v9 s& s" Z4 K163K网站系统官方论坛
+ T, k% ^, P  y1 b" D团购网站系统,团购网程序5.我们先设置激活滑动图层的动作。选择上展开这个按钮,转到行为面板,点击在出来的菜单中选择 [时间轴——播放时间轴] dw会弹出一个窗体,在上面的下拉菜单中选择timeline1。
5 f- H+ w2 h2 J! A/ h; G2 e163k团购网站系统官方服务论坛
3 @1 ~* _+ f. K2 {bbs.163k.com然后在行为面板中确认事件为onclick 为互联网事业发展提供源动力!% r& a2 t8 r7 x
163k团购网站系统官方服务论坛0 k$ G& a) j: ]1 k* i
163K网站系统官方论坛: m/ Z7 ?; o1 W3 w% E, C" ?

& [9 H* ]5 Z% ^7 nbbs.163k.com
1 B$ ?0 [. c, w/ \- ~% ^团购网站系统,团购网程序163k团购网站系统官方服务论坛; R' a' u; T4 s3 c( ]1 Q
163k团购网站系统官方服务论坛  l" ]- ^# I9 q7 q
好了,到这里,你可以预览一下,当你点击上展开按钮时,你的图层就会慢慢的从上而下滑动出来! 为互联网事业发展提供源动力!7 e/ K/ k! {1 o/ x/ o% D

0 x# U, F/ f/ `4 t" b为互联网事业发展提供源动力!6.怎么样,看到了吧:)我们再给图层添加上一个简单的关闭动作,就是点击关闭按钮后图层隐藏。选择上关闭按钮,转到行为面板,点击菜单中选择 [显示隐藏层] ,在跳出的窗体中选择上layer4,然后点击下面的隐藏按钮,将其设置为隐藏,如图: 为互联网事业发展提供源动力!5 e; z3 V+ ~" u; z. T
为互联网事业发展提供源动力!% ?8 h' e% Q& b) n6 n# G
7.好了,再预览一下,发现展开后点击关闭图层就没有了:)不过,似乎有一个问题,再次点击展开的时候,似乎没什么反应了,那是我们还有一个动作没有设置。 : @- O! c9 K1 w- r& l

0 v7 t* o6 W/ ^' I' d! H为互联网事业发展提供源动力!  重复刚才的步骤5,选择上展开按钮,添加动作 [时间轴——转到时间轴桢] ,在跳出的窗体中的下拉菜单选择timeline1,桢数添上1。
$ A& Y% h8 y& }+ S. z7 O2 Nbbs.163k.com
9 v4 I5 C, w- h2 z为互联网事业发展提供源动力!好了,这次预览发现这个问题解决了。但是我们似乎还是忽略了一个问题,点击关闭后这个图层被设置为隐藏了,再点击展开也没反应了。还是运用老办法,给展开按钮添加一个动作就可以解决了! bbs.163k.com8 p9 ^" L. n) H$ ~) m( K" k

7 h' r4 T# E2 S1 D, J163K网站系统官方论坛8.重复步骤5,选择 [显示隐藏层] ,和刚才步骤6相反,这次我们选择显示,确定后,保证行为面板中显示隐藏图层的时间都是onclick。此刻展开按钮的行为面板如图:
: [& m+ X0 `3 D7 y/ p( ~. s/ d& R团购网站系统,团购网程序% l' T! Y$ k" v) H. {( D$ L
 好,再次预览,一切正常! bbs.163k.com+ `9 K, v  k1 \" I
bbs.163k.com$ c  S& a# x4 U$ Y. T7 p4 ^
  至此,这个效果就算完成了,当然,大家完全可以自我发挥制作出更好的效果来,但是万变不离其宗,只要我们掌握好了时间轴配合动作行为的运用,所有的效果只是操作问题:)
0 W, [5 i3 K: t1 s) q+ s4 [! @163K网站系统官方论坛
  w" A# o$ P+ y3 R163K网站系统官方论坛163k团购网站系统官方服务论坛6 A9 u9 r% R- S+ X) l3 m7 g
7 x- b0 i8 [6 l$ j* ^+ D# _

8 `$ f6 x% g: C- C为互联网事业发展提供源动力!
4 R; R. `' s8 }团购网站系统,团购网程序
# M, t( ~, L6 R) K7 Z& ?* ~( k

TOP

好文章,支持一下啊!!!!!!

TOP

返回顶部
AYBlue

Processed in 0.067164 second(s), 7 queries.

当前时区 GMT+8, 现在时间是 2009-1-8 10:43 京ICP备06054220号

清除 Cookies - 联系我们 - 163K.com - Archiver - WAP