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

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

網(wǎng)頁設計技巧

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

 

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

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

什么是絕對路徑:

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

另外,在網(wǎng)站的應用中,通常我們使用"/"來表示根目錄,/img/photo.jpg就表示photo.jpg文件在這個網(wǎng)站的根目錄上的img目錄里。但是這樣使用對于初學者來說是具有風險性的,因為要知道這里所指的根目錄并不是你的網(wǎng)站的根目錄,而是你的網(wǎng)站所在的服務器的根目錄,因此當網(wǎng)站的根目錄與服務器根目錄不同時,就會發(fā)生錯誤。
什么是相對路徑:

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

如果你使用絕對路徑c:/website/img/photo.jpg,那么在自己的計算機上將一切正常,因為確實可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件,但是當你將頁面上傳到網(wǎng)站的時候就很可能會出錯了,因為你的網(wǎng)站可能在服務器的c盤,可能在d盤,也可能在aa目錄下,更可能在bb目錄下,總之沒有理由會有c:/website/img/photo.jpg這樣一個路徑。那么,在index.htm文件中要使用什么樣的路徑來定位photo.jpg文件呢?對,應該是用相對路徑,所謂相對路徑,顧名思義就是自己相對與目標位置。在上例中index.htm中聯(lián)接的photo.jpg可以使用img/photo.jpg來定位文件,那么不論將這些文件放到哪里,只要他們的相對關系沒有變,就不會出錯。

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

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

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

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

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

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

如何修改樣式表的路徑:

使用文本編輯器打開htm文件,查看源代碼,在源代碼的開頭部分……標記中間找到!癏ref=”后面的內(nèi)容就是css的路徑,我們可以根據(jù)以上的知識進行相對路徑的轉換。

例:
c:/website/web/xz/index.htm
c:/website/css/test.css
在此例中index.htm中聯(lián)接test.css文件,可以使用../../css/test.css的相對路徑來定位文件,完整的代碼標記是:
錯誤寫法舉例:../../../css/test.css
這種寫法是不正確的,在此例中對于index.htm文件來說../../../css/test.css所代表的絕對路徑是:c:/css/test.css

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