TEA的DZ论坛模板制作教程

TEA的DZ论坛模板制作教程
学习制作风格之一 - 前期图片
附件是一份我制作的风格的PSD原文件。
仅供大家了解有关制作风格图片的方法
你可以把PSD文件一层层的拆开来看来了解
当你明白了风格中所必须的图片，然后制作好，并且进行相应的配色。
那么就可以对图片进行切割，成为风格元素之一风格图片。
下一课将告诉你有关模板制作及修改的方法。
有能者可以对这个PSD制作成一个完整的风格，希望你能发布出来给大家看看^^
PS： PSD附件见本PDF文档附件框
学习制作风格之二 - 新增风格和摸板
图片制作以后，我们应该想想风格的名字了。
这个，很简单啦！喜欢怎样都可以~ 我把这个风格叫 Game Nara
所以我的目录名就叫 gamenara(图片和模板都一样)
1, 把所有图片保存到一个目录中，例如：gamenara ，然后把这个 gamenara 目录放到论坛 images 目录下。

即： images/gamenara
2, 在templates目录中新建一个 gamenara 目录，然后复制 templates/default/目录中的css.htm、header.htm、footer.htm 到 gamenara 中，即 templates/gamenara 内有 css.htm、header.htm、

footer.htm三个文件。
3，进入论坛点系统设置 -> 界面风格 -> 模板编辑在新增后填入对应资料

模板名字字符集所在目录版权信息
gamenara gb2312 ./templates/gamenara xxxxxxx(你自己的版权信息)
然后提交即可！
如图：
家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

图片附件: style_001.gif (2005-10-17 17:26, 13.49 K)
4, 点界面风格下的界面风格在新增后填写风格名字，如： Gamenara 然后提交。

再次回到界面风格画面中点这个新增的风格的 [详情] 进入风格配色方案。
图片附件: style_002.gif (2005-10-17 17:26, 22.05 K)

5, 进入风格配色方案后，根据自己喜好进行风格的配色吧！图中红色匡内都是重点提示！
如图：
图片附件: style_003.gif (2005-10-17 17:26, 38.09 K)

好了，风格基本做好了，当为了让风格更完美，我们就要进行模板的美化！
6, 点界面风格下的模板编辑点刚新增的模板的 [详情]，进入模板编辑管理画面。
图片附件: style_004.gif (2005-10-17 17:26, 15.44 K)
7, 如果您用的是win主机即可以直接点 [编辑] 来修改模板，但如果您用的是unix或linux主机，那么必须设置 templates 目录和 templates/gamenara 目录和 templates/gamenara 目录内的所

有文件属性为 0777，才能直接编辑，否则您必须先修改好模板文件再上传到模板目录中。
学习制作风格之三 - 模板常见语句分析及知识技巧
为什么要写这个文章？

想让大家都能制作好一个属于自己的风格模板。希望能帮助大家更好的编写和利用 Discuz!的风格和模板技巧。是希望有更多的人参与制作 Discuz!风格。是为了提高大家对 Discuz!的了解。
是为了解除大家心中对 Discuz!模板的疑惑。。。。。希望大家加油！
一、模板调用
比如在某个模板中，想调用另一个模板中的内容，可以用下面的语句：
{template xxx}
假设，建立了一个新模板名字叫 "abc.htm" ，在后台模板编辑时只会显示为 "acb"，需要在 index 中调用它，那么就在 index 中适当位置加入 {template abc}
那么就会自动代用它。
相关实例：index 模板中，最顶有 {template header}，最底有 {template footer}

相关疑问：
那么在这个 abc 模板中需要有 <html><body></body></html> 吗？
不需要的！想要显示什么，就写什么，因为它只是整个网页的一部分！ <html><body></body></html> 都已经在 header 和 footer 模板中了。
二、固定参数
$seohead --- 后台设置的头部信息
$charset --- config.inc.php 中设置语言字符集，必不可少，不能删除！
$extrahead --- 控制论坛自动跳转参数，必不可少，不能删除！
{eval updatesession();} --- 更新论坛 session 表的参数，必不可少，不能删除！
{eval output();} --- 结束论坛输出，必不可少，不能删除！
以上的参数以 Discuz! 4.0 为准，这些参数会因应不同版本而有所不同！

