6.0风格制作（升级）教程----做风格前的准备

一、前期图片的制作

        每次新版本的发布总会有人说要风格的升级教程，其实，所谓的风格升级就是风格的再制作，只是少了图片的制作这一步骤。或许有的朋友会说，我不会用ps或者fw怎么办呢？没有关系的，这个可以慢慢学哦，或者可以借助现成的素材哦，时间久而久之，你就会熟悉的。其实我也不怎么熟悉ps或者fw，只会一些皮毛而已哈。

        昨天下午花了一些时间，用ps绘制了一个风格首页的草图，水平很低，大家不要笑哈。风格采用黄绿色，名字可以叫做过街老鼠把，哈哈。其实，绘制这个就是给自己一个大概的轮廓，知道自己该怎么做，做成什么样子的，如果你心里有数，大可不必走这一步，直接进入代码的编辑阶段。绘草图，主要就是画下头部的图片，中间部分的结构，以及底部的设置，大概的排版需要自己先画好。现在只是一个初级的制作教程，所以不做那么复杂的结构，希望能够抛砖引玉。

        图片只做好了以后，就要裁图，裁出自己需要的地方，以备风格制作使用。附件附上我的psd源文件，有兴趣的朋友也可以先制作一下。稍后我会一步步教大家完成这款风格。

二、建立模板文件夹

        进入images文件夹，拖动复制一份default文件夹，改名为laoshu，将里边我们用不到的默认图片删掉，将我们切好的图片放入文件夹内。然后进入templates文件夹，新建一个名为laoshu的文件夹，到templates文件夹里的default文件夹下，复制css.htm、header.htm、footer.htm、css_append.htm文件，回到我们刚才新建的laoshu文件夹，粘贴进去。

三、添加模板

        进入后台论坛设置，点选模板编辑，输入模板信息，添加模板。
  下载 (22.33 KB)

2007-9-4 14:15

        然后，点选界面风格，添加模板。
  下载 (17.42 KB)

2007-9-4 14:16

        添加完后，更新缓存，回到首页刷新，在论坛下边的界面风格里选择过街老鼠，我们会看到现在论坛的样子。
  下载 (75.67 KB)

2007-9-4 14:16

        我们现在开始设置界面风格的相关参数，进入后台--论坛设置--界面风格--详情，根据我们草图的部分，大概填写一下设置，字体可以暂时保持默认，待风格完成后再做修改。大家看下效果图：
  下载 (354.57 KB)

2007-9-4 14:16

  下载 (132.03 KB)

2007-9-4 14:16

        具体的一些参数，大家可以看下之前dfox发过的两个图片，那个描述的很详细，在这里我就不再重复了。dfox的帖子地址是：http://www.discuz.net/thread-687644-1-1.html#zoom

        按照这样子设置好之后，替换一下logo，基本上就是一个很简单的风格了。

四、模板文件的修改----header.htm的修改

        在上一节里我们已经简单设置了界面风格的大体模样，那么现在我们开始不断的完善我们的风格。

        对比我们勾画的草图和我们现在的风格，我们发现，在草图上我们的菜单栏是在最上边的，所以呢，我们首先调整菜单栏和头部的位置。打开header.htm文件，可以清楚的看到，这个文件只有两个结构，一个是菜单栏  <div id="menu">~~~~~</div>，一个是头部  <div id="header">~~~~~</div>，首先我们将这两部分调换，使菜单栏居上，header据下。更新css缓存，我们可以看到头部变成下图的模样。
  下载 (59 KB)

2007-9-5 16:35
        header.htm

        然后我们现对menu做修改，打开css.htm文件，查找#menu { height: 31px; border: 1px solid {CATBORDER}; {HEADERMENUBGCODE}; background-repeat: repeat-x; }，现在我们需要对这个样式进行修改。第一个height，我们看下我们的menu背景图片menu_bg.gif的宽度和高度，分别为944px和34px，所以我们将这里的height值做修改，并添加上一个宽度，第二个border，因为我们的背景图片上本上已经带了边缘，所以这里我们去掉这里的border宽度，直接删除这句，第三个，是后台界面设置的logo设置，我们不再后台定义logo所以，也将其删除，第四个是定义背景是否平铺的，我们对其进行修改，修改为background:url({IMGDIR}/menu_bg.gif) center no-repeat; 这就设置了背景，以及背景位于中间，不平铺。这样子，我们的menu就定义好了，更新下缓存看看效果。
  下载 (53.78 KB)

