当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

推荐:纯CSS下拉菜单设计专家VIM

时间:2008-10-6 10:45:00 栏目:网页制作 点击: 来源:不详

 [网页制作]-本文简要:第一部分:CSS下拉菜单设计专家 Visual Infinite Menus初体验  Visual Infinite Menus是美国Opencube公司开发的一款绿色免费软件,是目前CSS样式表可视化设计软件市场中的佼佼者,我之所以要介绍这款软件是因为Visual Infinite Menus不同...

D6电脑网 (d6pc.com): 推荐:纯CSS下拉菜单设计专家VIM-网页制作
第一部分:CSS下拉菜单设计专家 Visual Infinite Menus初体验

  Visual Infinite Menus是美国Opencube公司开发的一款绿色免费软件,是目前CSS样式表可视化设计软件市场中的佼佼者,我之所以要介绍这款软件是因为Visual Infinite Menus不同于其它同类软件,有自己非常独到的一面。我可以这样说,Visual Infinite Menus是我使用过的最好的网页样式表设计软件,本文就Visual Infinite Menus的一些情况作些介绍。

  Visual Infinite Menus的最新版本是v9.3.0版,软件大小4M,目前还无中文版本。要获取这款软件很容易,你可以到Opencube的官方网站上去下载Visual Infinite Menus,页面地址是http://www.opencube.com/download.ASP/' target='_blank' class='infotextkey'>asp。点击下载链接,一分钟之类可以将软件保存到本地。解压缩并执行可执行安装文件,按照步骤提示进行安装。软件安装好之后就可以运行了。如下图:

  


系统运行中

  进入Visual Infinite Menus之后,系统将装载一个默认纯CSS下拉菜单实例,虽然是英文界面,但由于Visual Infinite Menus的版面设计得非常合理,设计者将很容易地熟悉其提供的强大功能。

  一、认识 Visual Infinite Menus的菜单

  与大多数设计软件类似,Visual Infinite Menus 的面板功能非常强大,菜单栏主要包括File、Edit、View、Options、Effects等按钮。

  1、File菜单

  File菜单是最普通也是用的最多的按钮,其中包括新建、打开、保存、发布等命令,其中“新建”命令有两个,其一是新建空白任务,也就是从零开始设计一个下拉菜单,其二是从系统中打开一个模板实例,此功能就如用Dreamweaver新建一个网页时系统引导你新建一个什么样的网页一样,为你给出一个有基础代码的模板。如下图:


新建一个任务

  从实例模版中打开

  选择其中的一个模板实例,单击OK按钮,系统自动装载这个实例,你可以在此基础上对菜单进行编辑,并最终获得自己想要的效果。

  2、Edit菜单

  Edit菜单也就是编辑菜单,里面提供了常用的下拉菜单的增、删、插入、移动、文字编辑、链接编辑等功能选项。如下图:

  
编辑选项菜单

  这个菜单是设计过程中用的最多的菜单。

  3、View菜单

  View菜单也即视图菜单,主要提供面板的显隐控制,这个菜单用的比较少。如下图:

  
视图菜单

  4、Option菜单

  Option菜单也就是选项菜单,主要用来控制工程的下拉菜单属性设置、工程目录设置、文件保存设置等。如下图:

  
选项菜单

  5、Effects菜单

  这个菜单主要为了提供一些特效,就如PS中的滤镜一样,可以为下拉菜单在动态显示的时候提供一些好看的特殊效果。如下图:

  


Effects菜单


4、添加和删除菜单

  在设计模式下,你可以通过视图下的按钮来添加菜单、删除菜单、添加子菜单和删除子菜单,在设计视图的内容区底部你可以看到这样一排按钮:

  ADD按钮是指在主菜单的最后添加新的主菜单,Insert是指在选中的主菜单之后插入新的主菜单,Delete是指删除选中的菜单(包括主菜单和子菜单,当然,必须先要选中某个菜单),Add sub是指为主菜单添加子菜单(同样要选中某个主菜单),添加的子菜单将在主菜单的正下方显示,选中它可以进行相应的操作。

  5、调节子菜单的宽度

  在设计模式下你可以用鼠标来调节菜单(包括主菜单main item和子菜单sub item)的宽度。选中第一个主菜单的第一个子菜单,被选中的子菜单将出现一个虚线框,同组的子菜单群将被一个大虚线框包围,可以通过鼠标拖拽来改变这个子菜单群的宽度,如下图:

  同时,你也可以通过菜单属性编辑器来改变子菜单的宽度,如下图:

  


通过菜单属性编辑器来改变子菜单的宽度

  6、调节子菜单的位置

  在设计模式下,每个主菜单的默认子菜单群显示在主菜单的正下方,你可以通过鼠标拖拽来改变它的位置(必须选中某个子菜单群)。

  7、编辑菜单中的文字和链接

  在设计模式下你可以双击菜单来改变菜单文字,双击菜单即弹出菜单文字输入框,如下图:

  


编辑菜单中的文字

  改变其中的内容成为你想要的文字,如“网页设计”,单击OK按钮及可生效。中间的Apply是应用的意思,单击这个按钮可以将输入的文字应用到设计区中并能看到效果。当然,你也可以改变菜单的链接,选中菜单(单击即可选中),在设计窗口的上部左侧找到一个URL的按钮,单击这个按钮即可对此菜单的链接进行修改。如下图:

  


编辑菜单的链接

  同时你可以编辑链接目标(默认为新开窗口)和链接标题(Title),当然,作为下拉菜单的主菜单,我们通常用“#”号代替,也就是指不发生任何页面跳转。

  8、设计精美的菜单

  在设计模式下,你可以通过菜单属性编辑器来编辑菜单的表现形式,包括文字大小和颜色、容器内外边距、边框样式和颜色、鼠标滑动效果等。这里我就不多说了,需要在实际运用中摸索。

  总结:本文主要分析了Visual Infinite Menus的一些按钮功能,把下拉菜单设计细化到具体的某个细节上,下一篇将讲如何用Visual Infinite Menus来设计一个漂亮的下拉菜单,敬请关注。


Tags:菜单 单设 


D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等栏目。感谢您的支持!
栏目:网页制作 作者:佚名 来源:不详
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类推荐
  • 没有
本类固顶
  • 没有
网友推荐
链接申请
  • D6电脑网(www.d6pc.com) © 2018 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵犯您的利益请联系我们删除.谢谢!
    关于D6电脑学习网 广告合作 419807867@QQ.COM 联系站长 网站地图 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0