借助得力工具快速制作CSS导航菜单(附工具下载地址)

　　【IT168 实用技巧】随着网页标准化观念深入人心&＃xff0c;越来越多的网站采用了CSS架构。CSS架构的网页不但符合W3C标准&＃xff0c;并且还非常美观。标准化网页从漂亮的CSS菜单开始&＃xff0c;如果你还在犹豫&＃xff0c;那么请看看下面这些CSS菜单演示吧&＃xff0c;如图1、图2&＃xff1a;

　　点击下载CSS Tab Designer

图1 CSS导航效果

图2 CSS导航效果

    众所周知&＃xff0c;CSS菜单都是一段代码、一段代码的编写出来&＃xff0c;生成上面这些漂亮菜单&＃xff0c;大家一定认为笔者写的很辛苦吧&＃xff1f;其实&＃xff0c;笔者没有写一句特殊代码&＃xff0c;就得到了上面这些CSS菜单&＃xff0c;好东西与大家一起分享&＃xff0c;笔者不敢藏私&＃xff0c;有请幕后功臣——CSS Tab Designer&＃xff01;

    CSS Tab Designer是一款使用CSS来设计导航菜单的可视化软件&＃xff0c;软件内置60多种不同风格的样式&＃xff0c;只需修改现成样式模版&＃xff0c;就能快速生成CSS菜单。特别值得一提的是&＃xff0c;软件生成的XHTML代码严格遵循网页标准&＃xff0c;创建的CSS菜单兼容各种主流浏览器&＃xff0c;无论是系统自带的Internet Explorer&＃xff0c;还是Firefox、Opera、Netscape都不会有问题。

    CSS Tab Designer操作很简单&＃xff0c;主界面采用三列式布局&＃xff1a;项目(Items)、样式(Tab Styles)、预览(Preview)依次排开&＃xff0c;几乎所有的操作都在主界面中完成&＃xff0c;如图3。

图3 主界面采用三列式布局

    新建菜单的步骤非常简单&＃xff0c;在“样式(Tab Styles)”中预制了60余种风格各异的菜单样式&＃xff0c;先选择需要的样式&＃xff0c;接下来点击左侧“项目(Items)”中的“用样本填充(Fill with samples)”&＃xff0c;立即就可以在“预览(Preview)”中看到效果&＃xff0c;菜单就算生成了。

    当然&＃xff0c;软件内置样式模版中的菜单项目都是英文&＃xff0c;对于中文用户并不适合&＃xff0c;我们还需要做一些修改。主窗口左侧“项目(Items)”中显示当前的菜单项目&＃xff0c;项目工具栏排列多个按钮&＃xff0c;从左到右依次是&＃xff1a;添加多个项目(Add Multiple Items)、添加项目(Add Item)、删除项目(Delete Item)、上移(Move Up)、下移(Move Down)、编辑选择项目(Edit Selected Item)&＃xff0c;如图4。

图4 菜单项目

    鼠标双击任意当前项目即可进入编辑对话框&＃xff0c;我们在这里修改原始英文为所需中文即可&＃xff0c;如图5。

图5 修改原始英文为所需中文

图6 中文乱码

    CSS Tab Designer是一款英文软件&＃xff0c;预置编码是针对英语系网页的&＃xff0c;所以我们需要手工修改编码为中文。由于软件本身并不具备代码编辑功能&＃xff0c;我们将在CSS菜单网页文件生成后再做修改。

    预览时面对乱码还是不太好&＃xff0c;你可以在预览区空白处点击右键&＃xff0c;在右键菜单中选择“编码→简体中文(gb2312)”&＃xff0c;预览效果即恢复正常&＃xff0c;如图7。

图7 转换编码

    不觉间&＃xff0c;CSS菜单已经做好&＃xff0c;接下来输出文件。点击软件工具栏上“创建HTML(Generate HTML)”按钮&＃xff0c;系统转入保存对话框。本例&＃xff1a;选择保存文件夹&＃xff1a;D:\web&＃xff0c;输入文件名&＃xff1a;menu&＃xff0c;点击“保存”按钮完成。

   前面已经说过&＃xff0c;软件默认生成的网页编码是英语系的&＃xff0c;接下来&＃xff0c;我们开始做编码修改工作。

    进入D:\web目录&＃xff0c;一般可以看到两个文件&＃xff1a;

    menu.html&＃xff0c;生成的CSS菜单网页。

    menu1.gif&＃xff0c;CSS菜单调用的相关图片&＃xff0c;实际情况下文件名可能略有不同。

    你可以用任意文本编辑器打开menu.html文件&＃xff0c;笔者使用的系统自带的“记事本”&＃xff0c;打开文件后&＃xff0c;找到如下内容&＃xff1a;

    CSS Tab Designer生成文件的默认编码为“ISO-8859-1”&＃xff0c;修改为中文编码“gb2312”即可&＃xff0c;如图8&＃xff1a;

图8 编辑并修改生成的菜单代码

    就这样简单&＃xff0c;保存修改结果&＃xff0c;再次打开menu.html看看吧&＃xff0c;怎么样&＃xff0c;没有乱码了吧&＃xff01;

　　点击下载CSS Tab Designer