Dreamweaver显示弹出式菜单

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

2、MX 2004程序，新建HTML网页。保存网页为“pagel9.htm”。单击属性面板的“页面属性”按钮，在“属性面板 ”对话框中设置大小为“12 像素”，webenyanse为“白色（色标值为#FFFFFF）”。设置“链接颜色”和“已 访问链接”为“白色”，“变换图像链接”为“黄色（色标值#FFFF00） ”，在“下划线样式”下拉列表中选择“金在变换图像时显示下划线”选项。在“标题” 编辑框内输入网页标题“东方联网”，选择“简体中文”编码。在空白网页中插入1 行1 列，宽度为172像素，其他项为0的表格。选中表格，在 属性面板中设置“高”为“50像素” 。在单元格内输入文字“东方网联”，选中

3、文字，在属性面板中设置字体为“黑体”， 大小为“30 像素“，颜色为“白色” ,背景颜色为“暗红色（色标值为#993366）”， 单击“居中对齐”按钮，完成后效果如图 19-1 所示。在标题表格下方插入1行1列，宽度为17 2像素，单元格边距为6表格。选中表格，在属性面板中设置其背景颜色为“浅灰色（色标值#EAEAEA）”。在单元格内插入7行1列，宽度为160像素，单元格间距为2的嵌套表格。拖动鼠 标选中7个单元格，在属性面板中设置高俄日“20”，背景色为“暗红色（色标值 为#993366）”，并单击“居中对齐”按钮，效果如图19 2所示。图 19-1 设置标题效果图 19-2 列表效果在每行

4、单元格内输入“栏目标题”，如网站推荐、新闻动态、购物天地、分类信息 等等。如图 19-3 所示。选中“网站推荐”标题文字，在属性面板“链接”编辑框内输入“# ”。选择菜单“窗口” “行为”命令，打开行为面板。单击行为面板的“+”按钮，在菜单 中选择“显示弹出式菜单 ”选项。如图 19-4 所示。1网站薄匸towijwwi*聃 qx 387+ 2 K / 1 1网站薄匸towijwwi*聃 qx 387+ 2 K / 1 秒东方网联图 19-4 无址链接并行为面板的“显示弹出式菜单”图 19-3 单元格内输入栏目题9.打开“显示弹出式菜单”对话框。在“文本”编辑框内输入“搜索引擎”，单9.击“”

5、按钮，“搜索引擎”项被添加到“文本”列表中。在“文本”编辑框内输入“百度”替换“新建项目”文字，选择“目标”下拉列表中的“ _blank”选项，在“链接”编辑框内输入“HTTP:/“ 。如图 19-5 所示。说明 在出现的“显示弹出菜单”对话框中，使用以下标签来设置弹出菜单的选项：“内容”允许你单独设置个菜单项的名称、结构、URL和目标。“外观”使你 能够设置菜单“一般状态”和“滑过状态”的外观以及设置菜单项文本的字体选择。“高级”允许你设置菜单单元格的属性。例如，你可以设置单元格的宽度和高度、单元格颜色和边框宽度、文本缩进以及在用户将鼠标指针移到触发起上后菜单出现 之前的延迟时间长度。“位置

6、”允许你设置菜单相对于触发图像或链接的防治位置。选中文本列表中的“百度”选择，单击“缩进项”按钮 ，是“百度”创建为“搜索引擎”的子菜单项。如图19-6 所示百度显示为缩进状态。图19-5添加新建项目“百度”图19-6 图19-5添加新建项目“百度”图19-6 “百度”为“搜索引擎”的子菜单项说明 你不能使列表中的第一个菜单项成为子菜单项。再次单击“+”按钮，输入文本、目标和链接内容，这时，自动添加为子菜单项。 如图 19-7 所示。在新建完“搜索引擎”子菜单项后，同样单击“”按钮，新建项目“门户网站” 然后，单击“左缩进项”按钮，可以删除缩进。如图 19-8 所示。同样的方法制作“门户网站”

