国产美女mm131爽爽爽免费_ OBLog　3.0　用戶(hù)模版制作教程--▕|▊在劫難逃___

OBLog 3.0 用戶(hù)模版制作教程

2006-1-9 14:17:00 By ____落。

現在的BLOGER越來(lái)越多，擋都擋不住，是什么時(shí)候大家都開(kāi)始寫(xiě)BLOG了呢？BLOG就相當于自己在網(wǎng)上的一個(gè)家，既然是家就要有自己的個(gè)性，每個(gè)人都希望自己的BLOG與眾不同，在這里SNAKE就為大家講一下BLOG模版的怎樣做成的。以“沉靜青春 youth CSS系列 12”模版為示例，在http://skin.midicn.cn/jc/mbjc/htm/youth.rar可以下載到，內有PNG（Fireworks MX 2004修改）源文件。

　　本教程都是在2000系統IE6.0，Mozilla Firefox 1.0下測試。不敢保證都和SNAKE看到的一樣。之所以要用Mozilla Firefox測試是因為那5%的用戶(hù)。不過(guò)說(shuō)真的，盡管有時(shí)候我很想拋棄他們……

一、基本必要條件

1.1 做模版需要什么能力嗎？

　　做OBLog的模版你需要了解HTML和CSS還有美工基礎，當然這不是很難，甚至可以說(shuō)很簡(jiǎn)單，不會(huì )的朋友馬上學(xué)，買(mǎi)書(shū)一個(gè)星期就可以學(xué)會(huì )。另外就是細心、耐心，畢竟我們也是在做設計，嚴格要求是當然的。

1.2 準備工具

　　一臺電腦，制作網(wǎng)頁(yè)的工具M(jìn)acromedia Dreamweaver MX 2004和做圖工具M(jìn)acromedia Fireworks MX 2004（PS也可以）。測試瀏覽器Mozilla irefox，IE6.0在XP下自帶。截圖工具HprSnap5，論壇里有使用方法（滾屏截圖）。這幾個(gè)工具可以在天空下載站下載到。

Macromedia Dreamweaver MX 2004：
http://www2.skycn.com/soft/860.html
Macromedia Fireworks MX 2004：
http://www2.skycn.com/soft/1824.html
Mozilla Firefox V1.0.6 中文增強版
http://www2.skycn.com/soft/20595.html
SN:
Macromedia Dreamweaver MX 2004:
WPD700-52206-61494-40475
Macromedia Fireworks MX 2004：
WPD700-52206-61494-40475
　　這里還要推薦一款很好用的CSS編寫(xiě)軟件：TopStyle3。你可能用不到。下載地址：http://skin.midicn.cn/soft/TopStyle3.rar
　　以及《樣式表中文手冊css2》是CHM格式的，可直接打開(kāi)。你一定要用到。下載地址：http://skin.midicn.cn/soft/css2.rar
　　屏幕滾動(dòng)截圖工具HprSnap5。做好模版后截圖工具，可能用到。下載地址：http://skin.midicn.cn/soft/HyperSnap-DX.rar

二、構思

2.1 色調

　　首先要考慮BLOG的基本色系是什么顏色，然后是基本布局，這里我們不做太復雜的，只做最簡(jiǎn)單的考慮。這里我考慮綠色，而且只考慮綠色和灰色搭配。（傳說(shuō)中灰色是萬(wàn)能色，就好象O型血一樣。）

2.2 布局

　　BLOG的布局很簡(jiǎn)單，不用考慮太多因素。最常見(jiàn)的無(wú)非是左右兩列布局（我們不講太個(gè)性的）。

三、制圖

　　在FW下面新建一個(gè)890*1344的圖。優(yōu)化設置里面選擇PNG32格式（推薦使用PNG格式的圖片，導出后畫(huà)質(zhì)最好，體積小。個(gè)人經(jīng)驗。）

3.1 背景

　　我們先考慮整個(gè)頁(yè)面的背景色，使用#CCFF66顏色。

　　然后是中間部分的背景圖片，我們設計一個(gè)圓角矩形，效果如下圖。

3.2 HEAD的設計

　　再把剛才的大圓角矩形復制粘貼一遍，并且把修改高度到150，注意使用鼠標拖放修改，直接修改數字會(huì )變形。（汽車(chē)人）

　　從網(wǎng)上隨便找個(gè)風(fēng)景圖，然后使用魔術(shù)棒隨便扣，再填充成灰色，再“平面化所選”，再把尺寸對齊，多余的削掉，位圖屬性設置成“屏幕”。
　　在合適的地方畫(huà)個(gè)矩形，特效是陰影。這樣看起來(lái)會(huì )和背景和諧。

