免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
返回列表 發帖

[建站經驗] 60个美化代码教程-新人建站必备!

本帖最後由 kyh991 於 2015-10-29 23:30 編輯

建站,其实只要很短的时间,对于老鸟而言,可能三天就足够了,因为他们已经拥有建站的经验了。同样的事情,再做一次,谁都会变得很轻松,因为困难,只在你踏出的第一步而已。

对于新人而言,上手最难的不是后台设置,而是对论坛首页以及各版块下面的美化工作,因为这里面涉及太多代码添加和修改过程,这才是最花时间的。不过有了本教程,至少。。。可以让你少花一半的时间,大概五天就可以成功建站并投入正常运营了,还在犹豫什么,赶紧跟着我来吧!

第一天的准备工作:请各位新人登陆后台面板后,其他的设置一律暂时忽略,先把论坛主版块(包含子版块)用户组头衔和积分级别论坛任务以及云平台开通这四大项,统统简略的建设起来;云平台这个很重要,可以让所有会员(包括你自己)通过QQ绑定账号,以后登录时候快捷很多,无需输密码了;接着我们去设置每个版块下面的用户组权限,因为这关联到全体会员(管理员账号除外)能否正常浏览论坛、发帖回帖和各种互动等操作;弄完这五项工作,大概会消耗你8-15小时的时间,主要区别在于你设置简繁罢了。



注意事项:
1、其实只需要花费你十分钟时间,走马观花方式,大概阅览一下后台管理面板的各项设置名称和作用即可,省得你一头雾水找不着方向;
地址:http://faq.comsenz.com/userguide/discuz/usedir.html
2、如果遇到云平台开通失败的问题,不用着急,咱可以找管大解决;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=20889&extra=page%3D1
3、以上五大项在设置上遇到搞不掂的,可以去看新手教程;
地址:http://www.sclub.com.tw/discuz/forumdisplay.php?fid=44&page=1
4、爬文(即浏览帖子)的方式也找不到你遇到的相关问题,请按照无界版大的方法搜索,能让你节省大量积分和时间;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=31631&highlight=%2B%E6%97%A0%E7%95%8C
5、以上四小项都不能解决你的问题?好吧,我建议你去发求助帖,发帖前请认真看下面这个发帖规则,否则。。。后果很严重滴!
发帖守则必看:http://www.sclub.com.tw/discuz/viewthread.php?tid=20260&extra=page%3D1



第二~第四天的工作:同样是暂时忽略后台各种设置,直接美化论坛!在官方论坛有多达几千个关于美化的教程,我相信没有一个新人,有耐心,有时间去看完全部帖子再去美化自己论坛的,因为你是人,不是机器人!所以,我按照我建站的经验过程来把这个步骤稍微简化下,大家可以先模仿操作,差不多上手了,就可以自行修改了,因为任何事情,你至少得先学会基本操作,你才可以精益求精!请大伙按照以下序号顺序查看教程和实践操作,都是很有用的东西哦!

附上效果图2张,图内的数字代表下面的序列号教程,如果想看得更仔细一点的,可以到我论坛查阅:http://sqdr.imotor.com
12.png
2015-10-29 23:29

13.png
2015-10-29 23:29


