模板代码解读与套用方法(附送春天素材大礼包）

冲上九重天 2011-06-05

展开全文

模板代码解读与套用方法(附送春天素材大礼包）

(2007-03-19 15:20:59)

自从自己装修博客半年多来,经常在“奔跑”的博客专题“模板”里看到各种颇具风格的模板，虽然也很喜欢，但也有不适合自己的地方。怎样才能随心所欲地设计自己的个性模板呢?于是,我就想把网上现成的模板代码淘来自己消化解剖开来，取其精华随意拼接，打造自己的个性空间就轻而易举了。

“奔跑”设计的新模板页面大多为1024*768，需要将显示器分辨率也作相应的调整，但调整后文字又感觉不舒服，且换了其它机器也不太习惯。

例如“奔跑”设计的“紫色的旋律”模板，代码比较长，有些自己认为冗余的可以去掉，并不影响整体效果。

我是把代码先全部复制出来，破解出通栏图片地址(查看代码里关键语句,以{background:url......开始,以.banner结尾的语句)和页面背景图片的地址(以background:url......开始，以..bodyBg结尾的语句)。如果有采用flash模板，就把flash地址找到（以.SWF结尾）。

然后，再搜来喜欢的壁纸或图片，自己加工成常规模板尺寸（一般通栏以770*260左右比较合适），最后再套用原代码。对原来模板有意隐藏的部分按钮菜单等内容的代码部分自己删除。只保留自己想要的部分。这样，简化了原代码，装修起来很容易上手，即使初学者也会很快掌握。

如果自己喜欢进一步美化，如增加附属部分代码，比如页面横向和右侧彩色滚动条，标题文字字体美化。如博客名字遮挡景物，可以使其位置上下或左右适当移动，文章内标题阴影字体等。

下面以我最近给新博友“诗语”装修博客的代码为例，简要解释一下代码各部分的含义。

<STYLE type=text/css>
.logo,.banner,.menu,.feeds .up,.feeds .down,.feeds .function,.links .up,.links .down,.links .mid,.photo .mid,.label .mid,.calendar .mid,.callboard .up,.callboard .down,.callboard .mid,.bodyBg,.bodyBottom,.sysW770,.gbook .up,.gbook .down,.feeds .page,.links .more,.add,.add .ico,.label .top,.links .bottom,.photo .top,.photo .bottom,.label .bottom,.label .top
{background:#transparent}
</STYLE><STYLE type=text/css>
.body{margin-top:0px;}
.bodybg{margin-left:-1px;}
</STYLE><STYLE type=text/css> .logo{display:none;}.foot{display:none;} </STYLE><DIV><FONT face=楷体_GB2312 color=#000000 size=3><STRONG></STRONG></FONT></DIV><STYLE type=text/css>
A { text-decoration: NONE; color: #000000}
A:hover { position: relative; left:1px; top:1px; }
</STYLE><STYLE>.bodyBg
{background:url("http://s13.sinaimg.cn/orignal/49fd8d4b7e17f46bccb1c");}</STYLE><STYLE type=text/css>.banner
{background:url(http://s13.sinaimg.cn/orignal/49fd8d4b1208511da399c) no repeat no scroll!mportant;}.banner
{height:260px}.menu
</STYLE>

<STYLE type=text/css>
.banner .title{
margin-left:90px;
margin-top:40px;
font-weight:bold;
}
.banner .link {
MARGIN-TOP:40px;
MARGIN-LEFT:60px
}
</STYLE>

代码使用说明：

第1部分绿色代码为flash钟表,不需要可以去掉！需要钟表的可以参见我的收藏超多精美flash时钟真情大放送（一）和超多精美flash时钟真情大放送（二）。

第2部分蓝色代码为透明flash（骑自行车的女孩）,起动态装饰效果，不需要可以也去掉！但空白面板不能单独使用，应该在前面随便写几个字或“ ”。需要者可以见我的:收藏的50个透明falsh大放送。

第3部分粉色代码为全套更换通栏及固定全部页面背景的代码。以前我介绍的简单装修的不足之处是左侧的评论栏等不能更换，特别是对“灰色轨迹”模板更不适用。现在的代码可以全部把页面换成一张图，整体效果好，最后赠送30张适合做页面背景的淡雅素材。

第4部分棕色色代码是使博客名字和收藏地址的两个横条移动的。防止遮挡破坏景色的完整性。自己调整尺寸即可！

如喜欢换博客名字字体（见我的主页“蓝梦飘雪”字样），并使“收藏地址”变成透明，可以参见我下面的评论里的补充说明部分。

PS：说了半天这么长的代码怎样套用呢？其实换模板很简单的。你可以闭上眼睛不管前面的代码是什么含义（都是些自定义特色按钮等），只要把我加粗显示的的红色部分（背景图地址）和蓝色（通栏地址）换上自己喜欢的图片地址就可以了。但要特别注意通栏图片高度尺寸（上例代码高度是260PX，你如选我下面的素材尺寸是770*280，就必须将高度改为280PX，否则有空隙影响美观），是不是超级简单呢？还不快来把的春天的美景请回自己家去？

又PS：对已经装修过的只要用新代码替代原来的代码直接保存，刷新就可以看到效果了。或者将代码复制到你的其它模块后面也可以（不建议，修改不方便）。

对新建模板的方法与其它新建模块方法相同，因字文章数超出,贴在第一条评论里!也可以参看我以前的“博客技巧”文章里的介绍。只不过博客升级后“控制面板”改名叫“管理博客”了，此处不再赘述！

附送素材大礼包: