網頁設計技巧談：走出路徑的困惑
網頁設計技巧談：走出路徑的困惑 如果您剛剛開始接觸網頁設計，是不是經常發(fā)生這樣的問題呢？做好的網頁在自己機器上可以正常瀏覽，而把頁面?zhèn)鞯椒⻊掌魃峡偸浅霈F(xiàn)看不到圖片，css樣式表失效等錯誤。
這種情況下多半是由于你使用了錯誤的路徑，在應該使用相對路徑的地方使用了路徑，導致瀏覽器無法在指定的位置打開指定的文件。 下面我們來談一下最讓初學者頭疼的相對路徑與路徑的區(qū)別問題。 什么是路徑： 大家都知道，在我們平時使用計算機時要找到需要的文件必須知道文件的位置，而表示文件的位置的方式是路徑，例如只要看到這個路徑：c:/website/img/photo.jpg我們知道photo.jpg文件是在c盤的website目錄下的img子目錄中。類似于這樣完整的描述文件位置的路徑是路徑。我們不需要知道其他任何信息可以根據(jù)路徑判斷出文件的位置。而在網站中類似以http://www.djasp.net/img/photo.jpg來確定文件位置的方式也是路徑�！ ×硗猓诰W站的應用中，通常我們使用"/"來表示根目錄，/img/photo.jpg表示photo.jpg文件在這個網站的根目錄上的img目錄里。但是這樣使用對于初學者來說是具有風險性的，因為要知道這里所指的根目錄并不是你的網站的根目錄，而是你的網站所在的服務器的根目錄，因此當網站的根目錄與服務器根目錄不同時，會發(fā)生錯誤�！ ∈裁词窍鄬β窂剑骸 ∽屛覀兿葋矸治鲆幌聻槭裁磿l(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文件，但是當你將頁面上傳到網站的時候很可能會出錯了，因為你的網站可能在服務器的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�！ ±骸 :/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=”后面的內容是css的路徑，我們可以根據(jù)以上的知識進行相對路徑的轉換�！ ±骸 :/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 ，為了避免在制作網頁時出現(xiàn)路徑錯誤，我們可以使用dreamweaver的站點管理功能來管理站點。只要使用菜單命令site-new site新建站點并定義站點目錄之后，它將自動的把路徑轉化為相對路徑，并且當你在站點中移動文件的時候，與這些文件關聯(lián)的連接路徑都會自動更改，實在是非常的方便。
上一篇：
對傳統(tǒng)文化的視覺取舍
下一篇：
網頁圖片巧制作