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

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

OBLOG朋友們，你們好，我們來講一下用戶模板制作方法。此教程是以表格制作模板為例，主要針對(duì)初級(jí)用戶對(duì)象，比較簡單，高手路過吧：

• 一、工具

繪圖工具PhotoShop或FireWorks

制作頁面工具DreamWeaver或記事本、EditPlus

初級(jí)用戶最好選用DEREAMWEAVER，因?yàn)檫@款軟件有可視化窗口，方便大家制作。

• 二、測試

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

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

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

• 四、模板分析

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

在PHOTOSHOP里把圖做好，然后對(duì)它進(jìn)行切割。這個(gè)模板是上面一個(gè)大BANNER下面是文章主體部位。寬度為778PX在屏幕里居中顯示。

我們把這里面的圖片都切割一下分別取個(gè)名字:BANNER.GIF

NAV.GIF

TIAO.GIF

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

我們在index.html里進(jìn)行編輯，也就是主模板

我們來用DREAMWEAVER(DW)進(jìn)行幫助。

一、定義主窗口

首先看它的背景色以及邊間距,在定義一下默認(rèn)字體大小。然后在DW修改菜單里選擇頁面屬性,會(huì)彈出一個(gè)對(duì)話框,具體參數(shù)如下:

二、制作大表格

仔細(xì)看大圖外部有個(gè)邊框，我們先做一個(gè)邊框是1像素的表格

◆點(diǎn)擊

插入菜單－表格　會(huì)彈出對(duì)話框，具體參數(shù)如下：

提示：如果在DW里插入表格，設(shè)置表格的“邊框粗細(xì)”為1像素，那么我們看到的實(shí)際頁面中的表格其實(shí)并不是1像素寬的邊框，我們用下面的方法制作邊框是1像素的表格：

◆插入表格后，將表格居中（如下圖）。再設(shè)置表格其他屬性（間距為１，背景顏色為：#623921）

文件:Ob600.jpg

◆點(diǎn)擊表格的每個(gè)單元格，在下面的“屬性”面板中設(shè)置背景色為白色 #FFFFFF，這時(shí)細(xì)線邊框就會(huì)出現(xiàn)。如下圖：

三、頭部

◆在大表格里插入新的表格，在DW下面的屬性面板中將BANNER.JPG大圖做成背景圖，調(diào)節(jié)表格高度和寬度讓背景圖片全部顯示出來。

◆在表格里放入博客地址標(biāo)簽:"$show_blogurl$"。如下圖：

四、導(dǎo)航欄

◆在ＤＷ里新建一個(gè)表格，置于Banner表格的下方，設(shè)置表格的背景為NAV.GIF圖片

◆加入導(dǎo)航標(biāo)簽:"$show_subject_l$" 導(dǎo)航欄就出來了，如下圖：

五、內(nèi)容部分

新建一個(gè)一行兩列的大表格，左側(cè)放登錄、日志、日歷等一些標(biāo)簽

右側(cè)為日志內(nèi)容。

（1）左側(cè)開始

◆左側(cè)表格里是居中對(duì)齊，為了防止表格里內(nèi)容貼到邊框上，不美觀，所以我們讓他來居中，離左右都有一點(diǎn)距離：新建一個(gè)兩行一列的表格，寬度為左側(cè)寬度的９８％；

第一行做為標(biāo)題，第二行用來放置標(biāo)簽。

將TIAO.GIF做為第一行背景圖像

制作方法如下：

◆復(fù)制我們剛做的這個(gè)公告的表格，粘貼于其下方，換下標(biāo)題，標(biāo)簽。以此類推，左側(cè)制作完成。

（２）右側(cè)部分=====副模板定義

◆加入一個(gè)標(biāo)簽:"$show_log$" 就可以：把標(biāo)簽:"$show_log$"粘貼到右側(cè)的表格內(nèi)，這個(gè)標(biāo)簽調(diào)用副模板里的內(nèi)容。至此，用戶主模板制作完成。

六、副模板　Fu.html

整體效果如下：

１．定義日志時(shí)間

打開Fu.html插入新表格，加入標(biāo)簽:"$show_addtime$"，鼠標(biāo)置于單元格內(nèi)部，在屬性面板中設(shè)置字體顏色#666666。具體操做如下：

2．日志標(biāo)題定義

新建一個(gè)表格，放置日志標(biāo)題標(biāo)簽:"$show_topictxt$"，這里需要定義一下鏈接樣式,窗口菜單――CSS樣式，右面會(huì)出現(xiàn)CSS對(duì)話框

點(diǎn)新建樣式按鈕，效果如下，按照下圖制作

點(diǎn)擊確定，按照以下參數(shù)設(shè)定。

點(diǎn)擊確定，這樣文字鏈接時(shí)的效果完成，接下來制作鼠標(biāo)經(jīng)過效果。

在新建樣式

日志標(biāo)題鏈接效果制完成。

3．日志內(nèi)容定義

新建一個(gè)表格，把標(biāo)簽$show_logtext$放進(jìn)去，具體效果如下：

• 注意：如果上傳大圖就會(huì)把表格撐開，所以要加上這個(gè)代碼，效果圖如下：

選中表格，加樣式

4. 回復(fù)閱讀定義

新建一個(gè)表格，將$show_more$標(biāo)簽放入表格中，將標(biāo)簽選中在屬性面板里設(shè)置樣式.效果圖如下：

＊文字居右對(duì)齊，顏色為橙色

副模板制作完成。

• • 總體鏈接效果

以上是鏈接時(shí)候效果A:LINK

以上是鏈接訪問過的效果A:VISITED

以上是鏈接時(shí)候效果A:hover

以上是鼠標(biāo)點(diǎn)下去的效果A:ACTIVE

主模板總體效果

副模板總體效果：