为你的网页添加一个漂亮的窗口

为你的网页添加一个漂亮的窗口
——Dreamweaver行为Drag Layer傻瓜攻略
请大家先看看这个效果（图一）：
图一
怎么样，酷吧，你可以用鼠标按住它的红色部份来拖动这个窗口，而且这个窗口是透明的。

具体在网页上的真实效果您可以在看到。

要做到这个效果其实不难，只要用Dreamweaver自带的插件Drag Layer很容易就可以够做到。

下面我就一步一步地告知你如何利用Drag Layer。

Drag Layer插件可让你在网页中插入一个可移动的层，而对这个层做一些修饰，就模拟出了一个窗口，下面我分三步来介绍它的做法：
一、成立一个层
打开Dreamweaver，按ctrl+F2和ctrl+F3以保证Object s和Properties两个窗口打开。

点击Objects窗口上的按钮，在屏幕上按住鼠标不放拖出一个区域，这样就在网页中插入了一个层（如图二）。

图二
在层中插入一个表格
一、在Properties窗口的Bgcolor框中填入#0099CC为层设置背景，设置层的宽度为255px，在layetID框中填入drag为
这个层命名（图三）。

图三
二、然后把鼠标移到层中, 按Objects窗口上的按钮插入一个表格，在弹出窗口中设置这个表格，参数如图四。

图四
3、在这个表格的第一行中输入文字“可以拖动的COOL窗口”，并设置这个单元格的背景色为#FF6600，单元格高度为18px，
排列方式为居中（图五）。

图五
二、为层设置Drag Layer行为
一、好，此刻准备工作已经完成了，按Shift+F3打开Behaviors窗口。

在Behaviors窗口中按按钮，选择Drag Layer（图六）。

图六
二、这时会弹出Drag Layer窗口，其中有Layer下拉选单，它列出了这个网页中所有的层，确保你已经选中的drag这个层，
这就是为何咱们前面要为层命名的原因(图七)。

图七
3、点击Drag Layer窗口上部的Advanced标签，在Drag Handle下拉菜单当选择Area Within Layer，它的功能是设置层
的可作用区域，决定鼠标在层的哪个范围内能拖动层。

L、T、W、H别离设置为0、0、255、18。

它们的是设置层可作用区域距离层左侧的宽度、可作用区域距离层顶部的宽度、可作用区域的宽度、可作用区域的高度。

255和18这两个值正是咱们前面概念的层的宽度和单元格的高度（图八）。

图八
4、设置好后按OK，你会看到Behaviors窗口中出现Events为onLoad，Actions为DragLayer，这表示你已经大体成功了。

这时按F12预览看看效果，用鼠标点住红色单元格不放拖动,怎么样,成心思吧
图九
三、美化和为窗口添加一个关闭按钮
1、预览时咱们看到的窗口不是很精美，没有关系，接下来咱们就做一点小修改。

首先咱们为窗口加上一个边框，选中层，
按Ctrl+T打开快速编辑框，找到border: 1px none #000000这一句，把none改成solid，此刻层已经有一个黑色的边框，按F12可以看到效果（图十）。

图十
二、添加关闭按钮。

在表格的第一行输入“关闭”两个字，并在Properties窗口中为它添加一个空链接，方式为在Link
框中输入一个#号。

单元格设置为居中（图十一）。

图十一
选中“关闭”这两个字，点击Behaviors窗口中的按钮，在下拉菜单当选Show-Hide Layers。

这时会弹出一个窗口，Named Layers框中列出了这个网页中所有的层，保证drag层被选中，点击下面的Hide按钮，按OK（图十二）。

图十二
在Behaviors窗口的Events标签下有一个三角形的按钮，点击它选择 onClick，若是没有onClick选项，请选Show Events For -> IE ，然后再点三角形按钮，这时onClick选项就出现了(图十三)。

图十三
此刻再按F12预览，你已经可以通过点击“关闭”来隐藏这个窗口了。

2、O K，这个窗口已经大体上完成了，最后咱们来为它添加一个半透明的效果，让它看起来更炫。

再次选中层drag，按Ctrl+T打开快键编辑框，在适才编辑过的border: 1px solid #000000后面加上一个分号“;”，再加个这一句FILTER:Alpha(Opacity=80) 注意：这一句要加在引号之内(图十四)
图十四
随意在网页上加点内容，然后按F12预览，真的变透明了呢 (图十五)
图十五
好，酷酷的窗口就这样做好了，怎么样，容易吧。

有兴趣的朋友可以再研究研究，还可以给它加上最大化、最小化的按钮，最终可以模拟出和Windows一样的窗口。