使用手冊取消

在 Dreamweaver 中使用 Photoshop 檔案

搜尋

上次更新時間 2021年4月29日

Dreamweaver

開啟應用程式

了解 Photoshop 如何與 Dreamweaver 整合。在 Photoshop - Dreamweaver 工作流程中使用智慧型物件。

關於 Photoshop 整合

註解：

Dreamweaver 21.0 及更高版本已停止使用 Photoshop 整合工作流程。

您可以將 Photoshop 影像檔 (PSD 格式) 插入 Dreamweaver 的網頁中，並由 Dreamweaver 將這些影像檔最佳化為網站可用的影像 (GIF、JPEG 和 PNG 格式)。當您進行這項操作時，Dreamweaver 會將影像插入為「智慧型物件」並與原始 PSD 檔保持即時連結。

您也可以將多重圖層或多重分割的 Photoshop 影像全部或部分貼到 Dreamweaver 的網頁中。不過，若從 Photoshop 複製貼上的話，便不會與原始檔案保持即時連結。若要更新影像，請在 Photoshop 中進行變更，然後再次複製貼上。

註解：

如果您經常使用這項整合功能，可以將 Photoshop 檔案儲存在 Dreamweaver 網站中以方便存取。在此情況下，請記得遮罩這些檔案以免暴露原始資源，及造成本機網站和遠端伺服器之間不必要的傳輸。

如需 Dreamweaver 與 Photoshop 整合的教學課程，請參閱「將 Dreamweaver 與 Photoshop 整合」。

關於智慧型物件和 Photoshop-Dreamweaver 工作流程

在 Dreamweaver 中使用 Photoshop 檔案的工作流程主要有二種：複製/貼上工作流程和智慧型物件工作流程。

複製/貼上工作流程

複製/貼上工作流程可讓您選取 Photoshop 檔案中的切片或圖層，然後使用 Dreamweaver 插入做為網頁用的影像。如果之後您想要更新內容，必須開啟原始 Photoshop 檔案進行變更、複製更新的切片或圖層到剪貼簿，再將其貼入 Dreamweaver 中。建議只有當您要插入 Photoshop 檔案的部分內容 (例如，設計構圖的某一區段) 做為網頁影像時才使用此工作流程。

智慧型物件工作流程

當您作業目標是完整的 Photoshop 檔案時，Adobe 建議使用智慧型物件工作流程。Dreamweaver 中的智慧型物件是指放在網頁上的一個影像資源，該資源會與原始 Photoshop (PSD) 檔案保持即時連線。在 Dreamweaver 設計檢視中，影像若是智慧物件則會在左上角以圖示表示。

當網頁影像 (即 Dreamweaver 頁面上的影像) 和原始 Photoshop 檔案不同步時，Dreamweaver 會偵測到原始檔案已更新，智慧物件圖示的其中一個箭頭會變成紅色。當您在設計檢視中選取網頁影像，並在「屬性」檢測器中按一下「原稿」按鈕中的「更新」，影像便會自動更新和變更過的 Photoshop 檔案一致。

當您使用智慧型物件工作流程，不需要開啟 Photoshop 即可更新網頁影像。此外，在 Dreamweaver 中對智慧型物件所做的任何變更都不具損害性 (Non-Destructive)。也說是說，您可以只變更頁面影像的網頁版本，而不會變更到原始 Photoshop 檔案中的影像。

您也可以更新智慧型物件，而不需要在設計檢視中選取網頁影像。您可以使用「資產」面板更新所有智慧型物件，包括無法在「文件」視窗中選取的影像 (例如，CSS 背景影像)。

影像最佳化設定

在複製/貼上工作流程和智慧型物件工作流程中，您都可以指定「影像最佳化」對話方塊中的最佳化設定。您可以在此對話方塊中指定檔案格式和影像品質。在您複製切片或圖層或插入 Photoshop 檔案做為智慧型物件時，Dreamweaver 會顯示此對話框以方便您建立網頁影像。

在您將更新過的切片或圖層拷貝和貼上時，Dreamweaver 會記得原始的設定，並使用原始的設定來重新建立網頁影像。同樣地，當您使用「屬性」檢視窗更新智慧型物件時，Dreamweaver 會使用您首次插入該影像時的設定。您可以隨時變更影像的設定，做法是在設計檢視中選取網頁影像，然後按一下「屬性」檢視窗中的「編輯影像設定」按鈕。

