如果你剛剛開(kāi)始接觸網(wǎng)頁(yè)制作，是不是經(jīng)常發(fā)生這樣的問(wèn)題呢？做好的網(wǎng)頁(yè)在自己機(jī)器上可以正常瀏覽，而把頁(yè)面?zhèn)鞯椒⻊?wù)器上總是出現(xiàn)看不到圖片，css樣式表失效等錯(cuò)誤。這種情況下多半是由于你使用了錯(cuò)誤的路徑，在應(yīng)該使用相對(duì)路徑的地方使用了路徑，導(dǎo)致瀏覽器無(wú)法在指定的位置打開(kāi)指定的文件。下面我們來(lái)談一下最讓初學(xué)者頭疼的相對(duì)路徑與路徑的區(qū)別及相關(guān)問(wèn)題。什么是路徑大家都知道，在我們平時(shí)使用計(jì)算機(jī)時(shí)要找到需要的文件必須知道文件的位置，而表示文件的位置的方式是路徑。例如只要看到這個(gè)路徑：c:/website/img/photo.jpg我們知道photo.jpg文件是在c盤的website目錄下的img子目錄中。類似于這樣完整的描述文件位置的路徑是路徑。我們不需要知道其他任何信息可以根據(jù)路徑判斷出文件的位置。在網(wǎng)站的應(yīng)用中，通常我們使用“/”來(lái)表示根目錄，/img/photo.jpg表示photo.jpg文件在這個(gè)網(wǎng)站的根目錄上的img目錄里。但是這樣使用對(duì)于初學(xué)者來(lái)說(shuō)是具有風(fēng)險(xiǎn)性的，因?yàn)橐肋@里所指的根目錄并不是你的網(wǎng)站的根目錄，而是你的網(wǎng)站所在的服務(wù)器的根目錄，因此當(dāng)網(wǎng)站的根目錄與服務(wù)器根目錄不同時(shí)，會(huì)發(fā)生錯(cuò)誤。什么是相對(duì)路徑讓我們先來(lái)分析一下為什么會(huì)發(fā)生圖片不能正常顯示的情況。舉一個(gè)例子，現(xiàn)在有一個(gè)頁(yè)面index.htm，在這個(gè)頁(yè)面中連接有一張圖片photo.jpg。它們的路徑如下：c:/website/index.htmc:/website/img/photo.jpg如果你使用路徑c:/website/img/photo.jpg，那么在自己的計(jì)算機(jī)上將一切正常，因?yàn)榇_實(shí)可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件。但是，當(dāng)你將頁(yè)面上傳到網(wǎng)站的時(shí)候很可能會(huì)出錯(cuò)了，因?yàn)槟愕木W(wǎng)站可能在服務(wù)器的c盤，也可能在d盤，還可能在aa目錄下，更可能在bb目錄下�？傊�，沒(méi)有理由會(huì)有c:/website/img/photo.jpg這樣一個(gè)路徑。那么，在index.htm文件中要使用什么樣的路徑來(lái)定位photo.jpg文件呢？對(duì)，應(yīng)該是用相對(duì)路徑。所謂相對(duì)路徑，顧名思義是自己相對(duì)于目標(biāo)位置。在上例中index.htm中連接的photo.jpg可以使用img/photo.jpg來(lái)定位文件，那么不論將這些文件放到哪里，只要它們的相對(duì)關(guān)系沒(méi)有變，不會(huì)出錯(cuò)。另外我們使用“../”來(lái)表示上一級(jí)目錄，“../../”表示上上級(jí)的目錄，依此類推(會(huì)DOS的朋友應(yīng)該很容易理解)。幾個(gè)簡(jiǎn)單例子再看幾個(gè)例子，注意所有例子中都是index.htm文件中鏈接圖片photo.jpg。例1：c:/website/web/index.htmc:/website/img/photo.jpg在此例中index.htm中鏈接的photo.jpg可以使用../img/photo.jpg的相對(duì)路徑來(lái)定位文件錯(cuò)誤寫法舉例：img/photo.jpg這種寫法是不正確的，在此例中，對(duì)于index.htm文件來(lái)說(shuō)img/photo.jpg所代表的路徑是：c:/website/web/img/photo.jpg，顯然不符合要求。例2：c:/website/web/xz/index.htmc:/website/img/images/photo.jpg在此例中index.htm中連接的photo.jpg可以使用../../img/images/photo.jpg的相對(duì)路徑來(lái)定位文件錯(cuò)誤寫法舉例：../img/images/photo.jpg這種寫法是不正確的，在此例中對(duì)于index.htm文件來(lái)說(shuō)../img/images/photo.jpg所代表的路徑是：c:/website/web/img/images/photo.jpg。例3：c:/website/web/xz/index.htmc:/website/web/img/photo.jpg在此例中index.htm中連接的photo.jpg可以使用../img/photo.jpg的相對(duì)路徑來(lái)定位文件錯(cuò)誤寫法舉例：../../img/photo.jpg在此例中對(duì)于index.htm文件來(lái)說(shuō)../../img/photo.jpg所代表的路徑是：c:/website/img/photo.jpg。如何修改樣式表的路徑有時(shí)我們發(fā)現(xiàn)在網(wǎng)頁(yè)制作工具中做好的網(wǎng)頁(yè)CSS效果，預(yù)覽時(shí)沒(méi)有問(wèn)題，但如果傳到網(wǎng)上或者用IE瀏覽器打開(kāi)，你會(huì)發(fā)現(xiàn)CSS所應(yīng)用到的網(wǎng)頁(yè)元素完全沒(méi)有作用。這同樣是鏈接錯(cuò)誤的原因。CSS也存在鏈接問(wèn)題。使用文本編輯器打開(kāi)htm文件，查看源代碼，在源代碼的開(kāi)頭部分......標(biāo)記中間找到。“Href=”后面的內(nèi)容是css的路徑，我們可以根據(jù)以上的知識(shí)進(jìn)行相對(duì)路徑的轉(zhuǎn)換。如：c:/website/web/xz/index.htm和c:/website/css/test.css，其中index.htm中聯(lián)接test.css文件，可以使用../../css/test.css的相對(duì)路徑來(lái)定位文件，完整的代碼標(biāo)記是：錯(cuò)誤寫法：../../../css/test.css這種寫法是不正確的，在此例中對(duì)于index.htm文件來(lái)說(shuō)../../../css/test.css所代表的路徑是：c:/css/test.css，為了避免在制作網(wǎng)頁(yè)時(shí)出現(xiàn)路徑錯(cuò)誤，我們可以使用dreamweaver的站點(diǎn)管理功能來(lái)管理站點(diǎn)。只要使用菜單命令site-new site新建站點(diǎn)并定義站點(diǎn)目錄之后，它將自動(dòng)的把路徑轉(zhuǎn)化為相對(duì)路徑，并且當(dāng)你在站點(diǎn)中移動(dòng)文件的時(shí)候，與這些文件關(guān)聯(lián)的連接路徑都會(huì)自動(dòng)更改，實(shí)在是非常的方便。訣竅總結(jié)通過(guò)以上的例子可以發(fā)現(xiàn)，在把路徑轉(zhuǎn)化為相對(duì)路徑的時(shí)候，兩個(gè)文件路徑中相同的部分都可以忽略，不做考慮。只要考慮它們不同之處可以了。
下一篇：
狀態(tài)欄英文字母縮放