北京網(wǎng)站建設(shè)多年網(wǎng)站建設(shè)經(jīng)驗(yàn),依托強(qiáng)大的服務(wù)優(yōu)勢(shì),為您提供專業(yè)的北京網(wǎng)站建設(shè)服務(wù)

當(dāng)前位置:首頁(yè) > 北京網(wǎng)站建設(shè) > 網(wǎng)頁(yè)設(shè)計(jì)技巧
北京網(wǎng)站制作 網(wǎng)站建設(shè)公司 網(wǎng)站搭建 網(wǎng)站制作公司 企業(yè)建站 網(wǎng)站設(shè)計(jì)公司 網(wǎng)站開發(fā) 網(wǎng)站設(shè)計(jì) 北京網(wǎng)站設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)公司 常見問題 高端網(wǎng)站建設(shè) 企業(yè)網(wǎng)站建設(shè) 品牌網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)模板 網(wǎng)頁(yè)設(shè)計(jì)與制作 網(wǎng)站建設(shè)多少錢 網(wǎng)站設(shè)計(jì)與制作 網(wǎng)站建設(shè)費(fèi)用 做網(wǎng)站 做網(wǎng)站公司 高端網(wǎng)站設(shè)計(jì) 網(wǎng)站建設(shè)方案 網(wǎng)站建設(shè)制作 北京網(wǎng)站建設(shè) 網(wǎng)站建設(shè)知識(shí) 網(wǎng)站建設(shè)優(yōu)化 網(wǎng)站建設(shè)空間 建設(shè)網(wǎng)站 制作網(wǎng)站 設(shè)計(jì)網(wǎng)站 開發(fā)網(wǎng)站 網(wǎng)站建設(shè)開發(fā) 網(wǎng)站開發(fā)公司 網(wǎng)頁(yè)制作 搭建網(wǎng)站 網(wǎng)站設(shè)計(jì)制作 網(wǎng)站設(shè)計(jì)費(fèi)用 企業(yè)網(wǎng)站設(shè)計(jì) 公司網(wǎng)站建設(shè) 公司網(wǎng)站設(shè)計(jì) 公司網(wǎng)站制作 企業(yè)做網(wǎng)站 網(wǎng)站設(shè)計(jì)與開發(fā) 網(wǎng)站建設(shè)備案

網(wǎng)頁(yè)設(shè)計(jì)技巧

作者:鵬飛網(wǎng)絡(luò)   時(shí)間:2008-12-23   分類:北京網(wǎng)站建設(shè)

 

如果您剛剛開始接觸網(wǎng)頁(yè)設(shè)計(jì),是不是經(jīng)常發(fā)生這樣的問題呢?做好的網(wǎng)頁(yè)在自己機(jī)器上可以正常瀏覽,而把頁(yè)面?zhèn)鞯椒⻊?wù)器上就總是出現(xiàn)看不到圖片,css樣式表失效等錯(cuò)誤。這種情況下多半是由于你使用了錯(cuò)誤的路徑,在應(yīng)該使用相對(duì)路徑的地方使用了絕對(duì)路徑,導(dǎo)致瀏覽器無法在指定的位置打開指定的文件。

下面我們就來談一下讓初學(xué)者頭疼的相對(duì)路徑與絕對(duì)路徑的區(qū)別問題。

什么是絕對(duì)路徑:

大家都知道,在我們平時(shí)使用計(jì)算機(jī)時(shí)要找到需要的文件就必須知道文件的位置,而表示文件的位置的方式就是路徑,例如只要看到這個(gè)路徑:c:/website/img/photo.jpg我們就知道photo.jpg文件是在c盤的website目錄下的img子目錄中。類似于這樣完整的描述文件位置的路徑就是絕對(duì)路徑。我們不需要知道其他任何信息就可以根據(jù)絕對(duì)路徑判斷出文件的位置。而在網(wǎng)站中類似以http://www.webjx.com/img/link.gif來確定文件位置的方式也是絕對(duì)路徑。

另外,在網(wǎng)站的應(yīng)用中,通常我們使用"/"來表示根目錄,/img/photo.jpg就表示photo.jpg文件在這個(gè)網(wǎng)站的根目錄上的img目錄里。但是這樣使用對(duì)于初學(xué)者來說是具有風(fēng)險(xiǎn)性的,因?yàn)橐肋@里所指的根目錄并不是你的網(wǎng)站的根目錄,而是你的網(wǎng)站所在的服務(wù)器的根目錄,因此當(dāng)網(wǎng)站的根目錄與服務(wù)器根目錄不同時(shí),就會(huì)發(fā)生錯(cuò)誤。
什么是相對(duì)路徑:

