教學網頁建置重點說明

教學網頁建置重點說明教學網頁建置重點說明許籌尹許籌尹

僑光技術學院資訊管理系僑光技術學院資訊管理系95.11.2895.11.28

Kelly Hsu@ 資管系 . 僑光技術學院

背景背景網路教學環境中，教師的角色必須由說書

(Presenters) 角色，轉變為學習過程中的輔導者輔導者 (Facilitators) 、伙伴伙伴 (Collaborators) 和學習資源提供者學習資源提供者 (Brokers of Learning Resources) 。

藉由全球 WWW 的普及，教師所提供的學習資源越來越豐富生動；學生更可以享有不不受時空限制，隨處可學的優點。受時空限制，隨處可學的優點。


動機動機推動資管系的老師建置教學網頁，可以隨時公告相關的授課資料，豐富授課內容。而學生也會慢慢養成隨時連上網站瀏覽，並搜尋相關的資料及連結。如此，資管系的師生更可以有多元的互動。增加學習機會，平衡學生學習程度上的差異。

僑光圖資中心提供方便的程式連結，以供全校的教師使用。特此介紹留言版留言版，討論區討論區，計數器計數器，時間顯示時間顯示等使用方法。


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


網頁製作的過程網頁製作的過程

編輯修改 /儲存網頁檔案

編輯修改 /儲存網頁檔案

覽器 /重新整理

覽器 /重新整理

傳送網頁檔案至網站伺服器傳送網頁檔案至網站伺服器

網路主機提供儲存網頁的空間網路主機提供儲存網頁的空間

Frontpage Frontpage 網頁編輯軟網頁編輯軟體體


學校主機的空間學校主機的空間僑光圖資中心提供每位老師 100 MB 的網頁空間。若

是空間不足的話，請連繫圖資中心的楊順評老師 ([email protected]) 。

接著，安裝 frontpage 軟體並且製作教學網頁，上傳至學校的主機上，就大功告成了。

mailto:[email protected]


Frontpage Frontpage 說明說明目前系上提供不同的版本，包括 frontpage 2000, f

rontpage 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

http://www.microsoft.com/taiwan/office/frontpage/prodinfo/compare.mspx#E1

網站的檢視模式：網頁資料夾報告導覽超連結工作

網頁的檢視模式：一般模式 HTML 模式預覽模式

Frontpage 2000/2002

A B

C

D

Frontpage 2003 Frontpage 2003 的畫面的畫面


網站的檢視工作：資料夾遠端網站報告導覽超連結工作

A

Frontpage 2003 Frontpage 2003 畫面畫面


網頁的檢視模式：一般模式 HTML 模式預覽模式

預覽模式不一定完全準確！最好用瀏覽器看！例如計數器、資料庫等元件…最後還是以上傳到伺服器後瀏覽為準。

預覽模式不一定完全準確！最好用瀏覽器看！例如計數器、資料庫等元件…最後還是以上傳到伺服器後瀏覽為準。

B



瀏覽網站資料夾或是網頁編輯的切換。

C



選擇開啟網站或是網頁。

D



Frontpage Frontpage 教學網站教學網站

1. 微軟百視達教師呂聰賢操作 frontpage 教學錄影檔案，非常清楚的講解過程。2. 高雄市軟體教學影音網高雄縣教育網路中心提供許多的教學影音檔案。3. 麻辣學園線上教學，還有 ASP 的小程式可以下載，也有 office, PHP 教學。4. 網頁製作教學有分基礎入門，初階練習和進階應用。還有 flash, dreamweav

er 等應用介紹。 5. Frontpage 教學網站線上教學，有些簡單的操作說明，雖說要付費，但是網站

上的資料就夠用了。 6. Frontpage 線上網頁製作教材以 frontpage 2000 為主的線上教學網站，請點

選‘教學專區’中的‘ frontpage 教學’即可。7. Frontpage 教學網南寧高中的教學資源，簡單的 frontpage 教學。 8. 微軟 frontpage 線上教學資源微軟資訊學園，提供高手們完整的進階應用。

