在 Dreamweaver（「設計」或「程式碼」檢視）中，將插入點放置在您要插入影像的頁面位置。
上次更新時間
2021年4月27日
了解 Photoshop 如何與 Dreamweaver 整合。 在 Photoshop - Dreamweaver 工作流程中使用智慧型物件。
關於 Photoshop 整合
備註
Photoshop 整合工作流程在 Dreamweaver 21.0 和更高版本中已中止。
您可以將 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 中對智慧型物件所做的任何更新都是非破壞性的。 也就是說，您可以變更頁面上影像的網頁版本 ，同時保持原始 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 中更新影像。
選取「插入 > 影像」。
備註
如果您將 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 For Background Images (Patterns)。
選取預設集時，會顯示可設定的預設集選項。 如果您要進一步自訂最佳化設定，請修改這些選項的值。
