上一节:6.0风格制作(升级)教程----后台模板添加设置
四、模板文件的修改----header.htm的修改
在上一节里我们已经简单设置了界面风格的大体模样,那么现在我们开始不断的完善我们的风格。
对比我们勾画的草图和我们现在的风格,我们发现,在草图上我们的菜单栏是在最上边的,所以呢,我们首先调整菜单栏和头部的位置。打开header.htm文件,可以清楚的看到,这个文件只有两个结构,一个是菜单栏 <div id="menu">~~~~~</div>,一个是头部 <div id="header">~~~~~</div>,首先我们将这两部分调换,使菜单栏居上,header据下。更新css缓存,我们可以看到头部变成下图的模样。
header.htm
然后我们现对menu做修改,打开css.htm文件,查找#menu { height: 31px; border: 1px solid {CATBORDER}; {HEADERMENUBGCODE}; background-repeat: repeat-x; },现在我们需要对这个样式进行修改。第一个height,我们看下我们的menu背景图片menu_bg.gif的宽度和高度,分别为944px和34px,所以我们将这里的height值做修改,并添加上一个宽度,第二个border,因为我们的背景图片上本上已经带了边缘,所以这里我们去掉这里的border宽度,直接删除这句,第三个,是后台界面设置的logo设置,我们不再后台定义logo所以,也将其删除,第四个是定义背景是否平铺的,我们对其进行修改,修改为background:url({IMGDIR}/menu_bg.gif) center no-repeat; 这就设置了背景,以及背景位于中间,不平铺。这样子,我们的menu就定义好了,更新下缓存看看效果。
我们看到菜单栏的两边的竖线几乎没有显示出来,这是为什么呢?因为我们后台定义的外表格宽度的问题,那个宽度是.wrap的宽度,而我们的头部和菜单栏正好在这里边包含着,现在我们要把他们从.wrap分离出去。可能有人会问,我们为什么要把他分离出去呢?大家看下我们的草图,我们的论坛表格是缩进去的,如果我们是头部和菜单栏在.wrap中的话,那么我们的头部和论坛表格会是同样的宽度,对我们的这款风格是不适合的,因此我们要将头部分离出去。分离的方法很简单,只需将header.htm文件里边的<div class="wrap">剪切到文件的末尾即可。更新缓存,看下我们现在的样子:
是不是已经好了呢?细心的朋友应该会发现,在右边还是有一个小竖线,这是因为菜单栏的ul定义了一个右边框,我们将其去掉即可,打开css.htm文件,查找#menu ul { float: right; padding: 4px 10px 0; border-right: 1px solid {TABLEBG}; },将最后的那一句去掉即可。更新缓存,看下现在的样子:
是不是已经好了哈。不过这是在ie下正常哦,在ff下就会移动到左边的哦,所以我们还需要为#menu进行margin定位,在里边加入margin:0 auto;即可.
总结:在修改#menu时,我们修改了两处,一个是#menu,一个是#menu ul,修改后的样式为:
#menu { height: 34px; width:944px; background:url({IMGDIR}/menu_bg.gif) center no-repeat; margin:0 auto;}
#menu ul { float: right; padding: 4px 10px 0;}
现在我们开始修改我们的logo部分。我们现在看到的logo是一个大叉,logo这部分的代码很简单,大家应该都能看懂:<div id="header"><h2><a href="$indexname" title="$bbname">{BOARDLOGO}</a></h2><div id="ad_headerbanner"></div></div>,h2所包含的就是我们的logo部分,首先我们将这部分修改为<div id="header"><h2>依林家族</h2><div id="ad_headerbanner"></div></div>(里边的依林家族,大家修改为自己的论坛名字即可),为什么要这样子做呢?原来的情况下,是一个链接,点击一下就回到首页,感觉没太大用处,因为有nav条嘛,干嘛再点击这个呢?因此我们就将其去掉,设置为背景,而这个部分就填上论坛的名称,说不定还能被搜索引擎偷了呢。
改好之后呢,我们现在来定义css.htm文件,来完成logo的显示。
打开css.htm文件,查找#header { width: 100%; overflow: hidden; },看一下我们的头部图片head_bg.gif,大小为944*156,因此我们将header的宽高做修改,添加上背景图片:background:url({IMGDIR}/head_bg.gif) center no-repeat;后边的overflow属性可以去掉,换成margin的定位(跟menu一样的原因)。更新缓存,看下现在的效果:
刷新看到首页的文字覆盖在背景上边,那我们该怎么去掉呢?打开css.htm文件,查找#header h2 { float: left; padding: 5px 0; },将其隐藏即可,修改为:
#header h2 { display:none; },更新缓存,会看到文字已经消失。看看现在头部的效果,是不是跟草图上差不多哦!~
总结:在修改#header时,我们修改了两处,一处是#header,一处是#header h2,修改后的样式为:
#header { width: 944px; height:156px; margin:0 auto; background:url({IMGDIR}/head_bg.gif) center no-repeat;}
#header h2 { display:none;}
下节预告:模板文件的修改----footer.htm的修改
[
本帖最后由 南芝恋 于 2007-9-6 14:37 编辑 ]