网页菜单梦幻工厂WebMenuShop |
|---|
|
| 2004-05-22 刘雄伟 |
| |
WebMenuShop是一款用于快速建立JavaScript网页菜单的共享软件，借助该软件，用户可以很轻松地制作风格多样的网页菜单，并可以很方便地保存菜单的定制方案。
下载和安装
该软件可以在Windows 9x/Me/NT/2000平台上使用，用户可以到http://www.knifesoft.onchina.net/下载，安装完后，点击“开始/程序/WebMenuShop/WebMenuShop”即可启动，进入菜单编辑窗口。此窗口可分为4个部分，上面为菜单栏和工具栏，下面左边为菜单结构定义窗口，右边为属性设置窗口。
创建菜单
1、设置菜单样式及效果：点击右边的“样式及效果”选项，在此设置框中用户可以设置主菜单的样式，主菜单样式可设为“水平、竖直和嵌入浏览器”3种，在“高级选项”中可以选择主菜单的定位方式。
下面为“子菜单样式设置”栏，可以设置子菜单的显示方式、添加动画显示效果，在“高级选项”中可以设置动态显示的方向和速度。还可以设置子菜单显示的相对位置和显示鼠标的响应时间，是“点击显示子菜单”还是“只要鼠标移动到主菜单上时即显示子菜单”等等。
2、定义菜单结构：在菜单结构定义窗口中，用户可以通过右键菜单命令或者通过窗口内的工具栏命令“添加”、“删除”、“移动”主菜单项和子菜单项，值得注意的是：设置的主菜单可以没有子菜单，但是子菜单下不能再有子菜单。
3、为每项子菜单项定制属性：点击要设置的子菜单项，然后点击“菜单项属性”选项卡，打开菜单项属性设置窗口，在该窗口中，通过“菜单标题或图片”输入框可以输入菜单文字和显示的图片。值得注意的是，如果输入“-”，则菜单项显示为分隔横线。通过“链接地址或脚本”可以输入点击该菜单项要运行的脚本或者链接地址，如果为外部链接则需要加上“http://”。最后可以选择目标显示的框架方式，并在最下面的状态栏说明文字中输入当鼠标移动到该菜单项时，浏览器状态栏中显示的说明文字。
4、定义菜单外观：用户可以根据需要改变菜单的各个尺寸和字体大小及风格。点击“外观控制”选项，可以打开菜单外形设置对话框，在这里可以定制主菜单的高度、宽度、每个菜单项的单元宽度、字体的对齐方式、子菜单宽度、子菜单位置微调，以及主菜单右侧和左侧的修饰。还可以通过右边的“鼠标指针设置”选项设置菜单项的鼠标指针形状。
5、选择菜单颜色：菜单项的默认颜色为Windows 2000风格的菜单颜色，用户可以根据自己的爱好定制自己的配色方案。点击“定制颜色”选项即可进入配色方案设置窗口(如图)，通过菜单颜色栏中的长条按钮打开调色板选择自己喜欢的颜色。点击Windows图标按钮则可以打开“Windows系统颜色”选择框，在颜色列表框中选择需要的颜色。如果用户对自己的配色方案比较满意的话，可以通过下面的“添加到配色方案库”按钮保存配色方案。
如果希望保存当前的菜单选项及相关配置，则可以点击“方案/保存”命令，将当前创建的菜单方案以MNU格式的文件保存下来，这样下次用就可以在已有的基础上重新进行编辑了。
预览和输出
完成上述步骤之后，点击菜单“预览/预览当前定义的菜单”即可打开预览窗口，查看菜单的最终效果，如果不满意，可以修改相应地方直至预览满意。
如果对于预览效果比较满意，就可以将菜单添加到需要的网页中了。添加制作好的菜单到网页的具体方法为：
1、把软件所在目录的workspace子目录下的menu.jse、define.js和hr.gif这3个文件拷贝到网页所在目录。可以通过点击菜单“编辑/菜单文件拷贝至目录……”命令打开目标目录选择对话框，选择好网页所在的目录后，点击“确定”按钮即可完成。
2、然后利用相关工具，如“记事本”，打开网页源代码编辑窗口，在网页的〈head〉和〈/head〉之间添加以下代码：
〈script language="jscript.encode" src=
"menu.jse"〉〈/script〉
〈script src="define.js"〉〈/script〉
或者通过点击菜单“剪贴板/复制菜单定义代码到剪贴板”来将代码复制到剪贴板后，粘贴到相应位置即可。
3、然后在网页中需要添加菜单的地方加上“〈script〉document_load()〈/script〉”即可。或者通过菜单命令“剪贴板/复制菜单输出代码到剪贴板”来将这句代码粘贴到相关位置即可。值得注意的是：如果设计的菜单是嵌入到浏览器风格的菜单，那么只能将〈script〉document_load()〈/script〉写在网页的〈body〉标记的后面，这样才能得到正确的显示效果。
该软件制作的菜单目前适用于IE5.0及以上版本的浏览器，同时该软件还自带了一些菜单实例效果演示，用户可以通过菜单“范例”浏览已有的菜单效果。如果用户想获得其最新的版本，可以点击菜单命令“帮助/在线检查更新版本”，直接下载，非常方便。
|
|
| |
|
发表评论
推荐文章
关闭窗口
|
|
|
|
