五分钟快速制作CSS导航菜单

css|菜单|导航

  随着网页标准化观念深入人心,越来越多的网站采用了CSS架构。CSS架构的网页不但符合W3C标准,并且还非常美观。标准化网页从漂亮的CSS菜单开始。

    众所周知,CSS菜单都是一段代码、一段代码的编写出来,生成漂亮菜单,今天给大家介绍一款小的软件:CSS Tab Designer!

  点击这里下载该小软件(1.35M)

    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看看吧,怎么样,没有乱码了吧!

时间: 2025-01-01 05:18:29

五分钟快速制作CSS导航菜单的相关文章

借助得力工具五分钟快速制作CSS导航菜单

随着网页标准化观念深入人心,越来越多的网站采用了CSS架构.CSS架构的网页不但符合W3C标准,并且还非常美观.标准化网页从漂亮的CSS菜单开始,如果你还在犹豫,那么请看看下面这些CSS菜单演示吧,如图1.图2: 点击下载CSS Tab Designer 图1 CSS导航效果 图2 CSS导航效果 众所周知,CSS菜单都是一段代码.一段代码的编写出来,生成上面这些漂亮菜单,大家一定认为笔者写的很辛苦吧?其实,笔者没有写一句特殊代码,就得到了上面这些CSS菜单,好东西与大家一起分享,笔者不敢藏私,

使用CSS Tab Designer快速制作CSS导航菜单

随着网页标准化观念深入人心,越来越多的网站采用了CSS架构.CSS架构的网页不但符合W3C标准,并且还非常美观.标准化网页从漂亮的CSS菜单开始,如果你还在犹豫,那么请看看下面这些CSS菜单演示吧,如图1.图2: 图1 CSS导航效果 图2 CSS导航效果 众所周知,CSS菜单都是一段代码.一段代码的编写出来,生成上面这些漂亮菜单,大家一定认为笔者写的很辛苦吧?其实,笔者没有写一句特殊代码,就得到了上面这些CSS菜单,好东西与大家一起分享,笔者不敢藏私,有请幕后功臣--CSS Tab Desig

快速制作CSS导航菜单教_CSS/HTML

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

纯css导航菜单40例

如果在网站中有什么可以为用户留下第一印象的话,那么一定非创意实用的网站导航菜单莫属吧,在崇尚操作实用,注重体验的Web设计中,导航菜单的作用举足轻重. 如果在网站中有什么可以为用户留下第一印象的话,那么一定非创意实用的网站导航菜单莫属吧,在崇尚操作实用,注重体验的Web设计中,导航菜单的作用举足轻重.它可以引导用户更好地浏览网站内容,让用户更快速地找到感兴趣的内容. 在这篇文章中,整理搜集了40多套优秀的CSS导航菜单实例资源,下载即可使用,修改模板和结构也是非常的方便,应用在你的网站开发过程中

强烈推荐:30余个CSS导航菜单效果

30多款CSS制作的导航菜单,简洁大方,推荐大家收藏... 几十余款漂亮的CSS菜单,非常漂亮和简洁. 推荐收藏,下载地址见下方... 点击下载此文件

五分钟快速打造美观实用的线上个人简历网站

  本文要介绍的 Resumator 能让你快速在在线制作个人简历.Resumator 建立起来的个人页面非常美观.大方,而且没有太多复杂流程,你需要做的是依照网站提供的字段进行填写,最终就能产生属于你的在线页面专属网址.不妨来试一试 Resumator 背后是由一家名为 Qwilr 的公司所提供,Qwilr 主要营运的项目为简单建立网页服务,结合易用性和所见即所得等编辑功能,用户能在在线制作出具有美感且动态的网页效果. 从无到有建立一个在线名片并不是很容易,有了 Resumator 交互式在线

css导航菜单源码

提示:您可以先修改部分代码再运行 css导航菜单源码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

CSS实例教程:用列表ul制作CSS横向菜单的基础知识

在前面的文章中学习<用列表ul制作CSS横向菜单的基础知识>/article.asp?id=395.实现的原理我们都能理解了,但这样的菜单还远远不能满足我们的需要,我们需要制作出比较美观的菜单,我们今天学习让菜单有一个矩形的背景,并且当鼠标激活时能有所变化(hover).废话不多说了,让我们开始吧! <ul id="nav">       <li><a href="http://www.111cn.net/">Div+

JavaScript脚本制作二级导航菜单

网页特效脚本制作二级导航菜单      相信对于二级导航菜单大部分朋友都不会陌生,因为大部分网站都有用到.但是二级导航菜单是如何实现的,我想大部分朋友还和zero一样一头雾水.不过没关系通过下面的实例,你和我都能解决这个问题.      2.1.在网页中适当的位置添加一个一级菜单,本例中的一级导航菜单是由一系列空的超级链接组成,这些空的超级链接执行的操作是调用自定义的javascript函数lmenu()显示对应的二级菜单,在调用时需要传递一个标记,即主菜单项的参数.      2.2.在网页中