從您要用來當做巢狀範本基礎的範本中建立文件。請執行下列其中一項作業:
- Dreamweaver 使用手冊
- 簡介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作區和檢視
- 設定網站
- 管理檔案
- 版面和設計
- CSS
- 頁面內容和資產
- 設定頁面屬性
- 設定 CSS 標題屬性和 CSS 連結屬性
- 處理文字
- 尋找和取代文字、標籤和屬性
- DOM 面板
- 在即時檢視中編輯
- 在 Dreamweaver 中進行文件編碼
- 在文件視窗中選取並檢視元素
- 在屬性檢視窗中設定文字屬性
- 檢查網頁拼字
- 在 Dreamweaver 中使用水平線
- 在 Dreamweaver 中新增和修改字體組合
- 使用資源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中建立和管理最愛資源
- 在 Dreamweaver 中插入及編輯影像
- 新增媒體物件
- 在 Dreamweaver 中加入視訊
- 插入 HTML5 視訊
- 插入 SWF 檔
- 新增音效效果
- 在 Dreamweaver 中插入 HTML5 音效
- 使用圖庫項目
- 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
- 連結和導覽
- jQuery Widget 和效果
- 撰寫網站程式碼
- 關於在 Dreamweaver 中撰寫程式碼
- Dreamweaver 的程式碼撰寫環境
- 設定程式碼撰寫偏好設定
- 自訂程式碼色彩標示
- 撰寫和編輯程式碼
- 程式碼提示和程式碼完成
- 收合和展開程式碼
- 利用片段重複使用程式碼
- Lint 程式碼
- 最佳化程式碼
- 在設計檢視中編輯程式碼
- 使用頁面的檔頭內容
- 在 Dreamweaver 中插入伺服器端包含
- 在 Dreamweaver 中使用標籤資料庫
- 匯入自訂標籤到 Dreamweaver
- 使用 JavaScript 行為 (一般說明)
- 套用內建的 JavaScript 行為
- 關於 XML 與 XSLT
- 在 Dreamweaver 中執行伺服器端 XSL 轉換
- 在 Dreamweaver 中執行用戶端 XSL 轉換
- 在 Dreamweaver 中新增 XSLT 字元實體
- 格式化程式碼
- 跨產品工作流程
- 範本
- 行動裝置和多螢幕
- 動態網站、網頁和網站表單
- 以視覺化方式建立應用程式
- 測試、預覽和發佈網站
- 疑難排解
了解如何在 Dreamweaver 中建立巢狀範本,以便控制共用設計元素之頁面的內容。
巢狀範本是以其他範本做為其設計和可編輯區域架構的範本。在共用許多設計元素,但頁面之間有少許變更的網站中,巢狀範本對於控制這些頁面的內容很有用處。例如,基本範本可能含有較大的設計區域,可適用於網站的許多內容撰稿人;而巢狀範本則可針對網站中的特定部分,進一步定義頁面中的可編輯區域。
基本範本中的可編輯區域會傳遞給巢狀範本,而且會在從巢狀範本建立的頁面中保持可編輯,除非這些區域中又插入了新的範本區域。
對於基本範本的變更,會自動更新以這個基本範本為架構的範本,以及所有以這個主範本和巢狀範本為架構的範本文件。
在下面的範例中,範本 trioHome 含有三個可編輯區域,名稱分別是 Body、Nav Bar 和 Footer:
為了建立巢狀範本,我們以這個範本為架構建立了新文件,然後將這個文件儲存為範本,並且將它命名為 TrioNested。在巢狀範本中,我們在名稱為 Body 的可編輯區域中新增了兩個可編輯區域。
當您在傳遞給巢狀範本的可編輯區域中新增可編輯區域時,這個可編輯區域的反白標示顏色就會變成橘色。您在可編輯區域外加入的內容 (例如 editableColumn 中的圖形),在以這個巢狀範本為架構的文件中就不再是可編輯了。藍色反白標示的可編輯區域 (不論是在巢狀範本中新增,或是從基本範本傳遞過來),在以這個巢狀範本為架構的文件中仍然保持可編輯。不含可編輯區域的範本區域,會當做可編輯區域傳遞給以範本為架構的文件。
建立巢狀範本
巢狀範本可以讓您建立基本範本的各種變化。您可以用巢狀結構處理多個範本來定義逐漸增加的特定版面。
根據預設,基本範本的所有可編輯範本區域,都會透過巢狀範本傳遞到以巢狀範本為架構的文件。換言之,假如您在基本範本中建立一個可編輯區域,然後建立一個巢狀範本,如果您沒有在巢狀範本中的這個區域中插入任何新的範本區域時,這個可編輯區域便會出現在以這個巢狀範本為架構的文件中。
您可以在可編輯區域內插入範本標記,這樣它就不會在以巢狀範本為架構的文件中當做可編輯區域傳遞出去。這樣的區域會有橘色的邊框而不是藍色的邊框。
-
在「資源」面板中,按一下左窗格的「範本」。選取最下方窗格中的「新增範本」。
選取「檔案 > 開新檔案」。在「新增文件」對話方塊中,選取「來自範本的頁面」類別,然後選取含有您要使用之範本的網站。在「範本」清單中,按兩下這個範本,即可建立新文件。
-
選取「檔案 > 另存新檔」。在「另存新檔」對話方塊中,從「存檔類型」下拉式清單中選取「範本檔案」。
-
在「另存新檔」方塊中輸入名稱,並按一下「確定」將新文件儲存為巢狀範本。
不要將可編輯區域傳遞給巢狀範本
在巢狀範本中,所傳遞的可編輯區域具有藍色的邊框。您可以在可編輯區域內插入範本標記,這樣它就不會在以巢狀範本為架構的文件中當做可編輯區域傳遞出去。這樣的區域會有橘色的邊框而不是藍色的邊框。
-
在「程式碼」檢視中,找出不想傳遞的可編輯區域。
可編輯區域是由範本註解標籤所定義。
-
在可編輯區域程式碼中新增下列程式碼:
@@(" ")@@
這個範本程式碼可放在圍繞可編輯區域的 <!-- InstanceBeginEditable --><!-- InstanceEndEditable --> 標籤內的任何位置。例如:
<!-- InstanceBeginEditable name="EditRegion1" --> <p>@@("")@@ Editable 1 </p> <!-- InstanceEndEditable -->