‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[技术] DZ6.0风格制作教程----模板文件的修改----footer.htm的修改

本主题由 紫风铃 于 2008-6-7 14:33 加入精华
紫风铃

副管理员

Rank: 8Rank: 8

帖子
1531 
积分
1315 
威望
4077  
金币
95 元 

美女站长

QQ

楼主 大 中 小 发表于 2008-6-7 14:32  只看该作者 ( 看帖回帖是一种美德，您的回帖是对楼主最大的支持。)

DZ6.0风格制作教程----模板文件的修改----footer.htm的修改

上一节里边，我们分析了header.htm文件的修改，基本稳定了头部的样式。那么现在让我们修改底部的样式，以达到和图片一样的效果。$ a; V0 M5 ^7 m" n7 D! G) m. P

0 N8 c- s! x6 m7 v5 b9 x! }. p        首先让我们看一下在未改动footer.htm文件以及css.htm文件时底部的模样：/ ?( p1 I) A5 d! m4 P
 2007-9-6 14:20
1 y- V  Z$ y% P/ P: B2 C" y5 |4 u! `7 l: D; ?% h
& X7 v. b. ^7 S! C' p( F9 F4 k
        和草图上对比，我们的草图上，目前底部左边的部分在上边，而右边的部分并排在下边。现在，我们打开footer.htm文件，看一下底部的结构。底部其实就是一个广告代码和底部的版权。我们只看版权的地方：9 N# l# `0 m9 T! X& @4 y
复制内容到剪贴板 代码
复制内容到剪贴板
代码:
:<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" >TOP</span>
                <!--{if !empty($stylejumpstatus)}-->
                    - <span id="styleswitcher" class="dropmenu" >{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="###"
>$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}-->
            &copy; 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}-->
            &copy; 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" >TOP</span>
                <!--{if !empty($stylejumpstatus)}-->
                    - <span id="styleswitcher" class="dropmenu" >{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="###"
>$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" >TOP</span>
                <!--{if !empty($stylejumpstatus)}-->
                    - <span id="styleswitcher" class="dropmenu" >{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="###"
>$name</a></li>
                        <!--{/loop}-->
                    </ul>
                    </div>
                <!--{/if}-->
            </p>
</div>
更新下缓存，看一下现在的效果：& u7 c' T6 s; X
0 b* A0 r: b4 u" ]3 c) B1 N, a
2007-9-6 14:20
: z$ R7 u# @: i% h
( K; e3 _7 {% e" p( `9 s1 T% z- q4 ^
& e6 e1 t1 S# c% n1 B! @. S- s' z       有点错位哦哈，我们现在打开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，更新缓存看下效果：
  p$ J% p9 B) _# E+ f4 o3 v" c
, W. O/ t, \/ O1 {; D2007-9-6 14:20' }) b$ y2 S2 F# N4 {

# N& f. j* o+ s% a/ D+ T1 s+ C; X' r) r- U
        是不是已经ok了？文字能否下一点点？可以的哈，还是在footlinks里边，将height修改为26px，添加一个padding-top:5px，更新缓存，刷新页面看下：
6 [( k0 m! a5 x; a- ^ 3 P. C' h" g" e3 r- C) G+ Y
2007-9-6 14:20
) `& h' @: Q; `0 [- S4 X/ S7 ^8 P
% q+ R/ R$ F2 j5 q) z4 \0 f1 ]
" I8 V$ P; P- Q4 x, A        好了把，现在我们来处理论坛程序版权的地方： 复制内容到剪贴板 代码:
复制内容到剪贴板
代码:
<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}-->
            &copy; 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，更新缓存，看下现在的效果：
' _; s! ^2 N' Q1 a9 R1 g/ T5 a
  w; j3 l/ X$ V, F2007-9-6 14:20
" C  J/ m5 {* }& |0 v1 U/ V# N9 v, T5 i2 c1 W8 F: Z' }

+ q1 Q7 n" Q1 S3 j% i       怎么样，可以了把～现在我们的头部和底部都定义好了，唯独差的就是中间部分的背景哦，因为.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; }，然后更新缓存，看下效果：5 f$ W3 M2 z0 T& _
4 X" w2 u" T! n+ G
2007-9-6 14:20
% W- H/ v4 A' W' C( A: s, h5 p. I7 F* O; o3 b6 b* J6 a

* S, e4 Y- T9 A, ] % \1 ?: i; W( L: }& v
2007-9-6 14:20$ B$ S3 w' f, c9 E  m
% y7 f. T9 x' Z* s5 m
% r* F# N* Q1 k2 U
       已经可以了把，就是在顶部下边有一点空隙，应该是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浏览器下都没有问题，关于文字的颜色你可以自行到后台按照自己的品味进行修改，再次就都保持黑色啦。

想要访谈的站长请联系我Q：893819301

TOP

深刻

银牌草根

Rank: 5Rank: 5

帖子
654 
积分
563 
威望
1079  
金币
21 元 
沙发 大 中 小 发表于 2008-6-7 18:41  只看该作者
谢谢站长分享啊

TOP

石头

版主

Rank: 7Rank: 7Rank: 7

帖子
1669 
积分
1685 
威望
1012  
金币
497 元 
板凳 大 中 小 发表于 2008-6-7 21:21  只看该作者
不错啊
4 K! }2 d5 x& E; j支持

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题