學生學習歷程檔案推廣活動 http://www.nknu.edu.tw/~cilt/eportfolio/index.htm 步驟 3: 下載範本 一 範本下載 (3/6) Frontpage 學習歷程網頁製作教學 一, 一 數位中心李青芸助理 07-7172930 # 1677 m3@nknucc.nknu.edu.tw >_< 2009/11/13 5 一 範本下載 (1/6) 步驟 1: 學校首頁點選 網網相連 學生學習歷程 或數位中心首頁 (http://www.nknu.edu.tw/~cilt/) 學生學習歷程 步驟 4: 儲存範本 一 範本下載 (4/6) 學校首頁 - 行政單位 - 數位教學科技中心 2009/11/13 2 2009/11/13 6 一 範本下載 (5/6) 步驟 5: 將範本解壓縮 點選剛下載檔案按滑鼠右鍵, 即會出現選單 選擇 解壓縮到 e_portfolio_1_1 2009/11/13 3 2009/11/13 7 一 範本下載 (2/6) 步驟 2: 請至 學生學習歷程網 檔案範例下載 http://www.nknu.edu.tw/~cilt/eportfolio/download.htm 一 範本下載 (6/6) 相關說明 點選 如何使用範本 即可瀏覽 範本如何使用? 說明網頁 2009/11/13 4 2009/11/13 8
確認主機名稱 開啟 IE 請在網址列輸入 ftp:// 您的主機名稱 如 :ftp://nknucc.nknu.edu.tw ( 教職員 ) ftp://stu9x.nknu.edu.tw ( 學生 ) 入學學年度 主機名稱 教職員 nknucc.nknu.edu.tw 98 年度 stu98.nknu.edu.tw 97 年度 stu97.nknu.edu.tw 96 年度 stu96.nknu.edu.tw 95 年度 stu95.nknu.edu.tw 94 年度 stu94.nknu.edu.tw 93 年度 stu93.nknu.edu.tw 2009/11/13 9 IE6.0- 登入方式 (4/5) 步驟 4: 按下登入身分後, 即會出現登入身分視窗, 請在使用者名稱輸入 帳號 ; 密碼處輸入 密碼 ( 帳號及密碼為電子郵件的帳號 密碼 ) 2009/11/13 13 IE6.0- 登入方式 (1/5) 步驟 1: 請於 網址列 輸入 ftp:// 您的主機名稱 如 : ftp://nknucc.nknu.edu.tw 或 ftp://stu9x.nknu.edu.tw IE6.0- 登入方式 (5/5) 步驟 5: 登入成功後, 出現下圖相關檔案畫面, 請勿刪除, 否則 MAIL 相關資料會遺失 2009/11/13 10 2009/11/13 14 步驟 2: 輸入網址按 ENTER 後, 如右圖一 於 FTP 資料夾錯誤 視窗, 再按 ENTER, 如右圖二 IE6.0- 登入方式 (2/5) 圖一 圖二 IE7.0- 登入方式 (1/2) 步驟 1: : 請於 網址列 輸入 ftp:// 您的主機名稱 並按 ENTER 後, 即會出現無法顯示網頁的畫面 步驟 2: 請選擇右上角的 網頁 在 Windows 檔案總管中開啟 FTP ftp://stu9x.nknu.edu.tw ftp://nknucc.nknu.edu.tw 2009/11/13 11 2009/11/13 15 IE6.0- 登入方式 (3/5) 步驟 3: 選擇功能列上的 檔案 登入身份 步驟 3: 當選擇 在 Windows 檔案總管中開啟 FTP 後, 如右圖 步驟 4: 選擇功能列上的 檔案 登入身份 步驟 5: 按下登入身分後, 即會出現登入身分視窗, 請在使用者名稱輸入 帳號 ; 密碼處輸入 密碼 步驟 6: 登入成功後, 出現下圖相關檔案畫面, 請勿刪除, 否則 MAIL 相關資料會遺失 IE7.0- 登入方式 (2/2) 2009/11/13 12 2009/11/13 16
建立 myhtml 的資料夾 (1/3) 請在網頁空白處, 按滑鼠右鍵, 即會出現選單 請選擇 開新檔案 資料夾 網頁檔案上傳 (2/2) 建置完成後您的網址為主機名稱 /~ 帳號如 :http://nknucc.nknu.edu.tw/~cookie/ http://stu9x.nknu.edu.tw/~fxxxxxx 2009/11/13 17 2009/11/13 21 建立 myhtml 的資料夾 (2/3) 當選擇 開新檔案 資料夾 後, 網頁上會出現一個資料夾 三 開啟舊檔 (FrontPage) 2009/11/13 18 2009/11/13 22 建立 myhtml 的資料夾 (3/3) 請將資料夾命名為 myhtml 開啟 FrontPage(1/2) 開始 所有程式 / 程式集 Microsoft Office Microsoft Office FrontPage 2003 2009/11/13 19 2009/11/13 23 網頁檔案上傳 (1/2) 將網頁及圖檔上傳至 myhtml 資料夾 首頁名稱一定要設為 nknu.html FrontPage 畫面 開啟 FrontPage(1/2) 2009/11/13 20 2009/11/13 24
開啟舊檔 (1/3) 請選擇 檔案 開啟舊檔 網站的主題 (1/5) 此範本目前的網站主題是 e_portfolio, 接下來會為大家介紹如何改成自己喜歡的主題, 如 葉小餅的學習歷程 2009/11/13 25 2009/11/13 29 開啟舊檔 (2/3) 點選 開啟舊檔 後, 會出現下面視窗 請選擇要編輯的網頁後, 按 開啟 網站的主題 (2/5) 步驟 1: 請將滑鼠移至非紅色區塊處, 並按滑鼠右鍵 1. 選擇編輯的網頁 2. 按開啟 2009/11/13 26 2009/11/13 30 此為開啟首頁 (nknu.html) 畫面 請選擇 設計, 即可編輯網頁 開啟舊檔 (3/3) 網站的主題 (3/5) 步驟 2: 在網頁上的非紅色區塊處按右鍵, 即會出現選單, 如下圖, 並按 網頁內容 2009/11/13 27 2009/11/13 31 四 修改網站的主題 網站的主題 (4/5) 步驟 3 按 網頁內容 後, 即會出現網頁內容的視窗 將 標題 欄位內容改成您喜歡的主題即可, 如 葉小餅的學習歷程 接著按確定即修改成功 2009/11/13 28 2009/11/13 32
網站的主題 (5/5) 插入圖片 (2/5) 完成 步驟二 : 刪除個人照片區圖片在個人照片區的圖片, 按滑鼠右鍵, 即會出現選單, 如圖一 接著在選單中選剪下, 如圖二 2009/11/13 33 2009/11/13 37 圖一圖二 插入圖片 (3/5) 步驟三 : 插入 圖片 從檔案 五 插入圖片 2009/11/13 34 2009/11/13 38 請將圖片放在 images 資料夾裡, 以便於資料管理 注意事項 插入圖片 (4/5) 步驟四 : 選擇 images 資料夾中的圖片後, 按 插入 ( 欲插入的圖片, 請放在 images 資料夾 ) 1. 選擇要插入的圖片 2. 按插入 2009/11/13 35 2009/11/13 39 步驟一 : 開啟 right.html 插入圖片 (1/5) 步驟五 : 圖片插入完成 插入圖片 (5/5) 2009/11/13 36 2009/11/13 40
調整圖片大小 (1/4) 由於插入後的圖片太大 ( 如下圖 ), 需要調整小一點讓整個版面比較整齊 所以將介紹如何將圖片調小 六 編輯橫幅內容 2009/11/13 41 2009/11/13 45 步驟一 : 於想調整圖片大小的圖片上按滑鼠右鍵, 即會出現選單 接著選擇 圖片內容, 即會跳出 圖片內容 的視窗 調整圖片大小 (2/4) 您有發現嗎? 在圖一 圖二 圖三中, 只有在圖一才知道這個網站是誰做的, 而圖二和圖三卻看不出來? 我們接下來將與您分享如何使用橫幅來解決這個情況 圖一 圖三 圖二 2009/11/13 42 2009/11/13 46 調整圖片大小 (3/4) 步驟二 將 指定大小 和 保持比例 打勾 保持比例的用途是在指定圖片大小時, 可依圖片比例縮放, 才不會讓圖片導致變形 在 寬度 的欄位調整大小, 高度 的欄位會自動依比例調整 編輯橫幅內容 (1/2) 步驟一 : 開啟 nknu.html 步驟二 : 將滑鼠指標移至橫幅區塊 ( 紅色框框 ), 可在此區塊增加文字, 如 : 葉小餅的學習歷程 調整前 調整後 將滑鼠指標移至此處, 可在此編輯 可調整圖片寬度 這二個皆要打勾 2009/11/13 43 2009/11/13 47 調整圖片大小 (4/4) 編輯橫幅內容 (2/2) 步驟三 : 增加文字 調整前 調整後 2009/11/13 44 2009/11/13 48
步驟四 : 選擇色彩 調整文字 (4/5) 七 調整文字 2009/11/13 49 2009/11/13 53 步驟一 : 用滑鼠將文字選取 調整文字 (1/5) 調整文字 (5/5) 步驟五 : 按確定後, 即可完成 2009/11/13 50 2009/11/13 54 調整文字 (2/5) 步驟二 : 選擇格式 字型, 即會跳出 字型視窗 字型視窗 八 文字置中 2009/11/13 51 2009/11/13 55 步驟三 : 調整文字大小 調整文字 (3/5) 文字置中 (1/2) 步驟一 : 用滑鼠將文字選取 步驟二 : 選擇置中對齊 ( 表示靠左對齊, 表示靠右對齊 ) 2009/11/13 52 2009/11/13 56
完成 文字置中 (2/2) 步驟三 : 選取 格式 段落, 即可開啟 段落視窗 文字段落 (3/5) 2009/11/13 57 2009/11/13 61 文字段落 (4/5) 步驟四 : 與前段距離 和 與後段距離 皆設為 0 行距 設為 18pt 九 文字段落處理 段落間距皆設為 0 行距設為 18pt 2009/11/13 58 2009/11/13 62 文字段落 (1/5) 您是否覺得文字段落之間很擠, 網頁內容整體看起來不會很整齊舒服, 如下圖 在此將與您分享如何讓文字在網頁呈現上, 看起來舒服又整齊 文字段落 (5/5) 2009/11/13 59 2009/11/13 63 步驟一 : 開啟 personal.html 步驟二 : 用滑鼠將文字選取 文字段落 (2/5) 十. 增加表格 2009/11/13 60 2009/11/13 64
增加表格 (1/6) 如何在生涯規劃 修習課程 成長與反思 課外活動 證照 實習扎記增加相同的表格 如修習課程中, 增加大二下學期的表格 增加表格 (5/6) 步驟四 : 貼上後, 再按一次 ENTER, 會出現下圖效果 增加了此表格 2009/11/13 65 2009/11/13 69 步驟一 : 選取其中一個表格 增加表格 (2/6) 增加表格 (6/6) 步驟五 : 將表格上原大二上學期, 改成大二下學期 選取一個表格 2009/11/13 66 2009/11/13 70 步驟二 : 編輯 複製 增加表格 (3/6) 十一. 增加表格的列 2009/11/13 67 2009/11/13 71 增加表格 (4/6) 步驟三 : 在欲增加表格的地方, 按滑鼠右鍵, 會出現一個選單, 接著按貼上 增加表格的列 (1/4) 如何在表格上增加列, 如大二下學期的表格原本有二列, 要增為三列, 成為五列 2. 選擇貼上 1. 將滑鼠指標移至此處 2009/11/13 68, 並按滑鼠右鍵 增加了三列, 成為五列 2009/11/13 72
增加表格的列 (2/4) 您是否遇到? 步驟一 : 將滑鼠指標移至要增加列的位置後, 選擇 表格 插入 列或欄, 即會跳出 列或欄的視窗 2. 選擇列或欄 您是否遇到不知如何在範本的左邊連結處增加連結 若增加連結, 顯示的效果也不如預期 在此將與您分享如何在範本增加連結 1. 將滑鼠指標移至此處 2009/11/13 73 2009/11/13 77 增加表格的列 (3/4) 步驟二 : 輸入增加幾列, 並按確定 連結 (1/10) 步驟一 : 先在 E-Portfolio 資料夾, 複製 practice.html 檔案 1. 選擇列 2. 輸入要增加的列數 3. 選擇選項下方 2009/11/13 74 2009/11/13 78 步驟三 : 完成 增加表格的列 (4/4) 連結 (2/10) 步驟二 :practice.html 檔案, 暫時更名為 test.html ( 檔案名稱請勿取中文字 ) 增加了三列 2009/11/13 75 2009/11/13 79 步驟三 : 開啟 test.html 步驟四 : 修改 test.html 內容 連結 (3/10) 十二 連結 2009/11/13 76 2009/11/13 80
連結 (4/10) 步驟五 : 開啟 nknu.html 步驟六 : 在實習扎記下增加一列 ( 操作過請參考十一章 ) 步驟七 : 複製小圖示 連結 (8/10) 步驟十四 : 選擇 main 解說 : 此範本是以框架 (Frame) 架構呈現, 中間的 Frame 名稱為 main, 所以增加連結時要選擇 main, 網頁才會在中間的框架呈現 1. 選擇 main 增加一列, 並複製小圖示 2009/11/13 81 2. 按確定 2009/11/13 85 連結 (5/10) 步驟八 : 輸入測試頁文字 步驟九 : 文字選取, 並將文字大小設為 10 步驟十五 : 連結增加完成 連結 (9/10) 增加測試頁文字, 文字大小設為 10 1. 連結增加完成 2009/11/13 82 2009/11/13 86 步驟十 : 將文字選取 步驟十一 : 選取 插入 超連結, 即開啟 插入連結視窗 連結 (6/10) 成品 連結 (10/10) 2009/11/13 83 2009/11/13 87 連結 (7/10) 步驟十二 : 選擇剛建立的網頁 步驟十三 : 選擇 目標框架, 即會出現 目標框架視窗 十三 改變表格顏色 1. 選擇網頁 2. 選擇目標框架 2009/11/13 84 2009/11/13 88
改變表格顏色 (1/8) 改變表格顏色 (5/8) 在此將介紹如何改變表格顏色 步驟五 : 選取此欄, 等一下將會針對此欄作背景顏色的設定 2009/11/13 89 2009/11/13 93 改變表格顏色 (2/8) 步驟一 : 將滑鼠指標移至要改變顏色的表格 步驟二 : 於表格上按滑鼠右鍵, 即出現選單, 並選 表格內容 改變表格顏色 (6/8) 步驟六 : 於反白的位置上, 按滑鼠右鍵, 選擇 儲存格內容 1. 將滑鼠指標移至表格 2. 選表格內容 2009/11/13 90 2009/11/13 94 改變表格顏色 (3/8) 步驟三 : 框線大小選 1; 選擇色彩 亮框線 暗框線的顏色 改變表格顏色 (7/8) 步驟七 : 選擇背景色彩, 也可以使用背景圖片 2009/11/13 91 2009/11/13 95 改變表格顏色 (4/8) 步驟四 : 表格內容視窗按確定後, 顯示畫面如下 改變表格顏色 (8/8) 步驟八 : 儲存格內容按確定後, 即修改完成 2009/11/13 92 2009/11/13 96
注意事項 若有相關問題, 歡迎諮詢預約, 網址為 http://cdtl.nknu.edu.tw/e_portfolio/consulting.php 為了能得知您做完 E-Portfolio, 煩請線上回報喔 ~ 網址為 http://cdtl.nknu.edu.tw/e_portfolio/repay.php 下學期將舉辦 E-Portfolio 競賽, 歡迎同學踴躍報名, 得獎者將有獎金唷 ~ 鼓勵大家在製作 E-Portfolio 過程中, 將網頁技巧成為自己的技能, 增加自己的競爭力 2009/11/13 97 感謝聆聽 大家辛苦啦!!! 一, 一 數位中心聯絡方式網址 :http://www.nknu.edu.tw/~cilt/ EMAIL:m@nknucc.nknu.edu.tw 地址 : 高雄市苓雅區和平一路 116 號教育大樓地下一樓電話 :07-7172930 #1670~1677 傳真 :07-7114574 >_<