五、模板文件的修改----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">rocessed 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">rocessed 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">rocessed 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
