6.0风格制作（升级）教程----模板文件的修改----footer.htm的修改

上一节：模板文件的修改----header.htm的修改

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

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

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

        和草图上对比，我们的草图上，目前底部左边的部分在上边，而右边的部分并排在下边。现在，我们打开footer.htm文件，看一下底部的结构。底部其实就是一个广告代码和底部的版权。我们只看版权的地方：

1. <div id="footer">
   
2.     <div class="wrap">
   
3.         <div id="footlinks">
   
4.    
   
5.         <p>{lang time_now}<!--{if $icp}--> <a
   
6. href="http://www.miibeian.gov.cn/"
   
7. target="_blank">$icp</a><!--{/if}--></p>
   
8.             <p>
   
9.                 <a href="member.php?action=clearcookies&formhash={FORMHASH}">{lang clear_cookies}</a>
   
10.    
    
11.             - <a href="mailtoadminemail">{lang
    
12. contactus}</a> - <a href="$siteurl"
    
13. target="_blank">$sitename</a>
    
14.                 <!--{if
    
15. $archiverstatus}--> - <a href="archiver/"
    
16. target="_blank">Archiver</a><!--{/if}-->
    
17.                 <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->
    
18.                 - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>
    
19.                 <!--{if !empty($stylejumpstatus)}-->
    
20.                     - <span id="styleswitcher" class="dropmenu" onmouseover="showMenu(this.id)">{lang style}</span>
    
21.                     <script type="text/javascript">
    
22.                     function setstyle(styleid) {
    
23.                     <!--{if CURSCRIPT == 'forumdisplay'}-->
    
24.                         location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;
    
25.                     <!--{elseif CURSCRIPT == 'viewthread'}-->
    
26.                         location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;
    
27.                     <!--{else}-->
    
28.                         location.href = '$indexname?styleid=' + styleid;
    
29.                     <!--{/if}-->
    
30.                     }
    
31.                     </script>
    
32.                     <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">
    
33.                     <ul>
    
34.                         <!--{loop $stylejump $id $name}-->
    
35.    
    
36.                     <li{if $id == $styleid}
    
37. class="current"{/if}><a href="###"
    
38. onclick="setstyle($id)">$name</a></li>
    
39.                         <!--{/loop}-->
    
40.                     </ul>
    
41.                     </div>
    
42.                 <!--{/if}-->
    
43.             </p>
    
44.         </div>
    
45. 
    
46.    
    
47.     <a href="https://discuz.dismall.com" target="_blank" title="owered
    
48. by Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"
    
49. alt="Discuz!" /></a>
    
50.         <p id="copyright">
    
51.    
    
52.         Powered by <strong><a href="https://discuz.dismall.com"
    
53. target="_blank">Discuz!</a></strong>
    
54. <em>$version</em><!--{if !empty($boardlicensed)}-->
    
55. <a
    
56. href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"
    
57. target="_blank">Licensed</a><!--{/if}-->
    
58.             &#169; 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
    
59.         </p>
    
60.         {eval updatesession();}
    
61.         <!--{if debuginfo()}-->
    
62.    
    
63.         <p id="debuginfo"&gtrocessed in $debuginfo[time]
    
64. second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,
    
65. Gzip enabled<!--{/if}-->.</p>
    
66.         <!--{/if}-->
    
67.     </div>
    
68. </div>

复制代码

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

1. <div id="footer">
   
2. 
   
3.         <a
   
4. href="https://discuz.dismall.com" target="_blank" title="owered by
   
5. Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"
   
6. alt="Discuz!" /></a>
   
7.         <p id="copyright">
   
8.    
   
9.         Powered by <strong><a href="https://discuz.dismall.com"
   
10. target="_blank">Discuz!</a></strong>
    
11. <em>$version</em><!--{if !empty($boardlicensed)}-->
    
12. <a
    
13. href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"
    
14. target="_blank">Licensed</a><!--{/if}-->
    
15.             &#169; 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
    
16.         </p>
    
17.         {eval updatesession();}
    
18.         <!--{if debuginfo()}-->
    
19.    
    
20.         <p id="debuginfo"&gtrocessed in $debuginfo[time]
    
21. second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,
    
22. Gzip enabled<!--{/if}-->.</p>
    
23.         <!--{/if}-->
    
24. </div>
    
25. <div id="footlinks">
    
26.    
    
27.         <p>{lang time_now}<!--{if $icp}--> <a
    
28. href="http://www.miibeian.gov.cn/"
    
29. target="_blank">$icp</a><!--{/if}--></p>
    
30.             <p>
    
31.                 <a href="member.php?action=clearcookies&formhash={FORMHASH}">{lang clear_cookies}</a>
    
32.    
    
33.             - <a href="mailtoadminemail">{lang
    
34. contactus}</a> - <a href="$siteurl"
    
35. target="_blank">$sitename</a>
    
36.                 <!--{if
    
37. $archiverstatus}--> - <a href="archiver/"
    
38. target="_blank">Archiver</a><!--{/if}-->
    
