Prepared by : Au Kit Ming 製作學習經歷檔案網頁 目標 記錄學習成果 供同學、老師和家長瀏覽及分享學習過程 同學、老師和家長建議改善方法 進一步改良及發展網頁 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming 參考資料網站 中文大學[教育學院] 探索網站資源庫 棉紡會中學 學習社群 學習經歷檔案 Prepared by : Au Kit Ming
A 下載 FTP public_html資料夾 在硬碟機 c或d，建立個人資料夾(班別班號：f1a01)，可分科目， 儲存優良課業，例如chinese, english, cit, profile 到 FTP 個人上載區，下載 「public_html」資料夾內檔案至d:\f1a01\ [d:\f1a01\檔案← ftp\s0123456\public_html\檔案 ] 到 s:/1a/電腦/f1_profile\ 資料夾，下載 「 f1_profile」資料夾內檔案至d:\f1a01\ [d:\f1a01\檔案 ← s:/1a/電腦/f1_profile\ 檔案] 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming B 利用 PhotoImpact 建立有子標題橫幅 網絡(B) → 元件設計師(C) → 橫幅 → 揀選任何有子標題類別的橫幅 (選擇自己喜歡有子標題的橫幅類別) 標題 → 學習經歷檔案 子標題 → 棉紡會中學 中一甲 陳大明 1號 滙出(X) → 至影像最佳化程式(I) → 按下另存新檔(S) → 選擇f1a01資料夾 → 檔案名稱(N): d:\f1a01\image\title.jpg → 存檔(S) 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming C 利用 PhotoImpact 按鈕列建立按鈕 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming D 利用 PhotoImpact 按鈕列建立按鈕 匯出 → 至影像最佳化程式(I) → 將每個按鈕輸出成個別的影像檔(O) → 確定 按下另存新檔(S) → 選擇f1a01資料夾 → 檔案名稱(N): d:\f1a01\image\assign.jpg → 存檔(S) assign2 → 普通電腦科 assign3 → 中文科 .. . assign6 → 良好學習習慣 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming E 利用Dreamweaver 建立網站名稱 及 設定本地端資料夾 網站(S) → 新增網站(N) → 進階 → 網站名稱(N)： f1a01 → 本地資料來源： d:\ f1a01\ 注意：網站名稱不能相同，若無法儲存，將網站名稱更名為 f1a01_1 → 確定 預設影像資料夾：d:\ f1a01\ image\ → 確定 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming F index.htm [首頁] 檔案 → 開新檔案 → 建立 → 插入頁框 → 上及左巢狀頁框 橫幅(標題) 檔案名稱：top.htm 框架名稱：topFrame 導覽列 檔案名稱：navigation.htm 框架名稱：leftFrame 主要內容顯示區 檔案名稱：main.htm 框架名稱：mainFrame目標：mainFrame 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming 網頁框架練習 http://www.csa.edu.hk/~cit/exercise/exercise.htm 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming H 標題 <title> 陳大明 </title> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>中一甲陳大明環保網頁</title> </head> <title>中一甲陳大明環保網頁</title>顯示甚麼? 在標題顯示 中一甲陳大明環保網頁及檔案名稱 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming I 利用NotePad 編修 index.htm (在 Dreamweaver：請勿隨便開啟及儲存 index.htm) <frameset rows="80,*" cols="*" frameborder="NO" border="0" framespacing="0"> <frame src="top.htm" name="topFrame" scrolling="NO" noresize > <frameset rows="*" cols="180,*" framespacing="0" frameborder="NO" border="0"> <frame src="navigation.htm" name="leftFrame" scrolling="yes" noresize> <frame src="main.htm" name="mainFrame"> </frameset> <noframes><body> </body></noframes> </html> 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming J 編修 main.htm 1. 開啟 main.htm 連結 ：mailto:s0123456@csa.edu.hk 連結 ：mailto:aukitming@csa.edu.hk 2. 檔案 儲存 檔案名稱(N) main.htm 存檔 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming 在左下角，插入影像image/assign.jpg，選影像主頁， 連結 main.htm，目標 mainFrame 插入影像image/assign2.jpg，選影像「普通電腦科」 插入影像image/assign5.jpg，選影像「反思與分享」， 連結 reflect.htm，目標 mainFrame 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming L 編修導覽列navigation.htm 設計 (注意：請勿隨便開啟及儲存 index.htm) 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming M 編修導覽列 navigation.htm (注意：請勿隨便開啟及儲存 index.htm) 開啟 navigation.htm → 揀選普通電腦科下的 → 表格 → 列 修改 → 表格 → 插入列 在新列中 加入 w1a，揀選 w1a，連結 → cit/w1a.doc ，目標 → mainFrame 在新列中 加入 w1b，揀選 w1b，連結 → cit/w1b.doc ，目標 → mainFrame 5. w1 是第一星期，a 是第一次功課 ，b 是第二次功課 6. w1a.doc 檔案 儲存 檔案名稱(N) navigation.htm 存檔 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming N 編修導覽列 navigation.htm 程式碼 <html> <head> <script language="JavaScript" type="text/JavaScript"> <!-- function showHidden(show, hidden){ if (show.style.display=="none") { show.style.display=""; hidden.style.display="none"; }else { show.style.display="none"; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>Navigation</title> </head> 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming O JavaScript http://www.i-webhk.com/ 由Netscape與Sun Microsystems合作開發 通過編寫小型、高效率的應用程序，增加網頁的互動功能 Java Script是網頁設計的__________________。 Java Script必須與 ___________共同使用，兩者配合可以設計出有趣且__________________的動態網頁，等於是讓原本_______________的網頁有了活動的生命力。 特效魔術師 HTML 圖文並茂 靜態圖文 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming <body> <table width="31%" height="229" id="test"> <tr> <td> <p><a href="main.htm" target="mainFrame"><img src="image/assign.jpg" width="66" height="25" border="0"></a></p> <a name="first"></a><a href="#first"></a><img src="image/assign2.jpg" width="163" height="25" border="0" onClick="showHidden(two)"> <table width="160" id="two" style="display:none"> <td width="152"><font size="-1">卷三</font></td> </tr> 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming Q 使用 Dreamweaver 編修導覽列 navigation.htm (注意：請勿隨便開啟及儲存 index.htm) 鍵入課業名稱 揀選：JavaScript 習作 / w1a 檔案位置，按科目分資料夾 連結：cit/w1a.doc 目標：mainFrame 1. 檔案 儲存 檔案名稱(N) navigation.htm 存檔 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming R 上載至 public_html 資料夾 到學生 → FTP網上交功課 → 上載 d:\f1a01\資料夾內檔案至 「public_html」資料夾內 [ public_html\ ← ftp\d:\f1a01\ ] 測試網頁 1 http://www.csa.edu.hk/~s123456 [同學自己的學生編號] 2 校網 → 學與教 → 學習社群 → 班別 → 送出 → 網頁 學習經歷檔案 Prepared by : Au Kit Ming
Prepared by : Au Kit Ming S 家課 到校網 → 學與教 → 教學資源 → 電腦 → 學習經歷檔案 良好學習習慣 → 按良好學習習慣 參考承諾，並利用Dreamweaver 完成一個自己的習作 ，並上載至 「public_html」\ habit.htm 注意事項 1 網上檔案名稱必定為有意義的英文檔名稱 2 上載後，必定要測試網站。校網 → 學與教 → 學習社群 → 班別 → 送出 → 網頁 學習經歷檔案 Prepared by : Au Kit Ming