如何製作彈性招牌?

| | 評論(6)

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

分類

評論(6)

isis said:

nope.

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

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

葛蘿 said:

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

xxc said:

我也來一腳.. :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會被優先使用,其他沒提到的值會繼續參照原先的設定。


kwei said:

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

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

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

小黛 said:

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

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

小黛 said:

謝謝駝獸呀:)

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

要怎麼做?

關於此日記

此日記由 bluecircus 發表於 2004年4月24日 07:07

此Blog上的上一篇日記如何作引文框線

此Blog上的下一篇日記如何讓彙整頁只顯示文章的摘要?

首頁歸檔頁可以看到最新的日記和所有日記。

Powered by Movable Type 4.23-zh-tw

團員照片

bluecircus on
www.flickr.com