39.                 <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->
    
40.                 - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>
    
41.                 <!--{if !empty($stylejumpstatus)}-->
    
42.                     - <span id="styleswitcher" class="dropmenu" onmouseover="showMenu(this.id)">{lang style}</span>
    
43.                     <script type="text/javascript">
    
44.                     function setstyle(styleid) {
    
45.                     <!--{if CURSCRIPT == 'forumdisplay'}-->
    
46.                         location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;
    
47.                     <!--{elseif CURSCRIPT == 'viewthread'}-->
    
48.                         location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;
    
49.                     <!--{else}-->
    
50.                         location.href = '$indexname?styleid=' + styleid;
    
51.                     <!--{/if}-->
    
52.                     }
    
53.                     </script>
    
54.                     <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">
    
55.                     <ul>
    
56.                         <!--{loop $stylejump $id $name}-->
    
57.    
    
58.                     <li{if $id == $styleid}
    
59. class="current"{/if}><a href="###"
    
60. onclick="setstyle($id)">$name</a></li>
    
61.                         <!--{/loop}-->
    
62.                     </ul>
    
63.                     </div>
    
64.                 <!--{/if}-->
    
65.             </p>
    
66. </div>

复制代码

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

1. <div id="footlinks">
   
2.    
   
3.         <p>{lang time_now} - <a
   
4. href="member.php?action=clearcookies&formhash={FORMHASH}">{lang
   
5. clear_cookies}</a>
   
6.                 - <a
   
7. href="mailtoadminemail">{lang contactus}</a> - <a
   
8. href="$siteurl" target="_blank">$sitename</a>
   
9.            
   
10.     <!--{if $archiverstatus}--> - <a href="archiver/"
    
11. target="_blank">Archiver</a><!--{/if}-->
    
12.                 <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->
    
13.                 - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>
    
14.                 <!--{if !empty($stylejumpstatus)}-->
    
15.                     - <span id="styleswitcher" class="dropmenu" onmouseover="showMenu(this.id)">{lang style}</span>
    
16.                     <script type="text/javascript">
    
17.                     function setstyle(styleid) {
    
18.                     <!--{if CURSCRIPT == 'forumdisplay'}-->
    
19.                         location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;
    
20.                     <!--{elseif CURSCRIPT == 'viewthread'}-->
    
21.                         location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;
    
22.                     <!--{else}-->
    
23.                         location.href = '$indexname?styleid=' + styleid;
    
24.                     <!--{/if}-->
    
25.                     }
    
26.                     </script>
    
27.                     <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">
    
28.                     <ul>
    
29.                         <!--{loop $stylejump $id $name}-->
    
30.    
    
31.                     <li{if $id == $styleid}
    
32. class="current"{/if}><a href="###"
    
33. onclick="setstyle($id)">$name</a></li>
    
34.                         <!--{/loop}-->
    
35.                     </ul>
    
36.                     </div>
    
37.                 <!--{/if}-->
    
38.             </p>
    
39. </div>

复制代码

更新下缓存，看一下现在的效果：

       有点错位哦哈，我们现在打开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，更新缓存看下效果：

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

        好了把，现在我们来处理论坛程序版权的地方：

1. <div id="footer">
   
2. <p><!--{if
   
3. $icp}--> <a href="http://www.miibeian.gov.cn/"
   
4. target="_blank">$icp</a><!--{/if}--></p>
   
5. <a
   
6. href="https://discuz.dismall.com" target="_blank" title="owered by
   
7. Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"
   
8. alt="Discuz!" /></a>
   
9.         <p id="copyright">
   
10.    
    
11.         Powered by <strong><a href="https://discuz.dismall.com"
    
12. target="_blank">Discuz!</a></strong>
    
13. <em>$version</em><!--{if !empty($boardlicensed)}-->
    
14. <a
    
15. href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"
    
16. target="_blank">Licensed</a><!--{/if}-->
    
17.             &#169; 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
    
18.         </p>
    
19.         {eval updatesession();}
    
20.         <!--{if debuginfo()}-->
    
21.    
    
22.         <p id="debuginfo"&gtrocessed in $debuginfo[time]
    
23. second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,
    
24. Gzip enabled<!--{/if}-->.</p>
    
25.         <!--{/if}-->
    
26. </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，更新缓存，看下现在的效果：

       怎么样，可以了把～现在我们的头部和底部都定义好了，唯独差的就是中间部分的背景哦，因为.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; }，然后更新缓存，看下效果：


       已经可以了把，就是在顶部下边有一点空隙，应该是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

下节预告：一些细节的修改

[ 本帖最后由 南芝恋 于 2007-9-6 14:30 编辑 ]

[ 本帖最后由 南芝恋 于 2007-9-6 14:34 编辑 ]

好东西呀.......沙发.

:)

这帖子不顶就太说不过去了

:) :) :)严重支持楼主！！！！！！！！！！！

这么好的文章，居然没人顶，还有王法吗？？？

还没人？？？？再顶！！