微光角落

上了10堂課，來回答這10+1題吧！

2011-10-21T11:29:00.003+08:00

哈哈， ~~10/20~~ （感謝同學指正，讓我有多賺到兩堂課的錯覺）10/27是我們部落格應用班的第10次課程喔！

同學們都撥空來上課，出錢又出力了，一定要有收穫回家，對不對？互相勉勵！也許現在你還在懵懵懂懂，但千萬不要放棄，誰都不希望剩下的一個月鴨子聽雷下去吧？趁這個週末來複習一下！

既然上了10堂課，底下有10+1個問題可以考考自己，不會的人要 ~~吞粉筆~~ 小跑步追上來喔，嘿咻嘿咻嘿咻咻……（好喘）。

我自己的部落格網址是：　　　　　　　　　　　　
從哪裡登入Blogger（自己的部落格），網址是：　　　　　　　　　　
我的「整篇網誌寬度」是　　像素，「右側欄」是　　像素。
（提示請看下圖：從 [設計] 開始，一步一步找出答案）
這是部落格管理介面，要新增一篇文章的話，按哪裡？
怎麼留言給同學？要寫在哪個框框裡（四個字）？答：　　　　
我想分享一首歌給訪客，新增文章後要把這段貼在哪裡？ [撰寫] 還是 [HTML] ？

<object width="450" height="120"><param name="movie" value="http://mymedia.yam.com/*/3362092"></param><param name="quality" value="high"></param><param name="wmode" value="transparent"></param><embed src="http://mymedia.yam.com/*/3362092" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="450" height="120"></embed></object>
蘋果日報今日新聞網址：http://goo.gl/DsE2j
請用這個網址加上新聞標題「88歲火車頭吸引鐵道迷」做出一個超連結。
最近有部電影叫做《牽阮的手》，我想把這支預告片分享給訪客，請找出語法貼到文章裡。（提示：可以點開超連結，或者自己到YouTube搜尋預告片，重點是那段語法你會不會找？）
想換新拍的照片當作標頭（banner），但是太大張了，可以用哪個網站修圖？答：　p*****　
照片修好了，調整成適合標頭的大小，接下來要去哪裡設定才能成功更換？

填空：　　　　 → 找到 [標頭] 按　　　　 →
跳出新視窗按　　　　 → [選擇檔案] 並開啟→ [儲存] ，完成！
加分題：阿線老師做了一個上課用的部落格，網址是：

［看過來！］大家可以在底下留言給我，你會幾題？又吞了幾根粉筆呢？

關於這些部落格筆記

2011-10-20T01:13:00.003+08:00

這一系列不是教學文，千萬不要誤會喔！

充其量是筆記的整理，或許對同學有點幫助，老師也能看到我們到底學得對不對。（老酥，我的意思是有看到就稍微幫我揪錯，免得害到有心參考的同學）

起初我只是想邊上課邊筆記，然後有機會就整理出來。開始上課以後發現好難，我的速度跟不上；而且操作電腦真的是多摸幾下比什麼筆記都有用，寫筆記除非是附上步驟跟截圖，否則用處不大，後來決定就量力而為吧。至於截圖是為了練習picnik改圖，所以抱歉清晰度有點不足，哈哈！

最大的收穫是，我現在對Blogger有哪些東西，架構層級如何，比以前清楚多了！我方向感很差，一直覺得路癡有影響到我建構部落格的概念，相當容易迷路耶我…。唯一辦法是把部落格當作網路上的家，自己家當然要進進出出直到摸透為止啊。現在小有進步，可以得意一下！XD

HTML的第一堂課

2011-10-19T10:00:00.000+08:00

HTML是寫給電腦看的語言，就像跟阿公講台語一樣，是為了讓它能了解「你要什麼」。

在部落格寫新文章的時候，會看到有提供兩個頁面：「撰寫」跟「HTML」。其實兩者是一樣的，只是用不同的方式表達相同的內容。例如：

跳樓大拍賣！每件 ~~1000~~ 100元！寫成HTML後跳樓大拍賣！每件<del> 1000 </del>100元！

「<」和「>」一組，不管中間東西多長，要有頭有尾，例如：

<i> 斜體 </i>
<b> 粗體 </b>
<del> 刪除線 </del>