3.3 FOOTER的設計

　　再復制圓角矩形，和剛才的HEAD修改一樣，顏色改成黑色。注意細節。

　　現在整個(gè)背景就OK了，新建一個(gè)圖層，并且把這個(gè)圖層鎖定。

3.4 公告爛的設計

　　公告欄簡(jiǎn)單，看圖。

3.5 內容頁(yè)的設計

　　我是這么設計的。

3.6 RIGHT的的設計

　　做一個(gè)標題文字的背景。

3.7 BLOG分類(lèi)背景圖的設計

　　兩個(gè)矩形，一個(gè)色淺，用做連接色，一個(gè)色深，用做鼠標拖過(guò)。左邊加個(gè)小箭頭點(diǎn)綴。矩形的寬盡量寬，因為沒(méi)準哪個(gè)BLOGGER的分類(lèi)名字很長(cháng)。（切圖的時(shí)候把這兩個(gè)圖切成一個(gè)。）

四、切圖

　　終于，我們把BLOG的基本外觀(guān)設計完成，這個(gè)過(guò)程不像本教程似的一氣呵成，而是經(jīng)過(guò)了幾天的時(shí)間才設計出來(lái)的，而且，這還不是我們BLOG的最終形態(tài)，這只是一張只能看的圖，接下來(lái)的步驟就是把這個(gè)基本結構設計圖切成一小塊一小塊的，以便于我們做成模版。
　　按照下面的圖切就沒(méi)有問(wèn)題了。背景圖一定要居中。一共是8個(gè)圖片。每個(gè)切片的名字就是圖片上紅色的字。

　　不會(huì )的請下載源文件參考。http://skin.midicn.cn/jc/mbjc/htm/youth.rar

五、制作模版

　　這里主要是HTML和CSS的代碼編寫(xiě)。

5.1 布局（我不直接全部寫(xiě)進(jìn)去，循序漸進(jìn)的慢慢來(lái)。）

　　終于，可以開(kāi)始進(jìn)入正題了，所謂“難者不會(huì )，會(huì )者不難”，我們使用的是CSS+DIV來(lái)制作，優(yōu)點(diǎn)是顯示速度很快，設計靈活，而且W3C重點(diǎn)推薦，希望大家也能這樣制作模版，代碼簡(jiǎn)單容易看懂。
　　打開(kāi)Dreamweaver MX 2004，文件--新建--HTML頁(yè)面，把兼容XHTML勾上，進(jìn)入代碼界面，把里面的代碼全部刪除掉。然后我們可以快樂(lè )健康的做網(wǎng)頁(yè)了~
　　首先先建五個(gè)層，并且分別給他們一個(gè)ID。代碼如下：

　　這樣，基本的布局層就出來(lái)了，我們開(kāi)始著(zhù)手制作CSS文件，新建一個(gè)CSS文件，開(kāi)始定義樣式。
　　先是BODY的定義：（注意書(shū)寫(xiě)格式，下面的是國際標準格式......汗）

body {
color: #333; /* 本模版所有文字的顏色，我們使用略深的灰色 */
background: #CF6; /* 本模版的背景色，就是做圖時(shí)的背景色，淺綠色 */
text-align: center; /* 本模版內所有屬性居中 */
margin: 0; /* 外邊距，默認好象是10，我們設置成0，因為是0所以可以不要單位。 */
font-family: ‘Century Gothic‘, Arial, Helvetica, sans-serif; /* 本模版所有使用的字體，我覺(jué)得Century Gothic英文字體很好看，所以一直在用這個(gè)字體。 */
font-size: 12px; /* 本模版所有字體的大小，12px是FIREFOX下最小的顯示字體，IE是11px，為了兼容性，我們選擇12px。 */
line-height: 150%; /* 所有字的行高，這里設置的是150%，習慣。 */
}

a {
color: #749A23; /* 所有連接文字的顏色，我們使用深一些的綠色。 */
text-decoration: none; /* 所有連接文字的去掉下劃線(xiàn)，默認是有的。 */
}
a:hover {
color:#CF6; /* 所有鼠標拖過(guò)連接文字的顏色，我們使用淺一些的綠色。 */
}

　　接下來(lái)就是HEAD的樣式了~

#head {
height: 135px; /* HEAD的高。 */
width: 780px; /* HEAD的寬，780是在800*600下的推薦寬度。 */
text-align: left; /* HEAD層內所有所有屬性居左。 */
background: url("header.png") no-repeat top center; /* HEAD的背景屬性，分別是：背景圖URL，背景圖不重復，在層的位置：上中。 */
}

