版面大小的調整

原本我的螢幕解析度都是設800*600，因為我的電腦已經用很久了，螢幕也只有15吋，所以設800*600，但是常被朋友批評現在沒有人在用那麼低的 解析度，螢幕也太小了，叫我換台新的，現在都是1024*768或是1280*1024，17吋或是19吋的螢幕了，後來幫朋友成立部落格時，用 notebook來看，發現畫面呈現真的是太小，只好切換到1024*768，剛開始還真不能適應，因為文字都變小了，經朋友提醒將設定值dpi從原來的 ９６改成１２０dpi，果真字都變大了，才不至於讓我近視又加重了。


其實我在看艾瑪的網 站時也會這樣，下面都不會出現捲軸，每次都要利用左右鍵來移動，看得很累，後來用了1024*768，這種情形就不再發生了，而且最近有用Google Analytics，發現我的訪客80%都是1024*768的解析度，基本上我是不喜歡用滑鼠去移動左邊右邊，而是希望整個螢幕就能呈現網頁的內容，當 初用800*600設計網頁時，就要考慮到本文的寬度不能太寬，不然邊欄就被遮住，還要移動滑鼠去看邊欄內容，當初都是以px決定blog的寬度，譬如： 網頁body-800px；文章post部分580px；邊欄200px，後來隨著網頁樣式的轉變，這樣制定的格式已經不符合我的需求，太硬邦邦，如果我 要改個寬度，就全部格式都要更改，後來參考別人的做法，以百分比%來顯示，只要更改主要寬度，其他的就會隨著而更改

譬如現在的格式，我只要改變整個blog的width寬度，就可以配合螢幕，而不必去計算實際的寬度，

主要更改
#outer-wrapper {
width:1000px;
要配合的就是，原先的樣版裡的，加起來的百分比，盡量以97%-99%，因為還有一些padding(空格)要考慮到
witdth都以百分比表示，而不以px固定像素，較為彈性化。
#main { 【主要文章區】
width: 60%;

#sidebar { 【邊欄1區】
width: 21%;

#sidebar2 { 【邊欄2區】
width: 18%;

因為我的是三欄式的，所以sidebar有兩個，如果你的只有兩個，你可以計算你的sidebar大小要多少，比如要放Adsense 200*200，如果寬度是900px，至少要設定23%，這樣就有207px，可以計算看看。

更改好了，記得你的banner也要改變，如果是用圖片當底的，偷懶的方法就是將圖片置中，或是resize你的圖片，再上傳即可，另外標題的位置也要跟著改變。

Banner圖片置中的方式，語法裡加個center即可。
background: url("圖片網址") center no-repeat ;

標題變更位置，在 #header h1{ ，更改 padding即可
#header h1 {
padding: 105px(上) 20px（右） 0（下） 80px;（左）
我的模板目前是使用我的版面是套用小梅子的善搞Blogger Beta Template 綠黨懶人包

但是這個版面還是有些問題要解決，因為他的邊欄有時會跑到主欄來，目前還未解決，如果想下載1024*768版面的模板，
請按右鍵另存新檔下載

加入書籤 :