Dreamweaver显示弹出式菜单.doc

实验19 显示弹出式菜单

实验要求

使用“显示弹出式菜单”行为来创建或编辑Dreamweaver弹出式菜单，或者打开并修改已插入Dreamweaver文档的Fireworks弹出式菜单。通过实验，掌握如何通过在“显示弹出式菜单”对话框中设置选项来创建水平或垂直弹出菜单，并使用此对话框来设置或修改弹出菜单，并使用此对话框来设置或修改弹出菜单的 颜色、文本和位置。
说明 若要察看文档中的弹出菜单，必须在浏览器窗口中打开该文档，然后将鼠标指针滑过触发图像或链接。
对应知识点：
l 行为面板的使用
l 设置行为事件
l 创建并编辑“显示弹出式菜单”行为
实验素材
l 无
实验步骤
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://“ 。如图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 浏览弹出式菜单效果
中显示了两个动作
实验作业
n 模仿：
1. 创建网页，设置页面属性、布局表格和文字。
2. 在行为面板中选择“显示弹出式菜单”选项。
3. 添加菜单内容。
4. 设置菜单外观。
5. 设置高级选项卡。
6. 设置菜单位置。
7. 修改弹出式菜单。
n 创作：
1. 创建网页，布局水平式表格样式。
2 .创建行为“显示弹出式菜单”。
3 .根据栏目设置，添加菜单内容。
4 .设置菜单外观，选项“水平菜单”命令，并选择自己喜欢的，适合栏目的颜色。
5 .设置高级选项卡。
6 .设置菜单位置。
7.可参考本书配套光盘exp17-19\site19文件夹中的提供的网页进行弹出式菜单的设计，如图19-16和图19-17所示。

图19-16 弹出式菜单效果 图19-17 弹出式菜单效果