草根站长论坛 » 草根网站建设运营 » DZ6.0风格制作教程----模板文件的修改----footer.htm的修改

紫风铃 发表于 2008-6-7 14:32

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

上一节里边，我们分析了header.htm文件的修改，基本稳定了头部的样式。那么现在让我们修改底部的样式，以达到和图片一样的效果。c0R)A'vl~
G{TA G~!ljh
        首先让我们看一下在未改动footer.htm文件以及css.htm文件时底部的模样：[b][color=black]h0?3|3fO
[/color][/b] [url=http://www.discuz.net/thread-733785-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0709/20070906_d59654aed5bcd011c8537WVu8O1yEplM.jpg.thumb.jpg[/img][/url] 2007-9-6 14:20?~?1qF^Cj-qX!G y
?$v

7h*`bO"J*g:AF [color=blue][b][color=black]!iH+R w"p;]zH0L3E
[/color][/b][color=black]        和草图上对比，我们的草图上，目前底部左边的部分在上边，而右边的部分并排在下边。现在，我们打开footer.htm文件，看一下底部的结构。底部其实就是一个广告代码和底部的版权。我们只看版权的地方：[/color][b][color=black]
,q'yKR%]$o [/color][/b][/color]复制内容到剪贴板 代码[code]:<div id="footer">.W$}&Jp;x+aI
    <div class="wrap">(MSn)q I1[l V|
        <div id="footlinks">
v9f#U]|3c    
I0X"v hpP         <p>{lang time_now}<!--{if $icp}--> <a
)[?X^%Y-`u m href="http://www.miibeian.gov.cn/"
8M~SBj\q)NM target="_blank">$icp</a><!--{/if}--></p>1e8Fa#?J ?RMY
            <p>
f_/Y]V F6~q                 <a href="member.php?action=clearcookies&formhash={FORMHASH}">{lang clear_cookies}</a>
P9al$VM'P8L.R    
y_&L9`,FB-V             - <a href="mailtoadminemail">{lang
,x.ipY:]B contactus}</a> - <a href="$siteurl"
2iJj!m1Gt8`S target="_blank">$sitename</a>
/v
AO5M8d*a;\                 <!--{ifK8h
JXtg
$archiverstatus}--> - <a href="archiver/"KwO
y[{*D!z7o]
target="_blank">Archiver</a><!--{/if}-->\L l#N*Q(g$lo
                <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->Vfa-U P
                - <span class="scrolltop" >TOP</span>5h"Tl'`G\A
                <!--{if !empty($stylejumpstatus)}-->xV4d(\v.H
                    - <span id="styleswitcher" class="dropmenu" >{lang style}</span>
.X/a)?a%LQIy                     <script type="text/javascript">
ixy&fMI~j                     function setstyle(styleid) {;A_I:QA\:n'_4@:TE
                    <!--{if CURSCRIPT == 'forumdisplay'}-->3E(dK4H'LAB
                        location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;_YuqT~
                    <!--{elseif CURSCRIPT == 'viewthread'}-->
4[u
}v:T(}!Y-yO                         location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;;o$@w^'y_mY6|
                    <!--{else}-->
@$Ha3q}!F                         location.href = '$indexname?styleid=' + styleid;
^%w4N)n@'^3`V                     <!--{/if}-->
p A-y]N D6I IC
                    }
0c cZ;tm u                     </script>
S:wOmki?h                     <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">1r,f0T6OfjPn
                    <ul>
8p8Aw!I9wd                         <!--{loop $stylejump $id $name}-->
3l+P2?f"v    G.EIF
s"~O"Cg
                    <li{if $id == $styleid}
&O7E
t aQ'd$B2Y~6k class="current"{/if}><a href="###"
S+TWruRX3g >$name</a></li>
+a B7af+]Z#b V2S                         <!--{/loop}-->&ryq7e$I2b
                    </ul>
3qB?!M%hF                     </div>s+}`p1Bh3wqc T
                <!--{/if}-->
9^3tmq y9b             </p>
~
[_+g `Rr         </div>{b2j._!F
+N^eQ8X*] [lg7y3k
   
;V!\i-D"s%c R`8_?     <a href="http://www.discuz.net" target="_blank" title="oweredm cg*~$]
by Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"X'^m%ts
alt="Discuz!" /></a>
%LD*Z4[-T         <p id="copyright">Q6O6dT"hT sJ
    x}l4? E-@3{
        Powered by <strong><a href="http://www.discuz.net"
]:t5|cz target="_blank">Discuz!</a></strong>
2[ Mpo
so <em>$version</em><!--{if !empty($boardlicensed)}-->
)T'B+x(]E\8u9Y1g5? <a
a#V~Z|'H"q
href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]" mJsu+J.W@b
target="_blank">Licensed</a><!--{/if}-->8S#V4Pd"cfKJx(g
            &copy; 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>1ffor)j
        </p>u'w)hW4Y1{u|
        {eval updatesession();}3qK:Hpgc
        <!--{if debuginfo()}-->
