OBLOG OBLOG用戶模板教程（中級(jí)）

導(dǎo)航: OBLOG使用手冊(cè) | 首頁(yè) | WordPress | MovableType | X-Space | b2evolution | LifeType | Textpattern | Bo-Blog | SaBlog-X

OBLOG 朋友們，你們好，我們來(lái)講一下用戶模板制作方法。此教程是以DIV+CSS制作模板為例，主要針對(duì)中級(jí)用戶對(duì)象!

• 一、工具

繪圖工具PhotoShop或FireWorks

制作頁(yè)面工具DreamWeaver或記事本、EditPlus 初級(jí)用戶最好選用DEREAMWEAVER，因?yàn)檫@款軟件有可視化窗口，方便大家制作。

• 二、測(cè)試

到OBLOG官方站下載OBLOG程序，然后再安裝IIS，把本地機(jī)器架設(shè)成一個(gè)服務(wù)器，這樣來(lái)預(yù)覽我們制作后模板效果。

• 三、模板準(zhǔn)備工作

新建一個(gè)文件夾oblog，在新建一文件index.html。將文件保存到這個(gè)文件夾下。路徑是這樣：oblog/index.html;在oblog文件夾里建一個(gè)文件夾image,這個(gè)文件夾是用來(lái)放圖片和樣式表的。也可以不用這樣，隨個(gè)人喜好。

• 四、模板分析

下面我們以這個(gè)模板為例子進(jìn)行講解：

在PHOTOSHOP里把圖做好，然后對(duì)它進(jìn)行切割。這個(gè)模板是左右結(jié)構(gòu)。寬度為1003PX滿屏顯示。

進(jìn)入DREAMWEAVER進(jìn)行編輯

我們?cè)趇ndex.html里進(jìn)行編輯，也就是主模板

不會(huì)手寫(xiě)代碼，我們來(lái)用DREAMWEAVER進(jìn)行幫助。

1．我們先建一個(gè)樣式表，擴(kuò)展名為 .css的文件，保存到oblog/image路徑下．

保存完樣式文件，我們來(lái)制作頭部部分

這是一個(gè)單獨(dú)的圖片，做為頭部背景圖片，把圖片保存為headbg.jpg，寬度為1003px，高度為65px.

ＣＳＳ樣式表定義

定義寬度、高度、邊距、間距等都要加單位，為0時(shí)可以不用加

主體定義 Body {margin:0;padding:0;height:100%;}/**主窗口定義為邊距、間距為0，因?yàn)榇翱跁?huì)自帶10個(gè)像素的寬度，高度為100%顯示。 Input,Select,Ul,Li,p {margin:0;padding:0}/**表單，li標(biāo)簽進(jìn)行定義為邊距、間距為0，因?yàn)樗鼈儠?huì)自帶10個(gè)像素的寬度**/ img { border: 0; }/**針對(duì)圖像進(jìn)行定義，因?yàn)橛械臅r(shí)候圖片會(huì)出現(xiàn)邊框。**/ li { list-style: none; }/**做模板時(shí)加LI時(shí)會(huì)出現(xiàn)列表圖案，我們將它顯示為無(wú)。**/ div{ font-size: 12px; }/**將文字定義為12像素，減少以后重復(fù)定義。**/ input { font-family: tahoma,Arial,Helvetica,sans-serif; font-size: 12px; }

