Embed Size (px)
Citation preview
課程緣起• 部落格可以算是最容易上手的內容網站
• Web2.0 後有超級多、各式各樣的網路服務。– 又具有 Mashup 的特性– 使用網路服務→產生程式碼→丟入部落格→
讓部落格功能豐富起來，開啟美麗的花朵。
教網部落格• 教網提供 DNS 轉址到教網部落格網誌的服
務– 輸入學校的網址，可直接跳到教網部落格– 學校不用再設一台專門的網頁主機
• 具有開放性，不像無名小站，不接受一些程式碼…
• 具有穩定性，有專門備份的主機保護內容
http://blog.ilc.edu.tw/blog/blog/4950/post/14933/74751
課程內容
課程內容
新增共同作者
新增共同作者
導覽選單
導覽選單
簡易文章標題
簡易文章標題
12
3
文章分類不在首頁顯示
文章分類不在首頁顯示
資料夾中媒體檔案的瀏覽• 系統自建播放器
• Cooliris (IE / Firefox)
資料夾中媒體檔案的瀏覽• 先將照片檔上傳到資料夾中
資料夾中媒體檔案的瀏覽
資料夾中媒體檔案的瀏覽
資料夾中媒體檔案的瀏覽點選播放，每張間隔 5 秒
點選後全螢幕顯示，之後按 ESC 取消全螢幕
區塊的活用
選單區塊• 簡易的網站選單功能
選單區塊• 簡易的網站選單功能
選單區塊
系統區塊
聯播 RSS 訊息的新聞區塊• 將其他網誌的最新文章，
可以自動得出在自己的網站中。
• 各班網站、行政網站可以匯集過來
• 缺點 - 有點陽春，可用 Google 閱讀器代替。
聯播 RSS 訊息的新聞區塊
各班的文章分類，可以自動匯集到，學校首頁上。就是靠 RSS
聯播 RSS 訊息的新聞區塊
聯播 RSS 訊息的新聞區塊
聯播 RSS 訊息的新聞區塊• 教網 Blog 中，某個網誌的 RSS 連結
http://blog.ilc.edu.tw/blog/rss.php?blogId=4950&profile=rss20– 將紅色的數字，改為要 RSS 的那個網誌編號
• 某個文章類別的 RSS 連結彙集校內的優秀作品
如每個班級 blog ，都有一個學生優秀作品的分類。將這些 rss 匯集起來，就能在學校首頁上呈現來自各班的優秀作品。
聯播 RSS 訊息的新聞區塊
超自由的 Html 網頁區塊
WEB 2.0 / Mashup
超自由的 Html 網頁區塊
超自由的 Html 網頁區塊
超自由的 Html 網頁區塊
• DHL 什麼都送
超自由的 Html 網頁區塊
超自由的 Html 網頁區塊
超自由的 Html 網頁區塊• 可以試試這個 - 宜蘭 e 管家
– http://emsg.e-land.gov.tw/emgrweb/label/index.jsp
• 串聯貼紙的玩法
超自由的 Html 網頁區塊• 顯示圖片的程式碼
<img src="http://blog.ilc.edu.tw/blog/gallery/4950/4950-343780.jpg" width="746" height="495" />
• 超連結的程式碼 <a href=“http://www.google.com.tw” target=“blank” /> 要顯示的文字 </a>
• 表格的程式碼<table width="500" border="0">
<tr>
<td width=“248” valign=“top”> 表格的內容 </td>
<td width=“248” valign=“top”> 表格的內容 </td>
</tr>
</table>
要不要看見的中間區塊
首頁有這個區塊 點入文章後就看不到
要不要看見的中間區塊
要不要看見的中間區塊
網誌區塊在 CSS 中的對應• CSS 是網頁排版的標記性語言
• Html 是內容， CSS 就是穿在外面的衣服
• 語法查詢： http://css.1keydata.com/tw/• 顏色代碼： http://www.ezsell.com.tw/aseip_folde
r/color2.htm• 語法教學： http://www.flycan.com.tw/board/mod
ules/newbb/viewforum.php?forum=11
網誌區塊在 CSS 中的對應
網誌區塊在 CSS 中的對應不用擔心改壞，系統保留五份。
左：搜尋右：跳行
清楚醒目顯示
Css 的內容
認識 CSS
試著修改背景的底色
認識 CSS-content
Border-left （左邊邊界） : 1px (線條寬度 ) solid (線條樣式 )更多樣式說明可見這裡
http://css.1keydata.com/tw/border.php
認識 CSS-header
背景圖的設定，也可以從外觀管理選擇檔案中心的圖檔若要自己設計圖檔的話，寬度是 990px
認識 CSS-blogName
這是有關網誌標題的 css 內容。
可以讓標題字變大，或顏色。
認識 CSS-navigator
設定導覽選單區塊的樣式。
認識 CSS-widgetTitle
認識 CSS-widgetContent
認識 CSS-postText
130%
180%
Google 閱讀器的好用可匯集不同網誌的最新文章 可做成網站連結選單
Google 閱讀器的好用• 申請一個 Gmail 的帳號，不要與私人的混在一
起。申請網址從Gmail右下的建立帳戶
• 登入後使用「閱讀器」
Google 閱讀器的好用• 將想要納入聯播，加入到閱讀器中
• http://blog.ilc.edu.tw/blog/rss.php?blogId=673&profile=rss20
教網的 blog ，要新增的話若找不到 rss 網頁，可以直接複製下面的網址，只要修改圈起來的數字，填入那個 blog 的數字即可。
Google 閱讀器的好用• 匯入後，需要做資料夾的分類，聯播需要
以資料夾為設定的單位
Google 閱讀器的好用• 進入管理訂閱項目，進行聯播的設定。
在畫面的左下角
Google 閱讀器的好用
Google 閱讀器的好用
Google限定網誌搜尋• 教網部落格雖也有搜尋功能，但目前使用搜尋時，會拖垮系統的效能。
• 可利用 Google所提供的服務 - 自訂搜尋http://www.google.com/cse/tools/create_onthefly?hl=zh-TW或用 google搜尋「自訂搜尋」關鍵字也可連到上面的網站
Google限定網誌搜尋
Google限定網誌搜尋
Slideshare-線上文件分享平台
文件 (Word 、 Excel 、 PDF)
簡報
Slideshare-線上文件分享平台
Slideshare-線上文件分享平台
Slideshare-線上文件分享平台
Slideshare-線上文件分享平台
Slideshare-線上文件分享平台
Slideshare-線上文件分享平台
Slideshare-線上文件分享平台
MixPod – 音樂播放器
• 播音樂不用擔心版權• 音樂來自 youtube• http://www.mixpod.com/ • http://www.freegroup.org/2009/05/free-flash-mp
3-music-player-mixpod/(介紹使用的網站 )
