了解如何使用 Dreamweaver 範本來設計「固定」的頁面版面,然後根據繼承其頁面版面的範本,建立文件。
模板 是一種特殊類型的文件,您可以用來設計「固定」頁面配置; 然後您可以根據模板建立繼承 其頁面配置的文件。在您設計模板時,您可以指定「可編輯」 的內容,讓使用者可以在基於該模板的文件中編輯這些內容。 範本讓範本作者能夠控制範本使用者(例如撰寫人員、平面設計師或其他網頁開發人員)可以編輯的頁面元素。模板作者可以在文件中包含幾種類型的模板區域。
模板讓您能夠控制大型設計區域並重複使用 完整的配置。如果您想要重複使用個別設計元素, 例如地點的版權資訊或商標,請建立資料庫 項目。
使用範本讓您可以同時更新多個頁面。 從模板建立的文件會持續連接到 該模板(除非您稍後中斷文件的連接)。您可以修改 模板並立即更新基於該模板的所有文件中的設計。
Dreamweaver 的範本有別於其他 Adobe Creative Cloud 軟體的範本,原因是 Dreamweaver 範本的頁面區段預設是固定的 (或不可編輯)。
範本區域的類型
當您將文件儲存成範本時,文件中大部分的區域就會遭到鎖定。 撰寫範本時,您可以在範本中插入可編輯區域或可編輯參數,藉以定義以範本為架構的文件中哪些區域可以編輯。
當您建立範本時,您可以同時對可編輯區域和鎖定區域進行變更。 但是在以範本為基礎的文件中,範本用戶只能在可編輯區域中進行變更,無法修改鎖定區域。
範本區域有四種類型:
可編輯區域:以範本為架構之文件中的未鎖定區域;也就是範本用戶可以編輯的區段。 範本作者可以將範本的任何區域指定為可編輯。 若要讓範本生效,它必須至少含有一個可編輯區域;否則將無法編輯以範本為架構的頁面。 如需可編輯區域的詳細資訊,請參閱「建立範本中的可編輯區域」。
重複區域:文件版面的一個區段,作用是讓範本用戶根據需求來新增或刪除範本文件中的重複區域副本。 例如,您可以將表格列設為重複。 重複區段是可編輯的,可讓範本用戶編輯重複元素的內容,而設計本身則是在範本作者的掌控下。
您可以在範本中插入兩種重複區域:重複區域和重複表格。 若要了解如何使用重複區域,請參閱「在 Dreamweaver 中建立重複區域和表格」。
選擇性區域:是範本中保留內容 (例如文字或影像) 的區段,但不一定會出現在文件中。 在以範本為架構的頁面中,範本用戶通常可控制是否要顯示內容。 如需詳細資訊,請參閱「選擇性區域」一節。
可編輯標籤屬性:可讓您取消鎖定範本中的標籤屬性,以便在範本頁面中編輯屬性。 例如,您可以「鎖定」哪些影像要出現在文件中,但是允許範本用戶將對齊方式設定成靠左、靠右或置中對齊。 如需詳細資訊,請參閱「在 Dreamweaver 中定義可編輯的標籤屬性」。
範本中的連結
當您透過將現有頁面儲存為範本來建立範本檔案時,Templates 資料夾中的新範本和檔案中的任何連結都會更新,以確保其文件相對路徑的正確性。稍後,當您根據該 模板建立文件並儲存時,所有相對於文件的連結會再次更新 以繼續指向正確的檔案。
當您將新的相對於文件的連結新增到模板檔案時, 如果您在屬性檢查器的連結文字方塊中輸入路徑, 很容易輸入錯誤的路徑名稱。範本檔案中的正確路徑是從 Templates 資料夾到連結文件的路徑,而不是從基於範本的文件資料夾到連結文件的路徑。在模板中建立連結時,透過使用屬性檢查器中的檔案夾圖示或指向檔案圖示 ,確保連結的正確路徑 存在。
模板和 基於模板的文件中的伺服器指令碼
有些伺服器指令碼會插入到文件的最 開頭或結尾(在 <html> 標記 之前或在 </html> 標記之後)。這些指令碼在模板和基於模板的文件中需要 特殊處理。通常,如果您在範本中的 <html> 標記之前或 </html> 標記之後變更指令碼代碼,變更將不會複製到基於該範本的文件。如果模板主體 內的其他伺服器指令碼依賴於未複製的指令碼,這可能 會導致伺服器錯誤。如果您在模板中 <html> 標記 之前或 </html> 標記之後變更指令碼,會出現 警報警告您。
為了避免此問題,您可以在模板的 head 區段 中插入以下程式碼:
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
當此程式碼在模板中時,<html> 標記 之前或 </html> 標記之後的指令碼變更會複製到基於 該模板的文件。但是,您將無法再在基於範本的文件中編輯那些指令碼。因此,您可以選擇在範本中編輯這些指令碼,或在基於範本的文件中編輯,但不能同時在兩者中編輯。
範本參數
模板 參數表示用於控制基於 模板的文件中內容的值。使用模板參數來設定可選區域 或可編輯標記屬性,或設定您想要傳遞給 附加文件的值。針對每個參數,您需要選取名稱、資料類型 及預設值。每個參數都必須有唯一且區分大小寫的名稱。參數必須是五種許可資料類型之一:文字、布林值、顏色、URL 或數字。
範本參數會以實體參數的形式傳遞給文件。 在大部分情況下,模板使用者可以編輯參數的預設 值來自訂出現在模板型文件中的內容。在 其他情況下,模板作者可能會根據模板運算式的值來決定文件中顯示的內容。
範本運算式
範本運算式是計算或評估值的敘述。
您可以使用運算式來儲存值並在 文件中顯示。例如,運算式可以簡單到只是參數的值,如 @@(Param)@@,或是複雜到可以計算在表格列中交替顯示背景顏色的值,如 @@((_index & 1) ?red : blue)@@。
您也可以定義 if 和多重 if 條件的運算式。 當條件陳述式中有使用運算式時,Dreamweaver 會將它計算成 true 或 false。 如果條件為真,可選區域會出現在模板型 文件中;如果為假,則不會出現。
您可以在「代碼」視圖中或在插入可選區域時於「可選區域」對話框中定義運算式。
在「程式碼」檢視中,有兩種方式可以定義模板運算式: 使用 <!-- TemplateExpr expr="your expresson"--> 註解 或 @@(your expression)@@。當您在範本代碼中插入運算式時,運算式標記會出現在「設計」視圖中。當您套用範本時,Dreamweaver 會評估運算式並在範本文件中顯示值。
範本運算式語言
範本運算式語言是 JavaScript 的小子集,並使用 JavaScript 語法和優先順序規則。使用 JavaScript 運算子來撰寫這樣的表達式:
@@(firstName+lastName)@@
以下是支援的功能和運算子:
數值文字、字串文字(僅限雙引號語法)、布林文字(true 或 false)
變數參照 (請參閱本節稍後的 定義變數清單)
欄位參考 (「點」運算子)
一元運算子:+、-、~、!
二元運算子:+、-、*、/、%、&、|、^、&&、 ||、<、<=、>、>=、==、!=、<<、>>
條件運算子:?:
小括弧:()
使用下列資料類型: 布林、IEEE 64‑bpc 浮動點、字串和物件。Dreamweaver 範本不支援使用 JavaScript「null」或「undefined」類型。它們也不允許 將純量類型隱含轉換為物件;因此, 表達式 "abc".length 會觸發錯誤, 而不是產生值 3。
僅可使用表達式物件模型 定義的物件。定義了下列 變數:
_document
包含文件層級範本資料,其中每個範本參數都有一個欄位。
_repeat
僅針對出現在重複區域內的表達式定義。提供有關該區域的內建資訊
_index
目前項目的數值索引 (從 0 開始)
_numRows
這個重複區域內項目的總數
_isFirst
如果目前項目是其重複區域中的第一個項目,則為真
_isLast
如果目前項目是其重複區域中的最後一個項目,則為真
_prevRecord
_repeat 物件 (屬於前一個項目)。 對於區域中的第一個項目存取此屬性會發生錯誤。
_nextRecord
_repeat 物件 (屬於下一個項目)。 對於區域中的最後一個項目存取此屬性會發生錯誤。
_parent
在巢狀重複區域中,這會為包覆 (外層) 重複區域提供 _repeat 物件。在巢狀重複區域外存取此屬性會發生錯誤。
在表達式評估期間,_document 物件和 _repeat 物件的所有欄位都會隱含提供。例如,您可以輸入 title 而不是 _document.title 來存取文件的標題參數。
在出現欄位衝突的情況下,_repeat 物件的欄位會優先於 _document 物件的欄位。因此,您不需要明確參考 _document 或 _repeat,除非在重複區域內需要使用 _document 來參考被重複區域參數隱藏的文件參數。
使用巢狀重複區域時,只有最內層重複區域的欄位會隱含提供。其他區域必須使用 _parent 明確地參考。
範本代碼中的多重 If 條件
您可以為 if 和 multiple-if 條件定義範本表達式。此範例示範定義名為「Dept」的參數、設定初始值,以及定義可決定要顯示哪個商標的 multiple-if 條件。
以下是您可能在範本 head 區段中輸入的代碼範例:
<!-- TemplateParam name="Dept" type="number" value="1" -->
以下條件陳述式會檢查指派給 Dept 參數的值。當條件為真或符合時,會顯示適當的影像。
<!-- TemplateBeginMultipleIf -->
<!-- 檢查 Dept 的值並顯示適當的影像-->
<!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->
建立以範本為主的文件時,範本參數會自動傳遞到該文件。範本使用者決定要顯示哪個影像。