　　我們這回用IE打開(kāi)剛才的頁(yè)面看看，怎么樣？？？是不是最上面的層出來(lái)了？是不是很興奮？（好興奮，好興奮哦~~）

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index1.htm

　　我們繼續CONTENT層的制作~

#content {
padding:10px; /* CONTENT層內邊距10px。 */
width:780px; /* CONTENT的寬，780px，和上面的HEAD層對齊。 */
text-align:left; /* CONTENT層內容居左。 */
background: url("bg.png") repeat-y center; /* CONTENT的背景屬性，分別是：背景圖URL，背景圖重復在Y軸上（縱向重復顯示），在層的位置：中。 */
}

　　然后是FOOTER層。

#footer {
width:780px; /* FOTTER層寬780px。 */
height: 43px; /* FOTTER層高43px，根據切出來(lái)的圖的大小定義。 */
color: #fff; /* FOTTER層內字體顏色，因為背景是黑色，我們選擇白色，而且這個(gè)地方只準備放版權。 */
text-align: left; /* FOTTER層內容居左。 */
padding:13px 0px 0px 30px; /* FOTTER層的內邊距定義，分別是上右下左。 */
background: url("footer.png") no-repeat; /* FOTTER的背景屬性（我們省略掉一部分屬性，因為是瀏覽器默認的），分別是：背景圖URL，背景圖不重復。 */
}

　　OK??！我們在HEAD，CONTENT，FOOTER每個(gè)層分別隨便打幾個(gè)字上去測試！效果如下：

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index2.htm

　　如果你明白我們?yōu)槭裁催@么定義層屬性的話(huà)，那么恭喜你，你已經(jīng)基本學(xué)會(huì )XHTML+CSS制作網(wǎng)頁(yè)了（理論）。怎么樣？是不是Too Easy？

5.2 我的分類(lèi)

　　我們開(kāi)始制作“我的分類(lèi)”的屬性。
　　因為OBLog3.0的分類(lèi)是標簽是用li屬性的，所以我們要復制“我的分類(lèi)”HTML源代碼到模版頁(yè)面測試，只是測試，測試完了要刪除的。
　　加入“我的分類(lèi)”代碼的模版HTML如下：（這是SNAKE的，每個(gè)人的都不一樣。）
　　我們使用紅色的粗體表示。

</div>

　　然后是“我的分類(lèi)”CSS樣式的制作。
　　我說(shuō)明一下，寫(xiě)CSS的習慣每個(gè)人都不一樣，有的人喜歡先寫(xiě)大布局代碼，然后是其他的代碼，SNAKE喜歡按照順序寫(xiě)，也就是從上到下的方式，下面就按照SNAKE喜歡的方式寫(xiě)。
　　在#head的類(lèi)下面插入下面的代碼：

#head ul, #head li {   /* HEAD層內UL標簽和LI標簽的樣式屬性。 */
float:left; /* 內容居左，就是橫向顯示，LI標簽默認是豎向顯示。 */
margin:0; /* 外邊距，默認的不是0，所以我們要給它個(gè)值。 */
display:block; /* 塊級元素，必須有。這個(gè)比較難解釋?zhuān)瑫?shū)上是這么寫(xiě)的：塊對象的默認值。將對象強制作為塊對象呈遞，為對象之后添加新行。汗~~ */
}
#head li a{   /* HEAD LI標簽內連接樣式。 */
height: 26px;   /* 高度26。 */
padding:3px 5px 0px 20px;   /* 內邊距，定義連接文字在LI標簽的位置。 */
color: #666;   /* 連接色。 */
background:url("mainli.png") no-repeat left top;   /* 連接的背景，連接到我們設計的背景圖片上去，從左上開(kāi)始顯示，并且不重復。 */
border: 1px solid #999;   /* 連接的邊框，使用灰色。 */
}
#head li a:hover{   /* HEAD LI標簽內連接之鼠標拖過(guò)樣式。 */
color:#333;   /* 拖過(guò)之顏色。 */
background:url("mainli.png") no-repeat 0px -26px;   /* 拖過(guò)后的背景，我們使用的圖片和連接的背景圖片是同一張，這樣做的好處是節省帶寬。要搞清楚位置，-26是從高位-26的地方開(kāi)始顯示圖片，設計的時(shí)候要明白為什么這么做。 */
}

　　刷新頁(yè)面，看看我們網(wǎng)頁(yè)。效果如下圖：

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index3.htm

　　每個(gè)分類(lèi)挨的比較近，我們不需要改，因為根據SNAKE的經(jīng)驗：OBLog3.0的分類(lèi)，系統默認會(huì )分開(kāi)一些。所以最終效果不是這樣的。

5.3 LEFT的制作

