經常聽到網友苦述自己的網頁中有許多圖片不能正常顯示，究竟為什麼不能正常顯示呢？總結其原因絕大部分都是因為使用了錯誤路徑所致。網頁中的圖像、動畫等素材都有自己固定的存放位置，網頁只是通過路徑使用HTML語言來調用它們，然後把它們顯示在網頁中。在網頁中的路徑大體可分為相對路徑和絕對路徑，大家(尤其是初學網頁設計的朋友)往往對它們不夠認識，在應該使用相對路徑的地方使用了絕對路徑，從而導致瀏覽器無法在指定的位置打開指定的文件，使素材不能正常顯示。
' B% `( ~- \5 r i
7 y8 i: }/ V$ x 那什麼是相對路徑？什麼是絕對路徑呢？為什麼使用了絕對路徑有時就不能顯示呢？讓我們一起來認識一下它們吧。3 L, l; ^- { @' o* u$ A$ q. u: t# Z
6 I$ ^, D" h6 t) \$ N( Z% \( j
比如C盤的My Pictures目錄下有一個tp.jpg圖像，那麼它的路徑就是c:\My pictures\tp.jpg，其實這種完整地描述文件位置的路徑就是絕對路徑。如網頁index.htm中有一張圖片tp.jpg，它們的絕對路徑是：! u' I/ c7 [7 [5 D j) u
z+ S: Q) { I/ F& o( O' J c:\My pictures\index.htm
: \$ D- S3 J1 F; Q7 `- U( @; Z( @) D V6 v
c:\My pictures\tp.jpg& ~4 g6 S4 D3 C, W5 |6 _& u! }0 D2 s
( _8 s! [8 c) @6 [& t/ U: k% }- S 如果你使用了絕對路徑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」，其中使用「..\」來表示上一級目錄，「..\..\」表示上上級的目錄，以此類推。8 P) C7 B2 l( R8 G0 z6 u
3 d( a3 F/ X3 D 我們一起來看看初學的朋友可能犯的幾個路徑錯誤：( o( W9 i4 b) C" h% o$ x
3 h6 d# v; m8 G6 r* N例1* S- _ m6 @2 o" u; q! D
) S% R7 d. Y. X! E- e
c:\mywed\wed\index．htm
7 c* j7 w" V4 }) }0 K2 a% Y6 `& G9 | F
c:\mywed\img\tp．jpg% R2 u0 ~" q* ], _
% L: m0 p7 u+ Q7 R 在此例中，index.htm網頁中有tp.jpg這個圖片，因為兩個文件同在Mywed目錄下，所以初學者可能把圖片鏈接寫為img\tp.jpg，那麼這樣實際的鏈接就變為了C:\mywed\wed\img\tp.jpg，顯然這是不正確的。正確的路徑應該是相對路徑..\img\tp.jpg。
9 v; H; Z4 f6 W9 A/ j$ |9 q' q! [1 F- i
例2
" Q' Q7 I7 @/ }8 `/ T- v) D+ ~8 z. I4 C6 W
c:\mywed\wed\wed1\index．htm3 r2 H7 R6 x4 f4 e( ^
$ F4 l. u) U. s
c:\mywed\img\img1\tp．jpg' d- t' \( Q9 U0 S! }
b* q5 |$ R5 e4 ~
在此例中，index.htm網頁中有tp.jpg這個圖片,初學者可能錯誤的把圖片鏈接寫為..\img\img1\tp.jpg，那麼這樣轉為絕對路徑就是C:\mywed\wed\img\img1\tp.jpg了，因為在該目錄下並沒有此文件，所以顯然這種鏈接是錯誤的。正確的應該是..\..\img\img1\tp.jpg。3 L! x% f* [6 C: g, Q2 m9 i K, ?
J6 [! Q0 c: V8 X例3" a5 q- |1 v5 A9 n5 j1 y+ I
& O3 X# k2 Y8 H' i/ {* U
c:\mywed\wed\wed\index．htm
1 ^, u! Y1 w( V& k3 |9 F$ i+ H8 h! x2 r1 ^
c:\mywed\wed\img\tp．jpg4 ~4 v$ ?1 g4 u. u$ W; h q
1 p) b O) w. x! |5 r$ H
在此例中，index.htm網頁中有tp.jpg這個圖片，初學者可能錯誤地把圖片鏈接寫為..\..\img\tp.jpg，那麼這樣轉為絕對路徑就是C:\mywed\img\tp.jpg了，因為在該目錄下並沒有此文件，所以顯然這種鏈接是錯誤的。正確的應該是..\img\tp.jpg。# e7 \+ g; P: p/ A0 W, x
& H) f* i1 j2 W& Q& u1 U) v
通過上面三個例子，我們可以看到網頁與圖片所在目錄相同的部分都可以使用「..」進行代替。
& O6 t$ K5 A: S/ d+ n
* Z! I& W) `1 ~: ?6 C8 W9 } 有的讀者可能會有這樣的疑惑：一個網站有許多的鏈接，我怎麼能保證它們的連接都正確，如果我調整了一下圖片或網頁的存儲路徑，那不是全亂了麼？為了提高工作效率，我們推薦大家使用Dreamweaver進行網站編輯，因為它有個站點管理功能，使用該功能絕對路徑可以自動地轉化為相對路徑，並且當你在站點中改動文件路徑時，與這些文件關聯的連接路徑都會自動更改，實在是方便極了！ |
|
發表於 2004-8-23 03:12:20
提升卡
沉默卡
变色卡