Dear 亞 ~
上次有說這個 banner 是兩張圖片接起來的效果唷!也就是說,倘若要更換右邊的「超連結」區塊背景圖,您必須製作兩張圖檔。「超連結」區塊尺寸標註如下:
圖片參考:http://a.imageshack.us/img192/2715/topbartc.png
上面 960 x 31 + 下面 960 x 449
圖片參考:http://a.imageshack.us/img820/3664/bannerwa.png
原始圖檔並沒有如上範例圖的紅色框線,為避免與知識問答版面的白色背景混淆,所以我加上紅色框線是為了讓您看清楚原始圖檔其實有白色邊線。
請進入〔樣板設定〕→〔編輯CSS檔〕→ 按鍵盤上的〔F3〕尋找 #topbar(樣式表中符合 #topbar 字元會亮度標示)→ 找到以下語法:
#topbar{
height:31px;
background: url(http://pics.yamedia.tw/themes/dream_new/images/topbar.jpg) top left no-repeat;
padding: 5;
width: 100%;
}
接著再尋找 #banner → 找到以下語法:
#banner {
width: 100%;
height: 449px;
background: #FFFFFF url(http://pics.yamedia.tw/themes/dream_new/images/banner.jpg) no-repeat;
color: #FFFFFF;
}
複製以上語法中標示紅字的圖片網址貼在瀏覽器上方網址欄中 → 按下〔Enter〕→ 待圖片出現後,滑鼠對著圖片按右鍵〔圖片另存新檔〕→ 把圖片儲存至您的電腦資料夾中
圖片參考:http://a.imageshack.us/img43/6376/62805451.png
如果不知道如何測量網頁中的元素尺寸,
圖片參考:http://tw.img.webmaster.yahoo.com/247611/ystats.gif
把圖片下載至電腦後使用修圖軟體進行『剪裁』就能得知您要的某一塊圖像的尺寸是多少囉!或者是直接用原圖修改也是方法之一。
圖片修改完成後上傳至您的 yam 天空相簿,再把圖片網址取代上面語法中的圖片網址即可!圖片外連網址取得方法請參閱
圖片參考:http://i661.photobucket.com/albums/uu331/lv_photo/i1.gif
官方公告
另外,您所謂的「分格線」問題,您看到的那一條線並不是圖片喔,它是語法產生的效果!請找到以下CSS:
.post_info {
padding: 10px;
text-align: right;
clear: both;
border-bottom:1px solid #000;
}
語法中的 1px solid #000; 是設定這一條線的寬度、框線樣式、框線顏色!請複製 background:url(http://i.imm.io/8VvZ.gif) repeat-x 0 100%; 取代 .post_info 原來的 border-bottom:1px solid #000; 看結果:
圖片參考:http://a.imageshack.us/img847/9260/77036231.png
下框線的寬度是 685px,不過不需要製作 685px 的分隔線,用語法來控制分隔線的水平方向重複排列即可。同樣是上傳您自製的分隔線圖片後,把圖片網址取代上面標示紅字的範例圖片網址 http://i.imm.io/8VvZ.gif 就大功告成囉!
試試看吧!希望不會感到太複雜~ ^_^