编注：本站原创教程，欢迎转载！转载请注明作者及来源于本站的链接！

层是DreamWeaver中一种新的网页元素，利用层可以轻松地制作出动态效果。今天我们将要学习的是：动态显示图片的制作方法，即当鼠标移到链接文字上，会在旁边显示出图片，当鼠标离开文字时，图片也消失。最终效果

准备好了吗？GO…

1.准备工作：

首先在你电脑的D盘下（当然你可以建立在你喜欢的任何位置）建立一个新文件夹，名为：setlayertext，将所要用到的三张图片：1.gif 、2.gif、3.gif复制到setlayertext文件夹里。

2.打开DreamWeaver MX 2004（千万别说你没有装这程序），点击文件/ 新建，如图1。

图1

在弹出的新建文档对话框中，在类别下选中基本页，在基本页中选 HTML，然后点创建，如图2所示。

图2

3.在打开的画面中，请确认网页是在设计编辑状态，如图3。

图3

在页面中输入相应文字，字体的大小及颜色可根据需要进行设置，如图4所示。

图4

4.分别选中上面三行文字，并在属性面板中设置其链接地址（本教程中设置文字链接为空链接），如图5、图6。

图5

图6

5.在布局菜单下选择描绘层按钮，如图7。

图7

6.在页面中按住鼠标左键拖拽出一个层,如图8，调整层至适当位置。

图8

7.在属性面板中，可看到层的相关属性，如图9

图9

8.选中文字“下雪了”，如图10。

图10

9.在DreamWeaver界面右边，展开标签菜单，选择行为选项，准备为选中的文字“下雪了”添加行为，如图11。

图11

10.点击行为下的按钮，在弹出的菜单中选择设置文本 / 设置层文本，如图12。

图12

11.在弹出的设置层文本对话框中，按图13中所示参数进行设置，然后点击确定。

图13

12.回到编辑界面，将光标点在“下雪了”文字中，在行为面板上可看到已经多了一条设置层文本的行为，其触发动作为“onMouseOver”，如图14。

图14

13.再次选中文字“下雪了”，如图15。

图15

14.并为其再次添加设置文本 / 设置层文本行为，在弹出的设置层文本对话框中，按图17中所示参数进行设置，然后点击确定。

图16

图17

15. 回到编辑界面，将光标点在“下雪了”文字中，在行为面板上可看到已经有两条设置层文本的行为，如果你认真看一下，会发现两个行为的触发动作均为“onMouseOver”，如图18。

图18

16.请按图19中所示，将第二个行为的触发动作改为“onMouseOut”。

图19

17.按相同方法，设置另两行文字的设置文本 / 设置层文本行为，其中在设置层文本对话框中，第二、三行文字的参数分别改为：<img src=2.gif> 和 <img src=3.gif> 。

18.将文件以 setlayertext.htm 的文件名保存在D盘的 setlayertext 文件夹里。点按预览按钮，

即可看到你的成果了！是不是很简单？如有问题，请mail我：admin@sk943.com