相對路徑、絕對路徑

若是您剛剛開始接觸網頁設計,是否是常常發生這樣的問題呢?作好的網頁在本身機器上能夠正常瀏覽,而把頁面傳到服務器上就老是出現看不到圖片,css樣式表失效等錯誤。
  這種狀況下多半是因爲你使用了錯誤的路徑,在應該使用相對路徑的地方使用了絕對路徑,致使瀏覽器沒法在指定的位置打開指定的文件。
  下面咱們就來談一下最讓初學者頭疼的相對路徑與絕對路徑的區別問題。css

  什麼是絕對路徑:
  你們都知道,在咱們平時使用計算機時要找到須要的文件就必須知道文件的位置,而表示文件的位置的方式就是路徑,例如只要看到這個路徑:c:/website/img/ g咱們就知道 g文件是在c盤的website目錄下的img子目錄中。相似於這樣完整的描述文件位置的路徑就是絕對路徑。咱們不須要知道其餘任何信息就能夠根據絕對路徑判斷出文件的位置。而在網站中相似以
  另外,在網站的應用中,一般咱們使用"/"來表示根目錄,/img/ g就表示 g文件在這個網站的根目錄上的img目錄裏。可是這樣使用對於初學者來講是具備風險性的,由於要知道這裏所指的根目錄並非你的網站的根目錄,而是你的網站所在的服務器的根目錄,所以當網站的根目錄與服務器根目錄不一樣時,就會發生錯誤。web

  什麼是相對路徑:
  讓咱們先來分析一下爲何會發生圖片不能正常顯示的狀況。舉一個例子,如今有一個頁面 m,在這個頁面中聯接有一張圖片 g。他們的絕對路徑以下:
  c:/website/ m
  c:/website/img/ g
  若是你使用絕對路徑c:/website/img/ g,那麼在本身的計算機上將一切正常,由於確實能夠在指定的位置即c:/website/img/ g上找到 g文件,可是當你將頁面上傳到網站的時候就極可能會出錯了,由於你的網站可能在服務器的c盤,可能在d盤,也可能在aa目錄下,更可能在bb目錄下,總之沒有理由會有c:/website/img/ g這樣一個路徑。那麼,在 m文件中要使用什麼樣的路徑來定位 g文件呢?對,應該是用相對路徑,所謂相對路徑,顧名思義就是本身相對與目標位置。在上例中 m中聯接的 g可使用img/ g來定位文件,那麼不論將這些文件放到哪裏,只要他們的相對關係沒有變,就不會出錯。
  另外咱們使用「../」來表示上一級目錄,「../../」表示上上級的目錄,以此類推。(學習過dos的朋友可能更容易理解)
  再看幾個例子,注意全部例子中都是 m文件中聯接有一張圖片 g。
  例:
  c:/website/web/ m
  c:/website/img/ g
  在此例中 m中聯接的 g應該怎樣表示呢?
  錯誤寫法:img/ g
  這種寫法是不正確的,在此例中,對於 m文件來講img/ g所表明的絕對路徑是:c:/website/web/img/ g,顯然不符合要求。
  正確寫法:使用../img/ g的相對路徑來定位文件
  例:
  c:/website/web/xz/ m
  c:/website/img/images/ g
  在此例中 m中聯接的 g應該怎樣表示呢?
  錯誤寫法:../img/images/ g
  這種寫法是不正確的,在此例中對於 m文件來講../img/images/ g所表明的絕對路徑是:c:/website/web/img/images/ g。
  正確寫法:可使用../../img/images/ g的相對路徑來定位文件
  例:
  c:/website/web/xz/ m
  c:/website/web/img/ g
  在此例中 m中聯接的 g應該怎樣表示呢?
  錯誤寫法:../../img/ g
  這種寫法是不正確的,在此例中對於 m文件來講../../img/ g所表明的絕對路徑是:c:/website/img/ g。
  正確寫法:可使用../img/ g的相對路徑來定位文件瀏覽器

  總結:經過以上的例子能夠發現,在把絕對路徑轉化爲相對路徑的時候,兩個文件絕對路徑中相同的部分均可以忽略,不作考慮。只要考慮他們不一樣之處就能夠了。服務器

  如何修改樣式表的路徑:
  使用文本編輯器打開htm文件,查看源代碼,在源代碼的開頭部分......標記中間找到。「Href=」後面的內容就是css的路徑,咱們能夠根據以上的知識進行相對路徑的轉換。
  例:
  c:/website/web/xz/ m
  c:/website/css/test.css
  在此例中 m中聯接test.css文件,可使用../../css/test.css的相對路徑來定位文件,完整的代碼標記是:
  錯誤寫法舉例:../../../css/test.css
  這種寫法是不正確的,在此例中對於 m文件來講../../../css/test.css所表明的絕對路徑是:c:/css/test.css
  最後,爲了不在製做網頁時出現路徑錯誤,咱們可使用dreamweaver的站點管理功能來管理站點。只要使用菜單命令site-new site新建站點並定義站點目錄以後,它將自動的把絕對路徑轉化爲相對路徑,而且當你在站點中移動文件的時候,與這些文件關聯的鏈接路徑都會自動更改,實在是很是的方便。
--愛問-久久_81編輯器

相關文章
相關標籤/搜索