儲存 Photoshop 檔案

如果您已插入網頁影像，但未將原始 Photoshop 檔案儲存在您的 Dreamweaver 網站，Dreamweaver 會將原始檔案路徑視為絕對本機檔案路徑 (複製/貼上工作流程和智慧型物件工作流程皆是如此)。例如，您的 Dreamweaver 所在路徑為 C:\Sites\mySite，而 Photoshop 檔案儲存在 C:\Images\Photoshop，Dreameaver 不會將原始資源視為名為 mySite 網站的一部分。當您想要將 Photoshop 檔案分享給其他小組成員使用時，這就會造成問題，因為 Dreamweaver 會認為檔案只存在於特定本機硬碟中。

但是，如果將 Photoshop 檔案儲存在您的網站中，Dreamweaver 會建立檔案的網站相對路徑。任何擁有此網站存取權的用戶皆可建立正確的檔案路徑，前提是您必須提供原始檔案供他們下載。

如需使用 Photoshop 雙向編輯的教學課程影片，請參閱「使用 Photoshop 雙向編輯」。

建立智慧型物件

當您將 Photoshop 影像 (PSD 檔) 插入至網頁時，Dreamweaver 會建立「智慧型物件」。「智慧型物件」是與原始 Photoshop 影像保持即時連結的網站可用影像。之後，只要您使用 Photoshop 更新原始影像，Dreamweaver 便會提供按鈕讓您選擇是否也要更新 Dreamweaver 中的該影像。

在 Dreamweaver 中 (「設計」或「程式碼」檢視)，將插入點置於網頁上您要插入影像的位置。
選取「插入 > 影像」。

註解：

如果 Photoshop 檔案已經儲存在網站中，您也可以從「檔案」面板將 PSD 檔拖曳到頁面上。進行這項操作後，請略過下一個步驟。
在「選取影像原始檔」對話方塊中，按一下「瀏覽」按鈕並進行導覽，找出 Photoshop PSD 影像檔的位置。
在出現的「影像最佳化」對話方塊中，視需要調整最佳化設定，然後按一下「確定」。
將網站可用的影像檔儲存至網站根資料夾中的位置。

Dreamweaver 會根據選取的最佳化設定來建立「智慧型物件」，並將網站可用的影像版本放在頁面上。「智慧型物件」將與原始影像保持即時連結，並於兩種版本未同步時通知您。

註解：

如果您稍後決定要為頁面上放置的影像變更最佳化設定，可以選取該影像並按一下「屬性」檢視窗中的「編輯影像設定」按鈕，然後在「影像最佳化」對話方塊中進行變更。在「影像最佳化」對話方塊中所做的變更，是以不具破壞性的方式套用。Dreamweaver 從不會修改原始 Photoshop 檔案，而且總是會根據原始資料重新建立網頁影像。

如需使用 Photoshop 雙向編輯的教學課程影片，請參閱「使用 Photoshop 雙向編輯」。

更新智慧型物件

如果您修改了「智慧型物件」所連結的 Photoshop 檔案，Dreamweaver 會通知您網站可用的影像與原始影像並未同步。在 Dreamweaver 中，影像的左上角有個圖示即代表「智慧型物件」。若 Dreamweaver 中的網站可用影像與原始 Photoshop 檔案已經同步，圖示上的兩個箭頭都會是綠色的。一旦網站可用的影像未與原始 Photoshop 檔案同步，圖示上的其中一個箭頭就會變成紅色。

若要使用原始 Photoshop 檔案的目前內容來更新「智慧型物件」，請在「文件」視窗中選取「智慧型物件」，然後按一下「屬性」檢視窗中的「從原始檔更新」按鈕。

註解：

您不需要安裝 Photoshop 就可以從 Dreamweaver 進行更新。

更新多個智慧型物件

您可以使用「資源」面板同時更新多個「智慧型物件」。「資源」面板也會指出「文件」視窗中有哪些「智慧型物件」無法選取 (例如 CSS 背景影像)。

按一下「檔案」面板的「資源」索引標籤以檢視網站資源。
確定已經選取「影像」檢視。如果沒有，請按一下「影像」按鈕。
選取「資源」面板中的每個影像資源。當您選取「智慧型物件」時，會在影像的左上角看到「智慧型物件」圖示。一般影像則沒有這個圖示。
針對您想要更新的每個「智慧型物件」，在其檔案名稱上按一下右鍵，然後選取「從原始檔更新」。您也可以用 Control+按一下的方式選取多個檔案名稱，然後同時全部予以更新。