2007-9-5 16:35      
        我们看到菜单栏的两边的竖线几乎没有显示出来，这是为什么呢？因为我们后台定义的外表格宽度的问题，那个宽度是.wrap的宽度，而我们的头部和菜单栏正好在这里边包含着，现在我们要把他们从.wrap分离出去。可能有人会问，我们为什么要把他分离出去呢？大家看下我们的草图，我们的论坛表格是缩进去的，如果我们是头部和菜单栏在.wrap中的话，那么我们的头部和论坛表格会是同样的宽度，对我们的这款风格是不适合的，因此我们要将头部分离出去。分离的方法很简单，只需将header.htm文件里边的<div class="wrap">剪切到文件的末尾即可。更新缓存，看下我们现在的样子：
  下载 (44.6 KB)

2007-9-5 16:35
        是不是已经好了呢?细心的朋友应该会发现，在右边还是有一个小竖线，这是因为菜单栏的ul定义了一个右边框，我们将其去掉即可，打开css.htm文件，查找#menu ul { float: right; padding: 4px 10px 0; border-right: 1px solid {TABLEBG}; }，将最后的那一句去掉即可。更新缓存，看下现在的样子：
  下载 (40.21 KB)

2007-9-5 16:35
        是不是已经好了哈。不过这是在ie下正常哦，在ff下就会移动到左边的哦，所以我们还需要为#menu进行margin定位，在里边加入margin:0 auto;即可.

        总结：在修改#menu时，我们修改了两处，一个是#menu，一个是#menu ul，修改后的样式为：
        #menu { height: 34px; width:944px; background:url({IMGDIR}/menu_bg.gif) center no-repeat; margin:0 auto;}
        #menu ul { float: right; padding: 4px 10px 0;}

        现在我们开始修改我们的logo部分。我们现在看到的logo是一个大叉，logo这部分的代码很简单，大家应该都能看懂：<div id="header"><h2><a href="$indexname" title="$bbname">{BOARDLOGO}</a></h2><div id="ad_headerbanner"></div></div>，h2所包含的就是我们的logo部分，首先我们将这部分修改为<div id="header"><h2>依林家族</h2><div id="ad_headerbanner"></div></div>（里边的依林家族，大家修改为自己的论坛名字即可），为什么要这样子做呢？原来的情况下，是一个链接，点击一下就回到首页，感觉没太大用处，因为有nav条嘛，干嘛再点击这个呢？因此我们就将其去掉，设置为背景，而这个部分就填上论坛的名称，说不定还能被搜索引擎偷了呢。 改好之后呢，我们现在来定义css.htm文件，来完成logo的显示。
  下载 (26.53 KB)

2007-9-5 16:35
        打开css.htm文件，查找#header { width: 100%; overflow: hidden; }，看一下我们的头部图片head_bg.gif，大小为944*156，因此我们将header的宽高做修改，添加上背景图片:background:url({IMGDIR}/head_bg.gif) center no-repeat;后边的overflow属性可以去掉，换成margin的定位（跟menu一样的原因）。更新缓存，看下现在的效果：   
  下载 (29.3 KB)

2007-9-5 16:35
        刷新看到首页的文字覆盖在背景上边，那我们该怎么去掉呢？打开css.htm文件，查找#header h2 { float: left; padding: 5px 0; }，将其隐藏即可，修改为：
#header h2 { display:none; }，更新缓存，会看到文字已经消失。看看现在头部的效果，是不是跟草图上差不多哦！~

        总结：在修改#header时，我们修改了两处，一处是#header，一处是#header h2，修改后的样式为：
        #header { width: 944px; height:156px; margin:0 auto; background:url({IMGDIR}/head_bg.gif) center no-repeat;}
        #header h2 { display:none;}

五、模板文件的修改----footer.htm的修改

       上一节里边，我们分析了header.htm文件的修改，基本稳定了头部的样式。那么现在让我们修改底部的样式，以达到和图片一样的效果。

        首先让我们看一下在未改动footer.htm文件以及css.htm文件时底部的模样：
  下载 (39.24 KB)

