-
  • 18732 阅读
  • 71 回复

【官方教程】论坛皮肤制作系列之1 -- 初级皮肤制作 [置顶]

本主题由 喳喳鸟 于 2010-5-4 12:15:00 执行 设置置顶 [查看记录]
各位大哥、大姐、小弟、小妹,早上、中午、晚上好(请各自按看帖时间、性别、年龄对号入座)。

作为bbsmax 4.0模板引擎的开发者,编写皮肤和模板的教程我责无旁贷,但因为开发任务繁重,这篇早就应该有的教程到今天才和大家见面,我在此深表愧疚。

但是迟来总比不来好,从这篇文章开始,我将陆续完善bbsmax的皮肤和模板教程,我希望教程的完善过程中广大bbsmax爱好者可以永远提出意见,建立一个bbsmax和用户互动的良性循环。

因为多年的教学(教老太太打字、教小弟小妹装系统等)和被教学(上学、看教程自学等)经验告诉我学习任何东西都要打好基础,有了良好的基础才能万丈高楼平地起,否则就是浮沙筑高台,后果可想而知。

所以希望广大有志于制作bbsmax论坛皮肤的有识之士在看完这篇教程后可以建立良好的理论基础,再把理论转化为实践。

好进入正题,今天这篇教程我首先要教大家的是最基础的东西。

皮肤目录结构

bbsmax 4.0中所有皮肤安装在bbsmax安装目录的max-templates文件夹下,又按不同皮肤分成不同子文件夹。

刚安装完bbsmax 4.0后,会有一套默认皮肤,在default文件夹中,这个文件夹是特殊文件夹,不能随意修改文件夹名称。

另外安装的皮肤各自存放在max-templates的不同子文件夹中。

一个典型的bbsmax 4.0皮肤必须包含一个skin.config文件和一个skin.png文件。

skin.config文件是皮肤的设置文件,包含了皮肤的名称、制作者、版本、介绍等信息。

skin.png文件是皮肤的预览文件,典型大小为200 x 116。

典型的skin.config文件的内容格式如下:
<?xml version="1.0" encoding="utf-8" ?>
<Skin>
<Name>我的风格</Name>
<Version>1.00</Version>
<PublishDate>2009-9-10</PublishDate>
<Author>老达</Author>
<WebSite>http://www.bbsmax.com/</WebSite>
<Description>大家好,我是一个漂亮的bbsmax皮肤</Description>
</Skin>

skin.config和skin.png文件必须在皮肤文件夹的根目录下,典型的bbsmax 4.0的max-templates目录结构如下:

max-templates
|
|--default
|     |--skin.config
|     |--skin.png
|
|--skin1
|     |--skin.config
|     |--skin.png
|
|--skin2
|     |--skin.config
|     |--skin.png

主意我上面为了简单明了忽略了各个皮肤目录下的内容,实际上各个皮肤目录下可能会有模板、css、js、图片等文件。

bbsmax 4.0的皮肤安装包为标准zip格式,可以直接在网站后台的皮肤管理页中导入导出皮肤包。

模板文件继承机制

bbsmax 4.0和bbsmax 3.0的模板引擎有一个比较重要的区别。

4.0引擎总结了以往版本用户遇到的一个问题 -- 模板修改和程序升级的矛盾。并设计了一个机制来缓解这个问题(不能完全避免这种问题出现)。

所谓模板修改和程序升级的矛盾,就是用户出于某些目的修改了模板文件,但是每次升级模板又会被替换掉,导致很多用户不敢修改模板或者不敢升级程序的问题,很多同类程序也都存在同样问题。

对于这个问题我们把模板的修改需求归类为以下几种:

1、想调整bbsmax默认样式的图片和CSS
2、想制作一套皮肤,原有的bbsmax提供的html结构需要改变
3、想在页面上加入广告位置或别的什么

在新的模板引擎中对于第一种情况,在bbsmax 4.0中是可以完全避免程序升级覆盖文件的问题的。而后两种情况则可以降低修改后程序不兼容的概率。
新引擎里是怎么做到上面说的这样的呢?

关键在于4.0的模板引擎加入了文件继承机制,模板引擎在当前皮肤目录下找不到所需的模板文件时,会自动到默认皮肤的文件夹下读取。

以第一种情况为例,我要制作一套自己的样式,没有修改到html结构,那么我就可以不提供任何模板文件,只要提供CSS、图片、脚本等内容就可以了,而所有的模板文件都靠模板引擎自己到默认皮肤下去找,这样就第一种情况就可以做到很好的兼容性了。

而第二和第三种情况,则可以利用文件继承机制,只在皮肤目录下提供自己修改过的模板文件,这样虽然存在升级后文件不兼容的可能,但是概率要比做一点修改就要提供完整模板文件的做法小一些,并且在出现问题时也很比较容易排查,不需要在茫茫模板海洋中寻找自己修改过的文件 :)

