使用手冊 取消

關於 Dreamweaver 範本

  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 Dreamweaver 網站

 

了解如何使用 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 會將它計算成 truefalse。如果條件為 True,則選擇性區域就會顯示在以範本為架構的文件中;如果為 False 則不顯示。

當您插入選擇性區域時,可以在「程式碼」檢視或在「選擇性區域」對話方塊中定義運算式。

在「程式碼」檢視中,有兩種方法可以定義範本運算式:使用 <!-- TemplateExpr expr="your expresson"--> 註解或 @@(your expression)@@。當您在範本程式碼中插入運算式時,運算式標記就會出現在「設計」檢視中。當您套用範本時,Dreamweaver 會計算這個運算式,並且將值顯示在以範本為架構的文件中。

範本運算式語言

範本運算式語言是小型的 JavaScript 子集合,並且使用 JavaScript 語法和優先規則。使用 JavaScript 運算子來撰寫運算式,如下所示:

@@(firstName+lastName)@@

以下是支援的功能和運算子:

  • 數值常值、字串常值 (僅限雙引號的語法)、Boolean 常值 (truefalse)

  • 變數參考 (請參閱本節稍後所列的已定義變數列表)。

  • 欄位參考 (「點」運算子)

  • 一元運算子:+、-、~、!

  • 二元運算子:+、-、*、/、%、&、|、^、&&、||、<、<=、>、>=、==、!=、<<、>>

  • 條件運算子:?:

  • 小括弧:()

    以下是使用的資料類型: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 -->

當您建立以範本為架構的文件時,範本參數就會自動傳遞給此文件。範本用戶可以接著決定要顯示哪個影像。

Adobe 標誌

登入您的帳戶

[Feedback V2 Badge]