6.0风格制作（升级）教程----模板文件的修改----header.htm的修改

南芝恋

上一节：6.0风格制作（升级）教程----后台模板添加设置

四、模板文件的修改----header.htm的修改

        在上一节里我们已经简单设置了界面风格的大体模样，那么现在我们开始不断的完善我们的风格。

        对比我们勾画的草图和我们现在的风格，我们发现，在草图上我们的菜单栏是在最上边的，所以呢，我们首先调整菜单栏和头部的位置。打开header.htm文件，可以清楚的看到，这个文件只有两个结构，一个是菜单栏  <div id="menu">~~~~~</div>，一个是头部  <div id="header">~~~~~</div>，首先我们将这两部分调换，使菜单栏居上，header据下。更新css缓存，我们可以看到头部变成下图的模样。

下载 (59 KB)

2007-9-5 16:35

        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就定义好了，更新下缓存看看效果。

下载 (53.78 KB)

2007-9-5 16:35

      
        我们看到菜单栏的两边的竖线几乎没有显示出来，这是为什么呢？因为我们后台定义的外表格宽度的问题，那个宽度是.wrap的宽度，而我们的头部和菜单栏正好在这里边包含着，现在我们要把他们从.wrap分离出去。可能有人会问，我们为什么要把他分离出去呢？大家看下我们的草图，我们的论坛表格是缩进去的，如果我们是头部和菜单栏在.wrap中的话，那么我们的头部和论坛表格会是同样的宽度，对我们的这款风格是不适合的，因此我们要将头部分离出去。分离的方法很简单，只需将header.htm文件里边的<div class="wrap">剪切到文件的末尾即可。更新缓存，看下我们现在的样子：

下载 (44.6 KB)

2007-9-5 16:35

        是不是已经好了呢?细心的朋友应该会发现，在右边还是有一个小竖线，这是因为菜单栏的ul定义了一个右边框，我们将其去掉即可，打开css.htm文件，查找#menu ul { float: right; padding: 4px 10px 0; border-right: 1px solid {TABLEBG}; }，将最后的那一句去掉即可。更新缓存，看下现在的样子：

下载 (40.21 KB)

2007-9-5 16:35

        是不是已经好了哈。不过这是在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的显示。

下载 (26.53 KB)

2007-9-5 16:35

        打开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一样的原因）。更新缓存，看下现在的效果：   

下载 (29.3 KB)

2007-9-5 16:35

        刷新看到首页的文字覆盖在背景上边，那我们该怎么去掉呢？打开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 编辑 ]

南芝恋

先坐沙发了哦

数学菜菜

板凳！！！！！！！！！！！

数学菜菜

请教楼主：如何将dz6的首页版主列表搞成和dz5.5一样啊？谢谢了！

数学菜菜

首先，感谢楼主提供很多修改方法。
请问dz6.0自带的个人空间文章内容显示的是哪个文件？？
我要修改显示个人博客内容的那个文件，但是我找不到？我菜，请求帮助，谢谢！

ilysony

强烈支持..................

lzbnet

谢谢！！！！！！！！！！！

sear

辛苦了
感谢ing

nihao9129

辛苦了
感谢ing

爱雨冷雪

感谢啊.....去研究看看...