还有一些 $xxx 的也是一些参数如非插件作者或程序开发请勿乱修改！
三、数据判断
1、在模板中会经常见到xxxxx的语句。
这些并非普通 HTML 中的注释，而是 Discuz!特有的模板判断语法，就好比 php 或者其他语法中的 if,else,then 等等。
通过这些语法，能够达到不同的模板效果。

相关实例：
header 模板中
CODE:
[Copy to clipboard]
 --- 如果获取了 $discuz_uid ，即显示下面资料(判断 1)
<span class="bold">$discuz_userss: </span> <a href="$link_logout">{lang logout}</a>
 --- 如果有 $maxpmnum，即显示下面资料，否则不显示(判断 2)

| <a href="pm.php" target="_blank">{lang pm}</a>
 --- 结束了这个判断(判断 2)
| <a href="memcp.php">{lang memcp}</a>
 --- 如果$adminid 在 1,2,3 这三个范围内，即显示下面资料，否则不显示(判断 3)

| <a href="admincp.php" target="_blank">{lang admincp}</a>
 --- 结束了这个判断(判断 3)
 --- 如果获取不了 $discuz_uid ，则显示下面资料
<span class="bold">{lang guest}: </span><a href="$link_register">{lang register}</a>

| <a href="$link_login">{lang login}</a>
 --- 结束这个判断(判断 1)

2、在模板中会经常见到xxx的语句。
这个为循环语句，直到数据输出完毕，就会自动结束。
通过这些语法，能够达到把同一系列的资料进行循环显示效果。

相关实例：
header 模板中
CODE:
[Copy to clipboard]
 --- 循环 1 开始，判断插件
 --- 循环 2 开始，判断插件模组
| $module[url] 
 --- 结束循环 2
 --- 结束循环 1
四、语言调用
在模板中，经常会看到{lang xxx}这样的语句。它就是调用语言包中的词语用的。
而在模板中会调用的大部分都是 templates.lang.php 的。
下面看看语言包的结构：
CODE:
[Copy to clipboard]
<? -- 宣布 php 语言开始
$language = array
( --- 以上宣布语言包定义开始
'title' => '标题',

调用字符显示文字
'never' => '从未',
调用字符显示文字
....
); --- 宣告语言包定义结束
?> -- 宣布 php 语言结束
相关实例：
假设，我们增加一个语言调用，在
'title' => '标题',
上一行添加
'abc' => '这是测试语言调用',
最后的 , 是比不可少的，还有调用字符和显示文字，都必须使用 '' 引起。
增加以后，到模板中，就能调用它，模板中写{lang abc}
那么显示出来就直接显示：这是测试语言调用
特别注意：增加语言或修改语言包后，必须更新缓存哦！
五、风格参数调用
在模板中常见到{XXXXX}的语句。{}中的必须是大写。
这些都是调用风格配色方案中的参数。您可以可以自己添加，方法如下：
1, 进入界面风格 -> 界面风格 -> 您要添加参数的风格点 [详情]
2, 进入后最下面,有两栏可以填写,一个是变量,一个是替换内容
相关实例：
变量写 FOOTERCOLOR (注意必须使用大写)
替换内容写 #003399
提交后，修改模板，模板中写<font color="{FOOTERCOLOR}">测试风格自定义变量</font>
那么出来的效果，这个测试风格自定义变量就会按照填写的替换内容的颜色来显示了。
学习制作风格之四 - Discuz! CSS 详解
如果您对 CSS 不了解，请先学习 CSS，详细请参阅置顶文章或使用搜索引擎帮助您吧！
无点开头即 css 默认已有的样式名称，有点开头即自定义样式名称。

有点开头的样式调用方法为 class="样式名字",
例如：
定义个样式名为 abc
.abc { font: 12px Verdana }

调用时写
<font class="abc">测试文字</font>
<style type="text/css"></style> // CSS 定义结束
经过上面说了那么多，对于修改模板的时候需要注意或者可以应用到的应该让您了解不少了！
希望对您有帮助，Enjoy It!
本教程由 TEA 制作，最后更新日期 2006-2-3 14:44

