教網部落格模板進階研習 以架設學校網站或組織為例
DESCRIPTION
教網部落格模板進階研習 以架設學校網站或組織為例. 陳宣霖 9369968-321 [email protected] 宜蘭縣教育處網路中心 http://blog.ilc.edu.tw/blog/4950. 課程緣起. 部落格可以算是最容易上手的內容網站 Web2.0 後有超級多 、 各式各樣的網路服務 。 又具有 Mashup 的特性 使用網路服務→產生程式碼→丟入部落格→ 讓部落格功能豐富起來，開啟美麗的花朵。. 教網部落格. 教網提供 DNS 轉址到教網部落格網誌的服務 輸入 學校的網址，可直接跳到教網部落格 學校不用再設一台專門的網頁主機 - PowerPoint PPT PresentationTRANSCRIPT
教網部落格模板進階研習以架設學校網站或組織為例
陳宣霖9369968-321
宜蘭縣教育處網路中心http://blog.ilc.edu.tw/blog/4950
課程緣起• 部落格可以算是最容易上手的內容網站
• Web2.0 後有超級多、各式各樣的網路服務。– 又具有 Mashup 的特性– 使用網路服務→產生程式碼→丟入部落格→
讓部落格功能豐富起來，開啟美麗的花朵。
教網部落格• 教網提供 DNS 轉址到教網部落格網誌的服
務– 輸入學校的網址，可直接跳到教網部落格– 學校不用再設一台專門的網頁主機
• 具有開放性，不像無名小站，不接受一些程式碼…
• 具有穩定性，有專門備份的主機保護內容
http://blog.ilc.edu.tw/blog/blog/4950/post/14933/74751
課程內容
課程內容
新增共同作者
新增共同作者
導覽選單
導覽選單
簡易文章標題
簡易文章標題
12
3
文章分類不在首頁顯示
文章分類不在首頁顯示
選單區塊• 簡易的網站選單功能
選單區塊• 簡易的網站選單功能
選單區塊
系統區塊
聯播 RSS 訊息的新聞區塊• 將其他網誌的最新文章，
可以自動得出在自己的網站中。
• 各班網站、行政網站可以匯集過來
• 缺點 - 有點陽春，可用 Google 閱讀器代替。
聯播 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 就是穿在外面的衣服
網誌區塊在 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 閱讀器的好用
網站連結 -Grazr
• Blog本身都有提供網站連結的功能，不過一多就落落長。
• 可以利用 Grazr 結合Google 閱讀器，建立右方的網站連結。http://grazr.com/
網站連結 -Grazr
先登入 Google ，點選閱讀器。
網站連結 -Grazr
• 進入管理訂閱項目，進入「匯入 / 匯出」。 管理訂閱在畫面的左下角
網站連結 -Grazr
• 將這個 OPML檔案放在網路上（可上傳到部落格的檔案中心）
• 上傳後，取得這個檔案的網路位址
從網址列取得檔案的網路位址，將它複製起來。
網站連結 -Grazr
網站連結 -Grazr
網站連結 -Grazr
網站連結 -Grazr
Google限定網誌搜尋• 教網部落格雖也有搜尋功能，但目前使用
搜尋時，會拖垮系統的效能。• 可利用 Google所提供的服務 - 自訂搜尋
http://www.google.com/cse/tools/create_onthefly?hl=zh-TW或用 google 搜尋「自訂搜尋」關鍵字也可連到上面的網站
Google限定網誌搜尋
Google限定網誌搜尋