0、美化论坛前必须在模板上面修改代码,而修改代码前必须先学会建立新的模板,因为系统默认模板一旦修改错误,后果就一个:论坛崩溃,无法登入,需管大亲自出马才能恢复!所以。。。还请新人先花十五分钟学习下模板新建;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=31274&extra=page%3D1
1、学习完上面的模板新建,建议大伙去把论坛版块设置为横排形式,这样你的子版块多了,论坛首页就不会显得那么拥挤;
地址:http://sclub.com.tw/discuz/viewthread.php?tid=20211&extra=page%3D4
2、接着咱去章鱼哥版大的论坛注册账号,然后安装jQuery内核,因为以下大部分美化工作,都需要这个内核才能正常运行,而且。。。大部分的美化都来源于章鱼哥的论坛,嘿嘿!
地址:http://zyhome.66rt.com/viewthread.php?tid=12971&highlight=%E5%86%85%E6%A0%B8
3、非常漂亮的首页9格,比官方自带的那个好用很多,建议安装;
先装这个:http://tlb.258club.com/thread-992-1-1.html
再装这个:http://tlb.258club.com/viewthread.php?tid=3617&extra=&page=1
最后装这个(3个不冲突):http://tlb.258club.com/viewthread.php?tid=3622&extra=&page=1
4、很实用的回到顶部和页面刷新工具,特别适合版块多的论坛;
地址:http://zyhome.66rt.com/viewthread.php?tid=8146&highlight=%E4%BB%BF%E7%99%BE%E5%BA%A6%E5%8F%B3%E4%BE%A7%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8
5、用户信息积分进度条,顾名思义就是。。。用户提升至下一级别所需的经验值,立体感很强;
地址:http://zyhome.66rt.com/viewthread.php?tid=23963&highlight=%E7%A7%AF%E5%88%86%E8%BF%9B%E5%BA%A6%E6%9D%A1
6、帖子脚印,就是。。。每个主题帖内会直接显示有多少会员浏览过(带会员头像),是个吸引会员浏览帖子的好办法;
地址:http://zyhome.66rt.com/viewthread.php?tid=23622&highlight=%E5%B8%96%E5%AD%90%E8%84%9A%E5%8D%B0
7、论坛聊天室,如果自己论坛没有官方Q群,建个首页聊天室是最好的选择,因为很多会员都喜欢在线臭屁;
地址:http://zyhome.66rt.com/viewthread.php?tid=23350&highlight=%E8%81%8A%E5%A4%A9%E5%AE%A4
8、很实用的站内搜索框,因为它可以在首页、版块、帖子列表页面直接搜索全站帖子;
地址:http://zyhome.66rt.com/viewthread.php?tid=1903&highlight=%E4%BB%BFDZX2%E6%90%9C%E7%B4%A2%E6%A1%86V2.0
9、红包中心,就是。。。每天固定时间白送会员积分的插件;
地址:http://tlb.258club.com/viewthread.php?tid=3660&extra=&page=1
10、论坛首页添加一键加入Q群的教程,适合有自己Q群的论坛;
地址:http://zyhome.66rt.com/viewthread.php?tid=9625&highlight=QQ%E7%BE%A4
11、去掉首页右上角的“论坛”按钮,这个必备;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=15103&extra=page%3D3%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
12、首页横排会员登陆框,这也是论坛必备的插件了;
地址:http://tlb.258club.com/viewthread.php?tid=3701&extra=&page=1
13、首页小图标替换,这个也是必须拿下的;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=28822&highlight=%2Bqianyin
14、隐藏所有版块前面的,,,那个白色小气泡图标,必用啦;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=26872&highlight=%E6%B0%94%E6%B3%A1
15、在帖子内增加举报按钮,适合所有论坛,方便会员举报违规帖子;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=22277&extra=page%3D2%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
16、给会员头像加一个框框,推荐,这样可以让会员头像立体化;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=21208&extra=page%3D4%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24


2楼还有
01.png
3

評分人數

【没办法做到自学成才,可以练就不耻下问!】