_,Me wr8}0H;E    /g
w3tBoW]9w0~kD
        <p id="debuginfo"&gtrocessed in $debuginfo[time]
FFe*xT9y second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,'_7p8gt%@)lOT
Gzip enabled<!--{/if}-->.</p>
cL]*l fav+p5R         <!--{/if}-->&o;tzS8yi9qt^
    </div> |^}x1[
</div>[/code]总体的外围是#footer，然后是.wrap，然后就是footlink论坛信息，以及论坛程序版权及数据库信息。在这里，我们不使用.wrap，所以先将.wrap这个框架去掉。然后是将footlink这部分剪切出去，即移动到footer框架的下边： 复制内容到剪贴板 代码:[font=新宋体][code]<div id="footer">+L!a:o,F8{

4Pb
|W'?{T,A         <a
;sbu T:yLJ href="http://www.discuz.net" target="_blank" title="owered by
7_DwLt&\ Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"\X
^.W;mx
alt="Discuz!" /></a>
s'L5Yr{v
K)T         <p id="copyright">
m#oK B;eU6M?w    
\L2~W v.|         Powered by <strong><a href="http://www.discuz.net"^)Dn+A5MXjA*t fy
target="_blank">Discuz!</a></strong>
mQ,r8px9t Z <em>$version</em><!--{if !empty($boardlicensed)}-->#k.IZU\B;m
<a"d|Ivp7|;q;R"O
href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"
{Q_f8~r'Q target="_blank">Licensed</a><!--{/if}-->H$e?a"}B
            &copy; 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
?,JH?#Z.^n         </p>sh$Z^l
        {eval updatesession();}
#Xt!X(NFRcyu^C
wk         <!--{if debuginfo()}-->
AL:WJ*f$y*S2w!j!u    |Q/Fm-xz.p;X
        <p id="debuginfo"&gtrocessed in $debuginfo[time]
%yjB!r!h|T` second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->, uA8uS d-os
Gzip enabled<!--{/if}-->.</p>
kQa#lN         <!--{/if}--> BpA{DO
</div>
Hr.u Y _W[ <div id="footlinks">
n BW9dq4@q;m[    PV{1i*@{
        <p>{lang time_now}<!--{if $icp}--> <a

MoJ"@3GI1s4^c.U9p,N1Hn href="http://www.miibeian.gov.cn/"
c_uPW target="_blank">$icp</a><!--{/if}--></p>.Dh4r7q S9L.^
            <p>:I)WQ PxQ%x
                <a href="member.php?action=clearcookies&formhash={FORMHASH}">{lang clear_cookies}</a>
P%A8j&i{|9B jY!X0Kf    &pkQ CHz?
            - <a href="mailtoadminemail">{langY`(V~#^4T
contactus}</a> - <a href="$siteurl"]
U*h*xs'C
target="_blank">$sitename</a>
m)|3f7qUlp
K]                 <!--{if
/@|"s*aR*O $archiverstatus}--> - <a href="archiver/"
3S%hi+CV@6d v| target="_blank">Archiver</a><!--{/if}-->g`3Y y6yEL0x
                <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->
l0@+u.T?/yz%GR                 - <span class="scrolltop" >TOP</span>QH"G7d$k une}D
                <!--{if !empty($stylejumpstatus)}-->^S4}!O G
                    - <span id="styleswitcher" class="dropmenu" >{lang style}</span>
9z)c3h,|Yo hI                     <script type="text/javascript">
zV+Q a7A X                     function setstyle(styleid) {
+{&V:l"E9o&BJ                     <!--{if CURSCRIPT == 'forumdisplay'}-->
${$b#ZVpa9B+t@                         location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;
pIQa1r#y4M@sf+Fk                     <!--{elseif CURSCRIPT == 'viewthread'}-->
%fZI)gN                         location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;
X\w3m Rk.~Ee%a6]1J                     <!--{else}-->/g@-] `@U
                        location.href = '$indexname?styleid=' + styleid;
c'^`'J*D4^ M                     <!--{/if}-->
E_x^5[khL0vG                     }
%|^6U}x2S                     </script>
_i\(mp9kTchW                     <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">#t#baK-S4E&R
                    <ul>
w
}*O"k.K#K0i                         <!--{loop $stylejump $id $name}-->$bC(z.Eg4POr{
   uccw;q
                    <li{if $id == $styleid}2vZ'fzGCh"[e