1. 微軟百視達教師呂聰賢操作 frontpage 教學錄影檔案，非常清楚的講解過程。2. 高雄市軟體教學影音網高雄縣教育網路中心提供許多的教學影音檔案。3. 麻辣學園線上教學，還有 ASP 的小程式可以下載，也有 office, PHP 教學。4. 網頁製作教學有分基礎入門，初階練習和進階應用。還有 flash, dreamweav

er 等應用介紹。 5. Frontpage 教學網站線上教學，有些簡單的操作說明，雖說要付費，但是網站

上的資料就夠用了。 6. Frontpage 線上網頁製作教材以 frontpage 2000 為主的線上教學網站，請點

選‘教學專區’中的‘ frontpage 教學’即可。7. Frontpage 教學網南寧高中的教學資源，簡單的 frontpage 教學。 8. 微軟 frontpage 線上教學資源微軟資訊學園，提供高手們完整的進階應用。

接下來先介紹簡單網站及網頁的新增工作，和僑光圖資中心所提供的網頁程式碼。其他 frontpage 2003 功能的操作，請參閱以下所介紹的網站練習。極力推薦第一個網站極力推薦第一個網站 (( 微軟百事達微軟百事達 ))，很請楚的操作過程所錄影下來的影音檔。非常方便學習！


在在 frontpage frontpage 中中先建立新的網站先建立新的網站

選擇新的網站！選擇新的網站！


D:\Myweb

設定本機資料夾的位置，來儲存網頁資料！做完後，再上傳至伺服器瀏覽！

設定本機資料夾的位置，來儲存網頁資料！做完後，再上傳至伺服器瀏覽！

可以套用不同的範本！可以套用不同的範本！


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

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

按右鍵按右鍵就可以再找找看可能有用的功能！

按右鍵按右鍵就可以再找找看可能有用的功能！

框架的設定

框架的設定11

留言板和討論區留言板和討論區 33

計算上網人次的計數器和顯示日期

計算上網人次的計數器和顯示日期

22

網站的設定網站的設定 55

表格的功能

表格的功能 44

網頁設計的幾個重點！


從左上角選擇開新網頁。網頁。從左上角選擇開新網頁。網頁。 11

frontpage frontpage 中新增網頁中新增網頁


選擇不同的框架形式，或是不同的樣式表。

選擇不同的框架形式，或是不同的樣式表。

11

接著就可以設計精采的網頁內容了！

附錄：多媒體元件的使用附錄：多媒體元件的使用圖檔

<img src=“logo.gif" > 聲音檔

<bgsound src=“small.mid"> Flash 檔

<embed src="movie.swf" > 這些超連結的檔案，記得要一併上傳。否則瀏覽時會出現找不到檔案的錯誤訊息

。

這些超連結的檔案，記得要一併上傳。否則瀏覽時會出現找不到檔案的錯誤訊息

。


附錄：圖檔附錄：圖檔 GIF or JPGGIF or JPG ？？

GIF– 最多 256 色– 可透明 (89a 格式 )– 可動畫 (89a 格式 )

JPG– 全彩– 失真式的壓縮


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


1

2

點選所需要的檔案

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


簡易網頁程式介紹簡易網頁程式介紹僑光圖資中心另有提供線上程式供老師們使用，

包括留言版，討論區，計數器和日期顯示留言版，討論區，計數器和日期顯示等功能。方便好用，在此加以介紹。討論區和留言版需要申請，若有問題，可以與圖資中心的楊順評老師聯繫 ([email protected]) 。

介紹簡易的網頁設計功能和以上小程式的使用方法。

mailto:[email protected]


點選連上後，可以參考許多種計數器的形式！

點選連上後，可以參考許多種計數器的形式！

22

圖資中心線上說明：僑光首頁圖資中心疑難排除 ( 常見問題集 )僑園共用計數器使用說明http://w3.ocit.edu.tw/plus/counterguide/

http://w3.ocit.edu.tw/plus/counterguide/