2007-9-6 14:20
        和草图上对比，我们的草图上，目前底部左边的部分在上边，而右边的部分并排在下边。现在，我们打开footer.htm文件，看一下底部的结构。底部其实就是一个广告代码和底部的版权。我们只看版权的地方：
<div id="footer">

    <div class="wrap">

        <div id="footlinks">

   

        <p>{lang time_now}<!--{if $icp}--> <a

href="http://www.miibeian.gov.cn/"

target="_blank">$icp</a><!--{/if}--></p>

            <p>

                <a href="member.php?action=clearcookies&formhash={FORMHASH}">{lang clear_cookies}</a>

   

            - <a href="mailtoadminemail">{lang

contactus}</a> - <a href="$siteurl"

target="_blank">$sitename</a>

                <!--{if

$archiverstatus}--> - <a href="archiver/"

target="_blank">Archiver</a><!--{/if}-->

                <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->

                - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>

                <!--{if !empty($stylejumpstatus)}-->

                    - <span id="styleswitcher" class="dropmenu" onmouseover="showMenu(this.id)">{lang style}</span>

                    <script type="text/javascript">

                    function setstyle(styleid) {

                    <!--{if CURSCRIPT == 'forumdisplay'}-->

                        location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;

                    <!--{elseif CURSCRIPT == 'viewthread'}-->

                        location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;

                    <!--{else}-->

                        location.href = '$indexname?styleid=' + styleid;

                    <!--{/if}-->

                    }

                    </script>

                    <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">

                    <ul>

                        <!--{loop $stylejump $id $name}-->

   

                    <li{if $id == $styleid}

class="current"{/if}><a href="###"

onclick="setstyle($id)">$name</a></li>

                        <!--{/loop}-->

                    </ul>

                    </div>

                <!--{/if}-->

            </p>

        </div>



   

    <a href="http://www.discuz.net" target="_blank" title="owered

by Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"

alt="Discuz!" /></a>

        <p id="copyright">

   

        Powered by <strong><a href="http://www.discuz.net"

target="_blank">Discuz!</a></strong>

<em>$version</em><!--{if !empty($boardlicensed)}-->

<a

href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"

target="_blank">Licensed</a><!--{/if}-->

            © 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>

        </p>

        {eval updatesession();}

        <!--{if debuginfo()}-->

   

        <p id="debuginfo"&gtrocessed in $debuginfo[time]

second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,

Gzip enabled<!--{/if}-->.</p>

        <!--{/if}-->

    </div>

</div>
复制代码总体的外围是#footer，然后是.wrap，然后就是footlink论坛信息，以及论坛程序版权及数据库信息。在这里，我们不使用.wrap，所以先将.wrap这个框架去掉。然后是将footlink这部分剪切出去，即移动到footer框架的下边：<div id="footer">



        <a

href="http://www.discuz.net" target="_blank" title="owered by

Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"

alt="Discuz!" /></a>

        <p id="copyright">

   

        Powered by <strong><a href="http://www.discuz.net"

target="_blank">Discuz!</a></strong>

<em>$version</em><!--{if !empty($boardlicensed)}-->

<a

href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"

target="_blank">Licensed</a><!--{/if}-->

            © 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>

        </p>

        {eval updatesession();}

        <!--{if debuginfo()}-->

   

        <p id="debuginfo"&gtrocessed in $debuginfo[time]

second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,

Gzip enabled<!--{/if}-->.</p>

        <!--{/if}-->

</div>

<div id="footlinks">

   

        <p>{lang time_now}<!--{if $icp}--> <a

href="http://www.miibeian.gov.cn/"

target="_blank">$icp</a><!--{/if}--></p>

            <p>

                <a href="member.php?action=clearcookies&formhash={FORMHASH}">{lang clear_cookies}</a>

   

            - <a href="mailtoadminemail">{lang

contactus}</a> - <a href="$siteurl"

target="_blank">$sitename</a>

                <!--{if

$archiverstatus}--> - <a href="archiver/"

target="_blank">Archiver</a><!--{/if}-->

                <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->

                - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>

                <!--{if !empty($stylejumpstatus)}-->

                    - <span id="styleswitcher" class="dropmenu" onmouseover="showMenu(this.id)">{lang style}</span>

                    <script type="text/javascript">

                    function setstyle(styleid) {

                    <!--{if CURSCRIPT == 'forumdisplay'}-->

                        location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;

                    <!--{elseif CURSCRIPT == 'viewthread'}-->

                        location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;

                    <!--{else}-->

                        location.href = '$indexname?styleid=' + styleid;

                    <!--{/if}-->

                    }

                    </script>

                    <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">

                    <ul>

                        <!--{loop $stylejump $id $name}-->

   

                    <li{if $id == $styleid}

