教學網頁建置 重點說明

1. 教學網頁建置 重點說明 許籌尹 僑光技術學院 資訊管理系 95.11.28

2. 背景 • 網路教學環境中，教師的角色必須由 說書(Presenters)角色，轉變為學習過程中的 輔導者(Facilitators)、 伙伴 (Collaborators) 和 學習資源提供者(Brokers of Learning Resources)。 • 藉由全球 WWW 的普及，教師所提供的學習資源越來越豐富生動；學生更可以享有不受時空限制，隨處可學的優點。

3. 動機 • 推動資管系的老師建置教學網頁，可以隨時公告相關的授課資料，豐富授課內容。而學生也會慢慢養成隨時連上網站瀏覽，並搜尋相關的資料及連結。如此，資管系的師生更可以有多元的互動。增加學習機會，平衡學生學習程度上的差異。 • 僑光圖資中心提供方便的程式連結，以供全校的教師使用。特此介紹留言版，討論區，計數器，時間顯示等使用方法。

4. 內容大綱 • 網頁製作過程 • 軟體 Frontpage 版本說明 • Frontpage 線上教學資料 • 僑光圖資中心所提供的資源 • 維護管理

5. 網頁製作的過程 網路主機提供儲存網頁的空間 Frontpage 網頁編輯軟體 編輯修改/儲存 網頁檔案 傳送網頁檔案至網站伺服器 覽器/ 重新整理

6. 學校主機的空間 • 僑光圖資中心提供每位老師 100 MB的網頁空間。若是空間不足的話，請連繫圖資中心的楊順評老師(ysp@ocit.edu.tw)。 • 接著，安裝frontpage 軟體並且製作教學網頁，上傳至學校的主機上，就大功告成了。

7. Frontpage 說明 • 目前系上提供不同的版本，包括 frontpage 2000, frontpage 2002, frontpage 2003。 • 安裝時請注意配合自己電腦上的office版本，比較安全。如果使用 office 2000，就安裝 frontpage 2000。 • 若是使用 office 2003，就最好安裝最新的frontpage 2003，以免出有問題。(之前使用過 office 2003 配上 frontpage 2000，就會出現當機或是其他怪怪的問題) • frontpage 的啟動畫面不同，就可以判斷出frontpage 的版本。 除了設計網頁的功能不同之外，其他 撰寫程式碼 和 處理資料也不同，請自行參閱連結： http://www.microsoft.com/taiwan/office/frontpage/prodinfo/compare.mspx#E1

8. Frontpage 2000/2002 網站的檢視模式： • 網頁 • 資料夾 • 報告 • 導覽 • 超連結 • 工作 網頁的檢視模式： • 一般模式 • HTML模式 • 預覽模式

9. D C A B Frontpage 2003 的畫面

10. Frontpage 2003 畫面 A 網站的檢視工作： • 資料夾 • 遠端網站 • 報告 • 導覽 • 超連結 • 工作

11. Frontpage 2003 畫面 網頁的檢視模式： • 一般模式 • HTML模式 • 預覽模式 B 預覽模式不一定完全準確！最好用瀏覽器看！例如 計數器、資料庫等元件… 最後還是以上傳到伺服器後瀏覽為準。

12. Frontpage 2003 畫面 瀏覽網站資料夾或是網頁編輯的切換。 C

13. Frontpage 2003 畫面 選擇開啟網站或是網頁。 D

14. Frontpage 教學網站 • 接下來先介紹簡單網站及網頁的新增工作，和僑光圖資中心所提供的網頁程式碼。 • 其他frontpage 2003 功能的操作，請參閱以下所介紹的網站練習。極力推薦第一個網站(微軟百事達)，很請楚的操作過程所錄影下來的影音檔。非常方便學習！ 微軟百視達 教師呂聰賢操作frontpage 教學錄影檔案，非常清楚的講解過程。 高雄市軟體教學影音網 高雄縣教育網路中心 提供許多的教學影音檔案。 麻辣學園 線上教學，還有ASP的小程式可以下載，也有office, PHP 教學。 網頁製作教學 有分基礎入門，初階練習和進階應用。還有flash, dreamweaver 等應用介紹。 Frontpage 教學網站 線上教學，有些簡單的操作說明，雖說要付費，但是網站上的資料就夠用了。 Frontpage 線上網頁製作教材 以frontpage 2000 為主的線上教學網站，請點選‘教學專區’中的‘frontpage 教學’即可。 Frontpage 教學網 南寧高中的教學資源，簡單的frontpage 教學。 微軟frontpage 線上教學資源 微軟資訊學園，提供高手們完整的進階應用。

15. 選擇新的網站！ 在frontpage 中先建立新的網站

16. D:\Myweb 可以套用不同的範本！ 設定本機資料夾的位置，來儲存網頁資料！做完後，再上傳至伺服器瀏覽！

17. 如果選擇[個人網站]，系統中就會自動新增一些可能用上的資料夾和檔案！其實，你自己可以再增刪！如果選擇[個人網站]，系統中就會自動新增一些可能用上的資料夾和檔案！其實，你自己可以再增刪！ 按右鍵就可以再找找看可能有用的功能！

18. 網站的設定 5 留言板和討論區 3 框架的設定 表格的功能 4 1 計算上網人次的計數器和顯示日期 2 網頁設計的幾個重點！

19. frontpage 中新增網頁 從左上角選擇開新網頁。 1

20. 選擇不同的框架形式，或是不同的樣式表。 1 接 著 就 可 以 設 計 精 采 的 網 頁 內 容 了 ！

