层的隐藏与显示操作.PPT

网页设计与制作 利用层制作下拉菜单 学习目标 ①可以制作自己理想的下拉菜单。 ②能熟悉对层的操作方法 层制作下拉菜单的作用 制作下拉菜单的基本方法 基本方法： 1、制作导航条文字部分。 2、用层及表格制作下拉列表部分。 3、实现下拉列表的显示与隐藏。 效果如下图。 操作案例 1、新建一个层apDiv1，设置其宽为500像素，高为250像素。在层中插入一个1行4列的表格1，设置表格的边框为1像素，并且在第1列输入文字党建园地，在第2列输入文字教学管理，效果图如下图。 操作案例 2、新建一个层apDiv2，设置其宽为130像素，高为140像素。在层中插入一个4行1列的表格2，设置表格的边框为1像素，并且在第1、2、3、4行分别输入文字党委介绍、党建知识、规章制度、党建动态，如下图。 操作案例 3、新建一个层apDiv3，设置其宽为130像素，高为140像素。在层中插入一个4行1列的表格3，设置表格的边框为1像素，并且在第1、2、3、4行分别输入文字教学制度、名师风采、教改园地、师资园地， 效果如下图。 操作案例 4、在鼠标没有经过导航条文字“党建园地”、“教学管理”，下拉菜单应该是不可见的，那么我们就应该在初始状态时把层apDiv2、apDiv3隐藏起来。点击“窗口” →“AP元素”，在弹出的对话框中点击名称apDiv2、apDiv3前面的眼睛图标使其处于闭眼状态 ，效果如下图。 操作案例 5、选中文字“党建园地”，点击“窗口” →“行为” →“+” →“显示-隐藏元素”，弹出“显示-隐藏元素”对话框。选择div apDiv2，再点击“显示”按钮；选择div apDiv3，再点击“隐藏”按钮，如下图所示，最后单击“确定”按钮。在行为面板中，选择触发事件“onMouseOver”，这样当鼠标经过文字“党建园地”时，就会出现下拉菜单。 操作案例 6、当鼠标点击下拉菜单，再让它隐藏起来。我们通过AP元素对话框让层apDiv2显示出来，为其添加“显示-隐藏元素”行为，选择div apDiv2，点击“隐藏”按钮，再点击“确定”按钮。在行为面板中，选择触发事件“onMouseDown”。最后，我们再通过AP元素对话框，让层apDiv2初始状态为隐藏。 7、导航条中“教学管理”等文字的下拉菜单制作方法同步骤（5）、（6），不再赘述。