中華技術學院 網頁設計研習會
師資簡介： 陳 端 墀 德國慕尼黑工科大學 前中正理工學院電算中心上校主任 本校土木工程系專任副教授 國際航遙測學會網際網路總監
一、 網頁設計入門
1.網頁基本概念 網頁是用某種網頁語言寫成 的程式檔，使用某種瀏覽 軟體閱讀，就可看到豐富的 資訊(文字、圖形、聲音、 動畫、影片) ，並可做雙向 互動。
最常用的網頁語言是 HTML語言 儲存成.html或.htm檔 常用Microsoft IE來瀏覽
本來HTML是像這樣的： 一般人不容易撰寫 <html><head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>中華技術學院</title> <meta ame="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> </head> ……………………… 一般人不容易撰寫
幸好有各種設計網頁的 軟體(例如FrontPage)推出 使我們可像用WORD軟體 一樣容易的設計網頁
2. FrontPage 網頁基本設計
請先用「檔案總管」在D 硬碟上開一個「新資料夾」
為避免錯誤，初學者請將 網頁所需之所有圖片(.jpg, .gif) 、聲音、影片及所設 計之網頁(.htm)檔，皆先 儲存入此新建之新資料夾 ，以便與其他檔案有所 區隔。
如何在你的電腦尋找 現成圖片？
按右鈕
如何抓取其他網站的圖片？ (須注意版權問題！)
按右鈕
現在請大家啟動 各人電腦上的 FrontPage 或
儲存
按Enter
如何在你的電腦尋找 現成音樂檔？
按右鈕
按Enter
實際測試：請啟動Microsoft IE
習題一： 在您自己的電腦上開一個「新 資料夾」，模仿上述課程儲存 各種要用到的JPG、GIF、MID 等檔，再以FrontPage設計一個 index.htm，亦儲存在此「新資 料夾」。
習題一結果類 似此情形， index.htm名稱 固定，其他檔 案請任意自選 ，並多加不同 文字與圖片。
下次上課時，每人必須攜帶已 儲存該「新資料夾」全部檔案 之磁片或光碟，始能繼續上課。
二、 如何將您設計的網頁上傳至本校電算中心，使任何人在校內或校外隨時都可上網看您的網頁。
準備工作： (一)已申請本校e-mail帳號 (二)已設計好一些網頁
(一)已申請本校e-mail帳號 例如 profchen@cc.chit.edu.tw ID: profchen Password: ********
(二)已設計好一些網頁 1. 使用 FrontPage 設計index.htm首頁及所屬其他*.htm檔 聲音檔等必須全部集中在同一個新 資料夾內，並由 FrontPage 建立為 一個web。
請特別注意： 絕大多數常見的錯誤，就是在設計前沒有先專開一個新資料夾，沒有先將所有需要的影像檔、圖片檔、聲音檔全部集中到這個資料夾，以後再設計或插入的檔案忘了先放入此資料夾。這種錯誤事後須請懂HTML語言的人修改.htm檔，非常麻煩。
如果您希望別人只打 cc.chit.edu.tw/~profchen 就可以看到您的首頁， 則您的首頁檔必須命名為 index.htm
如果您有許多彼此無關的首頁，例如 abc123.htm, xyz987.htm 則別人必須分別打 cc.chit.edu.tw/~profchen/abc123.htm cc.chit.edu.tw/~profchen/xyz987.htm 才能進入各首頁。
舉例示範 例如用「檔案總管」在 D:\ 新增一個新資料夾，並重新命名為 ABC
我們將要用到的所有圖片、聲音等檔，必須先存入此新資料夾，下例為校徽chit-logo.jpg已存入 D:\ABC 之「檔案總管」畫面：
jcloze1.htm jcross1.htm jmatch2.htm D:\ABC 現在假定您已使用 Hot Potatoes 或FrontPage設計了三個習題： jcloze1.htm jcross1.htm jmatch2.htm 並需用到六張圖片(GIF檔) 全部儲存入 D:\ABC
(如果您還沒設計，可先從 HotPotatoes的tutorial資料夾中先借用這些檔)
現在請啟動FrontPage，開啟Web
請按導覽
請按住左鈕不放，把jcloze1.htm拖到首頁下面
同理把jcross.htm和jmatch2.htm都拖到首頁底下
請按網頁
設計首頁並存檔index.htm (請記得設定超連結)
注意開頭是 ftp 不是 http最後一定要加 /www
輸入您的e-mail帳號和密碼
這裡打你的e-mail帳號 前面一定要加 ~ 號 請啟動Microsoft IE 並輸入網址 cc.chit.edu.tw/~profchen 這裡打你的e-mail帳號 前面一定要加 ~ 號
帳號前一定要加 ~ 號 因為上例以index.htm為首頁檔名， 所以學生輸入網址較簡短
習題二： 請將您的 網頁發佈於本校伺服器， 並使用IE瀏覽。 記下您的網頁位址，於下次上課時帶來。
三、 FrontPage 進階
1.建立網站架構 一開始就規劃出網站架構 (建立一個Web)。而不是 一個一個網頁(htm)分開做， 再把它們連結起來。
開新Web
按右鈕
改成你的首頁名稱
在首頁之下附屬第二層網頁 按右鈕
按右鈕
按右鈕
依此類推
同理增加第三層網頁 按右鈕
依此類推
修改檔名
按右鈕
依此類推
注意 按兩下 開始設計各網頁
(開始設計網頁)
(依此類推)
2. 導覽列 超連結 表格 框架
文字超連結
圖形超連結
表格 (拖曳)
按右鈕
框架
3. 其他： 跑馬燈 計數器 留言版 討論區 …..
四、 FLASH 與其他工具與語言
Flash軟體介紹 (1) 網頁動畫 (2) 按鈕 (3) 跟蹤滑鼠 (4) 遮罩 (5) 可獨立執行的Flash
Flash所儲存的檔案是. FLA檔，是用來繼續設計、修改，不能用於網頁。 如要用於網頁，至少要『發佈』(Publish)成 Flash所儲存的檔案是*.FLA檔，是用來繼續設計、修改，不能用於網頁。 如要用於網頁，至少要『發佈』(Publish)成*.SWF檔。也可直接『發佈』成*.HTML檔或*.EXE檔。
發佈成*.SWF檔後， 在FrontPage設計網頁時， 須使用[插入][進階] [Plug-In]。
2. 其他語言、軟體、技巧簡介
總習題： 請使用各種進階技巧於您的網頁，重新發佈於本校伺服器，並使用IE瀏覽確定。 將您的網頁位址，正式通知本校教務處。
學無止境 謝謝！