了解如何在 Dreamweaver 中建立巢狀範本,以便控制共用設計元素之頁面的內容。

巢狀範本是以其他範本做為其設計和可編輯區域架構的範本。在共用許多設計元素,但頁面之間有少許變更的網站中,巢狀範本對於控制這些頁面的內容很有用處。例如,基本範本可能含有較大的設計區域,可適用於網站的許多內容撰稿人;而巢狀範本則可針對網站中的特定部分,進一步定義頁面中的可編輯區域。

基本範本中的可編輯區域會傳遞給巢狀範本,而且會在從巢狀範本建立的頁面中保持可編輯,除非這些區域中又插入了新的範本區域。

對於基本範本的變更,會自動更新以這個基本範本為架構的範本,以及所有以這個主範本和巢狀範本為架構的範本文件。

在下面的範例中,範本 trioHome 含有三個可編輯區域,名稱分別是 BodyNav BarFooter

具有三個可編輯區域的範本
具有三個可編輯區域的範本

為了建立巢狀範本,我們以這個範本為架構建立了新文件,然後將這個文件儲存為範本,並且將它命名為 TrioNested。在巢狀範本中,我們在名稱為 Body 的可編輯區域中新增了兩個可編輯區域。

巢狀範本
巢狀範本

當您在傳遞給巢狀範本的可編輯區域中新增可編輯區域時,這個可編輯區域的反白標示顏色就會變成橘色。您在可編輯區域外加入的內容 (例如 editableColumn 中的圖形),在以這個巢狀範本為架構的文件中就不再是可編輯了。藍色反白標示的可編輯區域 (不論是在巢狀範本中新增,或是從基本範本傳遞過來),在以這個巢狀範本為架構的文件中仍然保持可編輯。不含可編輯區域的範本區域,會當做可編輯區域傳遞給以範本為架構的文件。

建立巢狀範本

巢狀範本可以讓您建立基本範本的各種變化。您可以用巢狀結構處理多個範本來定義逐漸增加的特定版面。

根據預設,基本範本的所有可編輯範本區域,都會透過巢狀範本傳遞到以巢狀範本為架構的文件。換言之,假如您在基本範本中建立一個可編輯區域,然後建立一個巢狀範本,如果您沒有在巢狀範本中的這個區域中插入任何新的範本區域時,這個可編輯區域便會出現在以這個巢狀範本為架構的文件中。

註解:

您可以在可編輯區域內插入範本標記,這樣它就不會在以巢狀範本為架構的文件中當做可編輯區域傳遞出去。這樣的區域會有橘色的邊框而不是藍色的邊框。

  1. 從您要用來當做巢狀範本基礎的範本中建立文件。請執行下列其中一項作業:

    • 在「資源」面板中,按一下左窗格的「範本」。選取最下方窗格中的「新增範本」。

    • 選取「檔案 > 開新檔案」。在「新增文件」對話方塊中,選取「來自範本的頁面」類別,然後選取含有您要使用之範本的網站。在「範本」清單中,按兩下這個範本,即可建立新文件。

  2. 選取「檔案 > 另存新檔」。在「另存新檔」對話方塊中,從「存檔類型」下拉式清單中選取「範本檔案」。

  3. 在「另存新檔」方塊中輸入名稱,並按一下「確定」將新文件儲存為巢狀範本。

不要將可編輯區域傳遞給巢狀範本

在巢狀範本中,所傳遞的可編輯區域具有藍色的邊框。您可以在可編輯區域內插入範本標記,這樣它就不會在以巢狀範本為架構的文件中當做可編輯區域傳遞出去。這樣的區域會有橘色的邊框而不是藍色的邊框。

  1. 在「程式碼」檢視中,找出不想傳遞的可編輯區域。

    可編輯區域是由範本註解標籤所定義。

  2. 在可編輯區域程式碼中新增下列程式碼:
    @@(" ")@@

    這個範本程式碼可放在圍繞可編輯區域的 <!-- InstanceBeginEditable --><!-- InstanceEndEditable --> 標籤內的任何位置。例如:

    <!-- InstanceBeginEditable name="EditRegion1" --> 
    <p>@@("")@@ Editable 1 </p> 
    <!-- InstanceEndEditable -->

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策