讓我們先來分析一下為什么會(huì)發(fā)生圖片不能正常顯示的情況。舉一個(gè)例子,現(xiàn)在有一個(gè)頁(yè)面index.htm,在這個(gè)頁(yè)面中聯(lián)接有一張圖片photo.jpg。他們的絕對(duì)路徑如下:
c:/website/index.htm
c:/website/img/photo.jpg

如果你使用絕對(duì)路徑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目錄下,總之沒有理由會(huì)有c:/website/img/photo.jpg這樣一個(gè)路徑。那么,在index.htm文件中要使用什么樣的路徑來定位photo.jpg文件呢?對(duì),應(yīng)該是用相對(duì)路徑,所謂相對(duì)路徑,顧名思義就是自己相對(duì)與目標(biāo)位置。在上例中index.htm中聯(lián)接的photo.jpg可以使用img/photo.jpg來定位文件,那么不論將這些文件放到哪里,只要他們的相對(duì)關(guān)系沒有變,就不會(huì)出錯(cuò)。

另外我們使用“../”來表示上一級(jí)目錄,“../../”表示上上級(jí)的目錄,以此類推。(學(xué)習(xí)過dos的朋友可能更容易理解)

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

例:
c:/website/web/index.htm
c:/website/img/photo.jpg
在此例中index.htm中聯(lián)接的photo.jpg應(yīng)該怎樣表示呢?
錯(cuò)誤寫法:img/photo.jpg
這種寫法是不正確的,在此例中,對(duì)于index.htm文件來說img/photo.jpg所代表的絕對(duì)路徑是:c:/website/web/img/photo.jpg,顯然不符合要求。
正確寫法:使用../img/photo.jpg的相對(duì)路徑來定位文件

例:
c:/website/web/xz/index.htm
c:/website/img/images/photo.jpg
在此例中index.htm中聯(lián)接的photo.jpg應(yīng)該怎樣表示呢?
錯(cuò)誤寫法:../img/images/photo.jpg
這種寫法是不正確的,在此例中對(duì)于index.htm文件來說../img/images/photo.jpg所代表的絕對(duì)路徑是:c:/website/web/img/images/photo.jpg。 
正確寫法:可以使用../../img/images/photo.jpg的相對(duì)路徑來定位文件

例:
c:/website/web/xz/index.htm
c:/website/web/img/photo.jpg
在此例中index.htm中聯(lián)接的photo.jpg應(yīng)該怎樣表示呢?
錯(cuò)誤寫法:../../img/photo.jpg
這種寫法是不正確的,在此例中對(duì)于index.htm文件來說../../img/photo.jpg所代表的絕對(duì)路徑是:c:/website/img/photo.jpg。
正確寫法:可以使用../img/photo.jpg的相對(duì)路徑來定位文件

總結(jié):通過以上的例子可以發(fā)現(xiàn),在把絕對(duì)路徑轉(zhuǎn)化為相對(duì)路徑的時(shí)候,兩個(gè)文件絕對(duì)路徑中相同的部分都可以忽略,不做考慮。只要考慮他們不同之處就可以了。

如何修改樣式表的路徑:

使用文本編輯器打開htm文件,查看源代碼,在源代碼的開頭部分……標(biāo)記中間找到!癏ref=”后面的內(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ì)路徑來定位文件,完整的代碼標(biāo)記是:
錯(cuò)誤寫法舉例:../../../css/test.css
這種寫法是不正確的,在此例中對(duì)于index.htm文件來說../../../css/test.css所代表的絕對(duì)路徑是:c:/css/test.css

最后,為了避免在制作網(wǎng)頁(yè)時(shí)出現(xiàn)路徑錯(cuò)誤,我們可以使用dreamweaver的站點(diǎn)管理功能來管理站點(diǎn)。只要使用菜單命令site-new site新建站點(diǎn)并定義站點(diǎn)目錄之后,它將自動(dòng)的把絕對(duì)路徑轉(zhuǎn)化為相對(duì)路徑,并且當(dāng)你在站點(diǎn)中移動(dòng)文件的時(shí)候,與這些文件關(guān)聯(lián)的連接路徑都會(huì)自動(dòng)更改,實(shí)在是非常的方便。