　　左邊是顯示文章標題、內容等的位置，我們要根據圖片的設計來(lái)完成它。
　　先是定位。因為L(cháng)EFT在CONTENT層內，所以代碼寫(xiě)在#CONTENT樣式下面。因為內容比較重要，所以要做的細一些，我們連接字的色，拖過(guò)，訪(fǎng)問(wèn)后都要定義，區別文章內顏色。

#left {
float: left; /* LEFT層在CONTENT中的位置，要居左。 */
width: 520px; /* LEFT層寬度。 */
padding: 0px 20px 0px 20px; /* 內邊距，左右要留下間隙。 */
color: #333; /* LEFT層內所有字體的顏色，SNAKE使用深灰色，比純黑色要舒服。 */
text-align: justify; /* LEFT層內容的文字兩端對齊，這在OFFICE里面經(jīng)常用到，是細節，不要也可以。 */
border-right: 1px dotted #999; /* LEFT層右側加一條灰色的虛線(xiàn)，LEFT和RIGHT的分界線(xiàn)。 */
}

#left a{
color:#749A23; /* LEFT層內連接字體色。 */
text-decoration: none; /* LEFT層內連接字體去掉下劃線(xiàn)。 */
}
#left a:hover {
color:#C1E27D; /* LEFT層內鼠標拖過(guò)連接字體色。 */
text-decoration:underline; /* LEFT層內鼠標拖過(guò)連接字帶有下劃線(xiàn)。 */
}
#left a:visited {
color:#666; /* LEFT層訪(fǎng)問(wèn)后的連接字體色。 */
}

　　在LEFT內隨便打幾個(gè)字，測試，效果如下：

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index4.htm

　　打幾個(gè)帶有連接的字，并且分別測試：連接字體字體色，鼠標拖過(guò)連接字體色，訪(fǎng)問(wèn)后的連接字體色。

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index5.htm

5.4 公告欄

　　進(jìn)展好快！已經(jīng)到公告欄了！這個(gè)比較簡(jiǎn)單~先在模版頁(yè)面LEFT層內新建一個(gè)公告欄的層，和LEFT一樣，也要測試連接字體色等等。

　　現在的HTML如下：
<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="content">
<div id="left">

<div id="placard">渦蟲(chóng)我草<a href="3">敵素活圣誕節</a>巴斯德看<a href="4">見(jiàn)發(fā)表苦不管</a>客觀(guān)內<a href="7">可是地方</a>病感反對看見(jiàn)</div>

</div>
<div id="right"></div>
</div>

　　我們開(kāi)始定義公告欄的CSS：

#placard {
margin: 10px 10px 10px 10px; /* 公告層外邊距。 */
padding: 10px 5px; /* 公告層內邊距。 */
color: #3A5014; /* 公告層內字體色。 */
background: #C1E27D url("placard.png") no-repeat top right; /* 公告層內背景色，背景圖，背景圖從右上開(kāi)始顯示，不重復。就是哪個(gè)雙引號。 */
border-top: 1px solid #666; /* 公告層上面的灰黑色實(shí)線(xiàn)。 */
border-bottom: 1px solid #666; /* 公告層下面的灰黑色實(shí)線(xiàn)。個(gè)人覺(jué)得上下各一條線(xiàn)比較有個(gè)性，當然也可以是灰黑色邊框。 */
}
#placard:first-letter { /* 公告層內第一個(gè)字樣式定義。 */
margin: 0pt 5pt 0pt 0pt; /* 公告層內第一個(gè)字的外邊距。 */
padding: 3px; /* 公告層內第一個(gè)字的內邊距。 */
font: 20px bold; /* 公告層內第一個(gè)字的字體大小，粗體。 */
float: left; /* 公告層內第一個(gè)字居左對齊，排版的人知道，至于為什么加你可以把這個(gè)樣式屬性去掉試試。 */
border : 1px dotted #fff; /* 公告層內第一個(gè)字的邊框，1象素，虛線(xiàn)（好象是虛點(diǎn)），線(xiàn)顏色。 */
}
#placard p:first-letter { /* 和上面的定義是一樣的，但是這個(gè)段落的定義（注意多了個(gè)P），因為有的人在加公告的時(shí)候弄成段落格式的了，所以也需要定義一下。 */
margin: 0pt 5pt 0pt 0pt; /* 公告層內第一個(gè)字的外邊距。 */
padding: 3px; /* 公告層內第一個(gè)字的內邊距。 */
font: 20px bold; /* 公告層內第一個(gè)字的字體大小，粗體。 */
float: left; /* 公告層內第一個(gè)字居左對齊，排版的人知道，至于為什么加你可以把這個(gè)樣式屬性去掉試試。 */
border : 1px dotted #fff; /* 公告層內第一個(gè)字的邊框，1象素，虛線(xiàn)（好象是虛點(diǎn)），線(xiàn)顏色。 */
}
#placard a{
color: #666; /* 公告層內連接字體顏色。 */
}
#placard a:hover {
color: #698B23; /* 公告層內連接字體鼠標拖過(guò)的顏色。 */
}

