利用片段重複使用程式碼

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

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

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

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

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

片段面板

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

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

片段面板的用途

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

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

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

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

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

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

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

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

插入片段

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

建立片段

編輯片段

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

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

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

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

建立片段資料夾

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

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

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

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

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

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

如果要同步化設定：