http://w3.ocit.edu.tw/plus/counterguide/


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

<img src="http://www.ocit.edu.tw/cgi-bin/Count.cgi?dd=B&ft=1&frgb=100;139;216&df=XXXXX.dat"><img src="http://www.ocit.edu.tw/cgi-bin/Count.cgi?display=date&dd=D&df=XXXXX.dat">

 　 ::

將說明網頁中重要的程式碼複製後，準備貼上你自己的網頁程式中！

將說明網頁中重要的程式碼複製後，準備貼上你自己的網頁程式中！

從 frontpage 的網頁程式碼檢視模式進入，將這些小程式複製至適當的地方！並記得將 XXXX 改成你自己的帳號！

從 frontpage 的網頁程式碼檢視模式進入，將這些小程式複製至適當的地方！並記得將 XXXX 改成你自己的帳號！

22


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


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


僑光首頁圖資中心點選至 [檔案下載 ]( 下載各種申請表 )http://w3.ocit.edu.tw/cc/resources/

可以將申請表申請表下載填寫後申請，或是直接由線上申請線上申請 ((比較方便比較方便 ))。

可以將申請表申請表下載填寫後申請，或是直接由線上申請線上申請 ((比較方便比較方便 ))。 33

僑光首頁圖資中心的首頁即可！ http://w3.ocit.edu.tw/cc/


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

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

33

<a target="_blank" href="http://w3.ocit.edu.tw/cc/gbook/msg.asp?ydep=XXXXX"> 留言版 </a></td> <td width="90%" height="57" align="center"> 04/16/2003</td> </tr> <tr> <td width="35%" height="63" align="center"> <a target="_blank" href="http://w3.ocit.edu.tw/cc/discuss2/title.asp?ydep=XXXXX"> 討論區 </a></td>:

從 frontpage 的網頁程式碼檢視模式進入，將這些小程式複製至適當的地方！並記得將XXXXX 改成你自己的帳號！

從 frontpage 的網頁程式碼檢視模式進入，將這些小程式複製至適當的地方！並記得將XXXXX 改成你自己的帳號！

33


。。多多利用表格來對齊文字資料，比較方便！多多利用表格來對齊文字資料，比較方便！ 44

按右鍵！按右鍵！

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

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

44


Fontpage 2003

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

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

55


ftp://ftp.ocit.edu.tw/~ 您的帳號 /www

輸入僑光主機所指定的位置！記得您的帳號要輸入正確！

輸入僑光主機所指定的位置！記得您的帳號要輸入正確！

55


取代以前伺服器中的儲存的檔案！取代以前伺服器中的儲存的檔案！ 55

輸入你的密碼！輸入你的密碼！ 55

ftp://ftp.ocit.edu.tw/~ 您的帳戶 /wwwftp://ftp.ocit.edu.tw/~ 您的帳號 /www

frontpage2000 所呈現的上傳畫面。(僅供參考！ )

frontpage2000 所呈現的上傳畫面。(僅供參考！ )

首頁中一定要出現以下字串：本網頁經『僑光技術學院運用教育部獎助提升師資素質經費』補助

你設計的 index.htm 就是首頁！教學網頁的瀏覽網址：你設計的 index.htm 就是首頁！教學網頁的瀏覽網址： 55http://www.ocit.edu.tw/~你的帳號


本機網站遠端網站

遠端網站瀏覽畫面，與 WS_FTP 操作類似。

frontpage frontpage 中可以利用中可以利用 [[遠端網站遠端網站 ]]模式，模式，來瀏覽本機和遠端的檔案是否有一致！來瀏覽本機和遠端的檔案是否有一致！


維護管理維護管理

上網瀏覽網址：http://www.ocit.edu.tw/~您的帳號

網站的創設很容易；維護困難 (難在持久 )

沒有資料更新的網站已經死亡。………………… 過段時間看看你的網站還活著嗎？


謝謝收看！歡迎指教！謝謝收看！歡迎指教！

許籌尹 [email protected]

教學網頁建置 重點說明

Documents

教學網頁建置重點說明