了解如何利用 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 同步」。

註解:

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

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策