　　因為背景是淺綠色，所以我們不能使用LEFT的CSS定義了，需要另外定義。需要說(shuō)明的是#placard:first-letter（#placard p:first-letter）屬性要不要都行，只要您覺(jué)得漂亮。
　　完成效果圖如下：

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index6.htm

5.5 BLOG內容

　　這部分也不簡(jiǎn)單，根據需要我們要考慮四點(diǎn)因素，文章標題，發(fā)表日期（發(fā)表人），文章內容，閱讀全文(次數)這四點(diǎn)。
　　文章標題我們使用.contenttitle，發(fā)表日期使用.contenttime，文章內容不使用CSS定義，因為L(cháng)EFT已經(jīng)定義過(guò)了，閱讀全文(次數)使用類(lèi).contentcomments。（我以前是使用H3，H4直接定義的，好處是省幾個(gè)字節。壞處是當用戶(hù)在后臺表表文章設定字體時(shí)很有可能定義成H3或H4，造成布局混亂，很顯然這是不可取的。）

　　HTML代碼如下：

<div class="contenttitle"><a href="1">怒嗎</a></div>
<div class="contenttime">SNAKE - by - 2005-9-6 17:06:00</div>
話(huà)說(shuō)Numa Numa Dance：<br>
　　紐澤西的十九歲小胖子，有一天突發(fā)奇想，把羅馬尼亞的一首流行歌曲 Dragostea Din Tei（他自己也不懂羅馬尼亞文）拿來(lái)對嘴唱，自己再加上舞蹈動(dòng)作，他自己發(fā)明的Numa Numa Dance，製作了上面的MV，從頭到尾他都沒(méi)離開(kāi)書(shū)桌前的椅子喲，真的笑到肚子痛，他的表演精辟令人叫絕，此FLASH始發(fā)于newgrounds網(wǎng)站，瀏覽量竟然超過(guò)8百萬(wàn)。
<div class="contentcomments"><a href="/blog/514651654645">閱讀全文(106) | 回復(7)</a> | 引用通告(0)</div>

</div>
<div id="right"></div>
</div>

　　CSS代碼加到剛才公告的后面吧，代碼如下：

.contenttitle { /* 博客文章的標題定義。 */
height: 40px; /* 博客文章標題的高度。 */
padding:3px 0px 0px 25px; /* 標題的內邊距，同樣是上右下左的順序，左邊25象素是為了和左邊拉開(kāi)距離，誰(shuí)說(shuō)的了？距離產(chǎn)生美么~ */
background:url("content.png") no-repeat left; /* 標題的背景，就是哪個(gè)像盾牌似的小圖標了，為了好看，沒(méi)別的。圖片不重復，左對齊。 */
font-size: 15px; /* 標題的字體大小，15象素看著(zhù)還湊合。 */
color: #060; /* 標題的字體顏色，這個(gè)一般用不到，因為文章標題都是連接文字，不過(guò)我發(fā)現“置頂”這兩個(gè)字是沒(méi)有連接的~所以加上吧，為了和標題字色配套。 */
}
.contenttime { /* 博客文章的作者，發(fā)表時(shí)間定義。 */
width:450px; /* 時(shí)間的寬度，因為我們要文字上面有“上劃線(xiàn)”，而且要右對齊所以定義這個(gè)。 */
margin:-18px 0px 0px 20px; /* 時(shí)間的外邊距，也就是定位，上-18px是為了挨著(zhù)標題顯示，不信你去掉試試，20px是左邊距，要不然“上劃線(xiàn)”就蓋住那標題圖片了。 */
font: 9px ‘Tahoma‘, sans-serif; /* 時(shí)間文字的大小，字體。我發(fā)現英文Tahoma字體最小的能顯示的字就是9px了。 */
color: #666; /* 時(shí)間文字的顏色。 */
border-top: 1px dotted #999; /* 傳說(shuō)中的上劃線(xiàn)，1象素，虛線(xiàn)（應該是虛點(diǎn)），淺灰色。 */
text-align:right; /* 時(shí)間文字右對齊，同樣為了好看。 */
}
.contentcomments { /* 閱讀全文數，回復數等信息的CSS定義。 */
text-align: center; /* 文字居中顯示。 */
border-top: 1px solid #C2C2C2; /* 一個(gè)上劃線(xiàn)。 */
border-bottom: 2px solid #C2C2C2; /* 一個(gè)2px的下劃線(xiàn)，注意這兩定義個(gè)不能縮寫(xiě)的。 */
margin:15px 0px 35px 0px; /* 外邊距。 */
font: bold 12px; /* 字體粗細，大小。 */
}

