1 / 64

教網部落格模板進階研習 以架設學校網站或組織為例

教網部落格模板進階研習 以架設學校網站或組織為例. 陳宣霖 9369968-321 rainlan@ilc.edu.tw 宜蘭縣教育處網路中心 http://blog.ilc.edu.tw/blog/4950. 課程緣起. 部落格可以算是最容易上手的內容網站 Web2.0 後有超級多 、 各式各樣的網路服務 。 又具有 Mashup 的特性 使用網路服務→產生程式碼→丟入部落格→ 讓部落格功能豐富起來，開啟美麗的花朵。. 教網部落格. 教網提供 DNS 轉址到教網部落格網誌的服務 輸入 學校的網址，可直接跳到教網部落格 學校不用再設一台專門的網頁主機

casta
Download Presentation

教網部落格模板進階研習 以架設學校網站或組織為例

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 教網部落格模板進階研習以架設學校網站或組織為例教網部落格模板進階研習以架設學校網站或組織為例 陳宣霖 9369968-321 rainlan@ilc.edu.tw 宜蘭縣教育處網路中心 http://blog.ilc.edu.tw/blog/4950

  2. 課程緣起 • 部落格可以算是最容易上手的內容網站 • Web2.0後有超級多、各式各樣的網路服務。 • 又具有Mashup的特性 • 使用網路服務→產生程式碼→丟入部落格→讓部落格功能豐富起來，開啟美麗的花朵。

  3. 教網部落格 • 教網提供DNS轉址到教網部落格網誌的服務 • 輸入學校的網址，可直接跳到教網部落格 • 學校不用再設一台專門的網頁主機 • 具有開放性，不像無名小站，不接受一些程式碼… • 具有穩定性，有專門備份的主機保護內容http://blog.ilc.edu.tw/blog/blog/4950/post/14933/74751

  4. 課程內容

  5. 課程內容

  6. 新增共同作者

  7. 新增共同作者

  8. 導覽選單

  9. 導覽選單

  10. 簡易文章標題

  11. 簡易文章標題 1 2 3

  12. 文章分類不在首頁顯示 • 結構化網站的需求之一 <link> • 不想要因為新增文章後，網站重要文章被擠到下面。

  13. 文章分類不在首頁顯示

  14. 文章分類不在首頁顯示

  15. 選單區塊 • 簡易的網站選單功能

  16. 選單區塊 • 簡易的網站選單功能

  17. 選單區塊

  18. 系統區塊

  19. 聯播RSS訊息的新聞區塊 • 將其他網誌的最新文章，可以自動得出在自己的網站中。 • 各班網站、行政網站可以匯集過來 • 缺點-有點陽春，可用Google閱讀器代替。

  20. 聯播RSS訊息的新聞區塊

  21. 聯播RSS訊息的新聞區塊

  22. 聯播RSS訊息的新聞區塊 • 教網Blog中，某個網誌的RSS連結http://blog.ilc.edu.tw/blog/rss.php?blogId=4950&profile=rss20 • 將紅色的數字，改為要RSS的那個網誌編號 • 某個文章類別的RSS連結 彙集校內的優秀作品 如每個班級blog，都有一個學生優秀作品的分類。將這 些rss匯集起來，就能在學校 首頁上呈現來自各班的優秀 作品。

  23. 聯播RSS訊息的新聞區塊

  24. 超自由的Html網頁區塊 WEB 2.0 / Mashup

  25. 超自由的Html網頁區塊

  26. 超自由的Html網頁區塊

  27. 超自由的Html網頁區塊 • DHL什麼都送

  28. 超自由的Html網頁區塊

  29. 超自由的Html網頁區塊

  30. 超自由的Html網頁區塊 • 可以試試這個-宜蘭e管家 • http://emsg.e-land.gov.tw/emgrweb/label/index.jsp • 串聯貼紙的玩法

  31. 超自由的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>

  32. 要不要看見的中間區塊 點入文章後就看不到 首頁有這個區塊

  33. 要不要看見的中間區塊

  34. 要不要看見的中間區塊

  35. 網誌區塊在CSS中的對應 • CSS是網頁排版的標記性語言 • Html是內容，CSS就是穿在外面的衣服

  36. 網誌區塊在CSS中的對應

  37. 網誌區塊在CSS中的對應 清楚醒目顯示 不用擔心改壞，系統保留五份。 左：搜尋 右：跳行 Css的內容

  38. 認識CSS 試著修改背景的底色

  39. 認識CSS-content Border-left （左邊邊界）: 1px (線條寬度) solid (線條樣式) 更多樣式說明可見這裡http://css.1keydata.com/tw/border.php

  40. 認識CSS-header 背景圖的設定，也可以從外觀管理選擇檔案中心的圖檔 若要自己設計圖檔的話，寬度是990px

  41. 認識CSS-blogName 這是有關網誌標題的css內容。 可以讓標題字變大，或顏色。

  42. 認識CSS-navigator 設定導覽選單區塊的樣式。

  43. 認識CSS-widgetTitle

  44. 認識CSS-widgetContent

  45. 認識CSS-postText 130% 180%

  46. Google閱讀器的好用 可匯集不同網誌的最新文章 可做成網站連結選單

  47. Google閱讀器的好用 • 申請一個Gmail的帳號，不要與私人的混在一起。申請網址從Gmail右下的建立帳戶 • 登入後使用「閱讀器」

  48. Google閱讀器的好用 • 將想要納入聯播，加入到閱讀器中 • http://blog.ilc.edu.tw/blog/rss.php?blogId=673&profile=rss20 教網的blog，要新增的話 若找不到rss網頁，可以直 接複製下面的網址，只要 修改圈起來的數字，填入 那個blog的數字即可。

  49. Google閱讀器的好用 • 匯入後，需要做資料夾的分類，聯播需要以資料夾為設定的單位

More Related