« 1 23» Pages: ( 1/3 total )
本页主题: 论坛风格制作系列教程--论坛风格制作方法 打印 | 加为IE收藏 | 复制链接 | 收藏主题 | 上一主题 | 下一主题

大群
方便别人 提高自己
终身成就奖 金点子奖
级别: 管理员


精华: 24
发帖: 1638
威望: 1821 点
金钱: 13580 RMB
贡献值: 500 点
注册时间:2006-02-22
最后登录:2008-10-10

 论坛风格制作系列教程--论坛风格制作方法

在成功的申请论群的免费论坛后,第一次登陆看到统一的论坛版面,每个管理员首先想到的就是如何美化一下自己的论坛,改变一下论坛的皮肤,使得充满个性,对于熟练掌握了网页制作技术的朋友来讲这是非常简单的,但是如果是初次建立论坛而且对于网络了解不多,对于网页制作不了解的就会遇到一些困惑,本工作室成功的为一些网友制作了论坛的风格,得到了这些网友的肯定,有些提出可否写一个关于论坛风格制作的教程,为满足这些网友的需求,结合我们制作论坛风格的经验编写了如下一些内容,希望对初学者能有一些帮助,如果您对论坛风格的制作非常了解,也请您对本教程中的不足给与指正。


一、论坛版面可以修改的部分图示(见图一)



图一中5种色彩指示的地方是制作风格时可以修改的区域,是重点考虑的位置, 分别是:
 

1、论坛顶部包括2个部分
图一中①指示的红色框区域,在css中的定义是 .banner { }
图一中②指示的红色框区域内插入的 Logo 在css中的定义是 .imglogo{ }

2、导航栏和各分类板块下方的 论坛 主体 文章 最后发表 版主 的部分
图一中③指示的绿色框区域,在css中的定义是 .cbg { }

3、显示分类板块名称和论坛相关栏目的部分
图一中④指示的黄色框区域,在css中的定义是 .head { }

4、提示我的信息 有情链接 和 在线用户的显示部分
图一中⑤指示的粉色框区域,在css中的定义是 .index_font { }

5、了解其他更多的内容请参考《论坛CSS 定义简介》一贴
地址 http://qun.a.lunqun.com/read.php?tid=326397&fpage=3
或者论坛中其他介绍 CSS 内容的相关帖子


二、制作论坛风格需要掌握的工具软件

1、PhotShop 或者其他制图工具软件比如 Fireworkes 等
制作论坛风格的关键是制作图片包括论坛的背景图片,论坛的顶部背景图 片以及论坛的站标(Logo)等等,当然网上可使用的素材很多可以下载后直接 使用,但是如果想突出自己的个性尤其是设计自己满意的 Logo 制图软件的使 用是必须要掌握的。

2、FronPage 或者其他的网页制作软件
就我看来使用 FronPage 可能更灵活一些,因为主要是为了查看修改 CSS代码后的显示效果,FronPage 我觉得它是介于专业和非专业之间的一个东西, 在使用上与 Word 比较相近,对于初学者来讲学习 FronPage 相对比较容易。


三、制作论坛风格的方法

1、论坛申请后登陆你的论坛后显示的是论坛最初的版面状态,把它保存起来以 便编辑论坛风格时使用;选择 文件(F)- 另存为(A)把这个页面保存在自己电脑中,比如保存的页面名称为 Wind


2、使用 FronPage 打开保存的 Wind 页面,(见图二)这时就可以编辑论坛风格了



3、在论坛顶部添加背景图片(修改 .banner 定义)

a、选择窗口左下角的功能选项单击“代码”按钮打开HTML编辑窗口,可以看到, 在这里有多行HTML语句,这就是你保存页面的全部HTML代码,也包括 CSS 定义 代码。(见图三)



b、在编辑窗口的HTML代码中 < style type=''text/css'' > 与 < /style > 之间的 代码就是论坛风格的 CSS 定义的全部代码,也是我们制作论坛风格需要修改的代码部分,至于< style type=''text/css'' > 与 < /style > 之外的其他代码我们不用管它。

