珊銘的心情記事園地

校內研習進修--環保創意美勞

Fri, 24 Oct 2008 20:27:10 +0800

豐富的生活資源充斥在孩子生活的週遭，許多的材料都是隨手可得的，但是如何克己復禮做環保，也成為了一項重要的議題。

我們希望引領孩子透過運用資源回收材料來進行創作，不僅享受創作和組合的樂趣，也能做到愛護環境的美德。

因此，校內研習特別安排了有關環保美勞的創作，給老師注入ㄧ點妙點子，然後可以在教室裡面開出更絢麗的火花。

在老師的巧手變化之下，一項項特別的作品出現了，大家都驚喜萬分，真是太...神奇囉。

校內教師研習--茶道

Fri, 17 Oct 2008 20:15:39 +0800

經過教學研討會的討論，校內老師決定來一趟心靈的饗宴--茶道研習，經過研究祖老師的精心規劃.安排和連絡，我們利用週六的上午來到了位於新生南路上的紫藤廬，沉澱平時忙錄的生活步調，靜下心來感受茶的美。

劉老師和緩的語調引領我們進入茶道的世界，雖然茶道是非常深奧的一門學問，但是在劉老師的解說之下，大家可都是受益良多哩。

暑假到陽明山參加Blog研習

Sat, 26 Jul 2008 21:53:24 +0800

趁著暑假到陽明山參加自己有興趣的研習，
真是一件滿開心的事情。

一看到教師研習中心在暑假又開出阿杰老師和明璇老師的課程，二話不說馬上報名。

我很喜歡這二位老師的教學課程，易懂.清楚.有成就感。非常幸運的是---我又可以上山取經，真是太.......開心囉！！

雖然我已經在今年寒假時上過ㄧ次阿杰老師和明璇老師的部落格課程，但是仍然想趁著這次上山的機會複習一下舊經驗、再學一些新的技巧，學習的結果很令我滿意，雖然個人覺得自己的技巧仍然不夠熟練，但是對於新完成的網頁修圖，已經頗令人驚喜。原來一些些的小修改，就會有大大的不同，而且老師還細心的幫每一位學員檢查程式碼，真是太感動了！！

阿杰老師教我們把重要的筆記做在自己的部落格裡面《就是轉貼老師的文章啦》，這樣以後就算忘記了，也可以輕易找到，老師真得很好.很細心。足....感動耶！！

對了，阿杰老師還細心的告訴我們，可以多申請幾個部落格，方便做不同類別的編輯，所以我有幾個不同的帳號了耶。

這是我們家寶貝女兒的部落格哦！
http://www.tiec.tp.edu.tw/lt/blog/117

這是我們家寶貝兒子的部落格哦！
http://www.tiec.tp.edu.tw/lt/blog/165

這是我預計製作下學年班級網站的部落格哦！
http://www.tiec.tp.edu.tw/lt/blog/168

這次的課程我最新的、最特別的收穫是學到了PhotoScape的影像處理軟體和學會自訂模板製作出有個人風格的佈景圖。PhotoScape的影像處理軟體可以輕易編修出美美的照片，真是事半功倍！！在自訂模板的部份，覺得過程很複雜，但是照著老師的說明一步一步來，就覺得自己滿厲害的耶！！

此次還有製作卡通徽章的課程，我特地做了家中孩子的，真是可愛！！

對了，在陽明山研習的幾天，每天中午吃完飯後我都會到研習中心後方的公園去散步，風景很棒。
很多人都到這兒來偷得浮生半日閒，我喜歡順著林蔭大道走到公車總站，再繞一圈回來。一路上，常常可以看到很多新人在拍婚紗照哩！！

第三天的課程是自訂模板，中午的時候想說快快去練習，但是又想說這是最後一天的研習，還是走一圈吸收一下芬多精再回來繼續打拼好了。
我照著我習慣的路走，到路口時轉了一下頭，本來都習慣右轉，沒想到左方居然是滿滿一池美麗的蓮花，吸引我走向前去細細觀察一番！！
我想，我太容易依循自己的習慣來走，居然沒發現另一頭的美景。這給了自己一個檢討的機會，凡事要多方面的去考量，說不定會發現另一片天哦！！

