教網部落格模板進階研習
This presentation is the property of its rightful owner.
Sponsored Links
1 / 64

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


  • 66 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


4532886

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

陳宣霖

9369968-321

[email protected]

宜蘭縣教育處網路中心

http://blog.ilc.edu.tw/blog/4950


4532886

課程緣起

  • 部落格可以算是最容易上手的內容網站

  • Web2.0後有超級多、各式各樣的網路服務。

    • 又具有Mashup的特性

    • 使用網路服務→產生程式碼→丟入部落格→讓部落格功能豐富起來,開啟美麗的花朵。


4532886

教網部落格

  • 教網提供DNS轉址到教網部落格網誌的服務

    • 輸入學校的網址,可直接跳到教網部落格

    • 學校不用再設一台專門的網頁主機

  • 具有開放性,不像無名小站,不接受一些程式碼…

  • 具有穩定性,有專門備份的主機保護內容http://blog.ilc.edu.tw/blog/blog/4950/post/14933/74751


4532886

課程內容


4532886

課程內容


4532886

新增共同作者


4532886

新增共同作者


4532886

導覽選單


4532886

導覽選單


4532886

簡易文章標題


4532886

簡易文章標題

1

2

3


4532886

文章分類不在首頁顯示

  • 結構化網站的需求之一 <link>

    • 不想要因為新增文章後,網站重要文章被擠到下面。


4532886

文章分類不在首頁顯示


4532886

文章分類不在首頁顯示


4532886

選單區塊

  • 簡易的網站選單功能


4532886

選單區塊

  • 簡易的網站選單功能


4532886

選單區塊


4532886

系統區塊


4532886

聯播RSS訊息的新聞區塊

  • 將其他網誌的最新文章,可以自動得出在自己的網站中。

  • 各班網站、行政網站可以匯集過來

  • 缺點-有點陽春,可用Google閱讀器代替。


4532886

聯播RSS訊息的新聞區塊


4532886

聯播RSS訊息的新聞區塊


4532886

聯播RSS訊息的新聞區塊

  • 教網Blog中,某個網誌的RSS連結http://blog.ilc.edu.tw/blog/rss.php?blogId=4950&profile=rss20

    • 將紅色的數字,改為要RSS的那個網誌編號

  • 某個文章類別的RSS連結

彙集校內的優秀作品

如每個班級blog,都有一個學生優秀作品的分類。將這

些rss匯集起來,就能在學校

首頁上呈現來自各班的優秀

作品。


4532886

聯播RSS訊息的新聞區塊


4532886

超自由的Html網頁區塊

WEB 2.0 / Mashup


4532886

超自由的Html網頁區塊


4532886

超自由的Html網頁區塊


4532886

超自由的Html網頁區塊

  • DHL什麼都送


4532886

超自由的Html網頁區塊


4532886

超自由的Html網頁區塊


4532886

超自由的Html網頁區塊

  • 可以試試這個-宜蘭e管家

    • http://emsg.e-land.gov.tw/emgrweb/label/index.jsp

  • 串聯貼紙的玩法


4532886

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


4532886

要不要看見的中間區塊

點入文章後就看不到

首頁有這個區塊


4532886

要不要看見的中間區塊


4532886

要不要看見的中間區塊


4532886

網誌區塊在CSS中的對應

  • CSS是網頁排版的標記性語言

  • Html是內容,CSS就是穿在外面的衣服


4532886

網誌區塊在CSS中的對應


4532886

網誌區塊在CSS中的對應

清楚醒目顯示

不用擔心改壞,系統保留五份。

左:搜尋

右:跳行

Css的內容


4532886

認識CSS

試著修改背景的底色


Css content

認識CSS-content

Border-left (左邊邊界): 1px (線條寬度) solid (線條樣式)

更多樣式說明可見這裡http://css.1keydata.com/tw/border.php


Css header

認識CSS-header

背景圖的設定,也可以從外觀管理選擇檔案中心的圖檔

若要自己設計圖檔的話,寬度是990px


Css blogname

認識CSS-blogName

這是有關網誌標題的css內容。

可以讓標題字變大,或顏色。


Css navigator

認識CSS-navigator

設定導覽選單區塊的樣式。


Css widgettitle

認識CSS-widgetTitle


Css widgetcontent

認識CSS-widgetContent


Css posttext

認識CSS-postText

130%

180%


Google

Google閱讀器的好用

可匯集不同網誌的最新文章

可做成網站連結選單


Google1

Google閱讀器的好用

  • 申請一個Gmail的帳號,不要與私人的混在一起。申請網址從Gmail右下的建立帳戶

  • 登入後使用「閱讀器」


Google2

Google閱讀器的好用

  • 將想要納入聯播,加入到閱讀器中

  • http://blog.ilc.edu.tw/blog/rss.php?blogId=673&profile=rss20

教網的blog,要新增的話

若找不到rss網頁,可以直

接複製下面的網址,只要

修改圈起來的數字,填入

那個blog的數字即可。


Google3

Google閱讀器的好用

  • 匯入後,需要做資料夾的分類,聯播需要以資料夾為設定的單位


Google4

Google閱讀器的好用

  • 進入管理訂閱項目,進行聯播的設定。在畫面的左下角


Google5

Google閱讀器的好用


Google6

Google閱讀器的好用


Grazr

網站連結-Grazr

  • Blog本身都有提供網站連結的功能,不過一多就落落長。

  • 可以利用Grazr結合Google閱讀器,建立右方的網站連結。http://grazr.com/


Grazr1

網站連結-Grazr

先登入Google,點選閱讀器。


Grazr2

網站連結-Grazr

  • 進入管理訂閱項目,進入「匯入/匯出」。 管理訂閱在畫面的左下角


Grazr3

網站連結-Grazr

  • 將這個OPML檔案放在網路上(可上傳到部落格的檔案中心)

  • 上傳後,取得這個檔案的網路位址

從網址列取得檔案的網路位址,將它複製起來。


Grazr4

網站連結-Grazr


Grazr5

網站連結-Grazr


Grazr6

網站連結-Grazr


Grazr7

網站連結-Grazr


Google7

Google限定網誌搜尋

  • 教網部落格雖也有搜尋功能,但目前使用搜尋時,會拖垮系統的效能。

  • 可利用Google所提供的服務-自訂搜尋http://www.google.com/cse/tools/create_onthefly?hl=zh-TW或用google搜尋「自訂搜尋」關鍵字也可連到上面的網站


Google8

Google限定網誌搜尋


Google9

Google限定網誌搜尋


  • Login