网站首页  |   业界社区  |  电信社区  |  技术社区   |  极客社区  |  游戏社区  |  生活社区   |   科技博客  |   同事录
TechWeb-技术社区



标题: [推荐] 五分钟快速制作CSS导航菜单
本主题由 xufeng 于 2007-12-28 10:44 移动
QQ爱
TW论坛元老
Rank: 8Rank: 8



UID 82078
精华 16
积分 8051
帖子 4469
阅读权限 90
注册 2006-9-7
状态 离线
发表于 2007-12-28 09:52 资料 短消息 加为好友
五分钟快速制作CSS导航菜单

随着网页标准化观念深入人心,越来越多的网站采用了CSS架构。CSS架构的网页不但符合W3C标准,并且还非常美观。标准化网页从漂亮的CSS菜单开始。     众所周知,CSS菜单都是一段代码、一段代码的编写出来,生成漂亮菜单,今天给大家介绍一款小的软件:CSS Tab Designer!
,^5v)s/h/O!L'{tech.techweb.com.cn  点击这里下载该小软件(1.35M).s+`%j,f3g2g
    CSS Tab Designer是一款使用CSS来设计导航菜单的可视化软件,软件内置60多种不同风格的样式,只需修改现成样式模版,就能快速生成CSS菜单。特别值得一提的是,软件生成的XHTML代码严格遵循网页标准,创建的CSS菜单兼容各种主流浏览器,无论是系统自带的Internet Explorer,还是Firefox、Opera、Netscape都不会有问题。
0[ x:@-g%}*F    CSS Tab Designer操作很简单,主界面采用三列式布局:项目(Items)、样式(Tab Styles)、预览(Preview)依次排开,几乎所有的操作都在主界面中完成,如图。 TechWeb-技术社区4K0Y"[3u4t1\

    新建菜单的步骤非常简单,在“样式(Tab Styles)”中预制了60余种风格各异的菜单样式,先选择需要的样式,接下来点击左侧“项目(Items)”中的“用样本填充(Fill with samples)”,立即就可以在“预览(Preview)”中看到效果,菜单就算生成了。
-r;q.x7j9u.Q$@&D    当然,软件内置样式模版中的菜单项目都是英文,对于中文用户并不适合,我们还需要做一些修改。主窗口左侧“项目(Items)”中显示当前的菜单项目,项目工具栏排列多个按钮,从左到右依次是:添加多个项目(Add Multiple Items)、添加项目(Add Item)、删除项目(Delete Item)、上移(Move Up)、下移(Move Down)、编辑选择项目(Edit Selected Item),如图。
)o5m4{"Z1w3H*U.f.B

    鼠标双击任意当前项目即可进入编辑对话框,我们在这里修改原始英文为所需中文即可,如图。 tech.techweb.com.cn)Q,M7M3G5~0L7v

    将所有内容修改完毕后,就可以在预览区看到效果了。此时,我们发现菜单上的文字并不是预期中出现的中文,而是一些乱码,这是为什么呢?如图。 程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛8U5F#{7x4G&D8X0M.e

    CSS Tab Designer是一款英文软件,预置编码是针对英语系网页的,所以我们需要手工修改编码为中文。由于软件本身并不具备代码编辑功能,我们将在CSS菜单网页文件生成后再做修改。
&? t-K,@"h-u9E.T    预览时面对乱码还是不太好,你可以在预览区空白处点击右键,在右键菜单中选择“编码→简体中文(gb2312)”,预览效果即恢复正常,如图。 6s7N0t2j(['b

    不觉间,CSS菜单已经做好,接下来输出文件。点击软件工具栏上“创建HTML(Generate HTML)”按钮,系统转入保存对话框。本例:选择保存文件夹:D:\web,输入文件名:menu,点击“保存”按钮完成。
8q,T4]:X9j7D9N(Y'V7O5t    前面已经说过,软件默认生成的网页编码是英语系的,接下来,我们开始做编码修改工作。
5y*s4b8l5\3yTechWeb-技术社区    进入D:\web目录,一般可以看到两个文件:
2R!d.c7r4i-W6l'b    menu.html,生成的CSS菜单网页。
"e/x3L"e0Z#A"x+]程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛    menu1.gif,CSS菜单调用的相关图片,实际情况下文件名可能略有不同。
)z0F5v0g Otech.techweb.com.cn    你可以用任意文本编辑器打开menu.html文件,笔者使用的系统自带的“记事本”,打开文件后,找到如下内容:
0k9Q6a!z N-K%n    <meta http-equiv="Content-Type" c />TechWeb-技术社区(^.D2q3C2d&E;c(M
    CSS Tab Designer生成文件的默认编码为“ISO-8859-1”,修改为中文编码“gb2312”即可,如图:0u0z"w%E#u
    <meta http-equiv="Content-Type" c />
.g#E6d*i/A0w/j9k9x'r!i1@:s6E2j+I8Y,z

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





不要犹豫,不要徘徊,活动您的手指,给我回上一贴,您就会  。。。。路路通事事顺。。。。
引用 回复 顶部
游客
未注册









发表于 2008-5-22 15:28 资料 短消息 加为好友
谢谢

感谢提供这么好的制作软件!

引用 回复 顶部
游客
未注册









发表于 2008-5-26 07:48 资料 短消息 加为好友
没有看到
也不可以下载

引用 回复 顶部
shenmu
TW注册会员
Rank: 2



UID 137198
精华 0
积分 148
帖子 74
阅读权限 20
注册 2008-7-12
状态 离线
发表于 2008-7-16 00:46 资料 短消息 加为好友
水水,,只想水到50帖子,,,LZ莫怪 !

水水,,只想水到50帖子,,,LZ莫怪 ! 'c+k(F9p,j%b.s

$\!k,z&g.u3k3W!B
.m$B.d#T8q7Gtech.techweb.com.cn程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛(G5F0U+A4p

2s&J1l-E%r$@8T程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛8Z+G#U&W#p0\2?6Q

0K/x;D L9?!F&u,s0VTechWeb-技术社区7x!I%B"L%x3o,d0{
+N)C.`'|-h4m%S9n9Z
9@&G#z7e&j(K&e$^1s'u/n
tech.techweb.com.cn8q$t*\5I8[ i0I0a;E,q6\ F
)N+L)g4G+T2a,d

3N;X+C'_:E)a9Z6b!k7Z5o
;S*@3j9`$O1U/d.M(x7?5I%c程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛
;x3\"E"X)z.W+N5e(l
4Q6\ V*@)H
/v9]8R&J0Y6H*?
7q7g,U*|4e!R,F,ytech.techweb.com.cn程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛,v'}!?7q9}

2s8z2P7o(w.f)h程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛神墓





引用 回复 顶部
查看积分策略说明快速回复主题
选项 标题 Smilies
禁用 URL 识别
禁用 Smilies
禁用 Discuz!代码
使用匿名发帖
使用个人签名
接收新回复邮件通知
内容





当前时区 GMT+8, 现在时间是 2008-9-6 06:12
京ICP证060517号

本论坛支付平台由支付宝提供
携手打造安全诚信的交易社区 Powered by Discuz! 5.5.0 © 2001-2008 Comsenz Inc.
Processed in 0.055785 second(s), 9 queries

清除 Cookies - 联系我们 - TechWeb.com.cn - Archiver - WAP