社區教育培訓網站：社區網頁製作與網站管理課程10jj\03\03-04
[回首頁]、[本編目錄]、[上一編]、[下一編]

第四週、網頁結構的認識、網頁連結實作

課程教師：鄭錦德

※學員每次上課請準時及不要缺課，因本課程、課目週週相互關聯，為能使進度跟上，請同學之間互相觀摩學習，共同勉勵，在此特別叮嚀。

一、網站的上傳與下載

1. 網頁上傳

www帳號

  1. 每位學員在社大的「網路工作站(Server)」上都有一個www實習帳號，可以建構一個自己的個人網站。
  2. 此網路工作站在網路上的地址(Host Name)：
    • 網域名稱(Domain Name)：www.bamboo.hc.edu.tw
    • IP位址(IP Address)：163.19.105.101
      • 網域名稱、IP位址是網路工作站的地址的兩種寫法，但都是指同一個網路工作站。
      • 網域名稱、IP位址的概念請參看《青草湖社區大學「電腦生活與網際網路介紹」教材》第十一章、網際網路初探--繞著地球跑
  3. 帳號名稱與密碼：網路工作站的每個帳號都有「帳號名稱(User ID)」與「密碼(Password)」。請各位學員牢記自己的帳號名稱與密碼，以便隨時利用。

用FTP程式連進自己的www帳號

  1. FTP程式：
    • 在網路上用來在「個人電腦(或稱用戶，英文為Client)」與「網路工作站(Server)」之間上傳、下載檔案的程式。
    • 本課程利用WS_FTP95.exe這個FTP程式來傳檔案，請各位學員下載利用。
  2. 用FTP程式連進自己的www帳號：
    • 執行FTP程式，會出現一個詢問「連結資訊」的對話框。
    • 用FTP程式連進自己的www帳號，需要告訴FTP程式下列三項資訊：
      1. 網路工作站的地址(Host Name)：告訴FTP程式你要連至哪部網路工作站。
      2. 帳號名稱(User ID)：告訴FTP程式你在這部工作站上的帳號名稱。
      3. 密碼(Password)：告訴FTP程式你在這部工作站的帳號的密碼。
    • 請在「連結資訊」的對話框中輸入上述三項資訊。
    • FTP程式下載、安裝與使用，請參看《青草湖社區大學「電腦生活與網際網路介紹」教材》第十六章、網路原理初探--網路世界的資料傳輸
  3. FTP程式連結成功後，你的www帳號中的檔案系統就會在FTP程式中出現。
  4. 若FTP程式連結失敗，連結失敗的原因可能有：
    • 上述三項資訊輸入錯誤：網路工作站的地址(Host Name)、帳號名稱(User ID)、密碼(Password)其中一項資訊輸入錯誤，或是在「連結資訊」的對話框錯誤的位置中輸入。
    • 家中的電腦還未撥接上網，或撥接上網失敗。
    • 也有可能是網路工作站失聯、當機的情況，不過這種情況比較少發生。