17、替换主题列表页所有帖子左边那个丑不拉几的图标;
地址:http://mutual.imotor.com/viewthread.php?tid=174&extra=page%3D2
18、发主题帖时候显示标题剩余可输入的字数,实用;
地址:http://zyhome.66rt.com/viewthread.php?tid=6627&highlight=%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1
19、下拉菜单条,导航跟着往下移动的插件,必备;
地址:http://zyhome.66rt.com/thread-17704-1-1.html
20、在主题列表内添加发帖时间排序的小插件,适合有大量帖子的论坛;
地址:http://tlb.258club.com/thread-3426-1-7.html
21、发帖内容页显示剩余可输入的字数,实用;
http://zyhome.66rt.com/viewthread.php?tid=7196&highlight=%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1
22、让电脑浏览器显示你论坛标志的2个小方法;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=31650
23、最强悍的个人信息美化,确实强悍,赞一个;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=14678&extra=page%3D2%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
24、将论坛首页最下边的那个“联系我们”替换为你的邮箱地址,必备;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=260&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D1
25、删除论坛标题“ powered by discuz!”,聊胜于无;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=16557&extra=&highlight=Powered&page=1
26、在线虚拟游客插件,嗯。。。前期论坛没人光顾时候的作弊手段;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=12884&extra=page%3D12%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
27、将签到页面那个英文按钮变成中文,好用;
地址:http://tlb.258club.com/thread-3938-1-2.html
28、首页横排美化,可惜不带会员头像的;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=30888&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24&page=1
29、将帖子内用户组的小头像替换教程;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=27276&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
30、设置版块扰乱码,就是他人复制你的帖子内容时候,内含一堆乱码;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=19921&extra=page%3D3
31、让所有版块在点击后都会自动在新窗口显示;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=25134&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
32、版块横排时候可以显示简介,系统默认不显示的哦,必备;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=15088&extra=page%3D3%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
33、设置组头像居中显示,很有用,美观了很多;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=21425&extra=page%3D2%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
34、将勋章中心和签到按钮调用到首页的导航条上,必备,答案在3楼;
地址:http://sclub.com.tw/discuz/viewthread.php?tid=23599&highlight=%E5%8B%8B%E7%AB%A0
35、名人堂,论坛宣传精英的必备插件;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=22853&extra=page%3D10%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
36、在首页的论坛公告中加入图片和色彩,好用;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=13661&extra=page%3D7%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
37、论坛临时关闭时显示的页面美化
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=20302&extra=page%3D9%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
38、在论坛最下面自动显示论坛的运营时间,必备;
地址:http://zyhome.66rt.com/viewthread.php?tid=22795&highlight=%E6%9C%AC%E7%AB%99%E5%B7%B2%E8%BF%90%E8%A1%8CXX%E6%97%B6%E9%97%B4
39、宠物工具插件,很漂亮,建议MM多的论坛安装;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=31201&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D25
40、将贴内违规会员那个。。。警告图标替换为自己最想要的效果;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=20046&extra=page%3D5%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
41、鼠标移到文字或帖子链接上面后会有阴影效果,超赞,必备;
地址:http://zyhome.66rt.com/thread-17769-1-1.html
42、在帖子内增加人气代码的小插件,效果还不错;
地址:http://sclub.com.tw/discuz/viewthread.php?tid=21649&extra=page%3D3
43、自动弹出提醒游客注册的小插件,好用;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=21262&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
44、在头像页面增加个信用评价指数,适合有买卖交易的论坛
地址:http://tlb.258club.com/viewthread.php?tid=3968&extra=&page=1
45、横排版块默认无图标的,使用这个代码就能正常显示了;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=15089&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24

3楼还有
【没办法做到自学成才,可以练就不耻下问!】

TOP

本帖最後由 kyh991 於 2015-10-29 09:13 編輯

46、在注册页面的邮箱地址自动加上@qq.com,方便QQ会员注册之用;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=30108&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
47、超简单的懒人回复按钮,懒人会员专用工具;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=16232&highlight=%E6%87%92%E4%BA%BA%E5%9B%9E%E5%A4%8D
48、超实用超漂亮的发帖编辑框,必备必备;
地址:http://tlb.258club.com/viewthread.php?tid=3425&extra=&page=1
49、同上,超实用的发帖编辑器底部美化,必备必备;
地址:http://tlb.258club.com/thread-3487-1-9.html
50、将发帖编辑器内的附件上传按钮隐藏,必备,可以节约论坛空间,咱才1G呢;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=20400&extra=page%3D5%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
51、系统默认模板中英文对照表,适合希望深入美化代码的童鞋;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=16134&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
52、系统默认模板全部备份下载,新手和老鸟必备,改错了模板,全靠它恢复了;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=29068&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
53、在论坛首页添加签到统计和排行的优化代码
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=30308&extra=page%3D7%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
54、仿百度新年倒计时,自行收藏,还有几个月就过年了,肯定能用上;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=7887&extra=page%3D7%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
55、修复高版本IE在使用发帖上传功能时候,按钮空白的小插件,必备;
地址:http://tlb.258club.com/thread-3784-1-2.html
56、在帖子一楼加入快速回复的插件,好用,请收下;
地址:http://tlb.258club.com/thread-3346-1-4.html
57、在序号56的快速回复栏加入附件上传功能,必备;
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=23325&extra=page%3D10%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D24
58、添加论坛小黑屋(违规会员集中地)的插件,必备;
地址:http://tlb.258club.com/thread-3292-1-1.html



第五天的工作:收尾和测试论坛的各种代码是否正常运行。说起来很简单,其实。。。还是一样很花时间,因为。。。咱的论坛风格还没美化呢!是的,花在上面的收尾工作,又得半天,而且是在你具备PS的基础条件下,如果你不懂PS。。。也没事,网络上很多在线图片制作工具,随便百度一下,可以让你就算不会PS制图,也能轻松应付!先放上论坛风格会涉及到教程,然后再按我的经验和理解,简单描述下,毕竟。。。俺也是新人,俺也好多东西不懂呢!

