| 网站首页 | 文章中心 | 电子书下载 | 矢量图库 | 视频教程 | 素材下载 | 程序代码下载 | JS代码 | 论坛 | 
龙腾教程网  
常用软件类:
|杀毒安全 |联络聊天 |网络软件 |多媒体类 |系统工具 |图形图像 |系统工具 |应用软件 |行业软件
开发设计类:
|动画制作 |图像处理 |3D设计 |操作系统 |站长学院 |网络相关 |WEB设计 |数据库类 |程序开发
 
  您当前位置:您现在的位置: 龙腾软件教程网 >> 文章中心 >> WEB设计 >> Dreamweaver >> 实列效果 >> 文章正文>>>>>> 
Dreamweaver制作简单的网页下拉菜单
Dreamweaver是制作下拉菜单最常用的工具,方法简单,控制自由,可以最大限度地随心打造菜单样式,是制作下拄菜单的必修课。
  用Dreamweaver制作下拉菜单的原理很简单,它利用了Behaviors(行为)面板中的内置方法Show-Hide Layers(隐藏-显示层)方法,并用onMouseOver(鼠标移至)和onMouseOut(鼠标移开)来触发层的隐藏和显示,而将要出现的菜单就在层中。
  因此,我们可以分四步来制作下拉菜单,首先我们需要一个导航条,它用来放置首先出现在浏览者眼前的主菜单;然后再制作开始隐藏着而将会出现的下拉选单;接着,进行最关键的一步,为主菜单和下拉选单添加上隐藏和显示层的效果;最后,我们进行菜单的美化修饰。最终看到的效果如图,您也可以访问以下地址:menu.htm

  相信你已经等不急了,那就让我们马上开始吧!

一、 导航条的制作

首先进行一些必要的前期工作,按CTRL+J,打开Page Properties(页面属性)窗口,参数设置如图二,这一设置对菜单的位置将有影响,所以请如图设置。

按CTRL+F2打开Objects面板,点击层按钮后在页面中按住鼠标不放拖出一个层,然后在层的Properties(属性)面板中设置各参数,Layer ID框填入title,L、T、W、H框分别填入8、15、480、15,背景色填入#006699,如图。

将光标移至层内,点击Objects面板上的表格按钮,插入一个一行四列的表格,设置如图。

按住CTRL键不放点取表格的四个单元格,然后设置它们的宽度为120,并在前两个单元格中输入文字,就是你的主菜单名,可按自己想要的名字输入,我用"经典论坛"和"天极网"为例,并加上链接。

二、 下拉选单的制作

现在开始制作将要下拉出现的菜单,同样用层来制作。
再次从Objects面板插入一个层到前面我们做好的导航条的下方,各项参数填为:Layer ID框填入menu1,L、T、W、H框分别填入8、34、120、80,背景色填入#999966,其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离,一定不能填错,不然菜单将会错位,也将影响完成后的可用性。

这时候,我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便,我在这还是使用表格来做菜单。这个层将作为"经典论坛"的下拉选单出现,填入你所需要的菜单链接。同样的方法,再为"天极网"也做一个下拉选单(层menu2)。

这一步要注意的地方就是下拉选单所在的层(menu1、menu2)的位置非常重要(由L和T两个参数决定)。它们的上边线应该紧贴导航条的下边线,这样才能保证在后面我们完成第三个步骤后,菜单能正常使用。因为如果远离导航条的话,鼠标一离开导航条,菜单就消失了。

按F2打开LAYER(层)面板,其中列出了网页中的三个层,点menu1和menu2的前面一格,出现闭着的眼睛图标,这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。

三、 显示和隐藏效果的添加

这一步骤是化腐朽为神奇的关键一步,大家仔细跟我来做。
本步骤分为两部分:第一,对导航条中的主菜单添加控制显示隐藏的命令;第二,给下拉选单本身添加显示隐藏的命令。

1.导航条部分
首先按CTRL键不放点击导航条中的第一个单元格,现按Shift+F3打开Behaviors窗口,点按钮,在下拉选项中选中"Show-Hide Layers"(如图)。如果选项中没有这一项,则选择Show Events For下的IE 5.0后,重新点 按钮,此时"Show-Hide Layers"将出现。

这时将会弹出一个窗口,如下图。在Named Layers框中会列出当前网页所有的层,选中" layer "menu1" ",因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"show"按钮,OK。

这时会回到Behaviors窗口,窗口中出现如下图所示字样,点击Events下的文字"onClick",会出现一个向下的小箭头,点击它,在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时,下拉选单menu1的状态变为显示(Show)。

[1] [2] 下一页


上一篇:
  • 上一篇文章:
  • 下一篇
  • 下一篇文章: 没有了
  • 收藏此文到百度搜藏 百度搜藏| 新浪VIvi| 365key| Younote| 博采中心| 你好BLOG| 亿友网摘| 和讯网摘|
    相关文章    
    Dreamweaver CS3中Spry详细区域的功能
    Dreamweaver CS3中Spry详细区域功能
    dreamweaver mx 制作网站留言本过程全解
    Dreamweaver MX制作各种网页鼠标样式技巧
    Dreamweaver制作自动关闭的网页
    Dreamweaver CS3 新功能介绍
    Dreamweaver定义模板批量制作web网页
    使用Dreamweaver CPU占100%的解决方法
    Dreamweaver+asp.net制作自己的站内搜索
    Dreamweaver制作表格细边框技巧
     
     
     
    最新文章
    普通文章 Dreamweaver制作简单的网页下拉菜最新文章
    普通文章 Photoshop绘制时尚3D立体文字最新文章
    普通文章 Excel公式错误值的解决方法最新文章
    普通文章 Windows Vista九则加速操作技巧最新文章
    普通文章 迅雷中提取卡巴斯基的key 技巧最新文章
    普通文章 PhotoShop绘制云海观音石像奇景最新文章
    普通文章 Autodesk 3ds Max 2009新功能初探最新文章
    普通文章 Photoshop绘制水泡中的里的花草最新文章
    普通文章 Photoshop设计拼图特效的美女图片最新文章
    普通文章 3DS MAX打造逼真的轮胎效果最新文章
     
    热门文章
    推荐文章 Illustrator手绘古典游戏美女图片
    推荐文章 Photoshop绘制奇幻的宇宙幻想图
    推荐文章 Painter手绘逼真的百合花
     
     
    设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 

    版权所有2006-2008 龙腾教程网