WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞
網頁設計基礎課程目錄

4-9. 運用 AJAX 技術 設計官網


官網設計規劃

舉例一個網站多頁時,頁面系統規劃

運用前面「TS_web5_Timothy_Care」複製為「TS_web6_Timothy_Co」

  • 將「index.html」中 <header> 區域內容另存搬移到「header.html
  • 將「index.html」中 <footer> 區域內容另存搬移到「footer.html
  • 將「index.html」複製為「sec2.html、sec3.html、sec4.html、sec5.html
  • 將 CSS 部份儲存在 .css 檔案
  • 將 JS 部份儲存在 .js 檔案
  • 除了「index.html」存放在網站資料夾內第一層的位置,其他 .html 檔案存放在「webpage」資料夾中
  • 所有 .css 檔案 & .js 檔案,存放在「assist」資料夾

index.html 檔案【參考調整】:

AJAX載入HTML檔案

ap.js 檔案 運用 AJAX 技術載入 HTML 檔案【參考設計】:

ap.js 檔案 跨頁各檔會執行的程式存放在這裡【參考調整】:

header.html 檔案 判斷所有連結的路徑【參考設計】:

header.html 檔案 設計導覽列中對應頁面的按鈕加上 active【參考設計】:

AJAX載入JSON檔案

sec3.html 檔案【參考調整】:

sec3.js 檔案【參考設計】: