使用手冊 取消

利用片段重複使用程式碼

  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 的「片段」面板來建立片段,並跨不同的 Dreamweaver 網站重複使用程式碼。

如果您多次重複程式碼區塊,可以使用程式碼片段來加速撰寫程式碼的程序。請撰寫一次程式碼,將它儲存為片段,然後在「片段」面板中按兩下該片段,即可在多處插入它。

使用「片段」面板建立的片段不是網站特有的,因此可以跨多個網站重複使用。您也可以在不同的裝置中使用片段,以及使用同步化設定在不同版本的 Dreamweaver 中使用。

Dreamweaver 已封裝多個程式碼片段。不過,您也可以建立您自己的程式碼片段,並儲存它們。

如何充分利用片段?

請瀏覽下列使用案例,以了解您可以在工作流程的哪個階段使用片段︰

  • 不論您是在遵守特定設計標準的組織中工作,或者您是進行多項專案的自由工作者,都可以使用程式碼片段來達到設計一致性,只要將常用的這幾段程式碼儲存為片段,然後將它們插入您的程式碼中即可。
  • 如果您必須定義、維護及強制執行某些編碼標準,程式碼片段便十分實用。
  • 手動撰寫網頁互動元素的程式碼需耗費很多時間。請使用「片段」面板的「Bootstrap」或「Responsive_Design_Snippets」區段中的片段 (例如,互動表格程式碼片段)。只要按一下滑鼠,即可為該互動表格插入將近 20 行的程式碼。
    視需要編輯表格。您可以合併欄或列、新增欄或列、隨意加上樣式,然後選取程式碼並儲存為新的片段,即可在其他您建立的所有頁面中重複使用該片段。如需有關建立程式碼片段的詳細資訊,請參閱「建立片段」。
  • JavaScript 行為、CSS 效果和 CSS 樣式也很適合程式碼重複使用。

片段面板

在 Dreamweaver 中,您可以使用「片段」面板 (「視窗 > 片段」) 來管理程式碼片段。

片段面板就像是程式碼片段的集合。

Dreamweaver 中的「片段」面板
Dreamweaver 中的「片段」面板

片段面板的用途

您可以使用「片段」面板執行下列工作。

插入片段

展開資料夾以瀏覽程式碼片段,然後按兩下該片段,或在游標位置按一下「插入」圖示以插入片段。如果要使用程式碼片段圍繞現有的文字,請選取文字,然後插入片段,文字便會被圍繞在程式碼片段之中。如需詳細資訊,請參閱「插入片段」。

建立片段資料夾

將您的片段存放在使用直覺式命名規則的資料夾中,以便管理。如果要建立片段資料夾,按一下「新增資料夾」圖示。新的片段資料夾就會建立在所選節點之中。如果要變更片段資料夾的位置,將它拖曳到想要的位置。如需詳細資訊,請參閱「建立片段資料夾」。

建立片段

使用預先封裝的片段並編輯,以建立您自己的程式碼片段。或者,從頭建立您自己的片段,然後將它們儲存在「片段」面板中,以供日後重複使用。如需詳細資訊,請參閱「建立片段」。

編輯片段

如果要編輯現有的片段,請選取片段,然後按一下「編輯」圖示。如需詳細資訊,請參閱「編輯片段」。

刪除片段

請刪除您不再需要的片段。如果要刪除片段,請選取該片段,然後按一下「刪除」圖示。

重新命名片段

如果要重新命名片段,請以滑鼠右鍵按一下該片段,以開啟快顯選單。選擇「重新命名片段」,然後輸入新的片段名稱。

新增/編輯觸發鍵

觸發鍵可讓您建立您可以輸入的直覺式簡短程式碼,而不需瀏覽到「片段」面板中的特定片段,再將它插入。如果您已定義觸發鍵,請將您的游標置於程式碼中所需的位置。然後輸入觸發鍵文字,再按 Tab 鍵。程式碼片段便會插入到您的程式碼中。如需詳細資訊,請參閱「新增觸發鍵及使用觸發鍵來插入片段」。

插入片段

您可以將程式碼片段插入程式碼中游標所在的位置。

  1. 將游標置於您想要插入程式碼片段的插入點。

  2. 在「片段」面板中 (「視窗 > 片段」),按兩下片段,或按一下「片段」面板底部的「插入」圖示。

    您也可以在片段上按一下右鍵 (Windows) 或 Control+按一下 (Macintosh),然後從彈出式選單中選取「插入」。

