Dreamweaver层的ShowHide行为应用实例

Poorfish 
2001年 41期

　　我们每天都要开机关机，大家有没有注意到Windows关机的时候屏幕会变得模糊（^41040701a^）。其实这种漂亮的效果在网页中也可以做到。经过研究，我做了一个实例（^41040701b^），你也可以到http://onlylogo.myetang.com点击任何一个链接看到这个效果。
　　　　实现这种效果的思路是在整个网页上覆盖一个层，层中插入一张网格式的透明图，然后给这个层设定一种行为。如层一开始是不可见的，当点击页面中的链接，这个层就显示。其实这就是用透明的来模拟模糊效果，而用层的ShowHide行为来动态控制层（图片）的显示与隐藏。下面我就一步步来说说它的制作过程：
　　#1　　1.获取网页的大小
　　　　为了使透明图片能完整地覆盖网页，我们首先要知道这个网页有多宽和多高。这两个数字可以通过Dreamweaver（以下简称DW）获得。用DW打开你要添加模糊效果的网页，按“Ctrl+Alt+R”打开标尺，这时你我可以看到DW窗口的左边界和右边界多了一排刻度表，它的单位为像素（^41040701c^）。这样通过度量，我们可以得到这个网页的长和宽。假设这个网页的长宽分别为780×600像素。下一步我们将在Photoshop中制作一个这样大小的网格状透明图。
　　#1　　2.用Photoshop制作透明图片
　　　　打开Photoshop，按“Ctrl+N”新建一个width和height都为2 pixels（像素）的图片，Contents选为Transparent（透明）。放大这张图片至16（1600%）倍，选择前景色为#F7E7CE（这个颜色视你的网页需要而定）。在图片上填充颜色，最后效果（^41040701d^）。
　　　　点击菜单中的Edit（编辑）里的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.在网页中插入实现模糊效果的层
　　　　回到DW窗口，按“Ctrl+F2”打开Objects窗口，点“插入层”按钮在你的网页中插入一个层，把它命名为full。删掉L和T两个框中的数字，Layer ID框中填入full，W和H框中分别填入780和600（^41040701g^）。
　　　　把鼠标移至层中，在层中插入刚才我们做的图片gezi.gif。
　　#1　　4.为链接和层添加ShowHide行为
　　　　现在我们来进来最后一步，选中你网页上的一个已有的文字链接，按“Shift+F3”打开Behaviors窗口，点击窗口中的“+”按钮，在弹出菜单中选择ShowHide Layers项（^41040701h^）。
　　　　在弹出的窗口中可以看到Named Layers框中有layer “full”项，选中它，点击下面的Show按钮，OK（^41040701i^）。
　　　　这时你会回到如图9的画面，点向下的箭头，选择Show Layers行为的触发事件为onClick（^41040701j^）。
　　　　用同样的方法为你页面上所有的链接做上Show Layer的行为。现在你已经做到点击网页上任何一个链接，透明图片所在的层出现，呵，模拟Windows关机的效果已经能够看到了。不过还有一个小问题，点击链接后透明图片覆盖了网页，浏览者没法进行其它操作了，所以我们必须再给覆盖层添加一个Hide Layer的行为，让浏览者能够通过点击层的任意区域来隐藏自己，这样就回到了原始页面。
　　　　选中层，点Behaviors窗口上的“+”按钮，还是选择Show-Hide Layers，在弹出窗口的Named Layers框中选layer“full”，再点击下面的Hide按钮，OK。
　　　　好了，大功告成，马上按F12预览看看效果吧。 
 