Dreamweaver显示弹出式菜单

实验19 显示弹出式菜单
实验要求
使用“显示弹出式菜单”行为来创建或编辑Dreamweaver弹出式菜单，或者打开并修
改已插入Dreamweaver文档的Fireworks弹出式菜单。通过实验，掌握如何通过在“显示弹
出式菜单”对话框中设置选项来创建水平或垂直弹出菜单，并使用此对话框来设置或修改弹
出菜单，并使用此对话框来设置或修改弹出菜单的 颜色、文本和位置。
说明 若要察看文档中的弹出菜单，必须在浏览器窗口中打开该文档，然后将鼠标
指针滑过触发图像或链接。
对应知识点：
 行为面板的使用
 设置行为事件
 创建并编辑“显示弹出式菜单”行为
实验素材
 无
实验步骤

1. 启动 Dreamweaver MX 2004程序，新建HTML网页。保存网页为“page19.htm”。
2. 单击属性面板的“页面属性”按钮，在“属性面板” 对话框中设置大小为“12
像素”，webenyanse 为“白色（色标值为#FFFFFF）”。 设置“链接颜色”和“已
访问链接”为“白色”，“变换图像链接”为“黄色（色标值为#FFFF00）”，在
“下划线样式”下拉列表中选择“金在变换图像时显示下划线”选项。在“标题”
编辑框内输入网页标题“东方联网”，选择“简体中文”编码。
3. 在空白网页中插入1行1列，宽度为172像素，其他项为0的表格。选中表格，在
属性面板中设置“高”为“50像素”。
4. 在单元格内输入文字“东方网联”，选中文字，在属性面板中设置字体为“黑体”，
大小为“30像素“，颜色为“白色” ,背景颜色为“暗红色（色标值为#993366）”，
单击“居中对齐”按钮，完成后效果如图19-1所示。
5. 在标题表格下方插入１行１列，宽度为１７２像素，单元格边距为6表格。选中表
格，在属性面板中设置其背景颜色为“浅灰色（色标值为#EAEAEA）”。
6. 在单元格内插入７行1列，宽度为160像素，单元格间距为2的嵌套表格。拖动鼠
标选中7个单元格，在属性面板中设置高俄日“20”，背景色为“暗红色（色标值
为#993366）”，并单击“居中对齐”按钮，效果如图１９－２所示。

图19-1 设置标题效果 图19-2 列表效果
7. 在每行单元格内输入“栏目标题”，如网站推荐、新闻动态、购物天地、分类信息
等等。如图19-3所示。
8. 选中“网站推荐”标题文字，在属性面板“链接”编辑框内输入“# ”。选择菜单
“窗口”----〉“行为”命令，打开行为面板。单击行为面板的“+”按钮，在菜单
中选择“显示弹出式菜单 ”选项。如图19-4所示。

图19-3 单元格内输入栏目题 图19-4 无址链接并行为面板的“显示弹出式菜单”
9. 打开“显示弹出式菜单”对话框。在“文本”编辑框内输入“搜索引擎”，单
击“＋”按钮，“搜索引擎”项被添加到“文本”列表中。
10. 在“文本”编辑框内输入“百度”替换“新建项目”文字，选择“目标”下拉
列表中的“＿ｂｌａｎｋ”选项，在“链接”编辑框内输入“HTTP://www.baidu.com
“ 。如图19-5所示。
说明 在出现的“显示弹出菜单”对话框中，使用以下标签来设置弹出菜单的选
项：“内容”允许你单独设置个菜单项的名称、结构、URL和目标。“外观”使你
能够设置菜单“一般状态”和“滑过状态”的外观以及设置菜单项文本的字体选择。
“高级”允许你设置菜单单元格的属性。例如，你可以设置单元格的宽度和高度、
单元格颜色和边框宽度、文本缩进以及在用户将鼠标指针移到触发起上后菜单出现
之前的延迟时间长度。“位置”允许你设置菜单相对于触发图像或链接的防治位置。
11. 选中文本列表中的“百度”选择，单击“缩进项”按钮 ，是“百度”创
建为“搜索引擎”的子菜单项。如图19-6所示百度显示为缩进状态。

