`

快速制作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)依次排开,几乎所有的操作都在主界面中完成,如图。

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

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

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

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

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

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

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

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

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

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

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

不觉间,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" />

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

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

得到的网页满意好上传空间后,采用如下代码调用:

<DIV align=center><IFRAME style="WIDTH: 246px; HEIGHT: 158px" marginWidth=0 marginHeight=0 src="上传后的地址" frameBorder=0 width=100 scrolling=no height=100></IFRAME></DIV>

代码:WIDTH: 246px; HEIGHT: 158px的数值自己合适设置。


---------------------------------------------------------------

说明:

对每个导航项目有三种状态:

为选中,选中,鼠标hover。

默认情况下,将选中的那个li的id设为current,以区别其他情况,同时刻只能有一个current,即只有一个处于选中状态。

未选中 hover选中


因此,实际使用的时候还要配合js,以动态设置选中项目的id。

分享到:
评论

相关推荐

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...

    使用CSS3制作响应式导航菜单的方法

    关于使用响应式设计来创建一个手机导航栏,之前我曾经写过一个教程。现在我发现了一种新的方式,可以不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记,而且菜单可以居左、居中和居右对齐。不...

    Web前端开发之二级菜单加轮播图:基于HTMLCSSJS的网页布局与交互设计.txt

    本资源是一本Web前端开发之二级菜单加轮播图的网页布局与交互设计教程,旨在通过HTML/CSS/JS这三种基础的网页开发语言,来实现一个具有二级菜单导航和图片轮播效果的网页,涵盖了网页的结构、样式、行为等内容,以及...

    CSS网页开发/仿12306铁路网站

    web期末网站设计 ...本项目是仿照12306网站实现了下拉菜单,轮播图,切换导航栏,侧边栏以及返回顶部和其他的动态效果,仅有首页,登录页和注册页的简单页面效果,并无相应功能,但是可以根据需要进行改进。

    CoffeeCup_Responsive_Site_Designer_v4.0_Build_3285.rar

     CSS网格+基础6,Bootstrap 3, Bootstrap 4,物化,香草CSS CSS框架帮助数以百万计的设计师和开发人员快速制作网站。 该行业的顶级工具包括Bootstrap 3和4,Foundation 6和Materialize。 这些系统经过了高度的测试...

    jQuery可拖拽悬浮弹性菜单代码.zip

    jQuery可拖拽悬浮弹性菜单代码是一款jQuery利用css3属性制作网页悬浮的圆形弹性菜单,鼠标按住拖动菜单到任意位置功能。

    无刷新Ajax文章评论系统

    一、基本说明: 本程序适用于中小型ASP网站的快速建设; 结构:ASP+ACESS+FSO。...后台导航菜单定制; 后台网站日志; 自由控制交互栏目的开放或关闭; 参与性会员功能; 管理员权限任意组合设置; DIV+CSS风格。

    荣森网安ASP网站内容管理系统商业版

    一、基本说明: 本程序适用于中小型ASP网站的快速建设; 结构:ASP+ACESS+FSO。...后台导航菜单定制; 后台网站日志; 自由控制交互栏目的开放或关闭; 参与性会员功能; 管理员权限任意组合设置; DIV+CSS风格。

    learn-tachyons:了解如何使用Tachyons通过功能强大CSS制作精美,响应Swift的UI!

    响应式导航菜单示例 资源 文章 问题与讨论 短剑的未来 为什么呢? 用户界面(UI)或用户体验(UX)是人们(“最终用户”)看到并与之交互的应用程序的一部分。 确保UI / UX是它可以是最好的,很容易对我们的Web /...

    贝壳企业网站管理系统ShellCMS v1.1.3

    6、可自定义导航菜单和模块边框,快速制作及模仿网站显示效果。 7、强大的后台管理功能,文章、图片、产品、菜单、页面等各种内容管理应有尽有。 8、内置大量功能模块。 9、良好的SEO支持。 10、大量使用ajax...

    飞腾ASP网站内容管理系统FeitecCMS 4.0 Build 20121110.rar

    后台导航菜单定制; 后台网站日志; 自由控制交互栏目的开放或关闭; 参与性会员功能; 管理员权限任意组合设置; DIV CSS风格; 更多功能详见后台帮助中心…… 三、特色: 1、上手容易: FeitecCMS 解压...

    贝壳企业网站管理系统ShellCMS v1.1.3.rar

    6、可自定义导航菜单和模块边框,快速制作及模仿网站显示效果。 7、强大的后台管理功能,文章、图片、产品、菜单、页面等各种内容管理应有尽有。 8、内置大量功能模块。 9、良好的SEO支持。 10、大量使用ajax...

    JavaScript网页特效范例宝典源码

    实例053 收缩式导航菜单 89 实例054 树状导航菜单 91 第2章 表单及表单元素 95 2.1 文本框/编辑框/隐藏域组件 96 实例055 获取文本框/编辑框/隐藏域的值 96 实例056 自动计算金额 97 实例057 设置文本框的只读属性 ...

    网址网站导航整站源码

    .#优化首页搜索框调用和配置,使用户可以快速填入搜索联盟代码; .#修改广告调用模式,用户可直接写入代码,增强可操控性; .#新增站长需要的闹钟、滚动新闻、天气预报定制等功能; .#调整和优化系统菜单的功能及...

    70款经典Dreamweaver插件

    SliderMenu 设计导航菜单的绝佳助手,可以用于导航菜单的设计,特别是导航项很多的场合 disable_view_source 让网页源代码无法观看 vmkp_flash_buttons Flash按钮 iframe 内帖窗口(页中页效果) open_picture_window ...

    Dreamweaver 插件集

    设计导航菜单的绝佳助手,可以用于导航菜单的设计,特别是导航项很多的场合 disable_view_source 让网页源代码无法观看 vmkp_flash_buttons Flash按钮 iframe 内帖窗口(页中页效果) open_picture_window 打开一个与...

Global site tag (gtag.js) - Google Analytics