Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

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

[复制链接]
南芝恋 发表于 2007-9-6 14:20:06 | 显示全部楼层 |阅读模式
上一节:模板文件的修改----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.     <a href="https://discuz.dismall.com" target="_blank" title="owered
  47. by Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"
  48. alt="Discuz!" /></a>
  49.         <p id="copyright">
  50.    
  51.         Powered by <strong><a href="https://discuz.dismall.com"
  52. target="_blank">Discuz!</a></strong>
  53. <em>$version</em><!--{if !empty($boardlicensed)}-->
  54. <a
  55. href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"
  56. target="_blank">Licensed</a><!--{/if}-->
  57.             &#169; 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
  58.         </p>
  59.         {eval updatesession();}
  60.         <!--{if debuginfo()}-->
  61.    
  62.         <p id="debuginfo"&gtrocessed in $debuginfo[time]
  63. second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,
  64. Gzip enabled<!--{/if}-->.</p>
  65.         <!--{/if}-->
  66.     </div>
  67. </div>
复制代码
总体的外围是#footer,然后是.wrap,然后就是footlink论坛信息,以及论坛程序版权及数据库信息。在这里,我们不使用.wrap,所以先将.wrap这个框架去掉。然后是将footlink这部分剪切出去,即移动到footer框架的下边:
  1. <div id="footer">

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

评分

1

查看全部评分

水月无痕 发表于 2007-9-6 15:16:17 | 显示全部楼层
好东西呀.......沙发.
回复

使用道具 举报

【兄弟合租】 发表于 2007-9-6 15:19:09 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

81os 发表于 2007-9-6 16:25:58 | 显示全部楼层
:)

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

使用道具 举报

王二麻 发表于 2007-9-6 16:42:21 | 显示全部楼层
回复

使用道具 举报

王二麻 发表于 2007-9-6 16:42:42 | 显示全部楼层
回复

使用道具 举报

王二麻 发表于 2007-9-6 16:43:03 | 显示全部楼层
回复

使用道具 举报

王二麻 发表于 2007-9-6 16:43:28 | 显示全部楼层
:) :) :)严重支持楼主!!!!!!!!!!!
回复

使用道具 举报

王二麻 发表于 2007-9-6 16:44:02 | 显示全部楼层
这么好的文章,居然没人顶,还有王法吗???
回复

使用道具 举报

王二麻 发表于 2007-9-6 16:47:01 | 显示全部楼层
还没人????再顶!!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-12-23 04:54 , Processed in 0.035628 second(s), 6 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表