註解：

您不需要安裝 Photoshop 就可以從 Dreamweaver 進行更新。

調整智慧型物件大小

如同您可以調整任何其他影像的大小一樣，您也可以調整「文件」視窗中的「智慧型物件」大小。

在「文件」視窗中選取「智慧型物件」，並拖曳更改大小控制點以調整影像大小。若要維持寬度和高度的比例，您可以按住 Shift 鍵再進行拖曳。
按一下「屬性」檢視窗中的「從原始檔更新」按鈕。

當您更新「智慧型物件」時，網頁影像就會根據原始檔案的目前內容和原始最佳化設定，以不具破壞性的方式重新呈現為新的大小。

編輯智慧型物件的原始 Photoshop 檔案

在 Dreamweaver 頁面上建立「智慧型物件」後，您可以使用 Photoshop 編輯原始 PSD 檔案。一旦您透過 Photoshop 完成變更，接著即可輕易地更新 Dreamweaver 中的網頁影像。

註解：

請確定已將 Photoshop 設定為您的主要外部影像編輯器。

在「文件」視窗中選取「智慧型物件」。
按一下「屬性」檢視窗中的「編輯」按鈕。
在 Photoshop 中進行變更，然後儲存新的 PSD 檔。
再次從 Dreamweaver 中選取「智慧型物件」，然後按一下「從原始檔更新」按鈕。

註解：

若您曾在 Photoshop 中變更影像大小，則必須重設 Dreamweaver 中的網頁影像大小。Dreamweaver 只會根據原始 Photoshop 檔案的內容來更新「智慧型物件」，而不會更新影像大小。若要將網頁影像大小與原始 Photoshop 檔案的大小同步化，請在影像上按一下右鍵，然後選取「重設為原始大小」。

智慧型物件狀態

下表列出「智慧型物件」的各種狀態。

智慧型物件狀態	描述	建議的動作
影像已同步	網頁影像已與原始 Photoshop 檔案的目前內容同步。HTML 程式碼中的寬度及高度屬性符合網頁影像尺寸。	無
原始資源已修改	自從在 Dreamweaver 中建立網頁影像後，已修改了原始 Photoshop 檔案。	使用「屬性」檢視窗中的「從原始檔更新」按鈕，將兩個影像同步化。
網頁影像尺寸與選取的 HTML 寬度及高度不同	HTML 程式碼中的寬度及高度屬性，與 Dreamweaver 在插入時所建立的網頁影像高度及寬度尺寸不同。如果網頁影像尺寸小於選取的 HTML 寬度及高度值，網頁影像可能會呈現像素化。	使用「屬性」檢視窗中的「從原始檔更新」按鈕，根據原始 Photoshop 檔案重新建立網頁影像。Dreamweaver 會使用目前指定的 HTML 寬度及高度尺寸來重新建立影像。
原始資源的尺寸小於選取的 HTML 寬度及高度	HTML 程式碼中的寬度及高度屬性會大於原始 Photoshop 檔案的寬度及高度尺寸。網頁影像可能會呈現像素濾鏡化。	建立網頁影像時，尺寸請勿大於原始 Photoshop 檔案的尺寸。
找不到原始資源	Dreamweaver 找不到「屬性」檢視窗的「原始」文字方塊中指定的原始 Photoshop 檔案。	在「屬性」檢視窗的「原始」文字方塊中修正檔案路徑，或將 Photoshop 檔案移到目前指定的位置。

複製並貼上 Photoshop 的選取範圍

您可以複製 Photoshop 影像的全部或部分，然後將選取範圍貼到 Dreamweaver 網頁，做為網站可用的影像。您可以複製影像選取區域的單一圖層或一組圖層，或是複製影像分割。不過，當您進行這項操作時，Dreamweaver 並不會建立「智慧型物件」。

註解：

雖然貼上的影像無法使用「從原始檔更新」功能，您還是可以選取貼上的影像，再按一下「屬性」檢視窗中的「編輯」按鈕，來開啟和編輯原始 Photoshop 檔案。

