UI培訓(xùn)之理解目錄與路徑

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

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

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

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

圖1-11

這樣做的目的是可以方便我們整個(gè)站點(diǎn)的文件管理，同時(shí)也可以方便的找到我們需要的文件?？梢栽O(shè)想一下，如果將Web站點(diǎn)中的所有文件都放到根目錄的話，整個(gè)目錄會(huì)變得雜亂無(wú)章，對(duì)于相應(yīng)的文件的操作也會(huì)變得非常復(fù)雜。

絕對(duì)與相對(duì)路徑

絕對(duì)路徑：

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

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

　　相對(duì)路徑：

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

　　D:/百智時(shí)尚/index.html

　　D:/百智時(shí)尚/images/01.jpg

如果你使用絕對(duì)路徑D:/百智時(shí)尚/images/01.jpg，那么在自己的計(jì)算機(jī)上將一切正常，因?yàn)榇_實(shí)可以在指定的位置。即D:/百智時(shí)尚/images/01.jpg上找到01.jpg這張圖片，但是當(dāng)你將頁(yè)面上傳到服務(wù)器的時(shí)候就很可能會(huì)出錯(cuò)了，因?yàn)槟愕木W(wǎng)站可能在服務(wù)器的C盤，可能在D盤，也可能在E盤的某個(gè)目錄下，總之沒有理由會(huì)有D:/百智時(shí)尚/images/01.jpg這樣一個(gè)路徑。

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

　　另外我們使用“../”來(lái)表示上一級(jí)目錄，“../../”表示上上級(jí)的目錄，以此類推。

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

例：

D:/百智時(shí)尚/web/index.html

　　D:/百智時(shí)尚/images/01.jpg

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

　　例：

　　D:/百智時(shí)尚/web/fashion/index.html

　　D:/百智時(shí)尚/images/20140423/01.jpg

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

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

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

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