建站常識
網頁制作常見問題:網頁、圖片路徑問題
2006-08-21 12:08:00
經常聽到網友苦述自己的網頁中有許多圖片不能正常顯示,究竟為什么不能正常顯示呢?總結其原因絕大部分都是因為使用了錯誤路徑所致。網頁中的圖像、動畫等素材都有自己固定的存放位置,網頁只是通過路徑使用HTML語言來調用它們,然后把它們顯示在網頁中。在網頁中的路徑大體可分為相對路徑和絕對路徑,大家(尤其是初學網頁設計的朋友)往往對它們不夠認識,在應該使用相對路徑的地方使用了絕對路徑,從而導致瀏覽器無法在指定的位置打開指定的文件,使素材不能正常顯示。
那什么是相對路徑?什么是絕對路徑呢?為什么使用了絕對路徑有時就不能顯示呢?讓我們一起來認識一下它們吧。
比如C盤的My Pictures目錄下有一個tp.jpg圖像,那么它的路徑就是c:\My pictures\tp.jpg,其實這種完整地描述文件位置的路徑就是絕對路徑。如網頁index.htm中有一張圖片tp.jpg,它們的絕對路徑是:
c:\My pictures\index.htm
c:\My pictures\tp.jpg
如果你使用了絕對路徑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”,其中使用“..\”來表示上一級目錄,“..\..\”表示上上級的目錄,以此類推。
我們一起來看看初學的朋友可能犯的幾個路徑錯誤:
例1
c:\mywed\wed\index.htm
c:\mywed\img\tp.jpg
在此例中,index.htm網頁中有tp.jpg這個圖片,因為兩個文件同在Mywed目錄下,所以初學者可能把圖片鏈接寫為img\tp.jpg,那么這樣實際的鏈接就變?yōu)榱薈:\mywed\wed\img\tp.jpg,顯然這是不正確的。正確的路徑應該是相對路徑..\img\tp.jpg。
例2
c:\mywed\wed\wed1\index.htm
c:\mywed\img\img1\tp.jpg
在此例中,index.htm網頁中有tp.jpg這個圖片,初學者可能錯誤的把圖片鏈接寫為..\img\img1\tp.jpg,那么這樣轉為絕對路徑就是C:\mywed\wed\img\img1\tp.jpg了,因為在該目錄下并沒有此文件,所以顯然這種鏈接是錯誤的。正確的應該是..\..\img\img1\tp.jpg。
例3
c:\mywed\wed\wed\index.htm
c:\mywed\wed\img\tp.jpg
在此例中,index.htm網頁中有tp.jpg這個圖片,初學者可能錯誤地把圖片鏈接寫為..\..\img\tp.jpg,那么這樣轉為絕對路徑就是C:\mywed\img\tp.jpg了,因為在該目錄下并沒有此文件,所以顯然這種鏈接是錯誤的。正確的應該是..\img\tp.jpg。
通過上面三個例子,我們可以看到網頁與圖片所在目錄相同的部分都可以使用“..”進行代替。
有的讀者可能會有這樣的疑惑:一個網站有許多的鏈接,我怎么能保證它們的連接都正確,如果我調整了一下圖片或網頁的存儲路徑,那不是全亂了么?為了提高工作效率,我們推薦大家使用Dreamweaver進行網站編輯,因為它有個站點管理功能,使用該功能絕對路徑可以自動地轉化為相對路徑,并且當你在站點中改動文件路徑時,與這些文件關聯的連接路徑都會自動更改,實在是方便極了!
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網站設計制作
- [2023-04-10 11:07:30] 網站建設制作流程知多少
- [2022-10-14 10:11:30] 做網站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產品”思維搭建網站!
- [2022-08-08 09:12:57] 一家公司的網站應該有哪些板塊內容?
- [2022-08-05 09:28:06] 企業(yè)網站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網站首頁設計的好看,這個網站就成功了一大半!
- [2022-05-20 09:34:19] 網站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網站建設公司
- [2022-05-17 11:27:01] 高端網站定制與模板化網站應該怎么選擇?
- [2022-04-22 16:00:41] 現在高端的網站設計都有哪些新的趨勢?
延伸閱讀
- [2006-02-13 13:31:00] 網絡使用性的五大特質
- [2008-01-28 17:53:00] 人機交互界面設計的三個工作流程
- [2007-12-11 16:23:00] 如何控制頁面內容的加載順序
- [2010-04-23 16:59:00] 會員項目組近期設計分享
- [2007-08-06 12:12:00] 網頁設計中的版式原理--方向
- [2010-04-26 14:22:00] 把簡單留給用戶
- [2009-10-09 08:31:00] 打動用戶的需求
- [2007-06-09 15:10:00] 網站知名從建站開始 海外風
- [2016-12-29 14:53:00] 大數據或將迎來掘金良機——智線發(fā)力短視頻營銷
- [2010-07-20 11:35:00] 產品&設計&色彩
- [2010-09-03 15:20:00] 案例—減少用戶的思考
- [2009-08-01 22:32:00] 細節(jié)設計之美:擴大可操作區(qū)域