c、在< style type=''text/css'' > 与 < /style > 找到 .banner{background:#84AACE;}(见图四) 这里就是对论坛顶部单元定义的一部分,现在这里只是 定义了一个背景色 background: #84AACE 没有其他的定义内容,我们可以根据 自己的需要添加一些其他定义内容,比如改变背景的色彩或者添加一张图片作 为这个单元的背景等等。




d、现在我们来添加一张图片作为这个论坛的顶部背景

添加的背景图片如下(图片象素大小 1024px * 129px )



这张图片使用 PhotShop 修改而成(有关PhotShop的使用请看视频教程http://qun.a.lunqun.com/read.php?tid=600063&fpage=1
在你的电脑中找到这张图片点击鼠标右键选择复制,回到 FronPage 编 辑窗口,把这张图片粘贴在和 Wind 同一目录下。

e、编写 CSS 代码
在.banner{background: #84AACE;}的括号内的背景色定义语句后加入背景图片定义语句 background-image:url(db_013.jpg);HEIGHT:129px(见图五)




f、单击“预览”按钮查看效果,图六显示的是修改后的效果。




如果对图片显示效果不满意,另外在找一张图片,重复上一步修改.banner{background: #84AACE;background-image:url(db_013.jpg);HEIGHT:129px}代码中的图片链接路径(db_013.jpg)和高度值进行修改,到自己满意为止。


4、修改 Logo 图片链接

a、单击“代码”按钮打开HTML编辑窗口,在代码中找到.imglogo 定义部分(见图七)
原始代码定义的分别是 MARGIN 属性设置四边的外边距为0;设置的Logo图片的上 下左右间隙为0;文本居中;背景色 #84AACE;背景图片;层宽295px;层高87px(见图七)




b、对原设置的参数进行调整,MARGIN 属性设置的四边的外边距修改为上0px 右0px 下30px 左100px;背景色设置为透明;层宽200px;层高80px 与 图片 Logo 的大小 相同(见图八)参数的设置根据实际而定。





c、单击“预览”按钮查看效果,如果对Logo图片显示位置不满意重复上一步对 MARGIN 属性设置的四边的外边距参数值进行调整,直到满意为止。上面设置的 效果见图九





d、如果你制作论坛风格图片时已经把论坛的 Logo 或论坛的名称写在顶部背景图片 上,修改 Logo 图片链接这一步骤可以省略,只需要把背景色修改为透明,然后把 图片背景定义删除即可。
 

经过上面的2-4步骤,论坛的顶部背景图片和Logo已经更换,风格制作初步完成,为更好的美化论坛版面下面对论坛板块部分进行修改.

千百度工作室网站      汽车报废服务 
Posted: 2006-10-29 08:51 | [楼 主]
大群
方便别人 提高自己
终身成就奖 金点子奖
级别: 管理员


精华: 24
发帖: 1638
威望: 1821 点
金钱: 13580 RMB
贡献值: 500 点
注册时间:2006-02-22
最后登录:2008-10-10

 

5、进一步美化论坛版面

在论坛的顶部背景图片和Logo完成后为保持论坛版面的丰富可以对论坛设置的各个板块进行修饰,就是图一中 ③ ④ ⑤ 指示的部分,这三个部分在CSS中定义名称虽然不同,但是定义的内容基本相近,主要包括设置背景色或者插入一个背景图片以及字体的色彩,下面以 图一中 ④ 指示的黄色框区域为例加以介绍。

a、 图一中 ④ 指示的黄色框区域,在css中的定义包括 .head { } 和.head a{ }2个部分(见图十)

.head { }是对单元外观的定义,原定义为字体色为 #FFFFFF(白色);背景色为 #84AACE(蓝色);上下左右间隙为5px;字体加粗.

b、根据版面的色彩搭配,我们在这里插入一个蓝色的由上至下渐变色的背景图片,适当调整一下上下左右间隙为8px;在这里加入背景图片定义(见图十一)

c、单击“预览”按钮查看效果,如果对背景图片显示效果或位置不满意可重新选择图片或修改间隙的定义值进行调整,直到满意为止。上面设置的效果见图十二

d、对图一中③指示的绿色框区域和⑤指示的粉色框区域的修改方法与上面的基本相同,在相应的定义内修改背景色或加入一张背景图片就可以改变你原来的论坛版面的个性风格了。图十三显示的效果是在这两个定义内加入了相同的一张背景图片。

6、小结

经过以上步骤地修改你的论坛风格基本形成,一般来讲制作论坛风格首先要考虑版面的总体色彩搭配,根据确定的主色调搜集整理风格所使用的图片,以风格Wind为例,需要准备1-5张图片,分别是:

图片1:论坛顶部背景图片,像素一般在宽度760-1024px;高度在100-200px;当然这不是绝对的,根据自己爱好而定;

图片2:你的论坛标志图片,也就是你的论坛 Logo 图片高度一般不大于顶部背景图片,根据实际论坛顶部背景图片和你的论坛 Logo 可以合二为一,使用一张图片;

图片3:分类板块标题显示的这一部分的背景图片,可以使用背景色定义代替;

图片4:论坛 主题 文章 最后发表 版主显示的这一部分的背景图片,可以使用背景色定义代替;

图片5:我的信息 有情链接 和 在线用户的显示部分使用的背景图片,可以使用背景色定义代替,图片4和图片5可以使用同一张。
 

千百度工作室网站      汽车报废服务 
Posted: 2006-10-29 08:56 | 1 楼
大群
方便别人 提高自己
终身成就奖 金点子奖
级别: 管理员


精华: 24
发帖: 1638
威望: 1821 点
金钱: 13580 RMB
贡献值: 500 点
注册时间:2006-02-22
最后登录:2008-10-10

 

四、上传论坛风格使用的图片和提取CSS定义代码

1、上传论坛风格使用的图片
    上面的论坛风格制作过程是在本地机完成的,所使用的图片链接也都是本地机的图片地址,最后完成论坛风格还有一些工作需要通过论坛后台管理完成, 而且需要把风格使用的所有图片上传到网上,只有使用网上图片的有效链接地址,才能使所有的计算机用户通过网络的连接正常的浏览你的论坛,否则你的论坛风格使用的图片就不能正常显示。
    具体上传方法:在自己的论坛发一个新贴,然后把图片发在帖子中。

2、图片上传后把这些上传的图片存放地址一一记录,如何得到上传文件的存储地址请参考http://qun.a.lunqun.com/read.php?tid=293164&fpage=3
 

3、打开 FronPage 的 HTML 编辑窗口把 之间的CSS代码中的所有的图片链接地址相应的进行修改 为上传后取得的地址,例如:本教程中论坛顶部背景图片在本地机编辑时的图片链接地址是 url(db_013.jpg)(见图五)这张图片上传到论坛后的地址是 http://qun.a.lunqun.com/up/m100/28/91/2891/Mon_0608/40114_275188_2900dfd15dfcc69.jpg
那么我们就把这个图片的链接地址修改为 url(:../../up/m100/28/91/2891/Mon_0608/40114_275188_2900dfd15dfcc69.jpg)依次把所有的图片链接地址对应的进行修改,如此完成后就 可以进入你的论坛后台正式编辑风格的CSS定义了。

 

五、后台操作

    在完成上面的所有工作后就可以进入你的论坛后台对论坛的风格进行最后的编辑了。

1、选择功能选项(见图十四)




2、把编辑好的CSS代码拷贝在编辑当前默认风格:Wind 的CSS文本输入框内(见图十五)
    打开 FronPage 的HTML编辑窗口把 之间的CSS代码中全部拷贝在输入框内,注意:不包括只拷贝它们之间的代码。




3、编辑风格核心文件(见图十六)




4、对风格核心文件中的色彩定义进行编辑(见图十七)

    配色编号可参考以下的地址

http://lbdl.512j.com/wyzz/03_ziliao/bbck_01.htm

http://lbdl.512j.com/wyzz/03_ziliao/bbck_02.htm




    一般情况下只需要编辑表格边框颜色,阅读主题时文章背景颜色一和阅读主题时文章背景颜色二这三项就可以,而表格宽度和头部和尾部表格宽度要根据实际制作的思路决定使用相对宽度还是绝对宽度。

 
5、完成以上的编辑提交后进入论坛主页刷新查看最后的效果,如果对效果不满意重复以上 3 和 4 项的编辑,直到自己满意为止,你的论坛风格的制作可告一段落。



六、总结
    目前为止,本教程仅对论坛风格制作的基本方法和基本内容进行了讲述, 而且也不是唯一的方法和途径,比如你也可以直接登录论坛后台在后台编辑界面上直接进行编辑等等,还有许多其他方面的内容对论坛风格的形成同样有着很重要的意义,同样需要进行编辑,对于没有涉及的内容我们将另外编辑相应的教程。
    论坛风格不仅仅表现在论坛版面式样及配色等形式上,论坛风格不是个人倡导出来的,也不是个人引导出来的.更不是个人管理出来的.它是在自然而然形成的基础上被管理者稍做规范而成的.最重要的还是表现在论坛的内容上,也就是外在形式和内在内容的完美结合和统一,这才是论坛的自有风格.民心,民意,才应该是论坛风格的根基,所谓海纳百川,有容乃大,管理者,不应该把个人的喜好溶入管理.好比倒茶,茶碗越大,能倒入的茶水就越多,茶碗太小,茶水只能向外溢,向外流失.一个好的论坛,应该是一个很大的茶碗,能倒进各种不同香味的茶水.
  论坛应该有一个大的心胸,各色人等来喝茶休息,都要欢迎,只要来人没有恶意,不管他是谁,都能在茶楼里说说话,歇歇脚,喝喝茶.这样,茶楼的花才能百花齐放,茶楼的生意才能长盛不衰?


 

千百度工作室网站      汽车报废服务 
Posted: 2006-10-29 09:03 | 2 楼
8gg
优秀会员勋章
级别: 骑士


精华: 0
发帖: 237
威望: 249 点
金钱: 2380 RMB
贡献值: 0 点
注册时间:2006-07-21
最后登录:2008-08-03

 

精华```````````


【免费|电影|电视|电台】http://nom.icpcn.com
Posted: 2006-11-16 04:53 | 3 楼
老猫
级别: 新手上路


精华: 0
发帖: 7
威望: 8 点
金钱: 70 RMB
贡献值: 0 点
注册时间:2007-01-15
最后登录:2007-04-27

 

比较详细啊 好贴
秋天的树
Posted: 2007-01-16 21:40 | 4 楼
nmb6929096
友好使者勋章
级别: 新手上路


精华: 0
发帖: 56
威望: 64 点
金钱: 560 RMB
贡献值: 0 点
注册时间:2007-01-14
最后登录:2007-12-09

 

好贴,我要转啦!!!
我的论坛:http://52ydz.a.lunqun.com
◥□◣☆★相愛是緣 相守是份★☆◢□◤
Posted: 2007-01-17 14:13 | 5 楼
思良
级别: 新手上路


精华: 0
发帖: 7
威望: 9 点
金钱: 70 RMB
贡献值: 0 点
注册时间:2007-04-04
最后登录:2007-04-10

 

受益匪浅...
Posted: 2007-04-09 08:49 | 6 楼
empire
级别: 论坛版主


精华: 0
发帖: 71
威望: 130 点
金钱: 3710 RMB
贡献值: 0 点
注册时间:2007-04-08
最后登录:2008-01-25

 

豁然开朗!!我转帖子了!
Posted: 2007-04-09 22:35 | 7 楼
爱网无限
级别: 新手上路


精华: 0
发帖: 2
威望: 3 点
金钱: 20 RMB
贡献值: 0 点
注册时间:2007-04-19
最后登录:2007-04-24

 

这才是真正的教程嘛
Posted: 2007-04-24 12:02 | 8 楼
668
级别: 新手上路


精华: 0
发帖: 7
威望: 8 点
金钱: 70 RMB
贡献值: 0 点
注册时间:2007-04-28
最后登录:2007-05-04

 

好贴,一看就明啦!
Posted: 2007-04-29 02:43 | 9 楼
« 1 23» Pages: ( 1/3 total )
帖子浏览记录 版块浏览记录
千百度工作室 » 论坛风格 Style