class="current"{/if}><a href="###"

onclick="setstyle($id)">$name</a></li>

                        <!--{/loop}-->

                    </ul>

                    </div>

                <!--{/if}-->

            </p>

</div>
复制代码现在我们先对footlink这部分进行设置，因为按照草图，它是显示在最下边的。参看这部分代码，发现icp备案号在这部分里边，因此，我们先将其剪切到footer框架里边。再将两个段落<p>合并成一个段落：<div id="footlinks">

   

        <p>{lang time_now} - <a

href="member.php?action=clearcookies&formhash={FORMHASH}">{lang

clear_cookies}</a>

                - <a

href="mailtoadminemail">{lang contactus}</a> - <a

href="$siteurl" target="_blank">$sitename</a>

           

    <!--{if $archiverstatus}--> - <a href="archiver/"

target="_blank">Archiver</a><!--{/if}-->

                <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->

                - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>

                <!--{if !empty($stylejumpstatus)}-->

                    - <span id="styleswitcher" class="dropmenu" onmouseover="showMenu(this.id)">{lang style}</span>

                    <script type="text/javascript">

                    function setstyle(styleid) {

                    <!--{if CURSCRIPT == 'forumdisplay'}-->

                        location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;

                    <!--{elseif CURSCRIPT == 'viewthread'}-->

                        location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;

                    <!--{else}-->

                        location.href = '$indexname?styleid=' + styleid;

                    <!--{/if}-->

                    }

                    </script>

                    <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">

                    <ul>

                        <!--{loop $stylejump $id $name}-->

   

                    <li{if $id == $styleid}

class="current"{/if}><a href="###"

onclick="setstyle($id)">$name</a></li>

                        <!--{/loop}-->

                    </ul>

                    </div>

                <!--{/if}-->

            </p>

</div>
复制代码更新下缓存，看一下现在的效果：
  下载 (20.58 KB)

2007-9-6 14:20
       有点错位哦哈，我们现在打开css.htm文件对其进行设置。查找#footlinks { float: right; margin-top:-3px; text-align: right;}，现在这部分已经是独立的一部分了，而且，也有专门的底部背景，查看背景图片foot_bg.gif的大小为944*31，将其宽高设置，设置背景路径background:url({IMGDIR}/foot_bg.gif) centerno-repeat，然后，设置文字居中text-align:center，位置居中margin:0 auto，更新缓存看下效果：
  下载 (23.12 KB)

2007-9-6 14:20
        是不是已经ok了？文字能否下一点点？可以的哈，还是在footlinks里边，将height修改为26px，添加一个padding-top:5px，更新缓存，刷新页面看下：
  下载 (23.29 KB)

2007-9-6 14:20
        好了把，现在我们来处理论坛程序版权的地方：<div id="footer">

<p><!--{if

$icp}--> <a href="http://www.miibeian.gov.cn/"

target="_blank">$icp</a><!--{/if}--></p>

<a

href="http://www.discuz.net" target="_blank" title="owered by

Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"

alt="Discuz!" /></a>

        <p id="copyright">

   

        Powered by <strong><a href="http://www.discuz.net"

target="_blank">Discuz!</a></strong>

<em>$version</em><!--{if !empty($boardlicensed)}-->

<a

href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"

target="_blank">Licensed</a><!--{/if}-->

            © 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>

        </p>

        {eval updatesession();}

        <!--{if debuginfo()}-->

   

        <p id="debuginfo"&gtrocessed in $debuginfo[time]

second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,

Gzip enabled<!--{/if}-->.</p>

        <!--{/if}-->

</div>
复制代码这部分其实不怎么需要调整，只需要先将那个图标去掉，然后在css.htm定义一下宽度及位置即可。在css.htm文件里查找#footer {border-top: 1px solid {BORDERCOLOR}; background: {ALTBG2}; color:{TEXT}; padding: 12px 0;}，首先是设置宽度width:944px，边框去掉，背景去掉，使其居中text-align:center，margin:0auto，更新缓存，看下现在的效果：
  下载 (26.35 KB)

