拍拍尘土

上篇我已经介绍过了最主要头部文件现在我们接着header篇的教程接着往下将。下面就到了内容区的内容了。也就是默认模板文件中的discuz.htm中的内容。这个文件里所包含的内容比较多下面我们来逐个分析一下它:
第一部分:

这个区域放置在discuz.htm中的头部最右侧的风格切换按钮并不是这一部分的.它是header
部分的.
在这部分通常需要修改的地方不多.
他的htm文件内容放置在: <div id="nav"></div>标签
样式主要放在css_commen.htm中的：
#nav { margin: -8px auto 0; background: url({IMGDIR}/icon_nav.gif) no-repeat 0 50%; text-align: left; text-indent: 25px; line-height: 3em; }
#nav, #nav a { color: {MENUHOVERTEXT}; }
如果你想知道以上代码的意思。可以的奥网上去查查每个属性的意思，然后根据你要修改的要求给予其适当的值。

接着下面到了页面的主题内容区域：
下面我分块给大家一部分一部分的剖析，首先是如下图的这部分：

我们这里通常需要注意的是：
1．发帖按钮和他旁边的一行字，还有下面的整个公告并不是在discuz.htm文件中的。他们统一放在index_header.htm的文件中。结构很清晰得分为上下两部分。
在这里需要重点介绍的是 发帖按钮 我们通常会替换这个按钮成我们自己的按钮。那么我们需要去改动它的样式。我们去》./tempaltes/default/css_script.htm中找到如下代码：
.postbtn, .replybtn { width: 67px; height: 30px; background: url({IMGDIR}/newtopic.gif) no-repeat 0 0; font-size: 14px; font-weight: 700; line-height: 28px; *line-height: 32px; text-align: center; overflow: hidden; }
.replybtn { background-image: url({IMGDIR}/reply.gif); }
你可以更换你的图片，添加如下代码到你的模板文件夹下的css_script.htm或者css_script_append.htm中。
background: url({IMGDIR}/你的图片.gif) no-repeat 0 0;
在这里需要注意的是变量{IMGDIR}变量。他带表的是系统中的默认文件的路径。对应得是./images/default/.当然如果你安装了其他模板，一般情况下在它的目录下会有一个images文件。我们通常把与模板套系相关的图片放到里面。如果你想以用里面的图片可以这么写：
background: url({STYLEIMGDIR}/你的图片.gif) no-repeat 0 0;就可以引用到你的图片地址了。
当然你在这里改了之后帖子列表页和帖子内容也得发帖按钮也会变。因为它们应用的是同一套样式。
另外一个经常需要修改的地方莫过于公告的样式了。你经常需要来改变它的各部分颜色值，以便能更好的额融合到你模板中。那让我们来看看我们需要修改那些地方：
#ann { margin: 5px 0 10px; padding: 2px 5px; line-height: 30px; border: solid {COMMONBORDER}; border-width: 1px 0; background: {COMMONBG}; }
#ann dl { overflow: hidden; }
#ann dt { float: left; width: 5em; background: url({IMGDIR}/ann_icon.gif) no-repeat 0 50%; text-indent: 2em; font-weight: 700; }
#ann dd { margin-left: 30px; }
#ann li { padding-left: 10px; white-space: nowrap; }
#ann em { margin-left: 5px; color: {MIDTEXT}; font-size: 0.83em; }
好了控制它的外形的就是这几个了。你至于每一项代表的是什么意义你自己试试就会知道了。当然公告的小喇叭你想换的话按照上面的发帖按钮的方法就可以了。
在这里需要特别注意的是形如{COMMONBORDER}的这种代码是一般我们可以在后台自己编辑的。可能有好多元素应用了这种样。如果你改变的他的值可能好多地方需也会跟着修改。
在这里我建议你直接用你的颜色代码直接替换这个变量。这样就可以单独修改此元素的属性了。
2.至于最下方的 论坛版块和论坛动态。这连个按钮的代码文件单独放在index_navbar.htm中。他们一般很少改动。不过经常出现的一种情况是更换背景的蓝色底纹，你需要给他换个颜色，那就去修改它的背景图吧-》images/default/btn_block.gif
至于它右侧的发帖数和会员数。你能会修改它的位置。那么就去移动discuz.htm中的
<p class="right forumcount">
                    {lang index_today}: <em>$todayposts</em>, {lang index_yesterday}: <em>$postdata[0]</em>, {lang index_members}: <em>$totalmembers</em>
               </p>
