動態網頁模板

動態網頁模板是一個基於 HTML 的網頁主副本，您可以建立它來包含設定、格式和頁面元素，例如文字、圖形、頁面佈局、樣式和網頁區域，這些區域可以修改。

當您將動態網頁模板附加到網站中的頁面時，該模板將定義這些頁面的佈局。您可以在一個網站中使用任意數量的動態網頁模板，並且可以將一個動態網頁模板附加到任意數量的頁面。

透過使用動態網頁模板，您可以建立共享相同佈局的 HTML 頁面。除了提供共享佈局外，您還可以使模板中的一些區域可供編輯，同時防止對該模板中的其他區域進行更改。

這意味著您可以允許其他人新增和編輯內容，同時仍然保留頁面的佈局和模板本身。

動態網頁模板的需求

網站設計的最重要概念是保持網站的一致外觀和風格，而使用動態網頁模板，您可以實現這一點。動態網頁模板提供 -

• 基本頁面，例如站點地圖、聯絡方式、關於我們和搜尋頁面。訪客應該能夠從網站上的任何頁面訪問您的主頁。

• 整個網站的一致導航。

• 整個網站的一致外觀。

建立動態網頁模板

要建立動態網頁模板 (DWT)，您可以從一個空的 HTML 頁面開始，並將其儲存為*.dwt 檔案。讓我們一步一步地學習更多相關內容。

步驟 1 - 開啟 index.html 檔案並選擇檔案 → 另存為…選單選項，這將開啟“另存為”對話方塊。

從“儲存型別”下拉列表中選擇動態網頁模板 (*.dwt)，並將檔名從 index 更改為master.dwt，然後單擊“儲存”按鈕。

步驟 2 - 現在，您將在“資料夾”列表中看到一個新建立的檔案 master.dwt。讓我們建立一個新的 HTML 檔案並將其命名為 index_2.html。讓我們開啟 master.dwt 檔案，並在設計檢視或程式碼檢視中，右鍵單擊主內容的<div>標籤內部。

步驟 3 - 從選單中選擇“管理可編輯區域…”，這將開啟“可編輯區域”對話方塊。

步驟 4 - 在“區域名稱”中，為可編輯區域鍵入一個名稱，然後單擊“新增”。如果需要，重複此操作以新增其他可編輯區域。

步驟 5 - 新增完所有可編輯區域後，單擊“關閉”。現在轉到 index_2.html 檔案，並在“資料夾”列表中選擇它。

步驟 6 - 轉到“格式”選單，然後選擇動態網頁模板 → 附加動態網頁模板…，這將開啟“附加動態網頁模板”對話方塊。

步驟 7 - 選擇動態網頁模板，這裡就是 master.dwt 檔案，然後單擊“開啟”按鈕。您將收到一條警告訊息。單擊“是”。

步驟 8 - 您可以看到相同的模板已應用於 index_2.html 檔案。同樣，您可以將相同的模板新增到網站中任意數量的 HTML 頁面。

步驟 9 - 在此頁面上，您只能編輯 main-content 部分。如果您將滑鼠移動到其他部分，您會發現它不可編輯，滑鼠游標也會變為紅色十字圓圈。

步驟 10 - 要檢視它的外觀，請轉到“檔案”選單，然後選擇“在瀏覽器中預覽”。