UI培訓之理解目錄與路徑

更新時間:2016年03月26日10時07分來源:傳智播客UI培訓學院瀏覽次數(shù):

當我們創(chuàng)建好一個頁面時，需要將頁面保存到電腦的某個位置，通常是創(chuàng)建一個文件夾并保存到此文件內(nèi)。我們創(chuàng)建的這個文件夾，就是我們保存網(wǎng)站的根目錄，也就是我們網(wǎng)站項目的站點。

通常一個站點根目錄內(nèi)會包含多個子目錄，每個子目錄包含站點中的不同部分。例如，一個具有多種類型文件的門戶網(wǎng)站我們可以將每種文件類型單獨創(chuàng)建一個獨立的子目錄進行保存。

例如我們在D盤根目錄創(chuàng)建了一個名為“百智時尚”的文件夾，這個文件夾就是我們的站點根目錄。我們將content.html、index.html和list.html三個頁面文件放到了根目錄下，同時我們又在根目錄下創(chuàng)建了css、images、js和swf幾個子文件夾。在實際工作中我們將用到的CSS文件放全部放到css文件夾內(nèi)，用到的圖片文件全部放到images文件夾內(nèi)，將用到的js文件全部放到js文件夾內(nèi)，將flash文件全部放到swf文件夾內(nèi)。如圖1-11：

圖1-11

這樣做的目的是可以方便我們整個站點的文件管理，同時也可以方便的找到我們需要的文件。可以設(shè)想一下，如果將Web站點中的所有文件都放到根目錄的話，整個目錄會變得雜亂無章，對于相應的文件的操作也會變得非常復雜。

絕對與相對路徑

絕對路徑：

在我們平時使用計算機時要找到需要的文件就必須知道該文件的位置，而表示文件的位置的方式就是路徑，例如只要看到這個路徑：D:\百智時尚\(zhòng)images\01.jpg我們就知道01.jpg文件是在D盤的百智時尚目錄下的images子目錄中。像這樣完整的描述文件位置的路徑就是絕對路徑。根據(jù)絕對路徑便可判斷出文件的位置。

在網(wǎng)站中類似以http://img1.gtimg.com/visual_page/40/22/31125.jpg來確定文件位置的方式也是絕對路徑。從這個絕對路徑地址中我們可知，31125.jpg這張圖片是放在了主機根目錄下的visual_page文件夾下的40文件夾下的22文件夾內(nèi)。

　　相對路徑：

　　網(wǎng)站制作初學者經(jīng)常發(fā)生圖片不能正常顯示的情況。例如，現(xiàn)在有一個頁面index.html,在這個頁面中鏈接有一張圖片photo.jpg。他們的絕對路徑如下：

　　D:/百智時尚/index.html

　　D:/百智時尚/images/01.jpg

如果你使用絕對路徑D:/百智時尚/images/01.jpg，那么在自己的計算機上將一切正常，因為確實可以在指定的位置。即D:/百智時尚/images/01.jpg上找到01.jpg這張圖片，但是當你將頁面上傳到服務器的時候就很可能會出錯了，因為你的網(wǎng)站可能在服務器的C盤，可能在D盤，也可能在E盤的某個目錄下，總之沒有理由會有D:/百智時尚/images/01.jpg這樣一個路徑。

那么，在index.html文件中要使用什么樣的路徑來定位01.jpg文件呢？對，應該是用相對路徑，所謂相對路徑，就是指這個文件所在的位置與其他文件或者文件夾的關(guān)系，也就是相對位置。在上例中index.html中鏈接的01.jpg可以使用images/01.jpg來定位文件，那么不論將這些文件放到哪里，只要他們的相對關(guān)系沒有變，就不會出錯。

　　另外我們使用“../”來表示上一級目錄，“../../”表示上上級的目錄，以此類推。

　　再看幾個例子，注意所有例子中都是index.html文件中聯(lián)接有一張圖片01.jpg。

例：

D:/百智時尚/web/index.html

　　D:/百智時尚/images/01.jpg

　　在此例中index.html中鏈接的01.jpg很顯然index.html需要跳出它自身的父目錄web文件夾向上一級才能找到images這個目錄，因此應該寫成../images/01.jpg

　　例：

　　D:/百智時尚/web/fashion/index.html

　　D:/百智時尚/images/20140423/01.jpg

　　在此例中index.html中鏈接的01.jpg應該怎樣表示呢？

　　我們分析一下，index.html需要跳出他自身所在的fashion文件夾，然后再跳出fashion所在的web文件夾才能找到images文件夾，也就是說需要向上跳兩級，因此應該這樣寫../../images/20140423/01.jpg

通過上面的講解，我們對目錄與路徑有了一個清楚的認識，從而能夠避免在實際工作中經(jīng)常容易出現(xiàn)的文件引用錯誤。

本文版權(quán)歸傳智播客UI培訓學院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓學院
首發(fā)：