这段代码吧，将它放到你需要的地方。

下面我们来介绍正文了这也是大家最常用的部分，和修改最频繁的部分：
我以默认的和大家通常修改完后的样式对照着个大家说明一下这部分

以上是默认的模板样式。我们通常想要将他改成如下这种类型的。

下面我们一部分一部分的来看首先是-》头部的一条3px的粗线和板块名称，右上部的分区版主和展开收缩的图片按钮。
对应的html代码为：
<span class="headactions">
                    <!--{if $cat['moderators']}-->{lang forum_category_modedby}: $cat[moderators]<!--{/if}-->
<img id="category_$cat[fid]_img" src="{IMGDIR}/$cat[collapseimg]" title="{lang spread}" alt="{lang spread}" onclick="toggle_collapse('category_$cat[fid]');" />
                    </span>
<h3><a href="$indexname?gid=$cat[fid]" style="{if $cat[extra][namecolor]}color: {$cat[extra][namecolor]};{/if}">$cat[name]</a></h3>
我们通常要给这一块区域加一个背景这时候。你需要做的就是去掉顶部的淡红色粗线：
我们需要到css_commen.htm中去修改这么一行代码:
.list { border-top: 3px solid {COMMONBORDER}; }你只要将他修改为0就可以将这条线去掉了。
当然你可能需要给整个区域加一条框如第二幅图展示的那样，那么你只要将行代码稍加修改改为：
.list { border: 1px solid {COMMONBORDER}; }就可以了。
下面就是给个头部添加你已经准备好的图片背景。为此我们需要添加这么一行代码：
.content .list h3 { padding-left: 9px; line-height: 31px; background: #D1E3EE url({STYLEIMGDIR}/header_bg.gif) repeat-x; color: {LINK}; }；
这里需要注意的是我们所准备的图片经常是很细的一条线。我们只要平铺让他在水平方向平铺就可以了。另外经常遇到的一个问题是。Line-height你可以通过调节这个数值使你的标题在垂直方向上上下便宜。当然要确保这里只有一行。如果是多行的话会很大程度的影响你的布局。
我们接着往下将：下面我们经常用到的两个地方时为每个版块添加一个主题图标：
或者将他默认的前缀背景图标替换掉。首先如果你希望给你的版块添加一个前缀图标的话，可以登录后台-》版块，找到版块图标配置好图片的路径就可以了。
例如：./images/forum_logo/forum1.jpg。
第二个就是替换前缀背景图片。你可以直接覆盖掉默认的图标。当然会出现图片大小的问题。你只要去css_common中去修改如下代码就可以了：
.list th { padding-left: 45px !important; background-image: url({STYLEIMGDIR}/forum.gif); background-position: 5px center ;}
你需要调节padding-left这个值去适应图片背景的距离。每个版块的高度代码控制样式为：
.list td, .list th { height: 50px; padding: 6px 0; border-top: 1px dashed {COMMONBORDER}; color: {MIDTEXT}; }
当然这是你要注意调节background的位置调节。background-position: 5px center ;}
虽然我这里只介绍了一个分区。但下面的所有分区都是统一用的这一种样式。
好了基本的已经解决完了。线面我们在来看看下一个元素:
友情链接版块：
<!--{if $_DCACHE['forumlinks'][0] || $_DCACHE['forumlinks'][1] || $_DCACHE['forumlinks'][2]}-->
               <div class="mainbox list">
                    <span class="headactions"><img id="forumlinks_img" src="{IMGDIR}/$collapseimg[forumlinks].gif" alt="" onclick="toggle_collapse('forumlinks');" /></span>
                    <h3>{lang board_links}</h3>
                    <div id="forumlinks" style="$collapse[forumlinks]">
                    <!--{if $_DCACHE['forumlinks'][0]}-->
                    <div class="forumlinks">
                    <ul class="s_clear">$_DCACHE['forumlinks'][0]</ul>
                    </div>
<!--{/if}-->
                    <!--{if $_DCACHE['forumlinks'][1]}-->
                    <div class="forumimglink">
                    $_DCACHE['forumlinks'][1]
                    </div>
                    <!--{/if}-->
                    <!--{if $_DCACHE['forumlinks'][2]}-->
                    <div class="forumtxtlink">
                    <ul class="s_clear">
                    $_DCACHE['forumlinks'][2]
                    </ul>
                    </div>
                    <!--{/if}-->
                    </div>
               </div>
<!--{/if}-->
这是他的版块代码。一般甚少改动，而且他的样式的大都是继承的分区的展示样式。当你改变了分区样式后，刷新页面就可以看到效果了。
下面一段代码是在线会员的代码在这里我只是将他展示出来具体的你可以在本地修改着试一试：
<div class="mainbox list" id="online">
               <!--{if $whosonlinestatus}-->
                    <!--{if $detailstatus}-->
                    <span class="headactions"><a href="$indexname?showoldetails=no#online" title="{lang pm_close}"><img src="{IMGDIR}/collapsed_no.gif" alt="{lang pm_close}" /></a></span>
                    <h3>
                    <strong><a href="member.php?action=online">{lang onlinemember}</a></strong>
                    - <em>$onlinenum</em> {lang onlines}
                    - <em>$membercount</em> {lang index_members}(<em>$invisiblecount</em> {lang index_invisibles}),
                    <em>$guestcount</em> {lang index_guests}
                    - {lang index_mostonlines} <em>$onlineinfo[0]</em> {lang on} <em>$onlineinfo[1]</em>.
                    </h3>
                    <!--{else}-->
                    <span class="headactions"><a href="$indexname?showoldetails=yes#online" class="nobdr"><img src="{IMGDIR}/collapsed_yes.gif" alt="" /></a></span>
                    <h3>
                    <strong><a href="member.php?action=online">{lang onlinemember}</a></strong>
                    - {lang total} <em>$onlinenum</em> {lang onlines}
                    - {lang index_mostonlines} <em>$onlineinfo[0]</em> {lang on} <em>$onlineinfo[1]</em>.
                    </h3>
                    <!--{/if}-->
               <!--{else}-->
                    <h4><strong><a href="member.php?action=online">{lang onlinemember}</a></strong></h4>
               <!--{/if}-->
               <!--{if $whosonlinestatus && $detailstatus}-->
                    <dl id="onlinelist">
                    <dt>$_DCACHE[onlinelist][legend]</dt>
                    <!--{if $detailstatus}-->
                    <dd>
                    <ul class="s_clear">
                    <!--{if $whosonline}-->
                    <!--{loop $whosonline $key $online}-->
                    <li title="{lang time}: $online[lastactivity]{LF}{lang action}: $online[action] <!--{if $online['fid']}-->{LF}{lang forum}: $online[fid]<!--{/if}-->">
                    <img src="images/common/$online[icon]" alt="" />
                    <!--{if $online['uid']}-->
                    <a href="space.php?uid=$online[uid]">$online[username]</a>
                    <!--{else}-->
                    $online[username]
                    <!--{/if}-->
                    </li>
                    <!--{/loop}-->
                    <!--{else}-->
                    <li style="width: auto">{lang online_only_guests}</li>
                    <!--{/if}-->
                    </ul>
                    </dd>
                    <!--{/if}-->
                    </dl>
               <!--{/if}-->
               </div>