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