也有例外，像<a href 網址>，要以</a>結束；
但<img 圖片>，並不需要以</img>結束。
舉例看看就清楚了：

<a△href="http://www.books.com.tw"△title="博客來網路書店"△target="_blank"></a>

這串東西拆開來看有幾個重點：
❏ <a>、</a>前後包夾
❏ 中間雖長，但看得出來是在講三件事：href="xxx"、title="xxx"、target="xxx"
❏ 三件事之間要留一個空白（△代表空格）
❏ 「=」後面要接兩個「"」
實際做做看，以下是一串貼紙語法，如果我希望點貼紙的時候可以另開新頁，不要蓋掉我原本的頁面，那應該把 target="_blank" 貼在哪個位置才對呢？

在 [HTML] 貼上這行語法：
<a href="http://stickeraction.com/handwritten/go" title="來吧！用手寫！"><img src="http://stickeraction.com/handwritten/sticker" alt="來吧！用手寫！" border="0" /></a>
點貼紙直接跳到活動頁面→

答案是：
<a href="http://stickeraction.com/handwritten/go" title="來吧！用手寫！" target="_blank"><img src="http://stickeraction.com/handwritten/sticker" alt="來吧！用手寫！" border="0" /></a>
點貼紙開啟新的活動頁面→

將串連貼紙放到側欄

2011-10-19T02:16:00.000+08:00

【StickerAction! 收集串連貼紙的網站，也可製作】

這個很簡單，取得串連貼紙語法的方式跟前一篇相同，只是貼到側欄小工具區而已。

進入部落格後台管理介面
[版面配置] → [（側欄的）新增小工具] → [HTML/JavaScript]
把語法貼進 [內容] 框框裡， [標題] 欄位可寫可不寫
最後的結果就像這樣：

在文章裡使用串連貼紙

2011-10-19T00:37:00.000+08:00

【StickerAction! 收集串連貼紙的網站，也可製作】

串連，是部落客之間互相響應的方式；

可以想成家裡開店歡迎朋友寄放名片有空幫忙發一樣。
只要我部落格的訪客按下串連貼紙，就能連結到該活動頁面了，十分方便。

到 [貼紙列表] 找到有興趣的貼紙，點進去
將 [貼紙語法] 框框內的語法複製起來
將如下語法貼到新文章裡的 [HTML] 頁面：

<a href="http://stickeraction.com/MelamineFree/go" title="本部落格100%不含三聚氰胺"><img src="http://stickeraction.com/MelamineFree/sticker" alt="本部落格100%不含三聚氰胺" border="0" /></a>
切換到 [撰寫] 頁面，就會看到串連貼紙出現囉！
如果貼紙語法的藍色框框裡面顯示 [取得貼紙語法] ，一樣按下去，下面會出現幾個圖示選擇，點選後語法就會出現，複製起來照步驟3.跟4.進行即可。
切換到 [撰寫] 頁面，就會看到串連貼紙出現囉！

在文章裡分享網路上的音樂

2011-10-18T23:45:00.000+08:00

【天空影音找影片或音樂（只有耳機圖案的就是音樂）】

隨意 [搜尋] ，找到喜歡的影片
將 [外嵌影音] 框框內的語法複製起來
將如下語法貼到新文章裡的 [HTML] 頁面：

<object width="450" height="120"><param name="movie" value="http://mymedia.yam.com/*/3362092"></param><param name="quality" value="high"></param><param name="wmode" value="transparent"></param><embed src="http://mymedia.yam.com/*/3362092" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="450" height="120"></embed></object>
切換到 [撰寫] 頁面，就會看到播放器出現囉！

▶ 蘇打綠2011專輯《你在煩惱什麼》10/19 開始預購11/11 正式發行新歌〈幸福額度〉搶先試聽！

［老師說］任何<object 或<iframe 開頭的整段語法都可以如法炮製，分享影音。

在文章裡分享網路上的影片

2011-10-18T23:30:00.000+08:00

【YouTube 最熱門的影音欣賞、上傳、分享網站】

隨意 [搜尋] ，找到喜歡的影片，按下 [分享] 再按 [嵌入]
程式碼有新舊版本的不同，可依自己部落格的需求勾選（新的無法顯示就改成舊的）
放映尺寸選擇，也可自訂寬度或高度
全部選擇完畢後，將框框內的語法（=程式碼）複製起來
將如下語法貼到新文章裡的 [HTML] 頁面：

