網頁設計技巧談：走出路徑的困惑

如果您剛剛開始接觸網頁設計，是不是經常發生這樣的問題呢？做好的網頁在自己機器上可以正常流覽，而把頁面傳到伺服器上就總是出現看不到圖片，CSS樣式表失效等錯誤。這種情況下多半是由於你使用了錯誤的路徑，在應該使用相對路徑的地方使用了絕對路徑，導致流覽器無法在指定的位置打開指定的檔案。 下面我們就來談一下最讓初學者頭疼的相對路徑與絕對路徑的區別問題。 什麼是絕對路徑： 大家都知道，在我們平時使用電腦時要找到需要的檔案就必須知道檔案的位置，而表示檔案的位置的方式就是路徑，例如只要看到這個路徑：c：/web design/img/photo.jpg我們就知道photo.jpg檔案是在c盤的web Design目錄下的img子目錄中。類似於這樣完整的描述檔案位置的路徑就是絕對路徑。我們不需要知道其他任何資訊就可以根據絕對路徑判斷出檔案的位置。而在網站中類似以http://www.pckings.net/img/photo.jpg來確定檔案位置的方式也是絕對路徑。 另外，在網站建設的應用中，通常我們使用"/"來表示根目錄，/img/photo.jpg就表示photo.jpg檔案在這個網站的根目錄上的img目錄裏。但是這樣使用對於初學者來說是具有風險性的，因為要知道這裏所指的根目錄並不是你的網站的根目錄，而是你的網站所在的伺服器的根目錄，因此當網站的根目錄與伺服器根目錄不同時，就會發生錯誤。 什麼是相對路徑： 讓我們先來分析一下為什麼會發生圖片不能正常顯示的情況。舉一個例子，現在有一個頁面index.htm，在這個頁面中聯接有一張圖片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中聯接的photo.jpg可以使用img/photo.jpg來定位檔案，那麼不論將這些檔案放到哪里電子商務，只要他們的相對關係沒有變，就不會出錯。 另外我們使用“……/”來表示上一級目錄，“……/……/”表示上上級的目錄，以此類推。（學習過Dos的朋友可能更容易理解） 再看幾個例子，注意所有例子中都是index.htm檔案中聯接有一張圖片photo.jpg. 例：c：/website/web/index.htm c：/website/img/photo.jpg在此例中index.htm中聯接的photo.jpg應該怎樣表示呢？ 錯誤寫法：img/photo.jpg這種寫法是不正確的，在此例中，對於index.htm文件CMS來說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中聯接的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中聯接的photo.jpg應該怎樣表示呢？ 錯誤寫法：……/……/img/photo.jpg這種寫法是不正確的，在此例中對於index.htm文件來說……/……/img/photo.jpg所代表的絕對路徑是：c：/website/img/photo.jpg.正確寫法：可以使用……/img/photo.jpg的相對路徑來電郵服務定位檔案 總結：通過以上的例子可以發現，在把絕對路徑轉化為相對路徑的時候，兩個檔案絕對路徑中相同的部分都可以忽略，不做考慮。只要考慮他們不同之處就可以了。 如何修改樣式表的路徑： 使用文本編輯器打開htm檔案，查看源代碼，網上商店在源代碼的開頭部分……標記中間找到.“Href=”後面的內容就是css的路徑，我們可以根據以上的知識進行相對路徑的轉換。 例：c：/website/web/xz/index.htm c：/website/css/test.css在此例中index.htm中聯接test.css檔案，可以使用……/……/css/test.css的相對路徑來定位檔案，完整的代碼標記是：錯誤寫法舉例：……/……/……/css/test.css這種寫法是不正確的，在此例中對於index.htm文件來說……/……/……/css/test.css所代表的絕對路徑是：c：/css/test.css 最後，為了避免在製作網頁時出現路徑錯誤，我們可以使用Dreamweaver的站點管理功能來管理站點。只要使用功能表命令site-new site新建站點並定義站點目錄之後，它將自動的把絕對路徑轉化為相對路徑，並且當你在站點中移動檔案的時候，與這些檔案關聯的連接路徑都會自動更改，實在是非常的方便。