21. 圖檔 <img src=“logo.gif" > 聲音檔 <bgsound src=“small.mid"> Flash 檔 <embed src="movie.swf" > 附錄：多媒體元件的使用 這些超連結的檔案，記得要一併上傳。否則瀏覽時會出現找不到檔案的錯誤訊息。

22. GIF 最多 256 色 可透明 (89a 格式) 可動畫 (89a 格式) JPG 全彩 失真式的壓縮 附錄：圖檔GIF or JPG？

23. 匯入其他的檔案至網站資料夾中！

24. 1 2 點選所需要的檔案 匯入其他的檔案至網站資料夾中！

25. 僑光圖資中心另有提供線上程式供老師們使用，包括留言版，討論區，計數器和日期顯示等功能。方便好用，在此加以介紹。討論區和留言版需要申請，若有問題，可以與圖資中心的楊順評老師聯繫 (ysp@ocit.edu.tw)。 介紹簡易的網頁設計功能和以上小程式的使用方法。 簡易網頁程式介紹

26. 點選連上後，可以參考許多種計數器的形式！ 2  圖資中心線上說明： 僑光首頁 圖資中心 疑難排除(常見問題集) 僑園共用計數器使用說明http://w3.ocit.edu.tw/plus/counterguide/

27. 圖資中心所提供的程式碼說明(部分示範)

28. 將說明網頁中重要的程式碼複製後，準備貼上你自己的網頁程式中 ！ 從 frontpage 的網頁程式碼檢視模式進入，將這些小程式複製至適當的地方！並記得將XXXX 改成你自己的帳號！ 2 <p style="margin-top: 1px; margin-bottom: 0"></p> <img src="http://www.ocit.edu.tw/cgi-bin/Count.cgi?dd=B&ft=1&frgb=100;139;216&df=XXXXX.dat"> <p style="margin-top: 2; margin-bottom: 0"> <img src="http://www.ocit.edu.tw/cgi-bin/Count.cgi?display=date&dd=D&df=XXXXX.dat"> <p style="margin-top: 6; margin-bottom: 6"></p> : :

29. 僑光圖資中心所提供的留言版

30. 僑光圖資中心所提供的討論區

31. 僑光首頁圖資中心的首頁即可！http://w3.ocit.edu.tw/cc/僑光首頁圖資中心的首頁即可！http://w3.ocit.edu.tw/cc/ 可以將申請表下載填寫後申請，或是直接由線上申請(比較方便)。 3 僑光首頁圖資中心 點選至[檔案下載](下載各種申請表)http://w3.ocit.edu.tw/cc/resources/

32. 線上申請的畫面，請看使用方法說明。並請複製當中相關的片段程式碼。準備貼上自己的網頁中。若有其他的問題，請找圖資中心的楊順評老師。線上申請的畫面，請看使用方法說明。並請複製當中相關的片段程式碼。準備貼上自己的網頁中。若有其他的問題，請找圖資中心的楊順評老師。 3

33. 從 frontpage 的網頁程式碼檢視模式進入，將這些小程式複製至適當的地方！並記得將XXXXX 改成你自己的帳號！ 3 <a target="_blank"href="http://w3.ocit.edu.tw/cc/gbook/msg.asp?ydep=XXXXX"> 留&nbsp; 言&nbsp; 版</a></font></td> <td width="90%" height="57" align="center"> <font color="#800080">04/16/2003</font></td> </tr> <tr> <td width="35%" height="63" align="center"> <font color="#800080" size="5" face="標楷體"> <a target="_blank"href="http://w3.ocit.edu.tw/cc/discuss2/title.asp?ydep=XXXXX"> 討&nbsp; 論&nbsp; 區</a></font></td> :

34. 多多利用表格來對齊文字資料，比較方便！ 4 。 按右鍵！

35. 按右鍵就出現選項！將表格的框線大小設成0，就可以隱藏格線並對齊文字了。按右鍵就出現選項！將表格的框線大小設成0，就可以隱藏格線並對齊文字了。 4

36. 設計網頁完畢後，就可以發佈檔案至僑光的網站上了。設計網頁完畢後，就可以發佈檔案至僑光的網站上了。 5 Fontpage 2003

37. 輸入僑光主機所指定的位置！記得您的帳號要輸入正確！輸入僑光主機所指定的位置！記得您的帳號要輸入正確！ ftp://ftp.ocit.edu.tw/~您的帳號/www 5

38. 輸入你的密碼！ 5 取代以前伺服器中的儲存的檔案！ 5

39. ftp://ftp.ocit.edu.tw/~您的帳號/www frontpage2000 所呈現的上傳畫面。 (僅供參考！) ftp://ftp.ocit.edu.tw/~您的帳戶/www

40. 你設計的 index.htm 就是首頁！ 教學網頁的瀏覽網址： 5 http://www.ocit.edu.tw/~你的帳號 首頁中一定要出現以下字串： 本網頁經『僑光技術學院運用教育部獎助提升師資素質經費』補助

41. frontpage 中可以利用[遠端網站]模式，來瀏覽本機和遠端的檔案是否有一致！ 本機網站 遠端網站 遠端網站瀏覽畫面， 與WS_FTP 操作類似。

42. 維護管理 • 上網瀏覽網址： http://www.ocit.edu.tw/~您的帳號 • 網站的創設很容易；維護困難(難在持久) • 沒有資料更新的網站已經死亡。 …………………過段時間看看你的網站還活著嗎？

43. 謝謝收看！歡迎指教！ 許籌尹 hkelly@ocit.edu.tw