使用手冊取消

Dreamweaver 中的 Extract

搜尋

上次更新時間 2021年12月30日

了解如何快速將您的 PSD 轉譯成針對行動裝置和桌面的 HTML 網頁設計。直接將 CSS、影像、度量、字體、顏色、漸層效果和其他更多元素從 Photoshop 擷取到 Dreamweaver 中。

註解：

自 2022 年 7 月 1 日起，Extract 面板中的功能將在 Dreamweaver 21.2 及更早版本中停止使用。您可以使用 Adobe Photoshop 擷取樣式資訊、來自 PSD 元件的資產，並在 Dreamweaver 中重複使用它們。

Extract 與 Dreamweaver 的整合，可讓網頁設計人員和開發人員直接在程式碼撰寫環境中套用設計資訊並擷取網頁最佳化的資源。Extract 提供了從 PSD 構圖擷取樣式資訊和資源所需的全套完整解決方案，減少必須在 Photoshop 和 Dreamweaver 之間來回切換的情況。

使用 Dreamweaver 中的 Extract 面板，您可以擷取 CSS、影像、字體、顏色、漸層效果、度量等項目，直接放入網頁中。除了這些 Extract 的主要功能之外，Dreamweaver 也提供下列的獨特功能：

直接存取 Creative Cloud 上的 PSD 檔案以及協作資料夾中與您共用的 PSD 檔案
內容程式碼提示，可輕鬆地在您的 CSS 中定義字體、顏色和漸層效果
支援從 PSD 圖層建立影像標籤的拖放功能
直接在「即時檢視」中貼上樣式 (例如 CSS 設計工具和元素顯示)

Extract 快速入門

Dreamweaver 中的 Extract 可讓您直接在 Dreamweaver 中使用 Extract 面板存取 PSD 檔案。閱讀下列主題，更深入了解 Extract 面板和工作區，以及如何將 PSD 檔案載入 Extract 面板中：

Extract 面板與工作區

Extract 工作區是設計來協助您有效率地搭配 Dreamweaver 使用 Extract。在此工作區中，Extract 面板會顯示在左側，而網頁則顯示在右側的「分割檢視」(「即時檢視」和「程式碼檢視」) 中。您可以拖曳、固定、收合或展開面板來自訂工作區，以配合您的需求。您也可以儲存自訂工作區，以備日後使用。

註解：

如果不小心關閉了 Extract 面板，您可以使用鍵盤快速鍵 - Ctrl+K (Win)；Cmd+K (Mac) 或選取「視窗 > Extract」重新開啟面板。

初次啟動 Dreamweaver 時，Extract 面板會顯示互動式教學課程，引導您開始使用工作流程。您可以使用面板最上方的下拉式清單，在不同的教學課程之間切換。

使用過教學課程後，按一下「開始執行」即可在 Dreamweaver 中開始使用 Extract。Extract 面板會顯示您 Creative Cloud 帳戶中資料夾和 PSD 檔案的縮圖檢視。這些就是從桌上型電腦上傳或同步的檔案，或是透過 Creative Cloud 協作資料夾與您共用的檔案。

顯示 Creative Cloud 上所儲存 PSD 檔案的 Extract 面板

註解：

若要重新啟動教學課程，請按一下面板右上角的彈出式選單並選取「啟動教學課程」。

上傳 PSD 檔案至 Creative Cloud

若要將 PSD 檔案上傳至您的 Creative Cloud，請選擇「Window > Extract」，並按一下「上傳 PSD」。如果 PSD 構圖是由其他人或團隊建立，您可以在 Creative Cloud 上共用，然後您可以下載檔案，再直接登入 Creative Cloud，或在 Dreamweaver 中透過 Extract 面板，上傳至您的帳戶。

註解：

如果您在 macOS 裝置上使用 Dreamweaver 21.2 或更高版本，請從 Finder 視窗中啟用 PSD 檔案類型並上傳您的檔案。

macOS 版

請按照以下步驟啟用並上傳 PSD 檔案：

