沙滩美女视频,杨幂醉酒视频未删减版

OBLog 3.0 用戶模版制作教程

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

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

　　本教程都是在2000系統(tǒng)IE6.0，Mozilla Firefox 1.0下測試。不敢保證都和SNAKE看到的一樣。之所以要用Mozilla Firefox測試是因?yàn)槟?%的用戶。不過說真的，盡管有時(shí)候我很想拋棄他們……

一、基本必要條件

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

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

1.2 準(zhǔn)備工具

　　一臺(tái)電腦，制作網(wǎng)頁的工具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 中文增強(qiáng)版
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編寫軟件：TopStyle3。你可能用不到。下載地址：http://skin.midicn.cn/soft/TopStyle3.rar
　　以及《樣式表中文手冊css2》是CHM格式的，可直接打開。你一定要用到。下載地址：http://skin.midicn.cn/soft/css2.rar
　　屏幕滾動(dòng)截圖工具HprSnap5。做好模版后截圖工具，可能用到。下載地址：http://skin.midicn.cn/soft/HyperSnap-DX.rar

二、構(gòu)思

2.1 色調(diào)

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

2.2 布局

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

三、制圖

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

3.1 背景

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

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

3.2 HEAD的設(shè)計(jì)

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

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

3.3 FOOTER的設(shè)計(jì)

　　再復(fù)制圓角矩形，和剛才的HEAD修改一樣，顏色改成黑色。注意細(xì)節(jié)。

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

3.4 公告爛的設(shè)計(jì)

　　公告欄簡單，看圖。

3.5 內(nèi)容頁的設(shè)計(jì)

　　我是這么設(shè)計(jì)的。

3.6 RIGHT的的設(shè)計(jì)

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

3.7 BLOG分類背景圖的設(shè)計(jì)

　　兩個(gè)矩形，一個(gè)色淺，用做連接色，一個(gè)色深，用做鼠標(biāo)拖過。左邊加個(gè)小箭頭點(diǎn)綴。矩形的寬盡量寬，因?yàn)闆]準(zhǔn)哪個(gè)BLOGGER的分類名字很長。（切圖的時(shí)候把這兩個(gè)圖切成一個(gè)。）

四、切圖

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

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

五、制作模版

　　這里主要是HTML和CSS的代碼編寫。

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

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

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

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

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

　　接下來就是HEAD的樣式了~

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

　　我們這回用IE打開剛才的頁面看看，怎么樣？？？是不是最上面的層出來了？是不是很興奮？（好興奮，好興奮哦~~）

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

　　我們繼續(xù)CONTENT層的制作~

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

　　然后是FOOTER層。

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

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

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

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

5.2 我的分類

　　我們開始制作“我的分類”的屬性。
　　因?yàn)镺BLog3.0的分類是標(biāo)簽是用li屬性的，所以我們要復(fù)制“我的分類”HTML源代碼到模版頁面測試，只是測試，測試完了要?jiǎng)h除的。
　　加入“我的分類”代碼的模版HTML如下：（這是SNAKE的，每個(gè)人的都不一樣。）
　　我們使用紅色的粗體表示。

</div>

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

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

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

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

　　每個(gè)分類挨的比較近，我們不需要改，因?yàn)楦鶕?jù)SNAKE的經(jīng)驗(yàn)：OBLog3.0的分類，系統(tǒng)默認(rèn)會(huì)分開一些。所以最終效果不是這樣的。

5.3 LEFT的制作

　　左邊是顯示文章標(biāo)題、內(nèi)容等的位置，我們要根據(jù)圖片的設(shè)計(jì)來完成它。
　　先是定位。因?yàn)長EFT在CONTENT層內(nèi)，所以代碼寫在#CONTENT樣式下面。因?yàn)閮?nèi)容比較重要，所以要做的細(xì)一些，我們連接字的色，拖過，訪問后都要定義，區(qū)別文章內(nèi)顏色。

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

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

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

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

　　打幾個(gè)帶有連接的字，并且分別測試：連接字體字體色，鼠標(biāo)拖過連接字體色，訪問后的連接字體色。

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

5.4 公告欄

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

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

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

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

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

　　我們開始定義公告欄的CSS：

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

　　因?yàn)楸尘笆菧\綠色，所以我們不能使用LEFT的CSS定義了，需要另外定義。需要說明的是#placard:first-letter（#placard p:first-letter）屬性要不要都行，只要您覺得漂亮。
　　完成效果圖如下：

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

5.5 BLOG內(nèi)容

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

　　HTML代碼如下：

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

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

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

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

　　完成效果如下：

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

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

　　先是RIGHT的位置。CSS如下：

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

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

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

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

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

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

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

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

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

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

　　接下來的事情就是定義這些小模塊了~~~

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定義，寫過日記的日期是連接。遺憾的是沒有當(dāng)前日期的定義。
　　這樣，我們就可以設(shè)計(jì)出各種的樣式類美化這個(gè)日歷表格了~把上面的代碼考到網(wǎng)頁里bigtitle層的下面，現(xiàn)在的模版代碼是：

<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>

　　我們開始設(shè)計(jì)CSS代碼：

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

　　完成，看看效果：

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

2.最新日志

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

　　CSS代碼如下：

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

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

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

3.登陸口

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

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

　　CSS代碼：

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

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

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

5.7 完成后的代碼

　　OK！，現(xiàn)在，我們的模版已經(jīng)設(shè)計(jì)完成了！現(xiàn)在把OBLOG提供的相應(yīng)的代碼復(fù)制到模版里面。需要做的就是把主模版和副模版分開。

　　主模版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的后臺(tái)把相應(yīng)的代碼復(fù)制進(jìn)去就可以了。（可能你注意到主模版里面多了<br style="clear: both;">代碼，是為了在FIREXFOX下顯示的。現(xiàn)在先不管，反正模版代碼就是這么多了，再改就是CSS的事情了。）

5.8 完成后的問題

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

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

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

看完成效果：

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

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

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

　　完成效果如圖：

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

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看