Dreamweaver层的ShowHide行为应用实例

Author: Poorfish Date: 2001年 41期

?牐犖颐敲刻於家鼗蠹矣忻挥凶⒁獾絎indows关机的时候屏幕会变得模糊(^41040701a^)。其实这种漂亮的效果在网页中也可以做到。经过研究,我做了一个实例(^41040701b^),你也可以到http://onlylogo.myetang.com点击任何一个链接看到这个效果。
  ?牐犑迪终庵中Ч乃悸肥窃谡鐾成细哺且桓霾悖阒胁迦胍徽磐袷降耐该魍迹缓蟾飧霾闵瓒ㄒ恢中形H绮阋豢际遣豢杉模钡慊饕趁嬷械牧唇樱飧霾憔拖允尽F涫嫡饩褪怯猛该鞯睦茨D饽:Ч貌愕腟howHide行为来动态控制层(图片)的显示与隐藏。下面我就一步步来说说它的制作过程:
  #1?牐?1.获取网页的大小
  ?牐犖耸雇该魍计芡暾馗哺峭常颐鞘紫纫勒飧鐾秤卸嗫砗投喔摺U饬礁鍪挚梢酝ü鼶reamweaver(以下简称DW)获得。用DW打开你要添加模糊效果的网页,按“Ctrl+Alt+R”打开标尺,这时你我可以看到DW窗口的左边界和右边界多了一排刻度表,它的单位为像素(^41040701c^)。这样通过度量,我们可以得到这个网页的长和宽。假设这个网页的长宽分别为780×600像素。下一步我们将在Photoshop中制作一个这样大小的网格状透明图。
  #1?牐?2.用Photoshop制作透明图片
  ?牐牬蚩狿hotoshop,按“Ctrl+N”新建一个width和height都为2 pixels(像素)的图片,Contents选为Transparent(透明)。放大这张图片至16(1600%)倍,选择前景色为#F7E7CE(这个颜色视你的网页需要而定)。在图片上填充颜色,最后效果(^41040701d^)。
  ?牐牭慊鞑说ブ械腅dit(编辑)里的Define Pattern(定义图案),在Name框中填入一个名字,如“img”,再按“Ctrl+N”新建一个800×600 pixels(像素)的图片。点击菜单中的Edit(编辑)中的Fill(填充),在弹出的Fill窗口中,Use下拉框里选Pattern,再点OK按钮就行了。如果你用的是Photoshop6.0,在Use下拉框中选Pattern后,会出现Custom Pattern下拉选单,这时选中刚才我们定义的图案就行了(^41040701e^)。通过这一步,我们就把刚才定义的图案填充进来了。从菜单的File中选Save for Web并保存这张图片,格式选为GIF,并确保Transparency框被选中(^41040701f^)。这样保存的图片就是透明的,点“OK”后将这张图片命名为gezi.gif保存。
  #1?牐?3.在网页中插入实现模糊效果的层
  ?牐牷氐紻W窗口,按“Ctrl+F2”打开Objects窗口,点“插入层”按钮在你的网页中插入一个层,把它命名为full。删掉L和T两个框中的数字,Layer ID框中填入full,W和H框中分别填入780和600(^41040701g^)。
  ?牐牥咽蟊暌浦敛阒校诓阒胁迦敫詹盼颐亲龅耐计琯ezi.gif。
  #1?牐?4.为链接和层添加ShowHide行为
  ?牐犗衷谖颐抢唇醋詈笠徊剑≈心阃成系囊桓鲆延械奈淖至唇樱础癝hift+F3”打开Behaviors窗口,点击窗口中的“+”按钮,在弹出菜单中选择ShowHide Layers项(^41040701h^)。
  ?牐犜诘龅拇翱谥锌梢钥吹絅amed Layers框中有layer “full”项,选中它,点击下面的Show按钮,OK(^41040701i^)。
  ?牐犝馐蹦慊峄氐饺缤?9的画面,点向下的箭头,选择Show Layers行为的触发事件为onClick(^41040701j^)。
  ?牐犛猛姆椒ㄎ阋趁嫔纤械牧唇幼錾蟂how Layer的行为。现在你已经做到点击网页上任何一个链接,透明图片所在的层出现,呵,模拟Windows关机的效果已经能够看到了。不过还有一个小问题,点击链接后透明图片覆盖了网页,浏览者没法进行其它操作了,所以我们必须再给覆盖层添加一个Hide Layer的行为,让浏览者能够通过点击层的任意区域来隐藏自己,这样就回到了原始页面。
  ?牐犙≈胁悖鉈ehaviors窗口上的“+”按钮,还是选择Show-Hide Layers,在弹出窗口的Named Layers框中选layer“full”,再点击下面的Hide按钮,OK。
  ?牐牶昧耍蠊Ω娉桑砩习碏12预览看看效果吧。