在 Extract 面板中按一下「上傳 PSD」。
在 Finder 視窗中，按一下「選項」，並從顯示的下拉選單中選取 *.psd。
選取 PSD 檔案，並按一下「開啟」以上傳檔案。

在 Extract 面板中開啟 PSD 檔案

按一下 Extract 面板中所需 PSD 檔案的縮圖影像。如果開啟 PSD 檔案之後，Creative Cloud 上有已更新版本的 PSD 檔案可用，請在 Extract 面板中重新載入 PSD 檔案。若要執行此動作，請按一下 PSD 檔案的名稱，或是在右上方彈出式選單中按一下「重新載入 PSD」。若要回到縮圖檢視並選取其他檔案，請按一下面板左上方的 Creative Cloud 圖示。

若要放大檢視並更仔細查看設計，請在 Extract 面板頂端更改縮放等級或使用 Alt +/-。使用「圖層」索引標籤或「圖層構圖」下拉式清單以顯示或隱藏 PSD 檔案中的元素。

現在您已完成準備，可將 PSD 構圖轉譯成網站。

設定 Extract 偏好設定

您可以使用 Extract 偏好設定，指定擷取影像時使用的預設檔案格式，也可以指定要在 Extract 面板中顯示的預設字體單位。

選取「編輯 > 偏好設定」(Win) 或「Dreamweaver > 偏好設定」(Mac)。
在「類別」清單中選取「Extract」。
(選擇性) 更改必須擷取影像時所使用的預設格式。

擷取的影像格式
(選擇性) 在「適用裝置的 Extract」區段中，選取所需的解析度。當您選擇將影像儲存在多個解析度版本中時，將會使用這些設定。
- 若要在儲存版本時加上字尾，請按一下「字尾」欄下方對應的列，然後輸入文字。
- 若要將多個解析度版本儲存到不同的輸出資料夾中，請按一下「資料夾」欄下方對應的列，並指定相對路徑。
適用裝置的 Extract
(選擇性) 按一下「清除快取」，刪除與使用 Extract 相關的快取資料。
按一下「套用」，然後關閉「偏好設定」對話方塊。
若要查看 Extract 面板中的變更，請重新載入 PSD (「彈出式選單 > 重新載入 PSD」)。

Extract 面板中的重新載入 PSD 選項

從 PSD 檔案擷取 CSS

您可以複製 PSD 構圖中元素的全部或特定 CSS 屬性，然後直接將樣式貼入 CSS 設計工具、「即時檢視」中的元素顯示或您的程式碼 (CSS 來源或 HTML 文件) 之中。

而且，程式碼提示會自動以您在 PSD 構圖中所選取元素的 CSS 屬性填入。如果喜歡編寫程式碼，可以利用這些程式碼提示，擷取 CSS 屬性到程式碼中。

在 Extract 面板 (「視窗 > Extract」) 中，按一下所需的 PSD 檔案。PSD 展開的縮圖檢視，可讓您清楚地檢視構圖。
在 PSD 檔案中，按一下所需的元素或資源。該元素的 CSS 屬性彈出式清單隨即顯示，並提供選項，讓您選取和複製這些屬性。您能夠以像素或百分比來檢視選定元素的寬度與高度。

注意：如果您在這裡選擇百分比，度量也會以百分比單位顯示。

Extract 面板中的複製 CSS 選項

若要複製 CSS，請選取您想要複製的屬性，然後按一下「複製 CSS」。
使用下列其中一個方法在您的文件中貼上 CSS：
- 若要在 CSS 設計工具中貼上 CSS，以滑鼠右鍵按一下所需的選取器，並按一下「貼上樣式」。
- 若要使用元素顯示貼上 CSS，以滑鼠右鍵按一下所需的選取器，並按一下「貼上樣式」。
- 若要在程式碼中貼上 CSS，請將插入點置於所需位置，按一下滑鼠右鍵然後按一下「貼上」。

若要使用程式碼提示擷取 CSS，請執行下列動作：