[模版改造] 如何增加頁首的水平選單

Fri, 25 Jul 2008 15:27:29 +0800

想要加入如同阿杰老師網誌上的水平選單嗎？

你必須要在 roodo.css 及 header.template 兩個檔案中加入程式碼！

roodo.css 加入程式碼
/* 水平選單 */
#hnav {
font-size: small;
}

#hnav li ul li a { /* for sub-menu items */
/* Apply the width here (not to li) so that IE regards entire width as clickable */
/* This also seems to fix the "3px gap between list items" bug in IE. */
width: 6em;
border-top-style: none; /* to get single line between items */
padding: 1px 10px 2px 10px;
}
/* note: important to keep ordering of LVHA link, visited, hover, active */
#hnav ul li { display: inline; }
#hnav ul li a
{
padding: 0.2em 1em;
background-color: #121212; /* 背景色彩 */color: #bfbfbf; /* 平常的文字色彩 */text-decoration: none;
border-right: 1px solid #fff;
}
#hnav ul li a:hover
{
background-color: #94C22C; /* 移上的背景色彩 */color: #fff; /* 移上的文字色彩 */}
#navlist li #current
{
color: #799F27;
}

header.template 加入程式碼

你可以依需求去增減或修改程式碼！

<div id="hnav"><ul>
<li><a title="{$locale->tr("main")}" href="{$url->blogLink()}">{$locale->tr("main")}</a></li>

<li><a title="{$locale->tr("archives")}" href="{$url->templatePage("archives")}">{$locale->tr("archives")}</a></li>

<li><a title="{$locale->tr("links")}" href="{$url->templatePage("bookmark")}">{$locale->tr("links")}</a> </li>

<li><a title="{$locale->tr("admin")}" href="{$url->getAdminUrl()}">{$locale->tr("admin")}</a></li>

<li><a class=aside title="臺北市教師研習中心部落格" href="{$url->getBaseUrl()}/summary.php">北市教研中心部落格</a></li></ul>
</div>

[模版改造] 部落格主圖的修改要點

Fri, 25 Jul 2008 14:36:11 +0800

創作獨一無二的主題
真得好特別哦!!感謝阿杰老師和明璇老師的指導!!

請注意

如果模版的主圖是 gif 格式，必須先在 PhotoImpact 中轉換成 RGB 全彩格式。這樣才能和其他的圖形做合成！

接著用相同「副檔名」 gif 格式。用相同的檔名覆蓋後上傳。

此外如果主圖高度不夠，可以加高。

修改 roodo.css 中的

#banner { } 中的 height 值。

[模版改造] 如何將「寬度 800 像素」的模版改為 100%

Fri, 25 Jul 2008 10:37:08 +0800

如果寬度是預設給 800 x 600 螢幕的模版。要放大一點的圖就不方便。有時會超出文章的範圍或破壞版面！

其實只要修改幾個小地方就可以啦！你可以參考使用的模版修改類似這些 CSS ！

參考範例

http://www.tiec.tp.edu.tw/lifetype/1413

在 roodo.css 樣式表中來做變更

首頁主圖齊右

BODY {
Font-Family: Arial, Helvetica, sans-serif;
WIDTH: 100%;
COLOR: #FFFFFF;
HEIGHT: 100%;
TEXT-ALIGN: center;
background-color: #8DC63F;
background-image: url(47main_image.gif);
background-repeat: no-repeat;
background-position: top right; /* 改成靠右 */
}

改變整體寬度

#container {
MARGIN: 0px auto;
WIDTH: 100%; /* 改變整體寬度 */
TEXT-ALIGN: left;
}

改變內文寬度

#content {
FLOAT: left;
WIDTH: 75%;/* 改變內文寬度 */
padding-top: 10px;
}

改變文章寬度

.blogbody {
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 10px;
PADDING-TOP: 10px;
border-top: #FFF 1px solid;
width: 100%;/* 改變文章寬度 */
padding-left: 10px;
}

