將游標置於您想要插入程式碼片段的插入點。
上次更新時間
2021年12月20日
了解如何利用 Dreamweaver 的「片段」面板來建立片段，並跨不同的 Dreamweaver 網站重複使用程式碼。
如果您多次重複程式碼區塊，可以使用程式碼片段來加速撰寫程式碼的程序。 請撰寫一次程式碼，將它儲存為片段，然後在「片段」面板中按兩下該片段，即可在多處插入它。
使用「片段」面板建立的片段不是網站特有的，因此可以跨多個網站重複使用。 您也可以在不同的裝置中使用片段，以及使用同步化設定在不同版本的 Dreamweaver 中使用。
Dreamweaver 已封裝多個程式碼片段。 不過，您也可以建立您自己的程式碼片段，並儲存它們。
如何充分利用片段？
請瀏覽下列使用案例，以了解您可以在工作流程的哪個階段使用片段︰
- 不論您是在遵守特定設計標準的組織中工作，或者您是進行多項專案的自由工作者，都可以使用程式碼片段來達到設計一致性，只要將常用的這幾段程式碼儲存為片段，然後將它們插入您的程式碼中即可。
- 如果您必須定義、維護及強制執行某些編碼標準，程式碼片段便十分實用。
- 手動撰寫網頁互動元素的程式碼需耗費很多時間。 請使用「片段」面板的「Bootstrap」或「Responsive_Design_Snippets」區段中的片段 (例如，互動表格程式碼片段)。 只要按一下，您就可以為該回應式表格插入將近 20 行的程式碼。
視需要編輯表格。您可以合併欄或列、新增欄或列、隨意加上樣式，然後選取程式碼並儲存為新的片段，即可在其他您建立的所有頁面中重複使用該片段。 如需有關建立程式碼片段的詳細資訊，請參閱「建立片段」。 - JavaScript 行為、CSS 效果和 CSS 樣式也很適合程式碼重複使用。
片段面板
在 Dreamweaver 中，您可以使用「片段」面板 (「視窗 > 片段」) 來管理程式碼片段。
片段面板就像是程式碼片段的集合。
片段面板的用途
您可以使用「片段」面板執行下列工作。
插入片段
展開資料夾以瀏覽程式碼片段，然後按兩下該片段，或在游標位置按一下「插入」圖示以插入片段。 如果要使用程式碼片段圍繞現有的文字，請選取文字，然後插入片段，文字便會被圍繞在程式碼片段之中。 如需詳細資訊，請參閱「插入片段」。
建立片段資料夾
將您的片段存放在使用直覺式命名規則的資料夾中，以便管理。 如果要建立片段資料夾，按一下「新增資料夾」圖示。 新的片段資料夾就會建立在所選節點之中。 如果要變更片段資料夾的位置，將它拖曳到想要的位置。 如需詳細資訊，請參閱「建立片段資料夾」。
建立片段
使用預先封裝的片段並編輯，以建立您自己的程式碼片段。 或者，從頭建立您自己的片段，然後將它們儲存在「片段」面板中，以供日後重複使用。 如需詳細資訊，請參閱「建立片段」。
編輯片段
如果要編輯現有的片段，請選取片段，然後按一下「編輯」圖示。 如需詳細資訊，請參閱「編輯片段」。
刪除片段
請刪除您不再需要的片段。 如果要刪除片段，請選取該片段，然後按一下「刪除」圖示。
重新命名片段
如果要重新命名片段，請以滑鼠右鍵按一下該片段，以開啟快顯選單。 選擇「重新命名片段」，然後輸入新的片段名稱。
新增/編輯觸發鍵
觸發鍵可讓您建立您可以輸入的直覺式簡短程式碼，而不需瀏覽到「片段」面板中的特定片段，再將它插入。 如果您已定義觸發鍵，請將您的游標置於程式碼中所需的位置。 然後輸入觸發鍵文字，再按 Tab 鍵。 程式碼片段便會插入到您的程式碼中。 如需詳細資訊，請參閱「新增觸發鍵及使用觸發鍵來插入片段」。
插入片段
您可以將程式碼片段插入程式碼中游標所在的位置。
在「片段」面板中 (「視窗 > 片段」)，按兩下片段，或按一下「片段」面板底部的「插入」圖示。
您也可以在片段上按一下右鍵 (Windows) 或 Control+按一下 (Macintosh)，然後從彈出式選單中選取「插入」。
如果您已定義觸發鍵，請將您的游標置於程式碼中所需的位置。 然後輸入觸發鍵文字，再按 Tab 鍵。 程式碼片段便會插入到您的程式碼中。 如需詳細資訊，請參閱「新增觸發鍵及使用觸發鍵來插入片段」。
如果要查看程式碼片段，請在設計檢視中插入片段。
建立片段
在「片段」面板中，按一下面板底部的「新增片段」圖示。
輸入片段的名稱。
程式碼片段名稱不可包含檔案名稱中無效的字元，例如斜線 (/ 或 \)、特殊字元或雙引號 (")。
(選擇性) 輸入片段的文字描述。
文字描述可讓其他團隊成員更容易辨識及使用這個片段。
您也可以建立觸發程序鍵來將程式碼片段新增至程式碼。如需詳細資訊，請參閱「新增觸發鍵及使用觸發鍵來插入片段」。
按一下「確定」。
編輯片段
如果要變更現有的片段，您可以︰
- 以滑鼠右鍵按一下片段，以開啟「編輯片段」對話方塊
- 選取片段，然後按一下面板底部的「編輯片段」圖示
當您編輯片段時，文件中的現有片段不會更新。
您可以在「片段」對話中編輯所有欄位，例如名稱、描述、觸發鍵和程式碼。
建立片段資料夾
在「片段」面板中，請按一下面板底部的「新增片段資料夾」按鈕。
視需要將片段拖曳到新資料夾或是其他資料夾中。
新增觸發鍵及使用觸發鍵來插入片段
使用觸發鍵來快速新增程式碼片段
首先，將觸發鍵指派給所有您常用的片段。 然後在「程式碼」檢視中，輸入觸發鍵文字，再按 Tab 鍵，Dreamweaver 便會在游標位置新增片段。
在「片段」面板中，按一下右鍵 (Windows) 或 Control+按一下 (Macintosh)，然後選取「新增觸發鍵」。
在觸發鍵欄位中輸入所需的文字。
在下列影像中，用於建立 mailto 連結的程式碼片段會指派給 mailto 觸發鍵，幫助日後記憶。 請務必提供簡單、簡短及直覺式的觸發鍵。
觸發鍵不可包含任何特殊字元 (除了底線以外)。 此外，同一個觸發鍵不可用於兩個不同的片段。
如果要使用觸發鍵將片段新增至程式碼中，請輸入觸發文字 (在「程式碼」檢視中)，然後按 Tab 鍵，即可將片段插入程式碼中。
如何在多個裝置之間分發片段
Dreamweaver 的雲端同步功能可協助您讓片段在兩台電腦之間保持同步。
請使用 Dreamweaver 的同步化設定功能，將在某個 Dreamweaver 中所建立的片段匯入到另一台執行 Dreamweaver 的電腦中 (例如，安裝 Dreamweaver 的辦公室和家用電腦)。
如果要同步化設定：
按一下「編輯 > 偏好設定」。
在「同步化設定」區段中，按一下「立即同步設定」。
這些設定會儲存至雲端。 當您下次啟動 Dreamweaver 時，便會匯入這些設定。 從雲端匯入的設定會覆寫本機設定。
您的片段和所有其他的偏好設定都會同步。
如需有關同步化設定的詳細資訊，請參閱「將 Dreamweaver 設定與 Creative Cloud 同步」。
如果您經常同步化設定，請按一下「偏好設定」面板的「同步化設定」區段中的「啟用自動同步」，以啟用自動同步化。 對設定所做的每項變更都會自動儲存至雲端。