其实这个模板文件继承机制除了自动到默认皮肤目录下找缺失文件外,还可以有皮肤自己决定要到哪一个皮肤目录下找缺失文件,只要在Skin.config文件中加上
<SkinBase>继承的皮肤目录名称</SkinBase>配置节点就可以了,不过要确保所继承的皮肤已安装。

模板的文件继承机制就介绍到这里,下面我将通过制作一套简易皮肤来让大家熟悉bbsmax 4.0的皮肤制作过程。

制作一个最简单的皮肤

现在我们将基于bbsmax 4.0默认皮肤制作一个最简单的自定义皮肤,操作步骤如下:

1.解压或者从服务器复制一份max-templates/default目录,我这里假设你复制到本地电脑的D盘,那么default的路径现在是d:\default

2.新建一个文件夹叫myskin(由你自己定),这里我假设你建在D盘,那么myskin的路径应该是d:\myskin。

3.复制default文件夹下的客户端文件(CSS、脚本、图片等)到myskin文件夹下,完成后myskin文件夹的结果应该是这样的:

myskin
|--images
|--img
|--scripts
|--style
|--skin.config
|--skin.png

如果你发现你复制的文件夹多了,那就是你把模板文件也给复制了,我们今天要做的是最简单的皮肤,不需要改到任何模板文件,所以不需要复制模板文件。

如果你发现你复制的文件夹少了,那请一定要补上,因为bbsmax的模板引擎接管不到这些客户端文件,所以客户端文件是不能自动从default继承的。

4.弄张漂亮的图片替换掉bbsmax默认的分割栏背景,如果你一时找不到可以用我提供的(帖子最后提供)。

5.用FireFox的FireBug插件找到需要替换的背景图的位置。

您是游客您没有权限查看该图片


您是游客您没有权限查看该图片


通过FireBug,我们知道了标题栏背景图是两张以像素宽的图片,位置是img/header_head.gif

6.现在用我们准备好的漂亮图片,替换掉的d:\myskin\img\header_head.gif

7.修改skin.config文件,把信息改成自己的 :)

8.修改skin.png文件,如果你本地没有安装bbsmax那这步要稍微麻烦些,你需要先把myskin目录传到服务器上的max-templates文件夹下,然后选择myskin皮肤,
再抓图。如果你本地装了bbsmax,那就可以直接在本地操作了。

9.在MySkin文件夹上右击,压缩成zip文件(我假设你已经装了WinRAR)

10.到bbsmax论坛分享你的劳动成果 :D

总结

最后咱来一起总结下今天学了什么(一边往下看,一边在脑海里过会议):

1. bbsmax 4.0皮肤的目录结构,每套皮肤必须的文件,皮肤包的文件格式
2. bbsmax 4.0模板文件的继承机制
3. 最简单的皮肤的制作流程,哪些文件必须提供哪些文件不用提供,皮肤制作后怎么打包

然后我留下一道个课后习题:
1.试试同时通过修改CSS和图片来制作一套皮肤

好了,希望下一篇教程可以很快和大家见面,但是很难讲,我不敢做任何时间上的承诺,只能说我尽力,希望大家继续支持和理解bbsmax,并希望大家用今天学到的知识制作更多更好的皮肤资源。
本帖最后由 达达 于 2009-09-10 23:34 编辑
您需要 登录 才可以查看或下载附件. 没有帐号, 点击此处注册.

帖子评分 我要评分 6

  • yuesha: 金钱: +10 辛苦了。 2009-11-03 13:52
  • habin1174: 金钱: +5 2009-12-12 18:08
  • 飘叶寻梦: 金钱: +10 好文章 2010-01-15 18:12
  • q2700283: 金钱: +10 建议用屏幕录像专家做视频教程 2010-02-11 11:19
  • E网飞扬: 金钱: +10 2010-04-27 11:16
6 用户评分 / 当前显示最近5条 查看评分记录
不要把自己的想法和感觉强加给别人,这是做人的基础。
不要把自己的想法和感觉强加给环境,这是处事的基础。

胡搞瞎搞工作室 -- www.unbe.cn
哇,我的沙发
达达真好,真是辛苦了。
端来小板凳,坐着慢慢看。
我靠,啥都没了
BBSMAX全球FANS联盟免备案主机BBSMAX专用主机
买主机,免费协助搬家。安装各种程序。
这个ms对象继承的机制是不是首创?C#用得真是彻底!
....希望尽快有相关html修改的教程
没什么人关顾,自己顶一下
不要把自己的想法和感觉强加给别人,这是做人的基础。
不要把自己的想法和感觉强加给环境,这是处事的基础。

胡搞瞎搞工作室 -- www.unbe.cn
看看~~
出售本ID...
支持,顶一下
山里人
终于 占了个 位子   额呵呵
我很无奈的发现……我应该不适合做模板……囧rz
-