图19-5 添加新建项目“百度” 图19-6 “百度”为“搜索引擎”的子菜单项
说明 你不能使列表中的第一个菜单项成为子菜单项。
12. 再次单击“+”按钮，输入文本、目标和链接内容，这时，自动添加为子菜单项。
如图19-7所示。
13. 在新建完“搜索引擎”子菜单项后，同样单击“＋”按钮，新建项目“门户网站”。
然后，单击“左缩进项”按钮，可以删除缩进。如图19-8所示。
14. 同样的方法制作“门户网站”的子菜单项和“电子商务”菜单，完成后对话框如
图１９－９所示。
说明 若要更改菜单中某个项的顺序，在“显示弹出菜单”列表中，选择你要向上
或向下移动的项，然后单击向上或向下的箭头将项移动到想要其显示的位置，若要从
菜单中删除某项，在“内容”标签中，选择你要从“显示弹出菜单”列表中删除的菜
单项，单击减号按钮。

图 19-7 新建项目自动添加为子菜单项 图19-8 新建项目删除缩进
15. 在创建了菜单项之后，使用“显示弹出菜单”的“外观”选项卡设置弹出菜单的
方向、字体属性和按钮状态属性。单击“外观”标签，在选项卡顶部的下拉列表中选择“垂
直菜单”选项。设置大小为１２（单位为像素），单击“左对齐”。在“一般状态”区选择
“文本”颜色为白色（色标值为＃ＦＦＦＦＦＦ）“单元格”颜色为暗红色（色标值为＃
993366），在“滑过状态”区选择“文本”颜色为暗红色 （色标值为#993366），“单元格”
颜色为粉色 （色标值为#E9BCD2）。如图所示19-10

图19-9 添加的所有菜单和子菜单项 图19-10 设置外观选项卡
说明 “外观”选项卡的预览窗格概略显示你在此选项卡中设置的选项。
16. 使用“高级”标签中的选项指定单元单元格的其他属性。例如，可以设置菜单按钮
的宽度、高度、单元格间距或边距、缩进文本以及设置边框属性。单击“高级”标签，在“单
元格宽度”编辑框输入“120像素”；在“单元格边距”编辑框内输入“3”；在“文本缩
进”和“单元格间距”编辑框内输入“０”；在“菜单延迟”编辑框默认设置为１０００相
当于１秒；我们需要菜单显示边框，因此默认设置１０００相当于１秒。对于所需的每秒延
迟，都添加１０００；例如：对于３秒的延迟，请键入３０００，阴影和高亮显示不反映在
预览中。
17. 使用“位置”选项设置弹出式菜单相对于触发图像或链接的显示位置。您还可以设
置当用户将鼠标指针移开触发器之后改菜单是否隐藏。单击“位置”标签；在“菜单位置”
区选择“触发器在右上边缘”按钮；确保选中了“在发生onmouseout事件时隐藏菜单”复
选框。如图19-12所示。

图19-11 设置高级选择卡 图19-12 设置位置选项卡
说明： 设置自定义位置鼠标，方法是在“X”文本框中键入一个数字设置水平坐标，
在“Y”文本框中键入一个数字设置垂直坐标。坐标以菜单的左上角为基准计算。若要
在鼠标指针不在其上时隐藏弹出菜单，请确保选中了“在发生onmouseout事件时隐藏
菜单”。若要让菜单显示，则取消对改选项的选择。
18. 创建完弹出菜单之后，单击“确定“按钮，返回网页编辑窗口。在行为面板列
表中显示了两个动作。如图19-13所示。
19. 在行为面板中双击“显示弹出式菜单“项，或是右击弹出式菜单中选择”编辑
行为“命令，如图19-14所示。打开”显示弹出菜单“对话框，对该弹出对话框做出所
需的更改，修改完该弹出对话框后，单击”确定“按钮。
20.按Ctrl+S键保存网页，按F12键在浏览中查看网页效果，如图19-15所示。
图19-13 行为面板 图19-14 选择编辑行为 图19-15 浏览弹出式菜单效果
中显示了两个动作
实验作业

 模仿：
1. 创建网页，设置页面属性、布局表格和文字。
2. 在行为面板中选择“显示弹出式菜单”选项。
3. 添加菜单内容。
4. 设置菜单外观。
5. 设置高级选项卡。
6. 设置菜单位置。
7. 修改弹出式菜单。
 创作：
1. 创建网页，布局水平式表格样式。
2 .创建行为“显示弹出式菜单”。
3 .根据栏目设置，添加菜单内容。
4 .设置菜单外观，选项“水平菜单”命令，并选择自己喜欢的，适合栏目的颜色。
5 .设置高级选项卡。
6 .设置菜单位置。
7.可参考本书配套光盘exp17-19\site19文件夹中的提供的网页进行弹出式菜单的
设计，如图19-16和图19-17所示。
图19-16 弹出式菜单效果 图19-17 弹出式菜单效果