FTP程式簡介

  1. FTP程式概觀：
    • Local System (自己的電腦檔案系統)視窗：如同「檔案總管」，此視窗可以看到自己電腦硬碟上的檔案系統。此視窗上頭並有「資料夾路徑」標示，顯示目前處於自己電腦硬碟上哪個資料夾中。
    • Remote System (遠端檔案系統)視窗：用FTP程式連結至網路工作站自己的帳號成功後，此視窗可以看到此帳號底下的檔案系統。此視窗上頭並有「資料夾路徑」標示，顯示目前處於自己帳號底下的哪個資料夾中。
  2. FTP程式基本命令簡介
    • MkDir：新增資料夾。MkDir是Make Directory的縮寫，建立一個新的目錄，即「新增資料夾」。
    • Rename：重新命名
    • Delete：刪除檔案，或空的資料夾。若不是空的資料夾，需將資料夾中的檔案一一的刪除才能刪除整個資料夾。
    • Refresh：重新整理資料夾。和「檔案總管」中的「檢視→重新整理」的意義是一樣的。
    • 進入某個資料夾：用滑鼠在資料夾上點兩下即可。
    • 回到上層資料夾：在FTP程式中的「↑..」(往上的箭頭與點點)上點兩下即可。
    • 硬碟切換：在Local System (自己的電腦檔案系統)中切換至某個硬碟槽，需利用此視窗最下面的硬碟槽的標示用滑鼠點兩下來切換。
    • 上傳按鈕(→)：在Local System (自己的電腦檔案系統)視窗中點選某個檔案或某個資料夾，再按「上傳按鈕(→)」，即可將此檔案或資料夾整個上傳至網路工作站中。
    • 下載按鈕(←)：在Remote System (遠端檔案系統)視窗中點選某個檔案或某個資料夾，再按「下載按鈕(←)」，即可將此檔案或資料夾整個下載至自己的個人電腦中。
    • 關閉連結(Close按鈕)：上傳下載完畢後，請記得按FTP程式中的「Close按鈕」來關閉連結。若未關閉而離開電腦，如同提款機插入金融卡而未取卡的不設防狀態，別人可以利用FTP程式在自己的帳號中作怪。
    • 訊息列：在Local System (自己的電腦檔案系統)與「Close按鈕」中有數行的訊息列，告知使用者連結或傳輸的狀態。連結、傳輸成功與否，或者是連結、傳輸失敗的原因，在此訊息列中皆會詳細的列出。

www帳號中的檔案系統

  1. 網路工作站的帳號
    • 所謂的「網路工作站」，只是一部標準的電腦而已，當然也有硬碟，其資料都是存放在硬碟上。網路工作站的每個帳號，都分配到硬碟的一塊空間。這塊硬碟空間，跟自己的個人電腦上的空間一樣，開啟檔案夾、新增資料夾、存檔、移動檔案、刪除檔案等等。
    • FTP程式連結成功後，可以看到自己在網路工作站的帳號中的硬碟空間的情況(或稱為檔案系統)，如同利用「檔案總管」來察看自己的硬碟中的檔案系統是一樣的。
  2. www資料夾
    • 在網路工作站的帳號中，所有的網頁資料都必須放在一個叫做「www」的資料夾當中。www是一個「公共」的資料區，凡是在www資料夾中的檔案，才可以分享給全世界的讀者利用瀏覽器輸入網址、或利用超連結連至此處觀賞。不在www資料夾中的檔案，其他人無法看到，除非其他人破解你的帳號或知道你的帳號的密碼。
    • 網路工作站的帳號可以存放其他檔案，但請勿存放過大的檔案。私密的檔案、隱私的資料請勿儲存在www資料夾中，否則全世界的人都看得到。
  3. www資料夾中的檔案結構
    • 之前我們已經請各位學員在個人電腦上初步的編輯自己的網站，並依照第三章中所介紹的網站初步架構，將所有的網頁放在教室中個人電腦硬碟中的一個www資料夾中。(如kasumi學員，他的網頁資料放在G:\user\student\kasumi\www\)
    • 網路工作站的帳號中的www資料夾，其檔案結構跟教室中個人電腦硬碟中的www資料夾中的檔案結構一模一樣即可。(如kasumi學員，其網路工作站的帳號中的www資料夾中的檔案結構，與放在G:\user\student\kasumi\www\中的檔案結構一樣即可)

第一次上傳網頁的步驟

  1. 開啟FTP程式
  2. 連結至自己在網路工作站的帳號中，下面三項資料要正確無誤的輸入：
    • 網路工作站的地址(Host Name)
    • 帳號名稱(User ID)
    • 密碼(Password)
  3. 在網路工作站的帳號中要新增一個www資料夾，並進入這個www資料夾中。
  4. 將自己個人電腦中已經編輯好的網頁檔案全部上傳至網路工作站的帳號中的www資料夾中即可。