在 Photoshop 中，執行下列其中一項作業：
- 如果您要複製單一圖層的全部或部分，可以使用「選取畫面」工具選取您要複製的部分，然後選擇「編輯 > 複製」。這樣就能將作用中圖層的選取區域複製到剪貼簿。如果您有圖層式的效果，這些效果並不會複製。
- 如果您要複製並合併多個圖層，可以使用「選取畫面」工具選取您要複製的部分，然後選擇「編輯 > 拷貝合併」。這樣會將選取區域的所有作用中和較低圖層平面化並複製到剪貼簿。如果您有與這些圖層相關聯的圖層式效果，這些效果也會一起複製。
- 如果您要複製分割，請使用「分割選取」工具選取分割，然後選擇「編輯 > 複製」。這樣會將分割的所有作用中和較低圖層平面化並複製到剪貼簿。
註解：

您可以選擇「選取 > 全部」，快速選取整個影像以進行複製。
在 Dreamweaver 中 (「設計」或「程式碼」檢視)，將插入點置於網頁上您要插入影像的位置。
選取「編輯 > 貼上」。
在「影像最佳化」對話方塊中，視需要調整最佳化設定，然後按一下「確定」。
將網站可用的影像檔儲存至網站根資料夾中的位置。

Dreamweaver 會根據最佳化設定定義影像，並將影像的網站可用版本置入網頁中。不論您是否已啟用網站的「設計備註」，有關影像的資訊 (例如原始 PSD 原始檔的位置) 會儲存在「設計備註」中。「設計備註」可讓您從 Dreamweaver 返回，以編輯原始的 Photoshop 檔案。

編輯貼上的影像

當您將 Photoshop 影像貼至 Dreamweaver 頁面後，可在 Photoshop 中編輯原始 PSD 檔。Adobe 建議您在使用複製/貼上工作流程時，一律直接編輯原始 PSD 檔 (而非網站可用的影像本身)，然後重新貼上以維持單一來源取向。

註解：

請確定已將 Photoshop 設定為您要編輯的檔案類型的主要外部影像編輯器。

在 Dreamweaver 中，選取原先以 Photoshop 建立的網站可用影像，並執行下列其中一項作業：
- 按一下影像「屬性」檢視窗中的「編輯」按鈕。
- 按 Control (Windows) 或 Command (Macintosh) 並按兩下檔案。
- 在影像上按一下右鍵 (Windows) 或 Control+按一下 (Macintosh)，然後從快速選單選擇「原稿編輯方式」，再選擇「Photoshop」。
註解：

這裡假設 Photoshop 已設定為 PSD 影像檔的主要外部影像編輯器。您也可以將 Photoshop 設定為 JPEG、GIF 和 PNG 檔案類型的預設編輯器。
在 Photoshop 中編輯檔案。
回到 Dreamweaver，然後將已更新的影像或選取範圍貼至頁面上。

日後，若您想要重新最佳化影像，隨時可以選取該影像，然後按一下「屬性」檢視窗中的「編輯影像設定」按鈕。

設定影像最佳化對話方塊選項

當您建立「智慧型物件」或貼上 Photoshop 的選取範圍時，Dreamweaver 會顯示「影像最佳化」對話方塊 (如果您選取了任何其他類型的影像，再按一下「屬性」檢視窗中的「編輯影像設定」按鈕，Dreamweaver 也會顯示該影像的這個對話方塊)。這個對話方塊可以讓您組合運用正確的顏色、壓縮比及品質，定義和預覽網站可用影像的設定。

網站可用的影像可以顯示在所有最新的網頁瀏覽器上，不論檢視者使用何種系統或瀏覽器，這種影像的外觀看起來是一樣的。一般來說，這些設定的呈現效果會在品質與檔案大小之間有所取捨。

註解：

不論您所選取的設定為何，都只會影響到影像檔的匯入版本。原始 Photoshop PSD 或 Fireworks PNG 檔始終保持原封不動。

預設集

選取最符合您需求的預設集。影像會根據您選取的預設集改變檔案大小。背景中會立即以套用的設定顯示影像的預覽。

例如，針對必須以高清晰度顯示的影像，選取「相片 (銳利細節) 適用 PNG24」。如果是插入要做為頁面背景的圖樣，請選取「背景影像 (圖樣) 適用 GIF」。

選取預設集時，會顯示可設定的預設集選項。若要更進一步自訂最佳化設定，請修改這些選項的值。

更快、更輕鬆地獲得協助

新的使用者？