class="current"{/if}><a href="###"8e;zFF&A
>$name</a></li>"]`'G9YU#F d8X
                        <!--{/loop}-->I
}:S8{;^ g
                    </ul>p*CAtH?9}
j
                    </div>0}c!ZP+` Ap
                <!--{/if}-->2V|SKMx}zH;Ui
            </p>
5v%^.?_IK,p#b </div>[/code][/font]现在我们先对footlink这部分进行设置，因为按照草图，它是显示在最下边的。参看这部分代码，发现icp备案号在这部分里边，因此，我们先将其剪切到footer框架里边。再将两个段落<p>合并成一个段落： 复制内容到剪贴板 代码:[font=新宋体][code]<div id="footlinks">
;lt(E/C6k;C4_-G    
f&o&f;[C|;i5h         <p>{lang time_now} - <a
:u2BZqp}g$_-W href="member.php?action=clearcookies&formhash={FORMHASH}">{lang
6F"c/]"BHF clear_cookies}</a>
r1E$tG'l9k                 - <a
{_O'l+_6I2E-F href="mailtoadminemail">{lang contactus}</a> - <a
o]0B@ wQ5A href="$siteurl" target="_blank">$sitename</a>
`2v9d,X7P            
b:X%fzOR0n&Z     <!--{if $archiverstatus}--> - <a href="archiver/"c
T8O _f
target="_blank">Archiver</a><!--{/if}-->2~ c;zM1~$SN~
                <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->
+[eI-JYo"x~                 - <span class="scrolltop" >TOP</span>VQ%C'd _%|m
                <!--{if !empty($stylejumpstatus)}-->
8}dz)S(L_&Kj                     - <span id="styleswitcher" class="dropmenu" >{lang style}</span>2xg
_g.H d[9k;W ijC
                    <script type="text/javascript">
'o GeTx(T C?0{L                     function setstyle(styleid) {-W5_#G'jr%T f:X
                    <!--{if CURSCRIPT == 'forumdisplay'}-->r C Up%W+w
                        location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;.p,o@]#CLj*{
                    <!--{elseif CURSCRIPT == 'viewthread'}-->
S"T:hi"cl0NZX                         location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;5H+uD"ZF.pts5z}
                    <!--{else}-->
/Oq$U-@A,q)o                         location.href = '$indexname?styleid=' + styleid;
|"}(X7t:g                     <!--{/if}-->
hL/f*T*[;yC"D |.O                     }^5@:AD Yl
                    </script>
}w*O6L RD                     <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">
3f{P4\E,pm\.J                     <ul>JiUD6V\3W k
                        <!--{loop $stylejump $id $name}-->Emb \k
   
#b\0c,X"{s ^M                     <li{if $id == $styleid}\it
A[b1fV0f m
class="current"{/if}><a href="###"

G#N4U:h0H$c3S_ O >$name</a></li>
[LTN/h!d.f:a8u                         <!--{/loop}-->I#},h1Z1n+H.nUSz
                    </ul>
,H
^!w'QB                     </div>
1l;W4]4y*QL                 <!--{/if}-->6]*v m)L5W7jM
            </p>9?"MT
a)q
muuM&s)n
</div>[/code][/font]更新下缓存，看一下现在的效果：$w ZI4i(X]:c[y k ~
[url=http://www.discuz.net/thread-733785-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0709/20070906_76533e1db18cdf9308b0xKQ9zKttd4H3.jpg.thumb.jpg[/img][/url] 6FQ~RH$Plcy
2007-9-6 14:20
4D)D;}a{
z0R&Hq0f&r F
%tU+a:f ]"]:{1?;y6E        有点错位哦哈，我们现在打开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，更新缓存看下效果：.GU,EXMD7M,w
[url=http://www.discuz.net/thread-733785-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0709/20070906_8a9e6723c20c20aaf4edreYK8nKQi0Q0.jpg.thumb.jpg[/img][/url] Sf~xoz}9t)_D
2007-9-6 14:20at r C}4S6B j