　　完成效果如下：

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index7.htm

5.6 RIGHT的定義（最后一塊的定義，布局終于快要完成了，哭~~~）

　　先是RIGHT的位置。CSS如下：

#right { /* RIGHT的CSS定義。 */
float: right; /* 位置，居右，相對LEFT層而言。 */
width:230px; /* 寬度，一點(diǎn)一點(diǎn)測試得出來(lái)的數字。 */
padding: 0px 20px 0px 5px; /* 內邊距，右邊距和LEFT的左邊距一樣，是20px，對稱(chēng)。 */
}

　　在RIGHT里面打幾個(gè)字測試效果。

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index8.htm

　　然后是大標題字的美化。我們使用.bigtitle標簽。CSS代碼如下：

.bigtitle { /* 大標題字層的CSS定義。 */
text-align: center; /* 字體居中。 */
width:200px; /* 層寬。 */
height: 24px; /* 層高。 */
font: 14px; /* 字體定義，14象素。 */
color: #333; /* 字體顏色。 */
padding: 2px 0px 0px 0px; /* 層內邊距，距離上面是2px。 */
background: url("sidebartitle.png") no-repeat top center; /* 本層的背景定義，不重復，位置：上中。 */
}

　　寫(xiě)幾個(gè)字（Calendar | 日　歷），看效果：

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index9.htm

　　然后就是這些欄目的內容定義了。(下面的標簽我都在$前面加了個(gè)"_",要不和本BLog標記起沖突了.)

日歷（$show_calendar_$）
最新日志（$show_newblog_$）
最新回復（$show_comment_$）
最新留言（$show_newmessage_$）
登陸口（$show_login_$）
搜索（$show_search_$）
BLOG信息（$show_info_$）
友情連接（$show_links_$）

　　能用的幾乎都在上面了。順序就這么排吧，無(wú)所謂的。

　　接下來(lái)的事情就是定義這些小模塊了~~~

1.日歷的定義：

　　先隨便找個(gè)BLOG查看其源文件得知日歷的代碼如下：

<div id="calendar"><table width=‘100%‘>
<caption>August 2005</caption><tr>
<th abbr=Sunday>日</th>
<th abbr=Monday>一</th>
<th abbr=Tuesday>二</th>
<th abbr=Wednesday>三</th>
<th abbr=Thursday>四</th>
<th abbr=Friday>五</th>
<th abbr=Saturday>六</th></tr><tr>
<td align=center> </td>
<td align=center>1</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/118466.shtml‘>2</a></td>
<td align=center>3</td>
<td align=center>4</td>
<td align=center>5</td>
<td align=center>6</td>
</tr><tr>
<td align=center><a href=‘/blog/user1/1243/archives/2005/120832.shtml‘>7</a></td>
<td align=center>8</td>
<td align=center>9</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/122376.shtml‘>10</a></td>
<td align=center>11</td>
<td align=center>12</td>
<td align=center>13</td>
</tr><tr>
<td align=center>14</td>
<td align=center>15</td>
<td align=center>16</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/126279.shtml‘>17</a></td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/126831.shtml‘>18</a></td>
<td align=center>19</td>
<td align=center>20</td>
</tr><tr>
<td align=center>21</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/128795.shtml‘>22</a></td>
<td align=center>23</td>
<td align=center>24</td>
<td align=center>25</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/131991.shtml‘>26</a></td>
<td align=center>27</td>
</tr><tr>
<td align=center>28</td>
<td align=center>29</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/135178.shtml‘>30</a></td>
<td align=center>31</td>
<td align=center></td>
<td align=center></td>
<td align=center></td>
</tr>
</table>
</div>

　　分析出日歷是一個(gè)大表格，放在#calendar層里面，月份使用caption定義，星期幾使用#calendar th定義，而日期使用#calendar td定義，寫(xiě)過(guò)日記的日期是連接。遺憾的是沒(méi)有當前日期的定義。
　　這樣，我們就可以設計出各種的樣式類(lèi)美化這個(gè)日歷表格了~把上面的代碼考到網(wǎng)頁(yè)里bigtitle層的下面，現在的模版代碼是：

<div class="bigtitle">Calendar | 日　歷</div>

