目錄結構與網站架構

以 windows 作業系統來說,檔案目錄結構的最上層是 C: (C 槽) 或 D: (D 槽)之類 -- 預設以英文字母編號的磁碟機,所以任何一個檔案的完整路徑(絕對路徑)一定是以 C: 或 D: 之類的開頭,接下來如「程式集」(安裝的軟體大多會放置於程式集內)的路徑就會是 C:\Program Files 。檔案目錄可以把它想像是大箱子裝小箱子,最大的箱子是行李箱,行李箱內裝有背包、錢包及一些衣服,背包內又裝有筆袋及筆記簿,筆袋中又有鉛筆及原子筆等•••由大至小一直往下,抽象概念上如下圖:
 
 
•••不過實際上空間的存放不會因為越下一層空間就越少。

上圖為假想網站架構,以上圖來說明絕對路徑及相對路徑:(假設「我的網站」是在 D: 之下)

  • 絕對路徑
    • 「學員.doc」這個檔案是在「資料」目錄下,「資料」目錄又在「檔案」目錄下,「檔案」目錄又在「我的網站」目錄下,所以「學員.doc」的完整路徑會是 D:\我的網站\檔案\資料\學員.doc ;「向右箭號.gif」這個圖檔是在「影像」目錄下,「影像」目錄又在「我的網站」目錄之下,所以「向右箭號.gif」圖檔的完整路徑會是 D:\我的網站\影像\向右箭號.gif
    • 以網站網址的觀點來看,假設申請網頁空間的帳號是 user01 ,網頁空間的首頁網址是在 http://home.kimo.com.tw/user01 ,則 user01 就替代上圖的「我的網站」目錄,「工作.txt」這個檔案的絕對路徑就是 http://home.kimo.com.tw/user01/檔案/工作.txt 。如果 a 標籤(超連結)的 href 屬性或 img 標籤的 src 屬性等要設定成絕對路徑,也是要設定成 http://... 之類的網址而不是 D:\... 之類的路徑,否則會找不到來源。
  • 相對路徑
    • 假設「屬性.html」這個網頁有貼上一個「屬性.jpg」圖檔,以相對路徑來看,屬性.html在「瀏覽器」這一層目錄下,往上一層回到「網頁」目錄,再往上一層回到「我的網站」目錄,然後往下一層「影像」目錄找圖檔,再往下一層「瀏覽器」目錄,「屬性.jpg」圖檔就在「瀏覽器」目錄之內,所以「屬性.jpg」檔案就相對於「屬性.html」檔案的「../../影像/瀏覽器/屬性.jpg」位置。
    • ..」代表上一層目錄,「.」代表本層目錄 (也就是不移動) 。
    • 為何設定內部的資料來源(如 a 標籤的 href 屬性或 img 標籤的 src 屬性等等)用相對路徑會比用絕對路徑來得妥當?由於整個網站可能會遷移,譬如今天網站放在 kimo 的免費網頁空間中,有一些網頁的圖檔資料來源寫成絕對路徑例如 http://home.kimo.com.tw/user01/images/myphoto1.jpg ,結果 kimo 免費網頁空間決定關閉,使得整個網站資料要放到另一個免費網頁空間上,例如 pchome ,結果實際的圖片位置會變成在 http://home.pchome.com.tw/user01/images/myphoto1.jpg ,因此當瀏覽該網頁時,圖片就不會顯示出來。
  • 命名規則:實際上的目錄或檔案名稱,最好全部使用英文命名,而且不要使用空白鍵,否則由於網站伺服器的設定,可能會找不到檔案而無法顯示網頁。 (上圖的英文版如下網址:英文版)