憂鬱馬戲團 Blue Circus: 如何製作彈性招牌?

小黛的問題：我網誌的banner圖是800點寬，在自已電腦上看沒問題。可是在網咖的大螢幕上用1024點的寬度看，發現我的banner右邊空了一大塊，很難看。可是如果我把banner圖改成1024點，在我自己的電腦螢幕上看，右邊又會多出一塊。有沒有辦法把banner圖作成彈性寬度？

答：
要解決這種問題，其中一個方法是把整個網誌頁面強迫限制在一定寬度內。像馬戲團團員的預設模版就是固定800點欄寬，所以不會有在不同大小螢幕上看到不同網誌版面的結果。(例如小貓亂跑烘焙車的頁面)

如果你堅持用彈性寬度的頁面，要讓banner也有彈性寬度就有點複雜了。

彈性banner的作法隨各人的網誌構造和banner的設計而各有不同，這裡僅以小黛的網誌為例。

1 先作一個寬1024點的banner圖，注意一點：如果你的banner圖有文字敘述，像網誌名稱，最好讓這些文字擠在左邊800點之內，因為你還是得預設大多數人用的瀏覽器是800點寬

2 上傳圖檔

3 在stylesheet中，將剛才上傳的圖設為banner的背景：

#banner {
….
….
background:url(http://banner圖的網址/檔名.jpg) no-repeat;
}

4 雖然把banner圖設為背景會讓它的寬度隨頁面變化而改變，但這裡有個問題：原來banner圖也是一個按鈕，按下去可以回到主索引頁，但改成背景之後，就沒有這種功能了。所以我們要再製作一個純作為按鈕的圖，可以放在前面，但又不會擋住背景圖。該怎麼作呢？

5 對，就是作一個空無一物「透明的」gif圖，寬度只要800點就可以了。如果你不知道怎麼作透明圖的話，請參考相關書籍，或問問google。或者，這裡有一個800x224的透明圖，你可以抓回去改成你需要的大小

6 上傳這個透明圖

7 在index.htm的模板中找到

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1">…….</h1>
</div>

把它改成

<div id="banner">
<a href="<$MTBlogURL$>" accesskey="1"><img src="http://透明圖的位置/圖檔名.gif" border=0></a>
</div>

8 彙整與單篇文章模版也照作

9 重建所有網頁

憂鬱馬戲團 Blue Circus