快速制作CSS导航菜单教

随着网页标准化观念深入人心，越来越多的网站采用了CSS架构。CSS架构的网页不但符合W3C标准，并且还非常美观。标准化网页从漂亮的CSS菜单开始。众所周知，CSS菜单都是一段代码、一段代码的编写出来，生成漂亮菜单，今天给大家介绍一款小的软件：CSS Tab Designer！

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

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

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

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

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

将所有内容修改完毕后，就可以在预览区看到效果了。此时，我们发现菜单上的文字并不是预期中出现的中文，而是一些乱码，这是为什么呢？如图。

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

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

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

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

进入D:\web目录，一般可以看到两个文件：

menu.html，生成的CSS菜单网页。

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

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

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

CSS Tab Designer生成文件的默认编码为“ISO-8859-1”，修改为中文编码“gb2312”即可，如图：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

就这样简单，保存修改结果，再次打开menu.html看看吧，怎么样，没有乱码了吧！

赞 (0)

相关推荐

  • 快速制作CSS导航菜单教

    快速制作CSS导航菜单教

    随着网页标准化观念深入人心,越来越多的网站采用了CSS架构.CSS架构的网页不但符合W3C标准,并且还非常美观.标准化网页从漂亮的CSS菜单开始.众所周知,CSS菜单都是一段代码.一段代码的编写出来,生成漂亮菜单,今天给大家介绍一款小的软件:CSS Tab Designer! CSS Tab Designer是一款使用CSS来设计导航菜单的可视化软件,软件内置60多种不同风格的样式,只需修改现成样式模版,就能快速生成CSS菜单.特别值 得一提的是,软件生成的XHTML代码严格遵循网页标准,创建的

  • CSS导航菜单，三级菜单实现代码

    CSS导航 首页 关于我们 公司简介 董事长&总裁 发展历程 公司荣誉 产品&服务 产品1 配套 配件 产品2 产品2-1 产品2-2 服务 服务111 服务112 服务113 服务114 服务115 新闻中心 公告 行业新闻 人力资源 人才战略 社会招聘 公司福利 合作伙伴 伙伴1 伙伴2 伙伴3 联系我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS实现带圆弧背景渐变效果的导航菜单代码

    JS实现带圆弧背景渐变效果的导航菜单代码

    本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

  • js实现的黑背景灰色二级导航菜单效果代码

    js实现的黑背景灰色二级导航菜单效果代码

    本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款js实现的黑背景灰色二级导航菜单,兼容IE6.firefox的js+css横向二极导航菜单.挺简洁,不过很清新,二级菜单是水平显示在主菜单的下方,采用流行的微软雅黑字体,若不想用这种字体,可换成默认的宋体即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/ 具体代码如

  • javascript HTML+CSS实现经典橙色导航菜单

    javascript HTML+CSS实现经典橙色导航菜单

    本文实例介绍了javascript结合HTML CSS实现橙色导航菜单,分享给大家供大家参考,具体内容如下 效果图: <html > <head> <title>超漂亮的HTML导航菜单CSS代码</title> <style> #top { display: block; text-align: left; height: 105px; position: relative; z-index: 0; } .m { margin: 0 auto;

  • javascript HTML+CSS实现经典橙色导航菜单

    本文实例介绍了javascript结合HTML CSS实现橙色导航菜单,分享给大家供大家参考,具体内容如下 效果图: <html > <head> <title>超漂亮的HTML导航菜单CSS代码</title> <style> #top { display: block; text-align: left; height: 105px; position: relative; z-index: 0; } .m { margin: 0 auto;

  • CSS网页布局入门教程12：纵向导航菜单

    CSS网页布局入门教程12：纵向导航菜单

    纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式.先看一下效果吧! 如图所示的效果,我们先看一下代码结构: <div id="nav">    <h1>CSS</h1>        <h2><a href="#">css入门</a></h2>        <h2><a href="#&quo

  • JS+CSS实现另类带提示效果的竖向导航菜单

    JS+CSS实现另类带提示效果的竖向导航菜单

    本文实例讲述了JS+CSS实现另类带提示效果的竖向导航菜单.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造另类带提示的竖向导航菜单,觉得挺不错,只是美工水平有限,有兴趣的朋友就请继续完善吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-alert-txt-nav-menu-demo/ 具体代码如下: <html> <head> <title>带提示的竖向导航菜单</title>

  • Div+Css(+Js)菜单代码及制作工具

    Div+Css(+Js)菜单代码及制作工具

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • dl,dt,dd制作的CSS垂直菜单

    感觉跟ul和li有点类似,不过也算是一种新思路,源码如下: dl,dt,dd制作的CSS垂直菜单 #menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(file:///E|/ceshi/media/bottom.gif) no-repeat bottom left;} #menu dt {margin:0; padding: 10px; font-size: 1.4em; font-we

随机推荐