WSBLog(或者z-blog)液体三栏布局修改过程 Z-Blog 1.7

用户 wubuku 2006-12-21 9767

所谓的液体三栏布局,就是左右两栏固定宽度,中间一栏的宽度随着浏览器窗口的大小自由变化。

三栏液体布局能最大限度地利用空间。比如我的BLOG:http://www.wubuku.com用的就是三栏液体布局。

比如,有了液体三栏布局,就可以向google申请一幢摩天广告大楼放在边栏上,整个版面也不会显得局促。呵呵,浪费资源就是犯罪啊。

怎么将z-blog缺省的两栏布局修改成液体三栏布局呢?其实很简单的,修改一下Template目录中的模板文件,包上几个div标签就可以了。

怎么修改?我们先看看z-blog缺省的两栏布局的模板文件是什么样子的,以Template目录下的default.html为例,找到下面几个div标签:


<div id="divNavBar">
    <h3><#ZC_MSG052#></h3>
    <ul>
    <#CACHE_INCLUDE_NAVBAR#>
    </ul>
</div>

<div id="divMain">
    <#template:article-multi#>
    <div class="post pagebar"><#ZC_MSG042#>:<#template:pagebar#></div>
</div>

<div id="divSidebar">
    <!-- 省略边栏的内容 -->
</div>



我们将他们改为这个样子:


<div id="divNavBar">
    <h3><#ZC_MSG052#></h3>
    <ul>
    <#CACHE_INCLUDE_NAVBAR#>
    </ul>
</div>

<!-- 新增加的div容器 -->
<div id="divMainContainer">

    <div id="divMain">

        <!-- 新增加的div容器 -->
        <div id="divMainInMainContainer">

            <!-- 新增加的div,包裹着原来divMain中的帖子内容 -->
            <div id="divMainInMain">

                <#template:article-multi#>
                <div class="post pagebar"><#ZC_MSG042#>:<#template:pagebar#></div>

            </div>

        </div>

        <!-- 新增的边栏 -->
        <div id="divSidebar2">

            <!-- 比如,我们可以把原来边栏中的“网站目录”移到这个新增加的边栏中 -->
            <div class="function" id="divCatalog">
            <h3><#ZC_MSG026#></h3>
            <ul>
            <#CACHE_INCLUDE_CATALOG#>
            </ul>
            </div>

            <!-- 比如,我们可以把原来边栏中的“站点统计”移到这个新增加的边栏中 -->
            <div class="function" id="divStatistics">
            <h3><#ZC_MSG029#></h3>
            <ul>
            <#CACHE_INCLUDE_STATISTICS#>
            <#CACHE_INCLUDE_WHOLE_STATISTICS#>
            </ul>
            </div>

            <!-- 比如,我们可以在这个边栏中加上google搜索 -->
            <div class="function" id="divGoogleSiteSearch">

<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="google_window">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
<br/>
<input type="hidden" name="domains" value="www.oucsoft.com"></input>
<label for="sbi" style="display: none">输入您的搜索字词</label>
<input type="text" name="q" size="25" maxlength="255" value="" id="sbi"></input>
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="搜索网络"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.oucsoft.com" id="ss1"></input>
<label for="ss1" title="搜索 www.oucsoft.com"><font size="-1" color="#000000">www.oucsoft.com</font></label></td>
</tr>
</table>
<label for="sbb" style="display: none">提交搜索表单</label>
<input type="submit" name="sa" value="搜索" id="sbb"></input>
<input type="hidden" name="client" value="pub-2632660065646967"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="GB2312"></input>
<input type="hidden" name="oe" value="GB2312"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="zh-CN"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->

            </div>

            <!-- 比如,我们可以在这个边栏中盖上一幢google Adsense广告摩天大楼 -->
            <div class="function" id="divGoogleAdSense">

<script type="text/javascript"><!--
google_ad_client = "pub-2632660065646967";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
//2006-12-18: www.oucsoft.com
google_ad_channel = "7202280454";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

            </div>	
				
        </div>

    </div>

</div>

<div id="divSidebar">
    <!-- 省略原来的边栏的内容 -->
</div>



修改完default.html模板,我们依次修改catalog.html、single.html等文件。

最后,让我改CSS风格文件吧。比如,我的BLOG的CSS是这样的(不完整代码,只列出关键部分):


/*---------------------------------------------------------------*/
#divAll{
	width:99%;
	margin:0 auto;
	padding:0
}

#divPage{
	width:100%;
	margin:0;
	padding:0 0 0 0;
	text-align:left;
}
/*
#divMiddle{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:left;
	float:left;
}
*/
#divTop{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:left;
	float:left;
	height:100px;
}

#divSidebar{
	width:200px;
	margin:0;
	padding:0;
	text-align:center;
	float:left;
	border-right:1px solid #CACACA;
}
/*
#divInnerSidebar {	
}
*/

#divMainContainer{
	float:right;
	margin:0px 0px 0px -205px;
	width:100%;
}
#divMain{
	margin:0px 0px 0px 205px;
	padding: 0;
	/*text-align:left;*/
}

#divBottom{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;
	float:left;
	height:70px;
	border-top:2px solid #8488D2;
}

#divMainInMainContainer{
	float:left;
	width:100%;
	margin-right:-235px;
	text-align:left;
}
#divMainInMain{
	margin-right:235px;
	text-align:left;
}
#divSidebar2
{
	float:right;
	width:230px;
	margin:0 0 0 0;
	padding:0 0 10px 0;
	text-align:center;
	border-left:1px solid #CACACA;
}



好了,更改Blog设置,使用新的风格样式,然后重建文件,整个网站就变成三栏目液体风格了。

我修改的用于三栏液体布局的两套样式,供大家下载:

一套是改自z-blog缺省两栏风格的样式。

——示例网站:http://www.oucsoft.comhttp://www.66ph.com

一套是改自simple两栏风格的样式。

——示例网站,我的BLOG:http://www.wubuku.com

至于怎么修改Template,大家还是依据自己的口味,自己动手吧。
最新回复 (3)
全部楼主
  • 用户 aleax 2007-2-20 0
    引用 2
    😁 😁 😁 😁

    秘籍

  • 用户 zhen8211 2007-2-27 0
    引用 3
    good
  • 用户 fokid 2007-3-5 0
    引用 4
    改动不小,把版权都去了

    我的小站http://www.fokid.net
    Cobainhttp://www.cobain.cn

    • ZBlogger技术交流中心
      5
          
返回