亿度网络 - Dreamweaver

///pc/img/blank.gif" width="12" height="8">当前位置：///default.htm" class="under">亿度网络 -> ///pc/index.htm" class="under">网页制作教程 -> Dreamweaver

///pc/homepage/dreamweaver/img/000.gif" width="100" height="20">

///pc/img/title_00.gif" width="13" height="20">

///pc/homepage/dreamweaver/img/002.gif" width="18" height="16" align="absmiddle">轻松掌握网页制作
///pc/homepage/dreamweaver/img/003.gif" width="18" height="16" align="absmiddle">深入学习和使用
///pc/homepage/dreamweaver/img/007.gif" width="30" height="16" align="absmiddle">用表格做网页
///pc/homepage/dreamweaver/img/007.gif" width="30" height="16" align="absmiddle">图形化的网页
///pc/homepage/dreamweaver/img/007.gif" width="30" height="16" align="absmiddle">灵活运用文字
///pc/homepage/dreamweaver/img/006.gif" width="30" height="16" align="absmiddle">精彩的图层世界
///pc/homepage/dreamweaver/img/004.gif" width="30" height="16" align="absmiddle">什么是图层
///pc/homepage/dreamweaver/img/004.gif" width="30" height="16" align="absmiddle">会跑动的面板(上)
///pc/homepage/dreamweaver/img/004.gif" width="30" height="16" align="absmiddle">会跑动的面板(下)
///pc/homepage/dreamweaver/img/004.gif" width="30" height="16" align="absmiddle">动态菜单的制作(上)
///pc/homepage/dreamweaver/img/004.gif" width="30" height="16" align="absmiddle">动态菜单的制作(下)
///pc/homepage/dreamweaver/img/007.gif" width="30" height="16" align="absmiddle">丰富的超链接
///pc/homepage/dreamweaver/img/007.gif" width="30" height="16" align="absmiddle">框架里的乾坤
///pc/homepage/dreamweaver/img/007.gif" width="30" height="16" align="absmiddle">创建各种窗体
///pc/homepage/dreamweaver/img/005.gif" width="30" height="16" align="absmiddle">本章常见问题解答
///pc/homepage/dreamweaver/img/002.gif" width="18" height="16" align="absmiddle">高级使用和理解
///pc/homepage/dreamweaver/img/002.gif" width="18" height="16" align="absmiddle">附录
///pc/homepage/dreamweaver/img/009.gif" width="30" height="16" align="absmiddle">常见问题汇总
///pc/homepage/dreamweaver/img/009.gif" width="30" height="16" align="absmiddle">快捷键分级介绍
///pc/homepage/dreamweaver/img/009.gif" width="30" height="16" align="absmiddle">一句话技巧集萃
///pc/homepage/dreamweaver/img/010.gif" width="30" height="16" align="absmiddle">功能快速索引

//www.shanghaigongsi.com.cn/pc/bin/softdown/softgsch.pl?key=dreamweaver">///pc/img/download.gif" width="90" height="45" border="0">

/pc/bin/msg.pl?file_id=k_dreamweaver target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

///pc/img/blank.gif" width="1" height="1">

///pc/homepage/dreamweaver/img/logo1.gif" width="194" height="64">

　　二、深入学习和使用

4、精彩的图层世界

（3）动态菜单的制作(下)

　　下面给导航菜单添加控制语句。选择“我的爱好”图形，按F8调出“Behaviors”窗口，点“+”按钮，选“Show-Hide Layers”命令。

　　设置mylike图层为“Show”，其他几个子菜单的图层为“Hide”，点“OK”（图1）。

///pc/homepage/dreamweaver/img/dw204030.gif" width="466" height="149" alt="只显示mylike层" border="0">

图1　设置只显示mylike层

　　当前事件为“onMouseDown”，用前面讲的方法，将事件改为“onMouseOver”，这样当鼠标在此图形上时，就会显示mylike图层，将另几个图层隐藏。

　　用同样方法给其他几个导航菜单设置“onMouseOver”事件，当鼠标在相应的菜单上时，只显示其子菜单所在的层。

　　按F11切换到“Layers窗口”中，除layer1父图层和cat1子图层外，其余图层均隐藏（图3）。这样初始状态我们就只能看到一只向右走的小猫。

///pc/homepage/dreamweaver/img/dw204032.gif" width="373" height="122" alt="图层面板上图层的可见性" border="0">

图3　图层面板上图层的可见性

　　保存文件，进入浏览器看一下效果（图4），还挺满意吧！

///pc/homepage/dreamweaver/img/dw204031.gif" width="300" height="174" alt="将子菜单设置显隐性后的效果" border="0">

图4　将子菜单设置显隐性后的效果

　　最后为了美观，你可以将导航菜单设置翻转效果（方法见会变脸的图形），就成了我们最开始看到的那种效果（图5）。

///pc/homepage/dreamweaver/img/dw204001.gif" width="300" height="185" alt="将主菜单加入翻转效果后的页面" border="0">

图5　将主菜单加入翻转效果后的页面（最终成品预览）

　　好，这个例子大功告成，你还不赶紧做一下！

/pc/bin/msg.pl?file_id=k_dreamweaver target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

网页制作网页设计网站建设网站设计网站制作做网站做网页