註解:

如果您已定義觸發鍵,請將您的游標置於程式碼中所需的位置。然後輸入觸發鍵文字,再按 Tab 鍵。程式碼片段便會插入到您的程式碼中。如需詳細資訊,請參閱「新增觸發鍵及使用觸發鍵來插入片段」。

註解:

如果要查看程式碼片段,請在設計檢視中插入片段。

建立片段

  1. 在「片段」面板中,按一下面板底部的「新增片段」圖示。

  2. 輸入片段的名稱。

    註解:

    片段名稱不可包含對檔案名稱而言無效的字元,例如斜線 (/ 或 \)、特殊字元或雙引號 (")。

  3. (選擇性) 輸入片段的文字描述。

    文字描述可讓其他團隊成員更容易辨識及使用這個片段。

    建立程式碼片段時加上充分的描述,可讓它更容易識別,以供日後重複使用
    建立程式碼片段時加上充分的描述,可讓它更容易識別,以供日後重複使用

    註解:

    您也可以建立觸發鍵,將片段新增至您的程式碼中。如需詳細資訊,請參閱「新增觸發鍵及使用觸發鍵來插入片段」。

  4. 按一下「確定」。

編輯片段

如果要變更現有的片段,您可以︰

  • 以滑鼠右鍵按一下片段,以開啟「編輯片段」對話方塊
  • 選取片段,然後按一下面板底部的「編輯片段」圖示

當您編輯片段時,文件中的現有片段不會更新。

您可以在「片段」對話中編輯所有欄位,例如名稱、描述、觸發鍵和程式碼。

建立片段資料夾

  1. 在「片段」面板中,請按一下面板底部的「新增片段資料夾」按鈕。

  2. 視需要將片段拖曳到新資料夾或是其他資料夾中。

新增觸發鍵及使用觸發鍵來插入片段

使用觸發鍵來快速新增程式碼片段

首先,將觸發鍵指派給所有您常用的片段。然後在「程式碼」檢視中,輸入觸發鍵文字,再按 Tab 鍵,Dreamweaver 便會在游標位置新增片段。

  1. 在「片段」面板中,按一下右鍵 (Windows) 或 Control+按一下 (Macintosh),然後選取「新增觸發鍵」。

    在「片段」面板中選取「新增觸發鍵」
    在「片段」面板中選取「新增觸發鍵」

  2. 在觸發鍵欄位中輸入所需的文字。

    在下列影像中,用於建立 mailto 連結的程式碼片段會指派給 mailto 觸發鍵,幫助日後記憶。請務必提供簡單、簡短及直覺式的觸發鍵。

    在「觸發鍵」欄位中輸入文字
    在「觸發鍵」欄位中輸入文字

    註解:

    觸發鍵不可包含任何特殊字元 (除了底線以外)。此外,同一個觸發鍵不可用於兩個不同的片段。

  3. 如果要使用觸發鍵將片段新增至程式碼中,請輸入觸發文字 (在「程式碼」檢視中),然後按 Tab 鍵,即可將片段插入程式碼中。

如何在多個裝置之間分發片段

Dreamweaver 的雲端同步功能可協助您讓片段在兩台電腦之間保持同步。

請使用 Dreamweaver 的同步化設定功能,將在某個 Dreamweaver 中所建立的片段匯入到另一台執行 Dreamweaver 的電腦中 (例如,安裝 Dreamweaver 的辦公室和家用電腦)。 

如果要同步化設定:

  1. 按一下「編輯 > 偏好設定」。

  2. 在「同步化設定」區段中,按一下「立即同步設定」。

    這些設定會儲存至雲端。當您下次啟動 Dreamweaver 時,便會匯入這些設定。從雲端匯入的設定會覆寫本機設定。

    您的片段和所有其他的偏好設定都會同步。

    如需有關同步化設定的詳細資訊,請參閱「將 Dreamweaver 設定與 Creative Cloud 同步」。

註解:

如果您經常同步化設定,請按一下「偏好設定」面板的「同步化設定」區段中的「啟用自動同步」,以啟用自動同步化。對設定所做的每項變更都會自動儲存至雲端。

Adobe 標誌

登入您的帳戶