<div id="calendar"><table width=‘100%‘>
<caption>August 2005</caption><tr>
<th abbr=Sunday>日</th>
<th abbr=Monday>一</th>
<th abbr=Tuesday>二</th>
<th abbr=Wednesday>三</th>
<th abbr=Thursday>四</th>
<th abbr=Friday>五</th>
<th abbr=Saturday>六</th></tr><tr>
<td align=center> </td>
<td align=center>1</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/118466.shtml‘>2</a></td>
<td align=center>3</td>
<td align=center>4</td>
<td align=center>5</td>
<td align=center>6</td>
</tr><tr>
<td align=center><a href=‘/blog/user1/1243/archives/2005/120832.shtml‘>7</a></td>
<td align=center>8</td>
<td align=center>9</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/122376.shtml‘>10</a></td>
<td align=center>11</td>
<td align=center>12</td>
<td align=center>13</td>
</tr><tr>
<td align=center>14</td>
<td align=center>15</td>
<td align=center>16</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/126279.shtml‘>17</a></td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/126831.shtml‘>18</a></td>
<td align=center>19</td>
<td align=center>20</td>
</tr><tr>
<td align=center>21</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/128795.shtml‘>22</a></td>
<td align=center>23</td>
<td align=center>24</td>
<td align=center>25</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/131991.shtml‘>26</a></td>
<td align=center>27</td>
</tr><tr>
<td align=center>28</td>
<td align=center>29</td>
<td align=center><a href=‘/blog/user1/1243/archives/2005/135178.shtml‘>30</a></td>
<td align=center>31</td>
<td align=center></td>
<td align=center></td>
<td align=center></td>
</tr>
</table>
</div>

</div>

　　我們開(kāi)始設計CSS代碼：

#calendar{ /* 日歷層定義。 */
width:195px; /* 日歷層寬。 */
}
caption {   /* 定義日歷頂部月份。 */
font:11px ‘Century Gothic‘, Arial, Helvetica, sans-serif; /* 日歷頂部月份的字體大小，字體。 */
}
#calendar table {
border-collapse: collapse; /*合并表格相臨邊框*/
}
#calendar th{   /* 定義星期 */
font: normal 12px;   /* 字體正常顯示，OBLog系統默認顯示粗體，大小12象素，中文字最小12象素。 */
}
#calendar td { /* 定義日期 */
font-size: 10px;   /* 字體10px。 */
}
#calendar a {   /* 日歷內日期鏈接樣式 */
display:block; /* 日歷內日期呈塊級元素 */
background-color: #C1E27D; /* 日歷內日期背景色 */
width:16px; /* 日歷內日期寬 */
height:10px; /* 日歷內日期高 */
}
#calendar a:hover{   /* 鼠標拖過(guò)日期的鏈接樣式 */
background-color: #CF6; /* 背景色 */
color: #333; /* 字體色 */
}

　　完成，看看效果：

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index10.htm

2.最新日志

　　接下來(lái)是最新日志的樣式定義，查看代碼知道最新日志是使用UL標簽的，而且和最新留言，最新回復一樣使用UL標簽。（其實(shí)他們每個(gè)都有單獨的標簽，可以進(jìn)一步個(gè)性化~我們做簡(jiǎn)單的~~）這樣的話(huà)我們就設計一個(gè)UL定義的層類(lèi)就可以了。我們使用.sidebar標簽類(lèi)。

　　CSS代碼如下：

.sidebar ul{ /* 字體色 */
margin: 0 0 0 -5px; /* 外邊距 */
}
.sidebar li a{ /* LI連接樣式 */
padding: 0 0 0 20px; /* 內邊距，左20px的距離。 */
color:#749A23; /* 連接字體色，使用稍微有些深的綠顏色 */
background: url("liimage.png") no-repeat left top; /* 左邊的小圓圈，是圖片。本來(lái)LI屬性自帶圓圈這個(gè)設置，但是本地測試OK用做模版就不可以了。使用圖片的話(huà)還可以改成別的小圖標，設計靈活。 */
}
.sidebar li a:hover{ /* 連接字鼠標拖過(guò) */
padding: 0 0 0 20px; /* 和上面的一樣，也是左邊內邊距20px，這個(gè)不能省略。 */
color:#C1E27D; /* 鼠標拖過(guò)時(shí)字體顏色，使用較淺的綠色，相對于上面的連接色，這樣的話(huà)色彩變換比較柔和。 */
text-decoration:underline; /* 鼠標拖過(guò)時(shí)有下劃線(xiàn)，在英文網(wǎng)頁(yè)里面連接一般都有下劃線(xiàn)，但是漢字這樣做就不好看了，要改。 */
}
.sidebar li a:visited { /* 連接訪(fǎng)問(wèn)后樣式 */
text-decoration:underline; /* 有下劃線(xiàn) */
color:#060; /* 更深的綠色，本來(lái)是要用更淺的色凋的，但是發(fā)現那樣的話(huà)字就看不清了，使用灰色就不好看了~所以使用深色綠色。 */
}

