过期域名预定抢注

 找回密碼
 免费注册

網站製作中網頁、圖片路徑問題

[複製鏈接]
發表於 2004-8-23 03:12:20 | 顯示全部樓層 |閱讀模式
經常聽到網友苦述自己的網頁中有許多圖片不能正常顯示,究竟為什麼不能正常顯示呢?總結其原因絕大部分都是因為使用了錯誤路徑所致。網頁中的圖像、動畫等素材都有自己固定的存放位置,網頁只是通過路徑使用HTML語言來調用它們,然後把它們顯示在網頁中。在網頁中的路徑大體可分為相對路徑和絕對路徑,大家(尤其是初學網頁設計的朋友)往往對它們不夠認識,在應該使用相對路徑的地方使用了絕對路徑,從而導致瀏覽器無法在指定的位置打開指定的文件,使素材不能正常顯示。
/ n- u0 x/ k2 S3 ]: w2 n' m0 @
* v! x0 X" T2 P1 @' b# r( K+ w  那什麼是相對路徑?什麼是絕對路徑呢?為什麼使用了絕對路徑有時就不能顯示呢?讓我們一起來認識一下它們吧。
( A4 A" }9 ]( K/ G( L& z: s+ q, [# l* V0 H  D" l
  比如C盤的My Pictures目錄下有一個tp.jpg圖像,那麼它的路徑就是c:\My pictures\tp.jpg,其實這種完整地描述文件位置的路徑就是絕對路徑。如網頁index.htm中有一張圖片tp.jpg,它們的絕對路徑是:2 W, G' @( F7 b3 y) d) x9 I; E  g: [

% X8 v6 B& H1 `. A$ |  c:\My pictures\index.htm
. p2 _% B- _/ {- Y2 y8 ?
2 J) a8 ^, D! D' r  c:\My pictures\tp.jpg6 ~- o  O9 m% v% N+ O# Y
& z6 c6 W3 f* X; o
  如果你使用了絕對路徑c:\My pictures\tp.jpg進行圖片鏈接,那麼在本地電腦中將一切正常,因為在c:\My pictures下的確存在tp.jpg這個圖片。但你將它們上傳到網站服務器上後,就不會正常了,因為服務器給你劃分的存放空間可能在C盤其他目錄中,也可能在D盤其他目錄中,總之不會那麼巧的就是c:\My pictures。那麼圖片路徑應該如何設置呢?這裡就必須使用相對路徑了,所謂相對路徑,顧名思義就是自己相對與目標位置。在上例中index.htm中連接的tp.jpg就可以使用My pictures\tp.jpg來定位文件,這樣不論將這些文件放到哪裡,只要它們的相對關係沒有變,就不會出錯。具體的鏈接方式是這樣的:「..\My pictures\img.jpg」,其中使用「..\」來表示上一級目錄,「..\..\」表示上上級的目錄,以此類推。
( t/ D# X7 t9 \9 K7 k
2 m  b( S  k6 `' D9 J  我們一起來看看初學的朋友可能犯的幾個路徑錯誤:+ t4 o1 S3 n; ~2 ?: o2 @' \4 E  f

4 M# G2 Y8 U( F5 x. W7 Q. `$ R例1/ c- s8 `( ^. [/ e2 j) V8 x) m5 o

! V* O" v4 h. j/ l  c:\mywed\wed\index.htm+ H3 g) B. K+ k" l8 }) m