2007-9-6 14:20
       怎么样，可以了把～现在我们的头部和底部都定义好了，唯独差的就是中间部分的背景哦，因为.wrap定义了中间的缩进，所以我们需要在.wrap外边再套一个盒子。打开header.htm文件，在底部<div class="wrap">之上加上<divid="mycontent">，然后打开footer.htm文件，在<divid="footlinks">之上添加一个</div>，因为我们要将论坛程序的版权这部分同样用上背景。最后，打开css.htm或者css_append.htm文件，在文件的最末端，加上这部分的定义：#mycontent {width:941px; margin:0auto; padding:0; border-left:1px solid #599502; border-right:1px solid#599502; background:#B5FF94; }，然后更新缓存，看下效果：
  下载 (41.59 KB)

2007-9-6 14:20
  下载 (25.16 KB)

2007-9-6 14:20
       已经可以了把，就是在顶部下边有一点空隙，应该是foruminfo的顶margin问题，打开css.htm文件，查找#foruminfo {width: 100%; overflow: hidden; margin: 10px 0; color: {TEXT};}，将其替换为：#foruminfo { width: 100%; overflow: hidden; margin: 0 0 10px 0;color: {TEXT};}，更新缓存，刷新页面，可以看到已经没有什么问题了。到现在，整个页面已经基本完成了，而且在ie6、ie7、firefox2.0、opera9.2浏览器下都没有问题，关于文字的颜色你可以自行到后台按照自己的品味进行修改，再次就都保持黑色啦。大家可以看下演示：http://koushuijie.com/forum/index.php?styleid=7

六、一些小细节的修改

        大家似乎都很懒哦哈,写出来的教程也没有人看,但是,总看到的是某某人跪求,哭求风格的升级什么的,每个人都有自己的事情要做,不可能天天守在这里为你升级.与其求人,不如求己.安下心来,仔细看看大家写的教程,有不懂的就问,时间久了,你也会了,干嘛总是求别人呢?有一句话叫做授人于鱼,不如授人于渔.呵呵,废话不说了,我们继续上一节的教程,做风格最后的完善.

        首先看一下首页的情况:http://koushuijie.com/forum/index.php?styleid=7

        表面上需要改的就是,关于新帖的图标,生日图标,联盟论坛,在线图标的位置不是很齐,那么我们该如何修改呢?打开css.htm文件,查找.forumlist tbody th { background-image: url({IMGDIR}/forum.gif); background-repeat: no-repeat; background-position: 13px 50%; }
复制代码将其修改为:.forumlist tbody th { background-image: url({IMGDIR}/forum.gif); background-repeat: no-repeat; background-position: 10px 50%; }
复制代码查找:#forumlinks td { padding: 5px 5px 5px 55px; background: url({IMGDIR}/forumlink.gif) no-repeat 18px 50%; color: {LIGHTTEXT}; }
复制代码将其修改为:#forumlinks td { padding: 5px 5px 5px 55px; background: url({IMGDIR}/forumlink.gif) no-repeat 10px 50%; color: {LIGHTTEXT}; }
复制代码查找:#onlinelist { background: url({IMGDIR}/online.gif) no-repeat 10px 10px; border-top: 1px solid {COMMONBOXBORDER}; }
复制代码将其修改为:#onlinelist { background: url({IMGDIR}/online.gif) no-repeat 10px 0px; border-top: 1px solid {COMMONBOXBORDER}; }
复制代码首页的问题主要的就是这个,另外,这次新的模板,将联盟论坛的图标和帖子里边个人信息栏的个人空间图标采用了同样的图标,所以,如果你的首页采用像我这样子比较大的图标后,个人空间图标那里会很难看,那么该如何使他们使用不同的图标呢?再css.htm文件里边,查找:.postauthor li.space { background-image: url({IMGDIR}/forumlink.gif); }
复制代码将里边的图标名称forumlink.gif修改成一个你自己的图标的名称,然后将图片放到图片目录里即可.

        再其他也没有什么大的问题了把,其实这些都再我的另一篇帖子里都有说,不过,大家似乎跟没有看到似的,不断的有人重复问.

        本来是要写一个关于viewthread.htm文件修改的,不过看了看感觉也没有什么太大的必要,所以就暂时不写了,更多的细节修改,请大家参照:http://www.discuz.net/thread-696461-1-1.html