Dreamweaver中层实例运用解析

Author: 周小虎 Date: 2000年 第37期

  学习的最终目的是为了实践,而最好的学习方法就是从实例中去萃取与吸收,现在让我们结合实例来看一看Dreamweaver中层的行为以及对事件响应的运用吧。
#1    一、跳舞的MM
  页面:http://www.yesky.com
  描述:一个据说是某位小编假扮而成的MM舞着两块抹布:)从左扭到右,如此往复(^37040202a^1)。
    方法:
  1.在页面插入一个层,并在层中插入图像(因动态样式和显示遮罩下面页面的需要,一般图像采用GIF格式)。
  2.鼠标选定该层的标记,单击鼠标右键选择加入“时间轴”,用Ctrl+F9显示时间轴窗口,DW默认的帧数是15帧,可以自己调整帧数和帧,现在鼠标点到第15帧,然后将层拖到移动路线的未端,勾选“自动播放”,如果希望一直播放还须勾选“循环”选项。
    举一反三
  1.事件、行为和层的时间轴结合使用。插入一个层,在层里输入“我是唐僧嗡嗡嗡”,然后随便为它们设定一个链接地址(如:#),将层加入时间轴,并设定好行动路线,注意不要勾选自动播放,只需勾选“循环”项,然后到时间轴的第一帧,选定层内的字符,打开Behaviors面板,选择“Play timeline1”然后确定,这时的效果你一按这些字,这个层就会“按预定路线逃跑”,为了保护唐僧不会被人打倒,我们可以重新选择,用右键的“Edit Target”,将默认的事件Onclick改为OnMouseover,这样鼠标一经过唐大哥,他就会自动逃跑哦。
  2.两个层的连贯。分别插入两个层,插入两个球体形状的GIF,确定好它们之间有一定的距离,将第一个层加入时间轴,将这个层的行动终点设到第二个层旁(将Layer面板的“防止层重叠”选项去掉),然后将第二个层加入时间轴,如果你认为你主页拜访者的网速够快的话,你可以在Timeline1的最末一个帧或Timeline2的第一个帧加上一个Behaviors,选择Playsound,这样,在两个层相撞时发出你选择的声音。
#1    二、随鼠标而出现的箭头
  页面:http://it.263.net/b/book/index.htm
  描述:书架上的一排书,鼠标滑过每一本书的书脊时,都有一个箭头在书脊上部跳动当鼠标挪开时,箭头消失(^37040202b^2)。
    方法:
  1.插入整个图片(263里用的整个图片,然后用DW的热点分割工具来划定一个一个的热点区域,你也可以用FIREWORKU将图片分割好后再一一插入,不要忘记将它们的链接地址设为#),在每一个热区上都插入一个层,然后在层里插入同样的箭头图片,在Layer面板里将它们都设为不可见。
  2.设置事件和动作。选取一个热区,然后激活Behaviors面板,按“+“键,选择Show Hide Layer,选择Show该热区上的那个箭头所在层,因为这里默认的事件是Onclick,所以我们需将它改为OnMouseover,接着设置OnMouseout的动作,这次是Hide这个层,同样把Onclick改为OnMouseout。
  3.复在每一个热区做以上无聊的工作,直至全部完成各个热区。
    举一反三
  1.文字提示的制作。我们可以很方便地设置网页中每个图形的ALT键,即:当鼠标指向该图形停留时,会有提示的字符,但在Frontpage、Hotdog等软件中好像并不提供文字链接的注释功能,在DW中,我们需要做的就是将各个提示层做好后放在链接文字的下方,然后就用以上提到的Show/Hide Layer大法,这样鼠标停留到文字链接时,也会出现相应的提示。有关实例请参看http://coobe.cs.hn.cnifno.net/~bluesoul/index2.htm。
  2.变层中文字的内容。在263新书发布的这个页面中当你按下你想要的书的书脊时,你会发现在旁边一个框架中的图片内容将会显示这本书的封面图像,经过观察,发现它是经过一个Javascript程序做到以上效果的,如果全部是文字信息的话,可以不通过附加这个程序而直接通过DW制作,方法就是在适当的位置另外插入一个层,设置为可见,当每个热区设置Show/hide layer时,另外加上一个Behaviors——Set text of the layer,选择的层就是刚才插入的层,这样,鼠标经过一个链接热区时,该层就会出现你设置的字符。有关实例请参看http://coobe.cs.hn.cninfo.net/~bluesoul/rock.htm。
#1    三、下拉菜单
  页面:http://www.net.cn
  描述:鼠标停留在一个链接时,有下拉式菜单出现,移向另一个链接时,又出现另一个下拉式菜单,每个菜单都有一个“X”键,用来关闭这个下拉式菜单(^37040202c^3)。
    方法:
  同样是Show/Hide layer的应用,但考虑到如果是用OnMouseout的事件来Hide菜单层的话,结果就是你的鼠标一离开就不见了菜单层,正确的方法应该是:
  1.在每个链接下制作相应的菜单层,将这些层的全部设为不可见,设置OnMouseover的事件,注意这里当OnMouseover时不仅要Show指定的层,还要Hide其他的所有菜单层。
  2.样当鼠标经过时,会有相应的菜单出现而隐藏其他菜单层,但这里有一个所有菜单层都不出现该怎么做的问题,万网上首页的下拉式菜单并没有解决这个问题,但它的个人管理面板里有解决方法,就是在菜单的某部位(一般是顶层)加上一个“X“形的图形,聪明的你一定想到了,我们可以通过Behaviors设置,即:Onclick 这个X时Hide它所在的层。具体的样式,大家去看一看http://bluesoul.2699.com。