« 如何作引文框線 | 主頁面 | 如何讓彙整頁只顯示文章的摘要? »

如何製作彈性招牌?



小黛的問題:我網誌的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 重建所有網頁

del.icio.us HEMiDEMi MyShare


歷史上的今天

共 6 則迴響


  1. isis 說:

    nope.

    set photo width="100%",請參考寶藏嚴網站上面的banner。

    不用上傳透明圖。直接用DIV即可連結。



  2. 葛蘿 說:

    那可以看看我的網頁嗎?
    我的網頁如果不是開到最大的話
    右邊的side bar會像左邊靠進來
    左邊的文字也會亂亂的
    這樣要做什麼設定才不回亂跑呢
    http://www.wretch.twbbs.org/blog/yealing



  3. xxc 說:

    我也來一腳.. :p
    XXC的MT頁面居中攻略法:

    #banner{ width:760px; position:absolute; left:50%; margin-left:-400px; height:45px; }
    /* banner 高度設定為45px,不符需求的自行修改 */
    #content{ width:500px; position:absolute; left:50%; margin-left:-400px; }
    #links { width: 260px; position: absolute; left: 50%; margin-left:100px; }

    note:
    1) 寬度設800px的話,對於真的只有800*600的螢幕還是會出現左右的捲軸,建議設小一點點,760應該都沒問題了。
    2) 這個攻略法不用改到主樣板(main template),只要改CSS就可以了,只要你的主樣板是MT預設的就可以用。
    3) 這是#link(日期,連結等等放置的地方)在右邊的寫法
    4) 我只修改了三個CSS container (#banner,#content,#link)的位置值,其他的color font padding等等我都沒寫。
    5) 如果不想更動原來的CSS裡面設定的字型顏色等等值,只想放成居中的話,一個懶賤的方法是,只把上面的CSS code 「*放在CSS的最後面*」,所以這段CSS會被優先使用,其他沒提到的值會繼續參照原先的設定。




  4. kwei 說:

    我用的結構是像這樣子
    <body>
        <container>
            <banner>,<blogentries>,<link, float:right>
        </container>
    </body>

    然後設
    #container {
    width:800px;
    margin:0px auto;
    }

    整個頁面就會被關在800px裡面而且都會擺在視窗中間



  5. 小黛 說:

    我找到了:quawn寫的,
    http://www.oui-design.com/blog/archives/000718.php
    如何將網誌版面置中
    2004-04-22 09:16 PM

    有你們真棒,不是嗎?
    感恩。



  6. 小黛 說:

    謝謝駝獸呀:)

    如果要運用第一個方法,
    將”整個網誌頁面強迫限制在一定寬度內”

    要怎麼做?


留言