在做模板之前大家最好具备一些基本的网页制作方面的知识。那么咱们先来看看如何制作一套简单的模板流程。

1、在Photoshop中制作风格页面并切图保存；

2、制作html文档，css调整；

在开始前，先了介绍一下discuz!的几个模板文件：

1、header.htm--页面头部

2、discus.htm--论坛首页

3、index_header.htm--头部发帖按钮，和公告内容页。

4、footer.htm-- 页面底部

5、viewthread.htm-- 查看帖子内容

6、css_common.htm--公共样式css样式页面

7、css_script.htm--其他常用css样式页面

首先我们要制作的这套模板叫test，你也可以上www.gzxuephp.com寻找更多的资料，那么我就在templates目录下建立一个test目录。

在test目录下再新建一个images文件夹用于存放这套模板的图片，把切好的所有图片保存到这个文件夹中。

templates/test文件夹用于存放这套模板的htm文件，首先我们先到default默认模板下面去复制header.htm、discuz.htm、footer.htm这三个htm文件。然后分别打开着三个文件，可能这里你需要一些常用的htm语言常识，和一些基本的css语法。如果你不会的话可以去查阅一些资料。我们大多时候我们不必完全去重新做。默认模板的head等头部信息我们还是非常有必要要保留。

将你做好的静态文件的切图我ps缩小成一个110X120大小名为preview.jpg的图片放到test目录下(这是后台安装界面显示的缩略图)。

接下来的工作要在论坛后台设置中来完成

(1)进入论坛点击 “系统设置 ——> 界面——>模板管理”，在新增模板后填入模板名称，模板文件所在目录，板权信息然后提交即可！如

(3)      然后切换到“系统设置 ——>界面——>风格管理”，您就可以在界面风格中看到您所定义的新的风格方案。点击安装就可以了！如下图：

(4)   然后点击 [编辑]后就可以进入该模板的风格配色方案的编辑页面，此根据你的界面风格配色方案设置一下你的配色方案。

具体的设置参数，主要对应的前台显示效果参照如下链接地址的标注：

?tid=1496344&from=recommend_f

填写好后，点击“提交”，更新一下缓存，就ok了。在这里我只是简略的介绍一下安装成品模板的方法。

在制作模板的过程中我们大多数的精力主要集中在样式的调整。不过dz给我们提供了简单快捷的调试方式。你可以将需要修改的样式写到css_appendhtm,它的代码是：

$extrahead

{subtemplate css_script}

根据css的特点，在css_appendhtm里的样式将覆盖css_commen.htm中的文件的。注意只是覆盖原有的属性。没有修改的属性将依旧调用css_commen.htm的样式。这样我们各以节省很多的代码。

同样对于css_script.htm同样如css_commen.htm一样。你只需要在新建一个文件css_script_append.htm文件。将所需修改的样式拷贝到css_script_append.htm，但需要注意的是一定按dz的规范，将css样式写入你所修改的代码所在的标签中。例如：

在修改之前你应该了解一下有关模板的知识。默认的discuz的模板文件时存放在根目录的

./template/default/文件下的htm文件。在这个文件夹下以css_开头的文件时控制默认模板的css样式表。所有的关于样式的文件你都可以在这里修改。

如果你是个新手，建议你不要去修改css_common.htm文件中的文件。你可以吧你需要修改后的样式拷贝到css_append.htm文件。就是受你不需要动css_common.htm的任何代码，只需要把你修改后的css代码写到css_append.htm这个文件夹下。(这方便将你的代码和源程序代码分开。如果你想要恢复默认的样式，直接清空css_append.htm文件就可以了。)

另外一个经常需要修改的css文件就是css_script.htm文件。中的代码不可以拷贝到css_append.htm文件中。如果你要修改可以单独在重新新建一个文件命名为css_script_append.htm文件把，你需要修改的样式按照css_script中的样式规范写入这个文件例如一下形势。：

[CURSCRIPT = index](此处为当前应用此css样式的页面文件。)

#ann { margin: 5px 0 10px; padding: 2px 5px; line-height: 30px;border: solid {COMMONBORDER}; border-width: 1px 0; background:{COMMONBG}; }

[/CURSCRIPT]

默认模板头部修改视图：

如上图所示：此头部文件对应的元素主要对应三个元素。

头部的logo：这个部分你可以通过在后台设置       界面-》模板风格-》编辑-高级模式。

在这里来替换你自己的logo就课可以了。当然你可以调节你的头背景。颜色，或者给头部替换一个背景图片而不是单纯的颜色。你也可以在后台进行设置。还是图二所在的页面

-》找到

这里你可以设置页头的背景颜色。也可以设置背景图片来设置你单调的头部背景色。但要注意的是在添加背景图片的时候一定要注意他的附加属性。这一点很重要如果你的背景想居中显示的话可以设置为 热no-repeat 50% 50%这里的no-repeat控制的是当您的图片不足以铺满整个头部时。是否平铺该背景。我们再此设置成不平铺。默认的是以images/default的header.gif图片水平平铺。所以一条西线就成了一个够宽的画布背景了。

在你顺利设置完这些元素后，你可能发现由于元素尺寸的改变而导致了整体尺寸布局的不协调这样我们就需要调节css了。如我上面所说的。如果我们是初学者可以再不动原样式的情况下修改。

Logo默认放置的位置是在：header.htm中的

{BOARDLOGO}

标签中的。如果你想调节它的上下左右边距可以将css_common.htm中需要修改的代码拷贝到css_append.htm中。

#header h2 { float:left; padding:10px 60px;}

通过设置它的各项属性来控制logo的位置。当然具体的属性值例如margin，padding的含义再次我就不多说了，你可以到网上搜索一下。

下面我来介绍第二个元素