Dreamweaver显示弹出式菜单.docVIP

实验19 显示弹出式菜单 实验要求 使用“显示弹出式菜单”行为来创建或编辑Dreamweaver弹出式菜单，或者打开并修改已插入Dreamweaver文档的Fireworks弹出式菜单。通过实验，掌握如何通过在“显示弹出式菜单”对话框中设置选项来创建水平或垂直弹出菜单，并使用此对话框来设置或修改弹出菜单，并使用此对话框来设置或修改弹出菜单的 颜色、文本和位置。 说明 若要察看文档中的弹出菜单，必须在浏览器窗口中打开该文档，然后将鼠标指针滑过触发图像或链接。 对应知识点： 行为面板的使用 设置行为事件 创建并编辑“显示弹出式菜单”行为 实验素材 无 实验步骤 启动 Dreamweaver MX 2004程序，新建HTML网页。保存网页为“page19.htm”。 单击属性面板的“页面属性”按钮，在“属性面板” 对话框中设置大小为“12像素”，webenyanse 为“白色（色标值为#FFFFFF）”。 设置“链接颜色”和“已访问链接”为“白色”，“变换图像链接”为“黄色（色标值为#FFFF00）”，在“下划线样式”下拉列表中选择“金在变换图像时显示下划线”选项。在“标题”编辑框内输入网页标题“东方联网”，选择“简体中文”编码。 在空白网页中插入1行1列，宽度为172像素，其他项为0的表格。选中表格，在属性面板中设置“高”为“50像素”。 在单元格内输入文字“东方网联”，选中文字，在属性面板中设置字体为“黑体”，大小为“30像素“，颜色为“白色” ,背景颜色为“暗红色（色标值为#993366）”，单击“居中对齐”按钮，完成后效果如图19-1所示。 在标题表格下方插入１行１列，宽度为１７２像素，单元格边距为6表格。选中表格，在属性面板中设置其背景颜色为“浅灰色（色标值为#EAEAEA）”。 在单元格内插入７行1列，宽度为160像素，单元格间距为2的嵌套表格。拖动鼠标选中7个单元格，在属性面板中设置高俄日“20”，背景色为“暗红色（色标值为#993366）”，并单击“居中对齐”按钮，效果如图１９－２所示。 图19-1 设置标题效果 图19-2 列表效果 在每行单元格内输入“栏目标题”，如网站推荐、新闻动态、购物天地、分类信息等等。如图19-3所示。 选中“网站推荐”标题文字，在属性面板“链接”编辑框内输入“# ”。选择菜单“窗口”〉“行为”命令，打开行为面板。单击行为面板的“+”按钮，在菜单中选择“显示弹出式菜单 ”选项。如图19-4所示。 图19-3 单元格内输入栏目题 图19-4 无址链接并行为面板的“显示弹出式菜单” 打开“显示弹出式菜单”对话框。在“文本”编辑框内输入“搜索引擎”，单击“＋”按钮，“搜索引擎”项被添加到“文本”列表中。 在“文本”编辑框内输入“百度”替换“新建项目”文字，选择“目标”下拉列表中的“＿ｂｌａｎｋ”选项，在“链接”编辑框内输入“HTTP://“ 。如图19-5所示。 说明 在出现的“显示弹出菜单”对话框中，使用以下标签来设置弹出菜单的选项：“内容”允许你单独设置个菜单项的名称、结构、URL和目标。“外观”使你能够设置菜单“一般状态”和“滑过状态”的外观以及设置菜单项文本的字体选择。“高级”允许你设置菜单单元格的属性。例如，你可以设置单元格的宽度和高度、单元格颜色和边框宽度、文本缩进以及在用户将鼠标指针移到触发起上后菜单出现之前的延迟时间长度。“位置”允许你设置菜单相对于触发图像或链接的防治位置。 选中文本列表中的“百度”选择，单击“缩进项”按钮 ，是“百度”创建为“搜索引擎”的子菜单项。如图19-6所示百度显示为缩进状态。 图19-5 添加新建项目“百度” 图19-6 “百度”为“搜索引擎”的子菜单项 说明 你不能使列表中的第一个菜单项成为子菜单项。 12. 再次单击“+”按钮，输入文本、目标和链接内容，这时，自动添加为子菜单项。如图19-7所示。 13. 在新建完“搜索引擎”子菜单项后，同样单击“＋”按钮，新建项目“门户网站”。然后，单击“左缩进项”按钮，可以删除缩进。如图19-8所示。 14. 同样的方法制作“门户网站”的子菜单项和“电子商务”菜单，完成后对话框如图１９－９所示。 说明　　若要更改菜单中某个项的顺序，在“显示弹出菜单”列表中，选择你要向上或向下移动的项，然后单击向上或向下的箭头将项移动到想要其显示的位置，若要从菜单中删除某项，在“内容”标签中，选择你要从“显示弹出菜单”列表中删除的菜单项，单击减号按钮。 图 19-7 新建项目自动添加为子菜单项 图1