: R8 Q: P' Y# p+ A: R+ V- }  c:\mywed\img\tp.jpg
) p& d4 Q$ b- w5 q8 N- G
9 Z, E! [0 Q7 ?7 |2 Z$ r: Q  在此例中,index.htm網頁中有tp.jpg這個圖片,因為兩個文件同在Mywed目錄下,所以初學者可能把圖片鏈接寫為img\tp.jpg,那麼這樣實際的鏈接就變為了C:\mywed\wed\img\tp.jpg,顯然這是不正確的。正確的路徑應該是相對路徑..\img\tp.jpg。+ @) f7 ~0 I, I( U8 s( Z

5 q9 K  [7 c0 `& e- C例2
' \0 s) h+ r0 Y- n* ^& g
4 |, R6 m0 Q3 L! {  c:\mywed\wed\wed1\index.htm  F* W, i9 h/ ?* K4 {* v( t  B. ]
/ Z  t' T$ t) Y
  c:\mywed\img\img1\tp.jpg
5 J1 ?* y9 b  K2 v( s7 J
1 |. ]$ H3 J# G$ |1 u  在此例中,index.htm網頁中有tp.jpg這個圖片,初學者可能錯誤的把圖片鏈接寫為..\img\img1\tp.jpg,那麼這樣轉為絕對路徑就是C:\mywed\wed\img\img1\tp.jpg了,因為在該目錄下並沒有此文件,所以顯然這種鏈接是錯誤的。正確的應該是..\..\img\img1\tp.jpg。
% L/ c$ m7 e1 D/ M. v
0 Y8 [4 F5 y7 }例3
; @4 j  s% G/ f9 n. ?: y3 P; B- \8 R2 z* R5 V  V$ B2 y* A
  c:\mywed\wed\wed\index.htm/ \: y( t1 t; A: Y& S7 ^% n' x
: x& V3 }/ f$ L6 }
  c:\mywed\wed\img\tp.jpg
) r* F+ d5 V! b, u, y* D/ C+ v4 O* S; Y
  在此例中,index.htm網頁中有tp.jpg這個圖片,初學者可能錯誤地把圖片鏈接寫為..\..\img\tp.jpg,那麼這樣轉為絕對路徑就是C:\mywed\img\tp.jpg了,因為在該目錄下並沒有此文件,所以顯然這種鏈接是錯誤的。正確的應該是..\img\tp.jpg。6 o2 ?# N0 U; d* r
6 d. Y0 I1 d3 v
  通過上面三個例子,我們可以看到網頁與圖片所在目錄相同的部分都可以使用「..」進行代替。' m0 f" w- j* v0 Q/ r; X2 ?
$ l% x/ g1 a  F4 r
  有的讀者可能會有這樣的疑惑:一個網站有許多的鏈接,我怎麼能保證它們的連接都正確,如果我調整了一下圖片或網頁的存儲路徑,那不是全亂了麼?為了提高工作效率,我們推薦大家使用Dreamweaver進行網站編輯,因為它有個站點管理功能,使用該功能絕對路徑可以自動地轉化為相對路徑,並且當你在站點中改動文件路徑時,與這些文件關聯的連接路徑都會自動更改,實在是方便極了!
發表於 2004-8-23 03:26:08 | 顯示全部樓層
提示: 作者被禁止或刪除 內容自動屏蔽
回復 给力 爆菊

使用道具 舉報

發表於 2004-8-28 01:22:52 | 顯示全部樓層
提示: 作者被禁止或刪除 內容自動屏蔽
回復 给力 爆菊

使用道具 舉報

發表於 2004-8-28 02:35:13 | 顯示全部樓層
支持!
回復 给力 爆菊

使用道具 舉報

發表於 2004-8-28 11:43:08 | 顯示全部樓層
提示: 作者被禁止或刪除 內容自動屏蔽
回復 给力 爆菊

使用道具 舉報

發表於 2004-8-28 14:18:56 | 顯示全部樓層
提示: 作者被禁止或刪除 內容自動屏蔽
回復 给力 爆菊

使用道具 舉報

發表於 2004-8-29 02:37:36 | 顯示全部樓層
提示: 作者被禁止或刪除 內容自動屏蔽
回復 给力 爆菊

使用道具 舉報

發表於 2004-8-29 03:17:08 | 顯示全部樓層
哈哈,當初我自學做網站的時候也遇到過,當時還百思不得其解...不過最終自己搞掂了...
回復 给力 爆菊

使用道具 舉報

發表於 2004-8-31 19:28:17 | 顯示全部樓層
解決了問題,謝了
回復 给力 爆菊

使用道具 舉報

發表於 2004-8-31 19:33:33 | 顯示全部樓層
提示: 作者被禁止或刪除 內容自動屏蔽
回復 给力 爆菊

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免费注册

本版積分規則

點基跨境 數位編輯創業論壇

GMT+8, 2025-7-11 09:54

By DZ X3.5

小黑屋

快速回復 返回頂部 返回列表