大衛。時光筆記

已經快春節了，趁著春節前有空閒的時間來做一些事情吧！先幫留言板換一件新衣服吧！搬家這麼久了留言板始終維持在預設樣式，不知道是自己懶呢？還是因為知道留言板根本沒有人會去留言，所以就一直放著不管，更別談幫它做一件新衣，不過後來我還是想開了，我決定恢復留言板的使用縱使知道沒有人會留言，不怕一萬只怕萬一。








在改版前，首先要感謝CSS Style咱們Pixnet的樣板工廠所提供的留言板的CSS架構，我選擇的是陽春型的教學樣式，這是我第一次動到留言板的CSS樣式表，利用昨晚的時間完成了改版的工程。

在改版的過程中，這次我決定要統一我的部落格與留言板的樣式風格要統一，不過原始的教學樣板，仍有其不足的地方，首先，版面的整體寬度（width）為600px，若要和部落格的版面寬度一致我勢必要進行版面的拓寬工程，要拓寬跟部落格的版面寬度800px一致我勢必要從幾處地方著手修改。

（1）#Container（內容區塊）的width的數值要設定為800px。
（2）#gbheader（留言板橫幅）的width與height分別設定為800px、237px。
（3）.gbBoxLeft（留言區塊左方）的width的數值要設定為780px。
（4）.gbBoxRight（留言區塊右方）的width的數值要設定為780px。
（5）#signForm（留言的打字區整體）的width的數值要設定為780px。

以上5個步驟完成後就初步底定了留言板的整體輪廓寬度的設定，接下來，開始把Banner圖嵌入橫幅區中，在#gbheader標籤下找到background:#66cccc後刪除顏色代碼（#66cccc）改寫入url('圖片網址')即完成Banner圖的嵌入步驟。

然後開始留言板標題連結及敘述的位置移動，position:relative代表的意思就是「位置:相對」底下的top:70px、left:500px的參數值代表它是以距離頂端（top）與左邊（left）多少像素來定義出文字或圖片的位置應該在那裡，把這些參數設定好之後留言板標題連結及敘述的位置就底定了。

因為是以教學樣式為其基本架構，因此它這款樣式的RSS Icon及會員留言時所顯示的人頭小Icon都被隱藏了起來，因此必須要把這兩個功能的標籤從隱藏區中移出並重新定義它的位置，以RSS Icon為例：

.rssIcon{
position:absolute;
top:25px;
left:80px;
}

把它設為顯示之後卻遇到下一個難題，RSS Icon出現的地方竟然把我原先設定好之留言板標題連結及敘述給硬生生的擠了下去，這使我必須得調整RSS Icon出現的地方，在{}寫入定位的語法，position:absolute（位置:絕對）在寫入這個RSS Icon的絕對位置距離頂端（top）與左邊（left）要多少像素（px）完成了RSS Icon的定位。

教學的樣式的『我要留言』這個連結竟然設在Banner區的頂端，對於要留言的訪客會一時之間找不到留言的功能在那裡，為了改善這種情形，便使用上述的方法把連結移動到「地盤menu」列上，以符合直覺化的操作模式，而其他細項的修改在此便不贅述。

改版後的留言板終於有新衣服可以穿嘍！和最近剛改版的Blog搭配成一整套的樣式，我的心情瞬間大好，非常有成就感，雖然不是做了什麼了不起的樣式，但是能夠靠自己的力量自力更生，最起碼自己的版面是獨一無二，不會跟其他人撞板，雖然有許多熱心的版面達人為大家製作版面，但畢竟不是每種版面都適合自己，只有自己才是最了解自己的需要，與其給大家魚吃不如教大家怎麼釣魚更來的實用不是嗎？