改變選單寬度

#links {
MARGIN-TOP: 440px;
FLOAT: right;
TEXT-ALIGN: center;
width: 20%;/* 改變選單寬度 */
margin-left: 0px;
}

主圖框寬度改成 100 %

#banner {
WIDTH: 100%;HEIGHT: 252px;
background-image: url(top.gif);
background-repeat: no-repeat;
background-position: top left; /* 改成靠左上 */
background-color: #F5FAC7;
}

請自行修改您的主圖配新寬版面。

部落格名稱改齊右

.blogtitle {
FONT-SIZE: 20px;
PADDING-TOP: 30px;
TEXT-ALIGN: right;
padding-right: 20px;
color: #FFFFFF;
}

[模版改造] 自訂模版修改要點

Fri, 25 Jul 2008 10:34:04 +0800

在使用 LifeType 部落格時，如是是套用「樂多」模版。最重要的檔案是 roodo.css 這個樣式表。再來就是 links.templates 選單模版。還有 header.templates 頁頭樣版。

「links.templates」 選單模版是影響：

你可以自行調整區塊位置或要不要顯示。

1.進入個人網誌設定 > 管理網誌模版 > 網誌模版編輯器

2.選取自訂模版

3.編輯其中的 links.template

4.在編輯器中用  下的就是一段的區塊

下圖中就是負責「月曆」及「個人資訊的區塊」

你可以框選拖曳改變顯示的位置！

如果用  就代表註解就不會顯示出來哦！

Flash及程式碼對照如下-- 你只要將程式碼複製加入 links.template中想要的位置。

<DIV class=sidetitle>目前時間</DIV>
<DIV class=side>
<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog05-kyaba.swf" width="92" height="85" type="application/x-shockwave-flash" border="0" wmode="transparent" />
</DIV>

貓咪系列：

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/cat01-tokei.swf" width="80" height="86" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/cat02-nyan.swf" width="80" height="85" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/cat03-tama.swf" width="107" height="90" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/cat04-tothi.swf" width="93" height="102" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/cat05-rakyu.swf" width="127" height="87" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/cat06-gu.swf" width="80" height="85" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/cat07-tokei.swf" width="100" height="100" type="application/x-shockwave-flash" border="0" wmode="transparent" />

狗狗系列：

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog01-bekun.swf" width="72" height="84" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog02-chiko.swf" width="80" height="90" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog03-choco.swf" width="105" height="90" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog04-hana.swf" width="70" height="82" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog05-kyaba.swf" width="92" height="85" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog06-lady3.swf" width="93" height="102" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog07-patora.swf" width="83" height="104" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog08-pome.swf" width="80" height="88" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog09-robin.swf" width="92" height="85" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog10-sakura.swf" width="83" height="104" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog11-sibaoyako.swf" width="127" height="87" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog12-sizu.swf" width="110" height="80" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog13-tyatya.swf" width="80" height="90" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog14-yoku.swf" width="87" height="84" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog15-eme.swf" width="105" height="90" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog16-kogi.swf" width="93" height="102" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog17-pu.swf" width="70" height="82" type="application/x-shockwave-flash" border="0" wmode="transparent" />

<embed src="http://www.tiec.tp.edu.tw/lifetype/flash/dog18-doramu.swf" width="109" height="132" type="application/x-shockwave-flash" border="0" wmode="transparent" />

自訂模版

Fri, 25 Jul 2008 09:54:23 +0800

想要設計屬於自己的部落格模版嗎？

阿杰老師和明璇老師細心指導,收穫多多,非常感謝!!

1. 只要進入[個人網誌設定>網誌模版編輯器]選取一個你喜歡的模版做為基本樣式後。按下複製模版圖示。

接著就可以命名一個只有自己可以使用的模版啦！

2.再由 [個人網誌設定>基本設定>網誌設定]中的「模版」由下拉選單中去選擇剛才建立的自訂模版。

3.以後就可以由[個人網誌設定>網誌模版編輯器]中，在自訂模版上按下[編輯]圖示去進行修改。

接著就可以看到很多的 template 、css 、圖檔。