2. 網站錯誤校對檢查

  1. 網頁上傳完畢後，已經可以利用瀏覽器連至自己的網站，以kasumi學員為例，要在瀏覽器的網址欄中輸入下面的地址：http://www.bamboo.hc.edu.tw/~kasumi/，其他學員的網址以此類推。
  2. 網站錯誤校對
    • 網頁內容結構是否正確，尤其同一個段落不能同時指定兩種不同的結構，如又是「條列」、又是「大小標題」等。
    • 所有連結是否正確：請用瀏覽器仔細的檢查
      1. 網站首頁中的連結是否都正確無誤的連結至網站中的其他網頁
      2. 網站中其他網頁中「回到首頁」的連結是否都正確無誤的連結至首頁
      3. 「網站推薦」中的連結是否都正確的連結至其他網站。

3. 網站下載、編輯與備份

網站編輯與備份的策略

  1. 可以將家中的電腦作為編輯網頁、網站的主要工作電腦。所以需要將整個網站的網頁檔案，利用FTP程式下載到自己家中的電腦中。
  2. 以後在家中就可以隨時編輯、更新自己的網站，更新完後，利用FTP程式上傳已更新的網頁到網路工作站中取代相對的網頁即可。
  3. 請各位學員保持家中的電腦的網站資料與網路工作站帳號中的網頁資料同步更新。
  4. 因為已經同步更新過，上課時學員只需利用FTP程式將整個網站資料下載至電腦教室中的電腦中編輯，編輯完後再上傳即可。
  5. 若上課時在教室中已經對網站編輯、更新、上傳，下課後回到家中請立刻將網站資料下載回家中的電腦，以保持資料的同步。

網站下載、隨處編輯

  1. 除了家裡與學校電腦室的電腦外，如果還有其他地方的電腦可以使用，如上班的地方，利用同樣的概念，可以將網路工作站帳號中的網站資料隨處下載，並當場更新再上傳，如同狡兔有三窟，隨時隨地都可以更新自己的網站。但須注意最後要保持家中的電腦的網站資料與網路工作站帳號中的網頁資料的同步，以免回家是編輯未更新過的網頁資料。

二、同班學員實習網站觀摩

  1. 請大家互相觀摩本班同學前幾週所製作簡單的個人網站，並請大家仔細的檢查自己的或別人的網站內容是否有錯誤，尤其是「連結」的部份是否都可以正確無誤的連到該連的地方。
  2. 請參看本班學員個人網站與E-mail地址，這裡有本班所有學員的網址與E-mail地址。可以寫信給其他同學打聲招呼，如果發現同學的網站有錯誤的地方，也請寫信過去告訴他/她如何訂正。

三、網站規劃實作

  1. 請各位學員參照「月霞的個人網站」中的「我的網站規劃」，仔細的規劃並完成個人網站的內容架構。

四、本週習題作業

  1. 若在課堂上未能完成第三章第一節中所描述的「學員初步實習網站」，回家後請利用FTP程式下載至家中的電腦中繼續編輯完成。
  2. 作業評分項目：
    • 是否已經將個人網站資料下載至家中的電腦中(從工作站的記錄可查出)。
    • 「學員初步實習網站」中所有網頁是否都已經完成、網頁中的結構設定是否都合理。
    • 「學員初步實習網站」中的連結是否都正確無誤。
    • 「自我介紹」、「網站規劃」兩個網頁的內容是否都已輸入並完成。請注意內容不要過分簡單，越詳細越好。
    • 評分日期：4月8日，請各位學員在4月8日中午12點以前將編輯完成的網站上傳至自己的帳號中，老師將直接瀏覽各位的網站來評分。
  3. 若需要FrontPage程式，請向班代索取。
  4. 閱讀(之前未閱讀完的請繼續閱讀)：

[回首頁]、[本編目錄]、[上一編]、[下一編]

mailto:jdz@mail.bamboo.hc.edu.tw