總鏈接定義 a:link{ text-decoration: none; color: #8E8E8E; } a:visited { text-decoration: none; color: #8E8E8E; } a:hover { text-decoration: underline; color: #FFf000; } a:active { text-decoration: underline; color: #8E8E8E; }

頭部定義

#head{background:no-repeat url(headbg.jpg) left top;width:1003px;height:65px;}/**將背景圖像headbg.jpg 居左居頂寬度為1003像素，高度為65像素，不重復(fù)顯示。

背景圖像定義完后，我們來(lái)定義用戶名以及用戶地址

#head #headleft{float:left;width30%;line-height:65px;font-size:20px;font-weight:bold;color:#fff;text-align:center;}/**定義寬度為總寬度的30%左對(duì)齊的層，字體為20像素，加粗，顏色為白色，文字居中顯示。**/

#head #headright{width:30%;float:right; padding:20px 0 0 0;height:30px;}/**寬為總寬度的30%，居右對(duì)齊的層，距上邊距為20像素，因?yàn)槲覀円脩舻刂反怪本又酗@示。**/

提示：此行樣式的意思是：在ID為head的塊中，ID為headright的塊的樣式（嵌套）。這樣可以避免重復(fù)的ID因樣式的不同而導(dǎo)致頁(yè)面混亂，例如：在ID為head2的塊中也有一個(gè)名字為#headright的塊，我們可以定義為：#head2 #headright{……}，這樣，ID相同而互不影響。

#head #headright .blogurl{width:90%;height:25px;border:1px solid #ccc;background-color:333; color:#fff;line-height:25px;}

定義導(dǎo)航部分

#dao {background-color:#333;width:1003px;padding:0 20px 0 ;color:#fff;world-spacing:10px;text-align:right;height:25px;line-height:25px;border-bottom:1px solid #666;} #dao a{text-decoration:none;color:#fff;} #dao a:hover{text-decoration:underline;color:#fff;}

主體內(nèi)容部分

重點(diǎn)講解

這是左右框架，我們先定義一個(gè)大層，然后在大層里定義一個(gè)居左對(duì)齊的層和一個(gè)居右對(duì)齊的層。然后在定義左右兩層的樣式

#main{margin:0;width:983px;padding:0 20px 0 0; background-color:#23282E;height:auto;margin:0;overflow-y:auto;}定義main大層，邊距為0，間距離右有20像素，所以寬度設(shè)為983像素。定背景色為深黑.，也可以將背景色換成圖片，活學(xué)活用。

#main #mainleft{float:left;width:195px; margin:0; background-color:#23282E;padding:0 10px 0 10px;}左層寬為215像素，因?yàn)殚g距離左右有10像素，將寬度+間距總共為215像素

居左對(duì)齊。

#main #mainright{float:left;width:765px;background-color:#F3F3F3; }右層寬為765像素，定背景色為淺灰，居右對(duì)齊。

定義左層樣式 MAINLEFT

標(biāo)題定義

#main #mainleft .tiao{height:40px;color:# A6A6A6;border-bottom:1px dotted # 808186;text-align:left; padding:10px 0 0 0;}/**定義高度為25像素，字顏色為淡灰，文字居左對(duì)齊，加下邊線為1像素，虛線顯示。**/

內(nèi)容列表定義

#main #mainleft .text li{color:# 808186;line-height:25px;list-style:none;width:99%px;border-bottom:1px solid #333; text-align:left;}

/**定義文字顯示樣式，用LI是因?yàn)槲覀円獊?lái)定義文字標(biāo)題下面有一個(gè)下劃線，是列表內(nèi)行的樣式。行距為25像素，列表顯示無(wú)**/

#main #mainleft .text li a{color:# 808186;text-decoration:none;display:block;height:25px;}

/**內(nèi)容鏈接顯示效果，將它設(shè)為塊級(jí)顯示，因?yàn)槲覀円x鼠標(biāo)經(jīng)過(guò)效果。在給它一個(gè)高度。**/

#main #mainleft .text li a:hover{color:# fff;background-color:#000000;}

/**鼠標(biāo)經(jīng)過(guò)效果**/

日歷定義

#calendar{width:180px; }定義總寬度 #calendar caption {font:12px 'Century Gothic', Arial, Helvetica, sans-serif; }內(nèi)容定義 #calendar table { border-collapse: collapse; color: #ccc;} 大表格定義 #calendar th{ font: normal 12px; } #calendar td { text-align:center;font-size: 12px; color: #ccc; height: 15px; width: 15px;} 單元格定義 #calendar td a {display:block;width:15px;height:15px;color: #426873;text-decoration:none;} 鏈接日期是一個(gè)塊級(jí)元素，定義高寬度以及顏色。 #calendar td a:hover{ color: #FFF000;}

可以查一下日歷那源代碼，就知道為什么這樣定義了

右層定義

這里定義的就是副模板

日志標(biāo)題定義

#main #mainright #topic{background-color:# E2E2E2 ;border-bottom:1px dotted #CDCDCD;font-size:16px;font-weight:bold;color:# 316E83 ; height:30px;line-height:30px;padding:0 0 0 10px;text-align:left;} #main #mainright #topic a{ color:# 316E83 ; font-size:16px;text-decoration:none; } #main #mainright #topic a:hover{ color:# 316E83 ; font-size:16px;text-decoration:underline; } /**日志標(biāo)題定義**/ #main #mainright #topic span{font-size:12px;color:#999;}/**日期作者進(jìn)行定義**/ 文章內(nèi)容定義 #main #mainright .logtext{padding:7px;line-height:20px;font-size:14px;color:#666;text-align:left; overflow: hidden;width:100%;} /**距上下左右間距為7像素，行高為20像素，14像素灰色的字。添加圖片太大會(huì)撐開(kāi)頁(yè)面，所以加overflow: hidden;width:100%;來(lái)定義，讓多余部分給裁切**/ 回復(fù)、閱讀定義 #main #mainright #com{border-top:1px dotted #999;text-align:right;color:# 346A82 ;padding:5px;height:30px;} /**文字居右顯示，間距為5像素，高度為30像素。**/ #main #mainright #com a{ color:# 346A82 ;text-decoration:none;} #main #mainright #com a:hover{ color:# 346A82 ;text-decoration:underline;}

定義翻頁(yè)效果

#showpage{text-align:left;padding:5px;}

CSS我們定義完，接下我們?cè)谥髂０謇镞M(jìn)行制作

