编注：本站原创教程，欢迎转载！转载请注明作者及来源于本站的链接！
今天我们继续学习层的应用：弹出菜单的制作方法。效果请看这里。
OK，开始我们的网页旅程吧！
1.准备工作：
首先在你电脑的D盘下（当然你可以建立在你喜欢的任何位置）建立一个新文件夹，名为：window，将所要用到的两张图片：1.jpg 、2.jpg复制到window文件夹里。
2.打开DreamWeaver MX 2004，点击 文件/ 新建，如图1。
图1
在弹出的 新建文档 对话框中，在 类别 下选中基本页，在 基本页 中选 HTML，然后点 创建，如图2所示。
图2
3.在打开的画面中，请确认网页是在 设计 编辑状态，如图3。
图3
4.在 布局 菜单下选择 描绘层 按钮，如图4。
图4
5. 在页面中按住鼠标左键拖拽出一个层（Layer1），如图5，调整层至适当位置。
图5
层（Layer1）的具体参数详见图6。
图6
6.在网页编辑画面中，按回车键将光标移到层的下部，如图7。
图7
7.在 表单 菜单下选按 按钮 图标，如图4。
图8
接着会弹出一对话框，问“是否添加表单标签？”，如图9。
图9
请选择是。
则在网页编辑画面上，我们可见到已经添加了一个标签为“提交”的按钮，如图10。
图10
8.将光标放在提交按钮的右边，如图11，再按相同方法，插入第二个按钮，如图12。
图11
图12
9.用鼠标选中第一个按钮，如图13。
图13
在属性面板中，设置其属性，“按钮名称”：botton，“标签”：显示菜单，“动作”：无，如图14。
图14
10.选中第二个按钮，设置其属性，“按钮名称”：botton，“标签”：隐藏菜单，“动作”：无，如图15。
图15
11.将光标在层内空白处点击一下，然后在 常用 菜单下选按 表格 图标，如图16。
图16
在弹出的 表格 对话框中，设置表格的 行数 为：5，列数 为：1，表格宽度 为：275（当然你可根据你的实际需要进行设置），然后 确定，如图17。
图17
回到编辑画面，可看到在层中已插入了一个五行一列的表格，如图18。
图18
12.将光标放置于表格的第一行，如图19。
图19
在菜单栏点击 插入 按钮，在弹出的菜单中选择 图像，如图20。
图20
在弹出的 选择图像源文件 对话框中，选择D:\window\1.jpg文件后，点击 确定，如图21。
图21
因为我们创建新的网页文件时，还没有保存，所以会弹出如图22所示的对话框，告诉你文件还未保存，请点击 确定 按钮。
图22
接着会弹出另一对话框，如图23，问你是否要将刚才选中的图片文件复制到根文件夹中，因为我们之前未定义站点，所以请你点 否。
图23
13.如果你操作正确的话，就可以看到在表格的第一行，插入了我们刚才选中的1.jpg图片，然后用鼠标点击一下图片，将其选中，如图24。
图24
在界面左下角的 属性 面板，可以看到一个制作图片热点的 地图 属性，请选择 矩形热点工具，如图25。
图25
用鼠标左键在图片右边拖拽出一个热点区，如图26。
图26
用鼠标左键选中该热点区，如图27。
图27
打开DreamWeaver界面右边的 标签 / 行为 面板，如图23。
图28
点按 行为 面板上的 
按钮，在弹出的菜单中，选择“显示-隐藏层”，如图29。
图29
在弹出的 显示-隐藏层 对话框中，设置 层“Layer1”为隐藏，如图30，然后 确定。
图30
回到 行为 面板，可以看到多了一条行为语句，如图31，该行为的触发动作为：onMouseOver。
图31
请将触发动作onMouseOver修改为 onClick，如图32。
图32
14.在表格的第五行，插入图片2.jpg，如图33。
图33
15.选中表格的第二、三、四行，如图34。
图34
在 属性 面板中，设置单元格 高=20，如图35。
图35
16.在表格的第二、三、四行分别输入文字，并设置文字的链接地址（本教程中设为空链接），如图36。
图36
17.选中“显示菜单”按钮，如图37。
图37
18.在 标签 / 行为 菜单中，按
，选择“显示-隐藏层”，如图38。
图38
在弹出的对话框中，选中 层“Layer1”，点击 显示 按钮后，确定，如图39。
图39
19. 按相同方法，选中“隐藏菜单”按钮，添加“显示-隐藏层”行为，在弹出的对话框中，设置 层“Layer1”为隐藏，如图40，然后确定。
图40
注意：在设置两个按钮的“显示-隐藏层”行为时，要设置行为的触发动作为：onClick，如图41。
图41
20.最关键一步，用鼠标左键选中层，如图42。
图42
在 属性 面板中，设置 层 的 可见性 为：hidden，如图43。
图43
21.最后将文件以 window.htm 文件名保存在D盘的 window 文件夹里。好啦，在IE里预览一下你的作品吧！