　　由于“日志”,“回復”,“留言”是一樣的,所以一個(gè)欄目測試OK,其他的就都解決了.
　　哈哈！又完成了！看效果?。?！

點(diǎn)擊這里預覽http://skin.midicn.cn/jc/mbjc/htm/index11.htm

3.登陸口

　　接下來(lái)是登陸窗口的定義，這個(gè)比較簡(jiǎn)單，開(kāi)始的登陸表單是用表格做的所以定義表格，登陸后有個(gè)小菜單，查看代碼得知這是個(gè)層，讓它居中就可以了，思路是，表單和表格的樣式設計。我們設計開(kāi)始。

　　HTML代碼是這樣的：（就是居中）
<div align="center">$show_login_$</div>

　　CSS代碼：

table { /* 所有表格定義 */
font-size: 12px; /* 字體12px */
}
input { /* 輸入框文本字段的定義 */
background-color: #C1E27D; /* 背景色 */
border: 1px #333 solid; /* 邊框，1象素，灰黑色，實(shí)線(xiàn)。 */
font-size: 12px; /* 字體12px */
color: #666; /* 字體色 */
}
select { /* 列表框文本字段的定義 */
background-color: #C1E27D; /* 背景色 */
border: 1px solid #333; /* 邊框，1象素，灰黑色，實(shí)線(xiàn)。 */
font-size: 12px; /* 字體12px */
color: #666; /* 字體色 */
}

　　登陸窗口測試不了，就不測試了。登陸口和“BLOG搜索”是一樣的，都是表單。下面給個(gè)設計好的截圖：

　　后面的BLOG信息，以及我的連接樣式就不用設計了。前面已經(jīng)打好基礎了。

5.7 完成后的代碼

　　OK！，現在，我們的模版已經(jīng)設計完成了！現在把OBLOG提供的相應的代碼復制到模版里面。需要做的就是把主模版和副模版分開(kāi)。

　　主模版HTML代碼：(注意,所有模版代碼都在$的前面加了個(gè)"_",為的是不和我的BLog沖突.)

　　副模版HTML代碼：(注意,所有模版代碼都在$的前面加了個(gè)"_",為的是不和我的BLog沖突.)

<div class="contenttitle">$show_topictxt_$</div>
<div class="contenttime">$show_author_$ - BY - $show_addtime_$</div>
$show_logtext_$
<div class="contentcomments">$show_more_$</div>

　　管理員進(jìn)入OBLog3.0的后臺把相應的代碼復制進(jìn)去就可以了。（可能你注意到主模版里面多了<br style="clear: both;">代碼，是為了在FIREXFOX下顯示的?，F在先不管，反正模版代碼就是這么多了，再改就是CSS的事情了。）

5.8 完成后的問(wèn)題

　　以后，然后就是實(shí)際的測試了。問(wèn)題當然發(fā)現不少，首先是BLOG主人回復那，問(wèn)題如下圖所示：

　　看代碼知道這同樣是表格，修改CSS填加如下代碼：

table p{ /* 表格內段落的定義，這里一般針對單個(gè)文章的“BLOG主人回復”設置 */
padding: 10px 10px 10px 10px; /* 內邊距 */
font-size: 12px; /* 字體大小 */
color: #749A23; /* 字體色，為了配合模版，使用綠色 */
border: 1px solid #C2C2C2; /* 1px的邊框。 */
}

看完成效果：

　　接下來(lái)的問(wèn)題是這里：（其實(shí)這里并不重要，關(guān)鍵是一種改頁(yè)面思路，要是明白了這點(diǎn)，這個(gè)模版的幾乎任何地方都可以改。）

　　找到定義它的CSS屬性，#oblog_edit層，還有它里面的這個(gè)類(lèi).oblog_Btn。
在CSS里面填加代碼：

#oblog_edit { /* 編輯窗口的定義。 */
background-color: #fff; /* 背景色為白色，以前是灰色。 */
border: 0px /* 邊框為0，以前是1px，灰色。 */
}
#oblog_edit .oblog_Btn { /* 加粗，斜體等小圖的設置。 */
background-color: #fff; /* 背景為白色，原來(lái)是灰色。 */
}

　　完成效果如圖：

　　看到了吧？其實(shí)有好多東西都可以自定義設置的。關(guān)鍵是我們得找到它的CSS定義名。至此，我們的模版已經(jīng)設計完成了。多注意一些小的細節是很重要的，精致的東西才有人喜歡么~~~

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久