59、模板风格各颜色超详细图文解释,超实用,必须必须收藏,最好还是把图片备份下来,这样时时可以查阅!
地址:http://www.sclub.com.tw/discuz/viewthread.php?tid=19690&highlight=%E6%A8%A1%E6%9D%BF
60、风格背景固定代码的属性,这个一般是在背景图片全局铺满时候使用,可以避免页头和页面的背景不协调;
地址:http://tlb.258club.com/thread-3238-1-12.html



现在简单描述下我对于风格的理解:
a、论坛风格切记不要使用系统默认那个,要自行安装一个(随便挑一个就好,有十几个呢),然后再根据上面的序号59教程来修改和美化自己的论坛风格。在修改过程中,尽量使用美图秀秀或PhotoShop这些制图工具来美化你的页头和页面背景,还有你论坛的LOGO。秀秀操作简单,但功能过少,适合对论坛风格要求不高的,比如俺,嘿嘿。PS功能最多,但也超复杂,没接触过的童鞋会完全有种抓瞎的感觉,所以,个人建议还是使用秀秀来美图吧!
b、分别使用页头和页面背景图片的时候,切记页头图片要使用渐变方式,这样选择的页面才能和页头比较搭配协调。渐变方式,秀秀和PS都具备,不懂的可以自行百度一下教程,很简单的操作。
c、如果希望使用一张图片来做论坛风格,也没问题,页头背景可以用透明png图片代替,接着把页面背景固定并铺满整个页面,最后添加LOGO就好。
d、论坛默认的宽度一般都是960px,所以,你的页头图片也要制作成960X100-300像素,这样首页才不会变得别扭,网上有很多超清的图片供你下载。
e、至于LOGO,我通常都制作成150X70像素,这样比较适合960px的页头,不过具体的,还得大家一次次的测试,直到满意为止。
f、对了,论坛正式运营前,千万要记得把论坛后台设置数据修改过的模板统统备份一次,以备不时之需。后台设置备份方法:后台---数据库---备份---论坛全部数据---提交即可;模板备份方法:后台---界面---模板管理---模板名称(你安装了哪个就改成自己喜欢的名字,没安装就是默认模板套系)---详情---逐一点击每个模板右边的“编辑”(所有红色字体的英文都表示你修改过的,绿色代表你只是添加但未修改,黑色代表未曾修改的系统默认模板,默认模板套系修改后不会变色字体)---然后将该模板内全部内容复制黏贴到同名的txt记事本或Notepad++即可(建议Notepad,添加和修改代码最好用)。



嗯。。。暂时就这样吧,俺很多地方还在学习中,其实也是半桶水的水平,教不了大家太多东西,提供些教程,只是为了让大伙节省爬文的时间罢了,喜欢的就收下,不喜欢的可以砸砖,俺皮厚,耐砸,呵呵!
【没办法做到自学成才,可以练就不耻下问!】

TOP

比较全面的导航贴,支持!
☞☞☞ 爱秀社区 ☜☜☜

TOP

本帖最後由 繽紛色彩 於 2015-10-29 09:11 編輯

很好的教程
只要全部看一遍
也可以在當中
挑選一些自己喜愛的來安裝
略嫌每項教程沒有預覽圖
不過也可以說是教學總匯了

TOP

回復 5# 繽紛色彩


    是的,我本来想上图的,但自己的用户组级别不够高,导致每楼只有10000字节限制,只好忍痛舍弃截图了,毕竟我要弄成3个楼层才能把帖子发完。

TOP

回復 4# 无界


    其实在这里,要非常感谢无界和章鱼哥和bossll和bonimon四位老大的无私奉献,没有你们的教程,我是没办法在这么短的时间把论坛建立起来的,谢谢你们!

TOP

回復  繽紛色彩


    是的,我本来想上图的,但自己的用户组级别不够高,导致每楼只有10000字节限制,只 ...
kyh991 發表於 2015-10-29 09:16

既然樓主是用以上60個美化代碼
來建設論壇
那麼樓主可以在自己的論壇頡圖
再在自己的論壇開主題擺放出來
再在這個主題編輯後加上有關鏈結
讓對此有興趣的朋友們去參觀一下

TOP

回復 8# 繽紛色彩


    好建议!俺一会就去抽时间制作,谢谢缤纷版大的提醒,谢谢!

TOP

本帖最後由 IndianaJones 於 2015-10-29 14:24 編輯

很有心啦,新手这下方便很多,话说可以po几张你的论坛截图,图文并茂效果更好哒!
po上你的论坛地址(直接把你的签名换成论坛地址也可以)~
然而我没有评分权限,就没法评分支持了,哈哈哈

TOP

返回列表