上一节:模板文件的修改----header.htm的修改
五、模板文件的修改----footer.htm的修改
上一节里边,我们分析了header.htm文件的修改,基本稳定了头部的样式。那么现在让我们修改底部的样式,以达到和图片一样的效果。
首先让我们看一下在未改动footer.htm文件以及css.htm文件时底部的模样:
和草图上对比,我们的草图上,目前底部左边的部分在上边,而右边的部分并排在下边。现在,我们打开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="https://discuz.dismall.com" 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="https://discuz.dismall.com"
- 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="https://discuz.dismall.com" 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="https://discuz.dismall.com"
- 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>
复制代码 更新下缓存,看一下现在的效果:
有点错位哦哈,我们现在打开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,更新缓存,刷新页面看下:
好了把,现在我们来处理论坛程序版权的地方:- <div id="footer">
- <p><!--{if
- $icp}--> <a href="http://www.miibeian.gov.cn/"
- target="_blank">$icp</a><!--{/if}--></p>
- <a
- href="https://discuz.dismall.com" 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="https://discuz.dismall.com"
- 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,更新缓存,看下现在的效果:
怎么样,可以了把~现在我们的头部和底部都定义好了,唯独差的就是中间部分的背景哦,因为.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 编辑 ] |