整理：明年家儿整理日期：2006-3-9
家园BLOG：http://www.92fang.com
Email：Webmaster@92fang.com
MSN：W92fang@msn.com

TEA的DZ论坛模板制作教程

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TEA的DZ论坛模板制作教程

Uploaded by

Copyright:

Available Formats

TEA的DZ论坛模板制作教程

1, 把所有图片保存到一个目录中，例如：gamenara ，然后把这个 gamenara 目录放到论坛 images 目录下。

2, 在templates目录中新建一个 gamenara 目录，然后复制 templates/default/目录中的css.htm、header.htm、footer.htm 到 gamenara 中，即 templates/gamenara 内有 css.htm、header.htm、

3，进入论坛点 系统设置 -> 界面风格 -> 模板编辑 在 新增 后 填入 对应资料

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

4, 点 界面风格 下的 界面风格 在 新增 后 填写 风格名字，如： Gamenara 然后提交。

图片附件: style_002.gif (2005-10-17 17:26, 22.05 K)

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

图片附件: style_003.gif (2005-10-17 17:26, 38.09 K)

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

6, 点 界面风格 下的 模板编辑 点 刚新增的模板的 [详情]，进入模板编辑管理画面。

图片附件: style_004.gif (2005-10-17 17:26, 15.44 K)

7, 如果您用的是win主机即可以直接点 [编辑] 来修改模板，但如果您用的是unix或linux主机，那么必须设置 templates 目录和 templates/gamenara 目录和 templates/gamenara 目录内的所

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

相关实例：index 模板中，最顶有 {template header}，最底有 {template footer}

以上的参数以 Discuz! 4.0 为准，这些参数会因应不同版本而有所不同！

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

--- 如果有 $maxpmnum，即显示下面资料，否则不显示(判断 2)

| <a href="memcp.php">{lang memcp}</a>

--- 如果$adminid 在 1,2,3 这三个范围内，即显示下面资料，否则不显示(判断 3)

--- 如果获取不了 $discuz_uid ，则显示下面资料

<span class="bold">{lang guest}: </span><a href="$link_register">{lang register}</a>

--- 结束这个判断(判断 1)

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

'title' => '标题',

学习制作风格之四 - Discuz! CSS 详解

如果您对 CSS 不了解，请先学习 CSS，详细请参阅置顶文章或使用搜索引擎帮助您吧！

无点开头即 css 默认已有的样式名称， 有点开头即自定义样式名称。

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

<style type="text/css"><!-- // CSS定义开始

a:hover { text-decoration: underline }

body { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }

table { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

图片附件: css_tech_04.gif (2006-2-2 20:03, 719 bytes)

.nav { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }

.nav a { color: {TEXT} }

图片附件: css_tech_01.gif (2006-2-2 20:03, 1.36 K)

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

.header a { color: {HEADERTEXT} }

.category { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }

图片附件: css_tech_02.gif (2006-2-2 20:03, 612 bytes)

.tableborder { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }

图片附件: css_tech_03.gif (2006-2-2 20:03, 1.62 K)

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

.smalltxt { font: {SMFONTSIZE} {SMFONT} }

.outertxt { font: {FONTSIZE} {FONT}; color: {TEXT} }

.outertxt a { color: {TEXT} }

.bold { font-weight: {BOLD} }

图片附件: css_tech_05.gif (2006-2-2 20:03, 2.02 K)

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

.altbg2 { background: {ALTBG2} }

--></style> // CSS 定义结束

本教程由 TEA 制作，最后更新日期 2006-2-3 14:44

家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG[WWW.92FANG.COM] 家园 BLOG

You might also like

3，进入论坛点系统设置 -> 界面风格 -> 模板编辑在新增后填入对应资料

4, 点界面风格下的界面风格在新增后填写风格名字，如： Gamenara 然后提交。

6, 点界面风格下的模板编辑点刚新增的模板的 [详情]，进入模板编辑管理画面。

无点开头即 css 默认已有的样式名称，有点开头即自定义样式名称。