進(jìn)入Index.html文件即:主模板

到index.html文件中進(jìn)行調(diào)用這個(gè)樣式表．代碼如下：

<link href="image/css.css" rel="stylesheet" type="text/css" />

然后用DIV套樣式 <div align=”center”> <div id=”head”> <div id=”headleft”>$show_blogname$ </div> <div id=”headright”> <div class=”blogurl”>$show_blogurl$ </div> </div> </head> <div id=”dao”>$show_subject_l$</div> <div id=”main”> <div id=”mainleft”> <div class=”tiao”>用戶公告</div> <div class=”text”>$show_placard$ </div> <div class=”tiao”>日歷</div> <div class=”text”>$show_calendar$ </div> <div class=”tiao”>最新日志</div> <div class=”text”>$show_newblog$</div> <div class=”tiao”>最新評(píng)論</div> <div class=”text”>$show_newmessage$</div> <div class=”tiao”>最新回復(fù)</div> <div class=”text”>$show_comment$</div> <div class=”tiao”>友情鏈接</div> <div class=”text”>$show_links$</div> <div class=”tiao”>站點(diǎn)信息</div> <div class=”text”>$show_info$</div> </div> <div id=”mainright”>$show_log$</div> </div> </div> 主模板定義完，在定義一下副模板

新建一文件fu.html <div id=”topic”>$show_topictxt$ <span>$show_addtime$$show_author$</span></div> <div class=”logtext”> $show_logtext$</div> <div id=”com”>$show_more$</div> OK,用戶模板制作完成

測(cè)試一下在IE6下好用

模板可能在FIREFOX下看錯(cuò)位，可以這樣定義。

找到出錯(cuò)的地位,然后進(jìn)行一下更正

FIREFOX瀏覽器

導(dǎo)航 *html #dao {background-color:#000;width:983px;padding:0 20px 0 ;color:#fff;world-spacing:10px;text-align:right;height:25px;line-height:25px;} *html #main{margin:0;width:1003px;margin:0 20px 0 0; background-color:#23282E;height:auto;padding:0;} *html #main #mainleft{float:left;width:195px; padding:0; background-color:#23282E;margin:0 10px 0 10px;} *html #main #mainright{float:left;width:765px;background-color:#F3F3F3; } margin , padding在IE和FIREFOX里顯示是不同,瀏覽器識(shí)別也不同