纯CSS下拉菜单设计专家VIM - IT home | IT之家 - SiS001! Board

该用户匿名发帖发表于 2007-3-4 20:11 只看TA 1楼
该用户已被删除
[交流] 纯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。点击下载链接，一分钟之类可以将软件保存到本地。解压缩并执行可执行安装文件，按照步骤提示进行安装。软件安装好之后就可以运行了。如下图: 系统运行中进入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菜单二、认识 Visual Infinite Menus的面板 1、快速控制面板 Visual Infinite Menus 采用的是所见即所得的设计模式，设计者可以很方便地通过鼠标操作即可设计出漂亮的下拉菜单。菜单栏下部界面的上部有一个快速控制面板，通过它可以对面板进行控制，对菜单进行添加、删除、移动、排序、编辑等操作。如下图: 快速控制面板从左依次是:预览(运行)、展开/合拢属性面板、隐藏/显示编辑菜单、重复操作、撤销操作、菜单上移、菜单下移、插入菜单、添加子菜单、添加菜单和删除菜单，最后是一个输入功能选项，前部是菜单的文字，后部是菜单的链接，同时可以通过浏览本地图片为菜单添加背景项。 2、菜单基本样式设计器菜单编辑栏的用处在于编辑菜单的基本样式，界面如下图所示: 菜单基本样式设计器菜单基本样式设计器用来设置菜单的文字、链接、样式(字体、颜色、背景等)、边框、菜单分隔线属性、静态背景图像、鼠标滑过背景图像以及鼠标样式等，并分别在Main菜单和sub菜单两种对象下分别进行设计，其中还包括一个underline复选框，用来设计在三种状态下的下划线属性。 3、左侧特效编辑器左侧特效编辑器位于内容面板的左侧，通过它可以为菜单设置静态背景图片和动态背景图片，同时更重要的是可以为下拉菜单设置各种好看的效果，就跟幻灯片一样，但这些都是css滤镜实现的。面板如下图: 从上到下依次功能是:添加静态图片、添加动态图片、设置主菜单按钮图片、盒子滤镜效果、更多滤镜效果、滤镜管理、圆角效果、主菜单外观选择器、子菜单外观选择器和特效选择器。 4、菜单属性编辑器菜单属性编辑器是控制面板中较为复杂的一部分，可能会设计到较多的css知识，如果你是一个初学者，你可以不必理会，如果你对css有了一定的了解，对css样式表属性了然于胸那么你可以同国菜单属性编辑器设计出极具个性的菜单来。如下图: 菜单属性编辑器将分别为主菜单和子菜单设计文字样式、边框样式、活动样式、区域样式等，涉及到的理论比较多，以后会在文章中提到。总结:本文主要对Visual Infinite Menus的菜单功能和面板功能进行了介绍，作为Visual Infinite Menus的入门基础。下一篇将介绍Visual Infinite Menus的各菜单项功能，敬请阅读。 4、添加和删除菜单在设计模式下，你可以通过视图下的按钮来添加菜单、删除菜单、添加子菜单和删除子菜单，在设计视图的内容区底部你可以看到这样一排按钮: ADD按钮是指在主菜单的最后添加新的主菜单，Insert是指在选中的主菜单之后插入新的主菜单，Delete是指删除选中的菜单(包括主菜单和子菜单，当然，必须先要选中某个菜单)，Add sub是指为主菜单添加子菜单(同样要选中某个主菜单)，添加的子菜单将在主菜单的正下方显示，选中它可以进行相应的操作。 5、调节子菜单的宽度在设计模式下你可以用鼠标来调节菜单(包括主菜单main item和子菜单sub item)的宽度。选中第一个主菜单的第一个子菜单，被选中的子菜单将出现一个虚线框，同组的子菜单群将被一个大虚线框包围，可以通过鼠标拖拽来改变这个子菜单群的宽度，如下图: 同时，你也可以通过菜单属性编辑器来改变子菜单的宽度，如下图: 通过菜单属性编辑器来改变子菜单的宽度6、调节子菜单的位置在设计模式下，每个主菜单的默认子菜单群显示在主菜单的正下方，你可以通过鼠标拖拽来改变它的位置(必须选中某个子菜单群)。 7、编辑菜单中的文字和链接在设计模式下你可以双击菜单来改变菜单文字，双击菜单即弹出菜单文字输入框，如下图: 编辑菜单中的文字改变其中的内容成为你想要的文字，如“网页设计”，单击OK按钮及可生效。中间的Apply是应用的意思，单击这个按钮可以将输入的文字应用到设计区中并能看到效果。当然，你也可以改变菜单的链接，选中菜单(单击即可选中)，在设计窗口的上部左侧找到一个URL的按钮，单击这个按钮即可对此菜单的链接进行修改。如下图: 编辑菜单的链接同时你可以编辑链接目标(默认为新开窗口)和链接标题(Title)，当然，作为下拉菜单的主菜单，我们通常用“#”号代替，也就是指不发生任何页面跳转。 8、设计精美的菜单在设计模式下，你可以通过菜单属性编辑器来编辑菜单的表现形式，包括文字大小和颜色、容器内外边距、边框样式和颜色、鼠标滑动效果等。这里我就不多说了，需要在实际运用中摸索。总结:本文主要分析了Visual Infinite Menus的一些按钮功能，把下拉菜单设计细化到具体的某个细节上，下一篇将讲如何用Visual Infinite Menus来设计一个漂亮的下拉菜单，敬请关注。
0