絕對路徑、相對路徑數位化 FrontPage

實習教師　　楊　騏

學習索引

絕對路徑 vs 相對路徑絕對路徑 vs 相對路徑

數位化 FrontPage 　　實習教師：楊　騏

絕對路徑 範例：

通常使用在：外部超連結（連結到外部網頁）

數位化 FrontPage 　　實習教師：楊　騏

絕對路徑

http://www.slhs.tp.edu.tw/index.html 網路上一台 WWW Server 上的一個 HTML 檔案

file:///C:/Documents and Settings/ 騏騏 / 桌面 /fp_tech/fp_tech.html

C 槽裡桌面上的 HTML 檔案

絕對路徑（續）

連結一個網址 範例：要連到 http://www.csie.ntnu.edu.tw/~u95088/index.html

數位化 FrontPage 　　實習教師：楊　騏

學號資料夾

image 資料夾 index.html使用絕對路徑http://www…tw/index.html

使用絕對路徑http://www…tw/index.html

index.html

相對路徑 相對於現在目錄的路徑表示法 用「 .. 」來代表上一層目錄 範例

通常使用在：內部超連結（連結內部的網頁）

數位化 FrontPage 　　實習教師：楊　騏

相對路徑

about.html 表示同一層目錄下的 about.html 檔案image/bg.gif 表示 image 子目錄下的 bg.gif 檔案../index.html 表示上一層目錄的 index.html 檔案

../about/about.html 表示上一層目錄下， about 子目錄的 about.html 檔案

2 個點！2 個點！

相對路徑（續）

表示「同一層」目錄下的檔案 範例：現在在 index.html ，要連到 about.html

數位化 FrontPage 　　實習教師：楊　騏

學號資料夾

image 資料夾 index.html about.html

使用相對路徑about.html

使用相對路徑about.html

相對路徑（續）

表示「子目錄」下的檔案 範例：要連到 image 資料夾裡的 bg.gif

數位化 FrontPage 　　實習教師：楊　騏

學號資料夾

image 資料夾 index.html

使用相對路徑image/bg.gif

使用相對路徑image/bg.gif

bg.gif

相對路徑（續）

表示「上層目錄」裡的檔案 範例：要連到上層資料夾裡的 index.html

數位化 FrontPage 　　實習教師：楊　騏

學號資料夾

member 資料夾 index.html

使用相對路徑../index.html

使用相對路徑../index.html

member.html

相對路徑（續）

表示「上層目錄下，子目錄」裡的檔案 範例：現在在 member.html ，要連到 about.html

數位化 FrontPage 　　實習教師：楊　騏

使用相對路徑../about/about.html

使用相對路徑../about/about.html

學號資料夾

member資料夾

index.html

about.html

about資料夾

member.html

相對路徑 範例

那麼「 ../../test.txt 」呢？• 代表上上層的 test.txt 檔案

又「 ../../../image/cat.jpg 」呢？• 代表上上上層， image 子目錄下的 cat.jpg 檔案

數位化 FrontPage 　　實習教師：楊　騏

相對路徑（續）

about.html 表示同一層目錄下的 about.html 檔案image/bg.gif 表示 image 子目錄下的 bg.gif 檔案../index.html 表示上一層目錄的 index.html 檔案

../about/about.html 表示上一層目錄下， about 子目錄的 about.html 檔案

完成《鋼鐵人 2 》的電影介紹網站 介紹首頁

課堂作業

網頁設計 FrontPage 　　實習教師：楊　騏

劇情綱要

課堂作業（續）

網頁設計 FrontPage 　　實習教師：楊　騏

相關新聞

課堂作業（續）

網頁設計 FrontPage 　　實習教師：楊　騏

高二數位化下課了！

感謝大家的聆聽！