伴隨著越來越多的Blog出現，新的問題隨之而來：我的Blog經常與別人的“撞衫”——使用了相同的模板。對此您一定很苦惱，希望通過更具有個性的網上空間來展示自我。這就碰到了如何修改模板這個問題，又感到有些無從下手。下面以X-Space的官方網站（x-space.discuz.net/space）為例，教您如何利用X-Space強大的模板定制功能來打造自己的個性空間。
一、申請空間
這一步無需贅述，如同大多數的網站注冊一樣，進入http://x-space.discuz.net/space，點擊右上角登錄區的“注冊”鏈接，按照步驟注冊即可。注冊成功后，回到首頁登錄，然后點擊登錄區的[開通我的個人空間]，在接下來的頁面中填入自己的空間名稱、選擇自己的城市，然后選擇一個初始的模板，即可開通自己的個人空間。以模板“藍色經典”為例，新開通的個人空間應該是如下樣式：
二、了解X-Space的模板機制
開通了自己的個人空間之后，就可以先到后臺去熟悉一下X-Space的操作，針對本文來說，重點是了解X-Space的模板機制。
X-Space內置了眾多模板可供選擇，我們可以仔細研究一下這些內置模板，從而了解到X-Space的模板機制。
X-Space緊跟互聯網發展趨勢，頁面采取XHtml+CSS的方式，實現表現與結構相分離。可能有些朋友一聽到Xhtml+CSS就感到有些無從下手，其實這大可不必。相反，一旦您充分了解到Xhtml+CSS的奧妙，理清X-Space的模板結構之后，就會感到修改模板是如此得心應手，體會到Web Standard的強大魅力。
X-Space的每個頁面由它自身的結構和控制它外觀表現的樣式表組成。這句話聽上去不太好理解，打個比喻來說，它自身的結構就好比是它的身體，包括頭、尾、導航、正文區等等。控制它外觀表現的樣式表就好比是它的衣服，用來美化它的頭、尾、導航、正文區……。結構與表現結合起來，就呈現出現在網頁的樣子。
現在回到X-Space的頁面，每個頁面有其自身的Xhtml源代碼，這就是它的結構，同時每個頁面通過鏈接的外部樣式表（space.css）和本身內嵌的樣式表來共同控制外觀。外部樣式表Space.css是系統內置的，它控制著X-Space的基本顯示模式，不能更改。每個模板之所以顯示不同，正是由于內嵌了另外一個不同的樣式表。我們修改模板的重點也就在于修改這個內嵌的樣式表。
舉例來講，在默認模板（藍色經典）中，我們看到空間名稱是14px大小，白色的加粗字體，但是我們查看一下頁面的源代碼，卻找不到控制字體顏色和大小的標簽。這是因為字體的顏色和大小等樣式都屬于它的表現，頁面中只有一個
#spacename * { /*這表示id為spacename的div中所有元素顏色為白色*/
color: #FFF;
}
h1 {
font-size: 16px;
margin: 0;
}
只要弄明白了這一點，其他的所有問題都會觸類旁通。幾乎頁面中所有的顏色、背景圖片、文字大小等樣式都是通過樣式表來控制的。我們要自己修改模板，只需在自己的樣式表中重新定義樣式，以覆蓋默認模板中的樣式即可。例如我們希望頁面的大標題再大一些，變成18px，只需在自己的模板中加一條：
h1 {
font-size: 18px;
}
三、設計模板
了解了X-Space的模板機制之后，就可以開展實質性的工作了。首先需要把自己心目中的模板樣式設計出來，這一步需借助photoshop或者fireworks之類的圖像處理軟件。假如您對于圖像處理不太在行，可以借用一下網上的優秀Blog模板。現在網上各類的Blog模板種類繁多，不過一旦啟用了他人設計的模板，別忘記在您的網站上加一條版權署名。
本文在系統自帶的“黃色成熟”模板的基礎上，重新設計了頁面頭部的樣式，使之變成一套簡單的汽車風格的模板，旨在講解X-Space的模板修改技巧，更復雜的模板制作還需大家深入學習。在前期的設計中不必將所有細節都通過Photoshop實現，只做出框架即可：
對自己的設計框架感到滿足之后，就可以進行切圖。針對這個模板，需要兩張圖片：
1、頁面底紋：整個頁面的灰色斜線底紋，按照重復的規律，截取面積盡可能小的一塊放到頁面中平鋪即可。
2、頭部圖片：完整截取頂部的汽車圖片。
其他圖片由于與系統自帶的“黃色成熟”模板相同，可以直接使用。
切割完的圖片總不能只是存放在自己的電腦中，需要找一個空間傳輸上去，這對于X-Space來說不成問題，因為它內置了相冊功能，把切割完的圖片直接上傳到自己的相冊中即可，記住上傳后的URL地址，以便在接下來的步驟中使用。
四、套用模板
圖片切割完以后，開始通過CSS文件將圖片應用到頁面的外觀中。由于我們這個模板的大部分樣式跟“黃色成熟”模板類似，可以在“黃色成熟”模板的CSS基礎上進行修改。
1、頁面背景的修改
默認的頁面背景是帶有漸變的淺藍色，這是由于space.css中規定了：
body {
background: #F5F9FC url(../images/default/background_top.gif) repeat-x top;
……
}
把body重新定義為：
body {
background: #717171 url(background_url);
}
(注重：請把background_url替換為您上傳之后的頁面背景圖的URL地址。)
2、頁面頭部樣式的修改
頁面的頭部區域是放置在一個id為header的div中，修改頭部樣式，需要修改CSS中對#header的定義。就header這個層，包括這個層以內的結構，我們需要清楚以下兩點：
?我們看到的空間名稱、空間URL以及設為首頁與復制URL的鏈接，統統都是放在一個id為spacename的div中的
?頁面導航條是一個無序列表，同時又放置在一個id為menu的div中
下面對照修改好的樣式表逐條講解一下：
#header {
background: url(headerimage_url) no-repeat left top;
/*重新定義header的背景圖片，換為我們上一步得到的汽車圖片*/
height: 310px;
/*重新定義header的高度，我們這個模板的頭部比默認的要高一些*/
position: relative;
/*這句是為了使header內部的某些元素需要相對于header層絕對定位*/
}
/*標題*/
#spacename {
position: absolute;
left: 150px;
top: 80px;
/*將spacename層相對于header絕對定位，使之顯示在汽車左側的空曠的天空中*/
}
#spacename * {
color: #000;
/*spacename中所有文字顯示為黑色，這樣看起來醒目一些*/
}
/*導航*/
#menu {
background: #000;
/*導航條的顏色為黑色*/
height: 35px;
width: 750px;
/*重新定義導航條的寬度與高度*/
position: absolute;
left: 0;
top: 275px;
/*將導航條相對于header絕對定位，使之顯示在header的底部*/
}
#menu ul {
margin: 0;
/*去除導航ul的邊距，因為在默認模板中是有邊距的*/
}
#menu li a {
padding: 0;
height: 35px;
line-height: 35px;
background-image: none !important;
/*以上這幾句是對導航鏈接的重新定義，去處了原有的背景圖片，重新定義了寬度和高度*/
}
#menu a:hover {
background: #EDF1D7;
color: #D0824C;
/*當鼠標滑過導航鏈接時的樣式*/
}
現在，頁面的頭部樣式已經完全改好了，與“黃色成熟”模板的CSS相結合，在細節上再修飾一下，一套新的汽車風格的模板便可以付諸使用了。當然，本文給出的只是一次簡單的小修改，要充分體會到X-Space強大的模板定制功能，制作出更復雜精致的模板，還需要我們繼續學習，不斷探索。
新聞熱點
疑難解答