<iframe width="480" height="360" src="http://www.youtube.com/embed/FHYCZz8-fNA" frameborder="0" allowfullscreen></iframe>
切換到 [撰寫] 頁面，就會看到影片出現囉！寫段感想或推薦文字吧！

▶ 睽違兩年再度出輯！就讓張智成聲入靈魂，暖你秋涼的心。2011全新國語大碟《你愛上的…》 10/17 開始預購，11/03 正式發行！

在文章裡加入超連結

2011-10-13T20:10:00.000+08:00

寫文章的時候，如果有相關資料要引用或者介紹的，可以利用「超連結」的方式；當然把網址貼出來也不是不行，但落落長的網址，訪客必須先複製再貼到網址列去開啟，實在不太方便啊。以下是兩者的差別：

例1. 發現一個很棒的食譜網站，是楊桃文化，提供超過萬道食譜搜尋，網址在這：http://www.ytower.com.tw/recipe/recipe.asp。裡面還有影音教學，像香芹牛肉：http://www.ytower.com.tw/movie/movie.asp?id=Y-841、用電鍋做紅豆涼糕：http://www.ytower.com.tw/movie/movie.asp?id=Y-840、排骨煲仔飯：http://www.ytower.com.tw/movie/movie.asp?id=Y-841，看起來都好好吃！
例2. 喜歡做菜的人有福了！楊桃文化萬道食譜搜尋裡面好多寶可以挖，除了用食材找作法，還有影音教學，像香芹牛肉、用電鍋做紅豆涼糕、排骨煲仔飯等都有真人示範喔！趕快去看今天晚餐吃什麼吧！

是不是同樣的事情，第二種寫法看起來順眼多了？把普通的文字，變成有底線而且點下去可以直接跳到那個頁面的文字，就叫做加上「超連結」。作法很簡單：

找到你要連過去的網頁，把網址複製下來
回到你的文章撰寫頁面，把想加上超連結的文字反白（=選取，按住滑鼠左鍵然後拖曳）
上方編輯列找到 [Link] ，按下去跳出小視窗，把網址貼在 [Web Address（網址）] 那行，按 [OK]

［老師說］讓超連結以另開新頁的方式呈現，很好用的「target="_blank"」！
（現在的瀏覽器通常會預設開在新分頁，如果沒有就到HTML頁面去修改）

例：<a href="http://www.sun-line.idv.tw/blog/">文字邊境‧換日線</a>
→ 文字邊境‧換日線
例：<a href="http://www.sun-line.idv.tw/blog/" target="_blank">文字邊境‧換日線</a>→ 文字邊境‧換日線

用picnik修圖好好玩

2011-10-06T20:28:00.002+08:00

【picnik 免費就很好用的線上修圖網站】

申請部落格就像買新家，門牌搞定了（網址、網誌標題等），空間設計也很重要！今天準備好一張照片，要來教怎麼做「背景圖片」跟「標頭圖片（=banner）」

圖片尺寸提示

背景圖片：1800*1600px（兩者固定一個，另個大於），大小不超過300k；
標頭圖片：橫長不超過1000px，大小盡量不超過200k 。
標頭製作：先在Picnik開啟圖片，裁剪出需要的範圍，調整大小，最後才上字（否則按比例縮圖後可能字都糊掉）。
在圖片上加字，可取代網誌標題，且不受限於BLOG字體。

為何選擇Google部落格

2011-09-29T18:48:00.000+08:00

原來Google的部落格就是指Blogger，也等於blogspot，我終於連起來了！

比起我曾經短暫使用過的無名小站、Pixnet痞客邦、樂多等BSP，
Google真是太令人驚喜了！管理後台有很多強大但簡潔的功能耶。

缺點大概只有中文翻譯有隔閡……（Google文件我真的老是看不懂啊）
人說一個習慣兩週能養成，想辦法適應它吧！

換日線的部落格應用班，OPEN！

2011-09-27T21:17:00.000+08:00

0927-1117
從夏過渡到秋，也不過是2880mins……

三個月的部落格應用班，相信大家都能學習愉快，我超、超、超期待！