Dreamweaver层的ShowHide行为应用实例
?牐犑迪终庵中Ч乃悸肥窃谡鐾成细哺且桓霾悖阒胁迦胍徽磐袷降耐该魍迹缓蟾飧霾闵瓒ㄒ恢中形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预览看看效果吧。