開啟附加至您文件的 CSS 來源，或切換到 HTML 文件的程式碼檢視。
在 Extract 面板中按一下所需的 PSD 檔案，然後再按一下構圖中所需的元素。
在您的文件中，將插入點置於程式碼中所需要的位置。
開始輸入 CSS 屬性的名稱，以查看程式碼提示，其中包含 PSD 構圖中所選取元素的 CSS 屬性。按一下所需的 CSS 屬性以插入程式碼中。

包含 PSD 檔案中某元素 CSS 屬性的程式碼提示
若要擷取多個 CSS 屬性，請在 Extract 面板的彈出式選單中選取所需的屬性。然後，在程式碼提示中，按一下「插入選取的項目」。

批次插入 CSS 屬性

從 PSD 檔案複製文字

PSD 構圖中的文字或內容，只要按一下滑鼠，就可以插入您的網頁中。若要在 Extract 面板中從您的 PSD 構圖複製文字，請選取文字元素，然後按一下「複製文字」。文字會複製到您的剪貼簿。接著，便可以將文字貼到所需的位置。

註解：

擷取文字之後，您可以擷取屬性，例如與文字相關聯的字體和顏色。如需詳細資訊，請參閱「從 PSD 檔案擷取字體、顏色和漸層效果」。

從 PSD 檔案擷取影像

您可以直接將 PSD 構圖中的任何圖層，從 Extract 面板拖入網頁的即時檢視中的確切位置。即時檢視中的視覺輔助工具 (例如「即時導引線」和 DOM 圖示) 都有助於拖曳並放置元素。當您暫停片刻，然後再置放所拖曳的元素時，即會出現 DOM 圖示 (</>)。當您將滑鼠停留在 </> 圖示上方時，就會顯示 DOM 結構，而且您可以將元素放到此結構中。如果偏好撰寫程式碼，可以使用內容程式碼提示，擷取影像。程式碼提示可讓您擷取色彩和漸層效果做為影像。

註解：

如果您的 PSD 檔案包含多個工作畫板，每個工作畫板都會在圖層窗格中顯示為資料夾。您可以展開或收合資料夾以查看或隱藏其內容。若要放大顯示特定的工作畫板，只要按一下工作畫板名稱即可。若要縮小顯示，請按一下工作畫板外面的任何地方，然後按一下「符合」。

插入擷取影像之前，Dreamweaver 會顯示影像名稱，供您編輯。根據預設，影像會儲存在網站的根資料夾中。若要將影像儲存到自訂位置中，可包含完整目錄路徑和檔案名稱。

注意：如果您擷取影像到不屬於已定義網站的文件中，影像會擷取到文件所在的目錄中。針對未儲存的文件，您會接到提示，要先儲存該文件。

您也可以將影像儲存在您的本機磁碟上，並於稍後的時間點將它呼叫到您的網頁中。此外，如果您要設計回應式網站，您只要按一下就可以儲存影像的多個解析度版本供裝置使用。

在 Extract 面板中，按一下您想要下載其中影像的 PSD 檔案。
在 PSD 檔案中按一下所需的影像。

註解：

在 Extract 面板中使用「圖層」索引標籤和「圖層構圖」下拉式清單以顯示或隱藏 PSD 構圖中的影像。如果影像包含多個圖層，您可以分別選取影像的各個圖層來擷取。

請注意，工作區右側的「程式碼檢視」中會彈出程式碼提示。
若要匯入多個影像，請按住 Shift 或 Command 鍵，同時按一下所需要的影像。所選取的影像會以單一影像進行擷取。
執行以下任一動作：
- 按一下影像時會顯示彈出式選單，在其中按一下。指定路徑、檔案名稱、檔案格式和縮放係數 (若有需要)。然後，執行以下其中一個動作：
  
  按一下「儲存」，以 1 倍解析度儲存影像。若要縮放影像，請選取「縮放比例」，並指定縮放係數。
  
  按一下「儲存多個」，儲存此影像的多個解析度版本。PSD 檔案不一定需要包含這些版本；Dreamweaver 在擷取期間可以將影像儲存為多種解析度。
