白日夢旅行社

弄了兩天，終於把網誌的門面弄的差不多了，網誌可以準備開張了。真是謝謝在"背包公園"熱心分享心得的棧友，讓我這個生手也能在既有的模板上小小的惡搞一番。

底下就野人獻曝一下，說說我如何更動原本日誌提供的dot模板。

1.關於更換最上面(標題列)與左上角的兩張圖︰

我是先參考了KC po的這一篇開始慢慢改的；原本的版型中，最上方標題列是類似液晶數字的圖，左上角則是古典柱頭的圖片。我選了去菲律賓拍的小孩相片，將其大小裁切成 773 × 125 像素。上傳後，在style.css檔案中，將原本的：

#header {
background: #5A634E;
background: url(imagesheader_background.gif) no-repeat;

紅字部分改成我上傳的檔名，標題列的圖便會改過來。

而左上角的小圖是在style.css檔中︰

#menu {
background: url(imagescolumns.jpg) no-repeat;

同樣將紅字部分改成上傳的新圖片檔名；這個檔案的大小我用的是150×100像素。

2.關於養寵物的部分︰

我是參考 rossilin刊的這篇說明。不過經嘗試後發現，dot模板用的語法和別的模板不盡相同，所以我後來將code修改如下，再貼到panel.template這個檔案中。

<li id="pet">
{$locale->tr("My Pet")}
<table border="0" cellpadding="0" cellspacing="0" width="150"><tr><td>
<embed src="http://petswf.bunnyherolabs.com/adopt/swf/hamster" width="150" height="180" quality="high" bgcolor="ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="clr=0xdea63b&amp;cn=seanjunior&amp;an=seanyang" type="application/x-shockwave-flash">
</embed></td></tr><tr><td align="center"><small><a href="http://bunnyherolabs.com/adopt/">adopt your own virtual pet!</a></small></td></tr></table>
</li>

如果有人想複製的話，只要將紅色的字改成系統提供給你的code中的連解網址，就可以了。

至於寵物出現在版面中的位置，我是透過修改 style.css來指定，以下是我修改的段落(綠色字代表增修的部分)︰

#calendar, #search, #archives, #pet {
left: 630px;
margin: 0;
padding: 0;
position: absolute;
width: 150px;
}
#calendar {
top: 0;
}
#search {
top: 160px;
}
#pet {
top: 230px;
}
#archives {
top: 480px;
}

我還蠻喜歡現在我的黃金鼠所出現的位置呢!

3.關於插入Flickr的Flash 相簿︰

我參考了KC的上、下兩篇文章。不過同樣依照dot模板的語法做了修改，以下是我貼在panel.template的這一部分︰

<li id="Flickr Badge">
{$locale->tr("My Photo")|capitalize}
<iframe style="background-color:#ffffff; border-color:#ffffff; border:none;" width="130" height="151" frameborder="0" scrolling="no" src='http://www.flickr.com/apps/badge/badge_iframe.gne?zg_person_id=7......00' title="Flickr Badge"></iframe>
</li>

紅色字的部分是來自於 Flickr Badge 給的code。但是經歷多次失敗後，我的心得是︰
(1)真的要用單引號，不能用雙引號。
(2)原本的 badge_iframe.gne?後面，會有一些zg_bg_color='.....之類的文字串，
如︰ 'http://www.flickr.c.......................me.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=7.............00'

但是因為中間夾雜了單引號，系統誤讀後就會去打開別人的相簿。所以我用了很笨的解決方法︰直接將badge_iframe.gne?後面接上zg_person_id=.....，而把中間的字(綠色部分)全部刪掉。

不過這樣一來，我的相簿上下就沒有任何文字，不能幫 Flickr打廣告囉，嘻嘻。

其實還有許多想改的部分，包括想讓版面寬一點，中間的文章部分能有不同的底色.....不過功力實在不足，如果有高手經過，還希望能多指點指點！