7、的子菜单项和“电子商务”菜单，完成后对话框如 图19 9所示。说明 若要更改菜单中某个项的顺序，在“显示弹出菜单”列表中，选择你要向上 或向下移动的项，然后单击向上或向下的箭头将项移动到想要其显示的位置，若要从选择你要从“显示弹出菜单”列表中删除的菜菜单中删除某项，在“内容”标签中选择你要从“显示弹出菜单”列表中删除的菜单项，单击减号按钮。图 19-7 新建项目自动添加为子菜单项 图 19-8 新建项目删除缩进在创建了菜单项之后，使用“显示弹出菜单”的“外观”选项卡设置弹出菜单的 方向、字体属性和按钮状态属性。单击“外观”标签，在选项卡顶部的下拉列表中选择“垂 直菜单”选项。设置大小为12（单

8、位为像素），单击“左对齐”。在“一般状态”区选择“文本”颜色为白色（色标值为#FFFFFF） “单元格”颜色为暗红色（色标值为# 993366），在“滑过状态”区选择“文本”颜色为暗红色（色标值为#993366），“单元格” 颜色为粉色（色标值为#E9BCD2）。如图所示19-10图 19-9 添加的所有菜单和子菜单项图 图 19-9 添加的所有菜单和子菜单项图 19-10 设置外观选项卡说明 “外观”选项卡的预览窗格概略显示你在此选项卡中设置的选项。使用“高级”标签中的选项指定单元单元格的其他属性。例如，可以设置菜单按钮的宽度、高度、单元格间距或边距、缩进文本以及设置边框属性。单击“高级”标

9、签，在“单 元格宽度”编辑框输入“120 像素”；在“单元格边距”编辑框内输入“3”；在“文本缩 进”和“单元格间距”编辑框内输入“0”；在“菜单延迟”编辑框默认设置为1 0 0 0相 当于1秒；我们需要菜单显示边框，因此默认设置1 0 0 0相当于1秒。对于所需的每秒延 迟，都添加1 0 0 0；例如：对于3秒的延迟，请键入3 0 0 0,阴影和咼亮显示不反映在 预览中。使用“位置”选项设置弹出式菜单相对于触发图像或链接的显示位置。您还可以设 置当用户将鼠标指针移开触发器之后改菜单是否隐藏。单击“位置”标签；在“菜单位置” 区选择“触发器在右上边缘”按钮；确保选中了“在发生onmouseou

10、t事件时隐藏菜单”复选框。如图 19-12 所示。选框。如图 19-12 所示。图 19-11 设置咼级选择卡图 19-12 设置位置选项卡说明：设置自定义位置鼠标，方法是在“X”文本框中键入一个数字设置水平坐标，在“Y”文本框中键入一个数字设置垂直坐标。坐标以菜单的左上角为基准计算。若要 在鼠标指针不在其上时隐藏弹出菜单，请确保选中了“在发生onmouseout事件时隐藏 菜单”。若要让菜单显示，则取消对改选项的选择。创建完弹出菜单之后，单击“确定“按钮，返回网页编辑窗口。在行为面板列 表中显示了两个动作。如图19-13 所示。在行为面板中双击“显示弹出式菜单“项，或是右击弹出式菜单中选择”

11、编辑 行为“命令，如图19-14所示。打开”显示弹出菜单“对话框，对该弹出对话框做出所 需的更改，修改完该弹出对话框后，单击”确定“按钮。20.按Ctrl+S键保存网页，按F12键在浏览中查看网页效果，如图19-15所示。图 19-13 行为面板图 19-14 选择编辑行为图 19-13 行为面板图 19-14 选择编辑行为图 19-15 浏览弹出式菜单效果中显示了两个动作实验作业模仿:创建网页，设置页面属性、布局表格和文字。在行为面板中选择“显示弹出式菜单”选项。添加菜单内容。设置菜单外观。设置高级选项卡。设置菜单位置。修改弹出式菜单。 创作：1. 创建网页，布局水平式表格样式。. 创建行为“显示弹出式菜单”。. 根据栏目设置，添加菜单内容。. 设置菜单外观，选项“水平菜单”命令，并选择自己喜欢的，适合栏目的颜色。. 设置高级选项卡。6 . 设置菜单位置。7.可参考本书配套光盘expl7-19sitel9文件夹中的提供的网页进行弹出式菜单的设计，如图19-16和图19-17所示。解陀如豹斬 阳8H2BS甜卿麹SWI啊财卩】呷诃曲橄:FWW/5卩冋阳罐將個砸/咖:叩血逊番洋卫用