/Z Ps
VAoWZ
;v? \4x(dU4g9Hs         是不是已经ok了？文字能否下一点点？可以的哈，还是在footlinks里边，将height修改为26px，添加一个padding-top:5px，更新缓存，刷新页面看下：
k"M#H z'XxO0Hp [url=http://www.discuz.net/thread-733785-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0709/20070906_22b84c21bbe9db4374562zc2xGysADyE.jpg.thumb.jpg[/img][/url] f(r%x W0[O]bD
2007-9-6 14:20
k/hy#aWp*e bag%~3?msF7cD


R6GN)`u5x2YYm2` ? a         好了把，现在我们来处理论坛程序版权的地方： 复制内容到剪贴板 代码:[font=新宋体][code]<div id="footer">
J)MJI3]3@ w5t <p><!--{if
XKDp(a G0k
$icp}--> <a href="http://www.miibeian.gov.cn/"C1X3`H7?
target="_blank">$icp</a><!--{/if}--></p>!nr
vShw!UEG
<a
1YIt0ls7Z href="http://www.discuz.net" target="_blank" title="owered bysd
^&Y5}'eN
Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"
PBr"z2G
J alt="Discuz!" /></a>
0~ _R8NNu(r         <p id="copyright">$E#ej&vYB`at
_ w$a
   
wO P.pS-H}r,z`Ga         Powered by <strong><a href="http://www.discuz.net"@udURT
Zu5t;w
target="_blank">Discuz!</a></strong>
!b*gY2@qR[ <em>$version</em><!--{if !empty($boardlicensed)}-->1OJ BN$~joz.m
<a
4aC(Z{Xn1? href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"
*k_6H$U(WVw'DSn target="_blank">Licensed</a><!--{/if}-->3PY$h1H?a
            &copy; 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
k:YPC&U         </p>,rd ]cw{hWx
        {eval updatesession();}
-bW#DzKM+X*i         <!--{if debuginfo()}-->
I3H%kJ4Y
t Q
jj~[h    
)D.id8s~WDW[z         <p id="debuginfo"&gtrocessed in $debuginfo[time]$zxfmCf}Rh
second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,w0B(O1?W1]n5MD4U9}
Gzip enabled<!--{/if}-->.</p>!uA8R6w5T$Ki
        <!--{/if}-->
$A/L_*K+D^xi+]P </div>[/code][/font]这部分其实不怎么需要调整，只需要先将那个图标去掉，然后在css.htm定义一下宽度及位置即可。在css.htm文件里查找#footer {border-top: 1px solid {BORDERCOLOR}; background: {ALTBG2}; color:{TEXT}; padding: 12px 0;}，首先是设置宽度width:944px，边框去掉，背景去掉，使其居中text-align:center，margin:0auto，更新缓存，看下现在的效果：
|p(@6C6Q} [url=http://www.discuz.net/thread-733785-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0709/20070906_f0abb2ecbb1b84fb96a2SQ3BDXwIb9ey.jpg.thumb.jpg[/img][/url]
~,ofl,L/mBB&D 2007-9-6 14:201]}IL+Wso

%M Z!D0r
iz[%q 1jy"{_bbz+rD
       怎么样，可以了把～现在我们的头部和底部都定义好了，唯独差的就是中间部分的背景哦，因为.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; }，然后更新缓存，看下效果：
.IBn9FE [url=http://www.discuz.net/thread-733785-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0709/20070906_a5bc83779cc949ab939aP9u2KA8e3H89.jpg.thumb.jpg[/img][/url] _U\&fOF2in
2007-9-6 14:20:\'t;lG^[ pM

c$K!bLk!Kqe5KBo iC,k1p,^0M5^9@}
[url=http://www.discuz.net/thread-733785-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0709/20070906_c7a3dbf2157a0d6de39bqi1xEhhJGX5L.jpg.thumb.jpg[/img][/url]
5B.lTpcw 2007-9-6 14:204v9ez6N2[ Ie
Ioz&V0K

\f"Bp4y K[s [:p2[        已经可以了把，就是在顶部下边有一点空隙，应该是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浏览器下都没有问题，关于文字的颜色你可以自行到后台按照自己的品味进行修改，再次就都保持黑色啦。

深刻 发表于 2008-6-7 18:41

谢谢站长分享啊

石头 发表于 2008-6-7 21:21

不错啊5ur{ncED
支持

查看完整版本: DZ6.0风格制作教程----模板文件的修改----footer.htm的修改