您可以在「偏好設定」中指定所需的解析度版本和對應的輸出資料夾。
使用擷取資源圖示擷取影像
- 將影像拖入文件的「即時檢視」中。即時檢視中會顯示即時導引線，協助您將影像定位。
放下影像時，Dreamweaver 會顯示影像的名稱。您不但能編輯影像的名稱，也可以編輯副檔名，然後按 Enter 儲存影像。影像會預設為儲存在網站的根資料夾中。若要將影像儲存到自訂位置中，請輸入路徑和檔案名稱。
從 Extract 面板拖曳影像時的檔案名稱和副檔名編輯選項
- 按一下影像時，會在 Dreamweaver 中填入內容程式碼提示。在您的 HTML 文件或 CSS 文件的程式碼檢視中，將游標置於插入點。輸入背景影像屬性名稱或 <img> 標籤之後，所選取影像的名稱會顯示在程式碼提示中。選取影像，並視需要修改名稱和副檔名，然後按 Enter 鍵。
根據預設，影像會儲存在網站的根資料夾中。若要將影像儲存到自訂位置中，請輸入自訂檔案路徑和檔案名稱。
使用程式碼提示擷取影像

從 PSD 檔案擷取度量

您可以使用 Extract 面板，輕鬆檢視及擷取 PSD 構圖中任何兩個元素之間的度量值。

在 Extract 面板的 PSD 檔案中，按住 Shift 或 Command 鍵並按一下所需的元素。

Extract 面板會顯示兩個元素之間的水平和垂直距離。

Extract 面板中的度量

註解：

若要檢視以百分比為單位的度量，請按一下任何元素，然後按一下「百分比」。
按一下所需的值，將其複製到剪貼簿。
將值貼到需要該值的任何地方，例如 CSS 設計工具的 CSS 屬性或程式碼之中。

從 PSD 檔案擷取字體、顏色和漸層效果

您可以使用 Extract 面板，擷取 PSD 構圖中所使用字體、顏色或漸層效果的 CSS 屬性。

在 Extract 面板中按一下「樣式」。
若要擷取字體，請在「字體」區段執行下列動作。
1. 展開所需的字體類型。
  
  若要深入了解字體，請按一下 Adobe Fonts 圖示 ()。
2. 按一下您要複製的格式和大小，然後在所顯示的彈出式選單中按一下「複製 CSS」。Extract 會將使用您所按下字體、格式和大小的文字元素，轉換成標籤。
  
  註解：
  
  您可以在 Extract 偏好設定 (「偏好設定 > Extract」) 中將字體單位變更為「em」或「rem」。按一下 Extract 面板右上角彈出式選單中的「重新載入 PSD」，以查看變更。
  
  擷取字體
3. 將 CSS 貼到需要該 CSS 的任何地方，例如程式碼或 CSS 設計工具中。
若要擷取顏色，請在「顏色」區段執行下列動作：
1. 按一下所需色票。Extract 會將使用所選取顏色的元素，轉換成標籤。
  
  注意：您也可以使用檢色器，從 PSD 構圖挑選其他任何顏色。
2. 在按一下色票後所出現的彈出式選單中，選取所需的色彩模式 (RGB、Hex 或 HSL)，然後複製 (Ctrl+C；Cmd+C) 顏色值。
  
  擷取顏色
3. 將顏色值貼到需要該值的任何地方，例如程式碼或 CSS 設計工具中。
若要擷取漸層效果，請按一下「漸層效果」區段中的漸層效果色票。在所顯示的彈出式選單中，按一下「複製 CSS」。將 CSS 貼到需要該 CSS 的任何地方，例如程式碼或 CSS 設計工具中。

在偏好設定中選取的廠商前置詞 (「偏好設定 > CSS 樣式」) 也會隨漸層效果貼上。若擷取放射漸層效果，由於不支援放射漸層效果，會插入沒有廠商前置詞的相應 CSS。

擷取漸層效果