设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> Dreamweaver >> 下拉菜单全攻略之Dreamweaver篇
精品推荐
Dreamweaver点击TOP10
·用Dreamweaver简单描述制作网页的基本步骤
·Dreamwaver 常见问答解答
·Dreamweaver轻松制作网页滚动布告栏
·Dreamweaver 经典插件详解
·用Dreamweaver MX建立一个简单的图书查询系统
·如何用Dreamweaver批量做web网页
·Dreamweaver超级技巧之文字特效
·Dreamwaver 常见问答解答
·Dreamweaver MX 2004新功能导航
·下拉菜单全攻略之Dreamweaver篇
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·网页模板的使用方法 (教程)
·网页对联广告代码效果大全
·初学者入门:如何学习网页制作?
·用JavaScript实现文件图片滚动效果
·常用CSS大全
·网页自动转向代码
·图片循环滚动完美解决
·JS表格排序新法
·DIV CSS网页布局实例解析:实现表格形式
精选专题

下拉菜单全攻略之Dreamweaver篇

作者: 来源:网络文章 时间:2005-12-13 15:10:53

下拉菜单全攻略之Dreamweaver篇(1) 下拉菜单是网上最常见到的效果之一,用鼠标轻轻一点或是移过去,就出现一个更加详细的菜单,它不仅节省了网页排版上的空间、使网页布局简洁有序,而且一个新颖美观的下拉菜单,更是为您的网页增色不少。
  制作下拉菜单的方法多种多样,本期专栏将为您介绍四种常用的制作方法,让您随心打造自己的下拉菜单。


■ 用Dreamweaver制作下拉菜单

Dreamweaver是制作下拉菜单最常用的工具,方法简单,控制自由,可以最大限度地随心打造菜单样式,是制作下拄菜单的必修课。
用Dreamweaver制作下拉菜单的原理很简单,它利用了Behaviors(行为)面板中的内置方法Show-Hide Layers(隐藏-显示层)方法,并用onMouseOver(鼠标移至)和onMouseOut(鼠标移开)来触发层的隐藏和显示,而将要出现的菜单就在层中。
因此,我们可以分四步来制作下拉菜单,首先我们需要一个导航条,它用来放置首先出现在浏览者眼前的主菜单;然后再制作开始隐藏着而将会出现的下拉选单;接着,进行最关键的一步,为主菜单和下拉选单添加上隐藏和显示层的效果;最后,我们进行菜单的美化修饰。最终看到的效果如图。

20030818-1.gif" align="Center" >


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



  一、 导航条的制作


  首先进行一些必要的前期工作,按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两个参数是设置这个层距离窗口左边框和上边框的距离,一定不能填错,不然菜单将会错位,也将影响完成后的可用性。


共4页 9 7 [1] [2] [3] [48 :>

下拉菜单全攻略之Dreamweaver篇 相关文章:
下拉菜单全攻略之Dreamweaver篇 相关软件:
特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
转载请注明来源:http://www.xgdown.com