Dreamweaver网页制作基础教程任务二创建跟随漂浮广告的导航菜单.pptVIP

王焕杰 电话 邮箱:cnsyjsj@163.com 沈阳市信息工程学校 项目十 校园网中的动态导航 任务二：创建跟随漂浮广告的导航菜单 任务描述 为“招生专题”的漂浮广告创建一个动态导航子菜单，内容包括“专业介绍”等，当鼠标移动到漂浮广告上时在其右边出现子菜单，鼠标移开后子菜单消失。 知识准备 1．AP Div的定位特性 在任务一的知识拓展中，知道了AP Div的定位与其第一个父元素有关，如果父元素的位置发生改变，子元素的位置也会相应发生改变，但相对位置不变。 2．网页元素的“可见性”属性 每个网页元素都有一个“可见性”属性，在CSS中表示为visibility，通过这个属性可以控制网页元素的显示或隐藏。默认情况下，所有元素都是可见的，可以通过将某元素的“visibility”设置为“hidden”（隐藏）达到将其隐藏的目的。隐藏后需要再显示该元素时，可以将其“visibility”设置为“visible”（可见性）。 任务实施 图10.2.1 Div层的代码 步骤1：绘制一个AP Div，并命名为ad_menu。 步骤2：打开代码视图，把ad_menu这个层的代码剪切到AD中，效果如图10.2.1所示，此时AD就是ad_menu的第一个父元素。 步骤3：调整ad_menu层的位置，使其紧贴在AD层的右边。由于鼠标拖拽很难做到精确定位，因此可以通过修改left和top的属性进行调整。 （1）left属性是ad_menu的左边框相对于AD的左边框的距离，所以应该设置为AD的宽度。 （2）top属性是ad_menu的上边框相对于AD的上边框的距离，所以应该设置为0。 （3）为了确认ad_menu是紧贴且跟随AD漂浮，可以临时为ad_menu设置任意的背景颜色，然后进行预览。 步骤4：制作菜单内容 （方法、配色自定，过程略，参考效果如图10.2.2所示）。 图10.2.2 图10.2.3 “AP元素“窗口 步骤5：将ad_menu层的“visible”（可见性）设为“hidden”（隐藏），隐藏ad_menu层，使得其在默认情况下不显示。此时在设计视图里也看不到ad_menu层，可以在“AP元素”窗口（通过“窗口”→“AP元素”选项（快捷键“F2”）显示或隐藏该窗口）中选择该层或通过单击元素名称前的“眼睛”图标来显示或隐藏元素，如图10.2.3所示。 步骤6：设计动态行为。 （1）在设计视图中选中AD层； （2）打开“行为”窗口（“窗口”→“行为”选项，或“Shift+F4”组合键）。 （3）在“行为”窗口中单击“+”按钮，在弹出的菜单中选择“显示-隐藏元素”选项（如图10.2.4所示）。在弹出的对话框中选择“divad_menu”选项，并单击“显示”按钮，如图10.2.5所示。 图10.2.4 “行为”窗口 图10.2.5 显示/隐藏元素1 图10.2.6 添加行为 （4）单击“确定”按钮后，在“行为”窗口中设置事件为“onMouseOver”（鼠标经过），如图10.2.6所示。 （5）此时预览网页可以看到，一开始只有一个广告在页面中漂浮，当把鼠标移动到广告上时，会出现一个导航菜单，用户可以单击菜单项。但是鼠标移开后导航菜单并没有消失，所以我们还需要对AD层添加一个行为——当事件“onMouseOut”（鼠标离开）发生后隐藏“ad_menu”，如图10.2.7所示。 图10.2.7 显示/隐藏元素2 知识拓展 1．了解z-index z-index 属性设置元素的堆叠顺序，仅对定位元素（position:absolute）有效。z-index的值越大，则该元素离用户越近；数值越小，则离用户越远。 可以自己动手，在一个空白网页中绘制多个部分重叠在一起的AP Div，为每个AP Div设置不同的背景颜色，然后调整各个AP Div的z-index值，查看AP Div的显示情况，如图10.2.8所示。 图10.2.8 层的前后关系 2．了解“事件” 在完成任务的过程中，通过Div的“行为”功能来控制漂浮广告的导航菜单，使其能够按要求在鼠标经过时弹出菜单，鼠标移开后菜单消失。在这里，“菜单出现”、“菜单消失”等是行为，“鼠标经过”、“鼠标移开”等是事件。浏览器会监听用户的操作，当发生某个事件时就调用对应的行为。常见的事件及其描述如表10.2.1所示。 事 件 描 述 onclick 单击，即当对象被鼠标单击后发生的事件，下同 ondblclick 双击 onblur 失去焦点 onfocus 获得焦点 onmousedown 鼠标按键被按下（onclick是单击，即在系统规定的时间内按下再弹起） onmouseup 鼠标按键被松开 onload 一个页面