使用手冊取消

使用 Fireworks 和 Dreamweaver

搜尋

上次更新時間 2022年2月2日

Dreamweaver

開啟應用程式

使用 Fireworks 和 Dreamweaver 可以簡化在 HTML 網頁中編輯、最佳化及放置網頁圖像的工作流程。

註解：

Adobe Dreamweaver 版本不支援這項功能。

插入 Fireworks 影像

Dreamweaver 和 Fireworks 可以辨識和共享許多相同的檔案編輯程序，包括連結的變更、影像地圖、表格分割等。整合使用時，這兩個應用程式可提供有效率的工作流程，包括編輯、最佳化以及放置網站圖片檔案到 HTML 頁面中。

您可以使用「插入影像」命令，將 Fireworks 轉存的圖形直接置入 Dreamweaver 文件中，或是從 Dreamweaver 影像預留位置建立新的 Fireworks 圖形。

在 Dreamweaver 文件中，將插入點置於您想要影像出現的地方，然後執行下列其中一項作業：
- 選取「插入＞影像」。
- 在「插入」面板的「一般」類別中，按一下「影像」按鈕或將它拖曳到文件中。
瀏覽到想要的 Fireworks 轉存檔案，然後按一下「確定」(Windows) 或「開啟」(Macintosh)。

註解：

如果這個 Fireworks 檔案並不在目前的 Dreamweaver 網站中，將會出現詢問是否要複製檔案到根資料夾的訊息。按一下「是」。

從 Dreamweaver 中編輯 Fireworks 影像或表格

當您開啟和編輯影像或某個屬於 Fireworks 表格一部分的影像分割時，Dreamweaver 便會啟動 Fireworks，以開啟該影像或表格所轉存的 PNG 檔案。

註解：

這裡假設 Fireworks 已設定為 PNG 檔案的主要影像編輯器。您也許希望將 Photoshop 設定為 JPEG 和 GIF 檔案的預設編輯器，但 Fireworks 通常也可設定為這些檔案類型的預設編輯器。

如果影像是 Fireworks 表格的一部分，您可以開啟整個 Fireworks 表格來進行編輯，但是 HTML 程式碼中必須有  註解存在 HTML 程式碼中。如果原始 PNG 檔案是使用 Dreamweaver 樣式的 HTML 和影像設定，從 Fireworks 轉存至 Dreamweaver 網站， Fireworks 表格的註解會自動插入 HTML 程式碼中。

在 Dreamweaver 中，如果尚未開啟「屬性」檢視窗，請將它開啟 (「視窗 > 屬性」)。
按一下影像或影像分割來選取它。

當您選取由 Fireworks 轉存的影像時，「屬性」檢視窗會將選取範圍識別為 Fireworks 影像或表格，並且顯示 PNG 原始檔案的名稱。
若要啟動 Fireworks 進行編輯，請執行下列其中一項作業：
- 在「屬性」檢視窗中按一下「編輯」。
- 按住 Control (Windows) 或 Command (Macintosh)，然後按兩下選取的影像。
- 以滑鼠右鍵按一下 (Windows) 或 Control+按一下 (Macintosh) 選取的影像，然後從快顯選單中選取「使用 Fireworks 編輯」。
註解：

如果 Fireworks 找不到原始檔案，就會出現要您找出 PNG 原始檔案的提示。當您使用 Fireworks 原始檔案時，變更會同時儲存於原始檔案和轉存檔案中，否則只會更新轉存檔案。
在 Fireworks 中編輯原始 PNG 檔案，然後按一下「完成」。

Fireworks 會將變更儲存在 PNG 檔案，轉存更新的影像 (或 HTML 和影像)，然後畫面轉回 Dreamweaver。在 Dreamweaver 中，便會出現更新的影像或表格。

如需 Dreamweaver 和 Fireworks 整合的教學課程，請參閱 www.adobe.com/go/vid0188_tw。

從 Dreamweaver 最佳化 Fireworks 影像

您可以使用 Dreamweaver 快速變更 Fireworks 影像和動畫。您可以在 Dreamweaver 中變更最佳化設定、動畫設定以及轉存的影像大小和區域。

在 Dreamweaver 中選取所需影像，然後執行下列其中一項：
- 選取「命令 > 最佳化影像」
- 按一下「屬性」檢視窗中的「編輯影像設定」按鈕。
在「影像預覽」對話方塊中進行編輯：
- 若要編輯最佳化設定，請按一下「選項」索引標籤。
- 若要編輯轉存影像的大小和區域，請按一下「檔案」索引標籤。
完成上述步驟之後，請按一下「確定」。

使用 Fireworks 修改 Dreamweaver 影像預留位置

您可以在 Dreamweaver 文件中建立預留位置影像，然後啟動 Fireworks 設計圖片影像或 Fireworks 表格來取代它。

若要從影像預留位置建立新影像，系統中必須安裝 Dreamweaver 和 Fireworks。

請確定已將 Fireworks 設定為 PNG 檔案的影像編輯器。
在「文件」視窗中，按一下影像預留位置來選取它。
請執行下列其中一項作業，以「從 Dreamweaver 編輯」模式來啟動 Fireworks：
- 在「屬性」檢視窗中按一下「建立」。
- 按 Control (Windows) 或 Command (Macintosh)，然後按兩下影像預留位置。
- 在影像預留位置上按一下右鍵 (Windows) 或 Control+按一下 (Macintosh)，然後選取「在 Fireworks 中建立影像」。
使用 Fireworks 選項設計影像。

Fireworks 可以辨認下列的影像預留位置設定值，它們可能是您在 Dreamweaver 中處理影像預留位置時已經設定的：影像大小 (與 Fireworks 畫布大小相關聯)、影像 ID (Fireworks 用來做為您所建立原始檔案和轉存檔案的預設文件名稱) 和文字對齊。 Fireworks 也能辨認您在 Dreamweaver 中工作時，附加到影像預留位置的連結和特定行為 (例如，調換影像、快顯視窗選單和設定文字)。

註解：

雖然 Fireworks 不會顯示您加入影像預留位置中的連結，但是會保留它們。如果您在 Fireworks 中畫出連結區並加入連結，它並不會刪除您在 Dreamweaver 中加入影像預留位置中的連結；不過，如果您在 Fireworks 中對新的影像畫出分割，它就會在您取代影像預留位置時，刪除 Dreamweaver 文件中的連結。

Fireworks 無法辨認下列影像預留位置設定：影像對齊、顏色、垂直間距和水平間距以及地圖。它在影像預留位置的「屬性」檢視窗中是停用的。
完成上述步驟之後，請按一下「完成」以顯示儲存提示。
在「儲存於」文字方塊中，請選取您已定義為 Dreamweaver 本機網站資料夾的資料夾。

如果您在將影像預留位置插入 Dreamweaver 文件時有命名，Fireworks 會在「檔案名稱」方塊中顯示該名稱。您可以變更這個名稱。
按一下「儲存檔案」便可儲存 PNG 檔。

便會出現「轉存」對話方塊。請使用此對話方塊，將影像以 GIF 或 JPEG 檔案格式轉存，如果是分割影像則以 HTML 和影像格式轉存。
在「儲存於」中選取 Dreamweaver 本機網站資料夾。

「名稱」方塊便會自動顯示您使用的 PNG 檔案名稱。您可以變更這個名稱。
在「存檔類型」中選取要匯出的一個或多個檔案類型，例如「只有影像」或「HTML 和影像」。
按一下「儲存檔案」儲存轉存的檔案。

這樣便會儲存檔案，而畫面也會轉回 Dreamweaver。在 Dreamweaver 文件中，轉存的檔案或 Fireworks 表格將取代影像預留位置。

關於 Fireworks 快顯視窗選單

Fireworks 可讓您輕鬆快速地建立 CSS 快顯視窗選單。

除了具擴展性且可迅速下載的優點之外，利用 Fireworks 建立的快顯視窗選單還可提供您下列優點：

可依據搜尋引擎編排選單項目的索引。
可透過螢幕讀取器朗讀選單項目，讓人更容易存取頁面。
Fireworks 所產生的程式碼符合標準，並且可以通過驗證。
您可以利用 Dreamweaver 或 Fireworks 來編輯 Fireworks 快顯視窗選單，但是不能同時使用。 Fireworks 不會保留 Dreamweaver 所做的變更。

在 Dreamweaver 中編輯 Fireworks 快顯視窗選單

您可以在 Fireworks 8 或更新的版本中建立快顯視窗選單，然後使用 Dreamweaver 或 Fireworks (使用交互編輯) 來編輯，但是不能同時使用。如果您在 Dreamweaver 中編輯選單，然後在 Fireworks 中編輯，您將會失去先前編輯成果 (文字內容除外)。

如果您想要使用 Dreamweaver 編輯選單，您可以使用 Fireworks 建立快顯視窗選單，然後單獨使用 Dreamweaver 來編輯和自訂此選單。

如果您想要在 Fireworks 中編輯選單，可以使用 Dreamweaver 的交互編輯功能，但是不應該直接在 Dreamweaver 中編輯選單。

在 Dreamweaver 中，選取包含快顯視窗選單的 Fireworks 表格，然後在「屬性」檢視窗中按一下「編輯」。

來源 PNG 檔案便會在 Fireworks 中開啟。
在 Fireworks 中，使用「快顯視窗選單編輯器」編輯選單，然後按一下 Fireworks 工具列上的「完成」。

Fireworks 便會將已編輯的快顯視窗選單傳送回 Dreamweaver。

如果您在 Fireworks MX 2004 或更早版本中建立快顯視窗選單，就可以使用「顯示快顯視窗選單」對話方塊 (可從「行為」面板中選取)，在 Dreamweaver 中編輯它。

編輯在 Fireworks MX 2004 或更早版本中建立的快顯視窗選單

在 Dreamweaver 中，選取觸發快顯視窗選單的連結區或影像。
在「行為」面板 (Shift+F3) 中，按兩下「動作」清單中的「顯示快顯視窗選單」。
在「顯示快顯視窗選單」對話方塊中進行變更，然後按一下「確定」。

指定 Fireworks 原始檔案的啟動和編輯偏好設定

使用 Fireworks 編輯影像時，您放在網頁中的影像，通常是由 Fireworks 從原始 PNG 檔案所轉存。當您在 Dreamweaver 中開啟影像檔進行編輯時，Fireworks 會自動開啟原始 PNG 檔案，如果找不到 PNG 檔時會提示您找出此檔案。如果您願意的話，可以設定 Fireworks 中的偏好設定，讓 Dreamweaver 開啟插入的影像，或是讓 Fireworks 在您每次使用 Dreamweaver 開啟影像時，都提供選項以使用插入的影像檔或 Fireworks 原始檔案。

註解：

Dreamweaver 只有在特定的情況下，才能識別 Fireworks 啟動和編輯偏好設定。更精確的說，您要開啟和最佳化的影像，必須不是 Fireworks 表格的一部分，但是含有前往來源 PNG 檔案的正確「設計備註」路徑。

在 Fireworks 中，請選取「編輯 > 偏好設定」(Windows) 或「Fireworks ＞偏好設定」(Macintosh)，然後按一下「啟動和編輯」索引標籤 (Windows)，或是從快顯視窗選單中選取「啟動和編輯」(Macintosh)。
指定在對置於外部應用程式中的 Fireworks 影像進行編輯或最佳化時，要使用的偏好設定選項：

永遠使用原始 PNG

自動開啟在「設計備註」中定義的 Fireworks PNG 檔案，做為置入影像的來源。原始 PNG 檔案和其對應的置入影像都會進行更新。

永不使用原始 PNG

無論原始 PNG 檔案是否存在，都會自動開啟置入的 Fireworks 影像。只有置入的影像會進行更新。

啟動時詢問

顯示詢問您是否要開啟原始 PNG 檔案的訊息。您也可以從這個訊息指定統一的啟動和編輯偏好設定。

在 Dreamweaver 文件中插入 Fireworks HTML 程式碼

您可以從 Fireworks 使用「轉存」命令，將最佳化影像和 HTML 檔案轉存並儲存到 Dreamweaver 網站資料夾內的位置中。然後您就可以在 Dreamweaver 中插入這個檔案。 Dreamweaver 讓您可以將 Fireworks 產生的 HTML 程式碼，連同相關影像、分割和 JavaScript 一併插入到文件中。

在 Dreamweaver 文件中，將插入點放在您要插入 Fireworks HTML 程式碼的位置上。
請執行下列其中一項作業：
- 選取「插入＞影像物件＞ Fireworks HTML」。
- 在「插入」面板的「常用」類別中，按一下「影像」按鈕，然後從快顯視窗選單選擇「插入 Fireworks HTML」。
按一下「瀏覽」以選取 Fireworks HTML 檔案。
如果不需要繼續使用檔案，請選取「插入後刪除檔案」。選取這個選項並不會影響與這個 HTML 檔案相關的原始 PNG 檔案。

註解：

如果 HTML 檔案是在網路磁碟中，就會被永久刪除，而不是移到「資源回收筒」或「垃圾筒」。
按一下「確定」將 HTML 程式碼及其關聯影像、分割和 JavaScript 插入 Dreamweaver 文件。

將 Fireworks HTML 程式碼貼到 Dreamweaver

要將 Fireworks 產生的影像和表格放在 Dreamweaver 中的快速方式就是：直接將 Fireworks HTML 程式碼複製並貼到 Dreamweaver 文件。

複製並將 Fireworks HTML 程式碼貼到 Dreamweaver

在 Fireworks 中，選取「編輯＞複製 HTML 程式碼」。
依照精靈指示，依序完成轉存 HTML 和影像的設定。出現提示時，請指定要做為轉存影像目的地的 Dreamweaver 網站資料夾。

精靈便會轉存影像到指定的目的地，並且複製 HTML 程式碼到「剪貼簿」。
在 Dreamweaver 文件中，將插入點放在您要貼上 HTML 程式碼的位置，然後選取「編輯 > 將 Fireworks HTML 貼到」。

此時，所有與匯出 Fireworks 檔案相關的 HTML 和 JavaScript 程式碼都會複製到 Dreamweaver 文件，而所有影像的連結也會更新。

轉存並將 Fireworks HTML 程式碼貼到 Dreamweaver

在 Fireworks 中，請選取「檔案＞轉存」。
指定要做為轉存影像目的地的 Dreamweaver 網站資料夾。
在「轉存」快顯視窗選單中，選取「HTML 和影像」。
在「HTML」快顯視窗選單中，選取「複製至剪貼簿」，然後按一下「轉存」。
在 Dreamweaver 文件中，將插入點放在您要貼上轉存 HTML 程式碼的位置，然後選取「編輯＞貼上 Fireworks HTML」。

此時，所有與匯出 Fireworks 檔案相關的 HTML 和 JavaScript 程式碼都會複製到 Dreamweaver 文件，而所有影像的連結也會更新。

更新置入 Dreamweaver 的 Fireworks HTML 程式碼

在 Fireworks 中，更新置入 Dreamweaver 的 Fireworks 檔案的方法，除了啟動和編輯技術之外，另一種就是「檔案＞更新 HTML」命令。您可以使用「更新 HTML」編輯 Fireworks 中的原始 PNG 影像，然後自動更新任何置入 Dreamweaver 文件中的轉存 HTML 程式碼和影像檔案。這個命令甚至可以讓您在未執行 Dreamweaver 時更新 Dreamweaver 檔案。

在 Fireworks 中開啟原始 PNG 檔案，然後進行編輯。
選取「檔案＞儲存」。
在 Fireworks 中，選取「檔案＞更新 HTML」。
瀏覽到包含您要更新的 HTML 的 Dreamweaver 檔案，然後按一下「開啟」。
瀏覽到您要放置更新影像檔案的目標資料夾，然後按一下「選取」(Windows) 或「選擇」 (Macintosh)。

Fireworks 便會更新 Dreamweaver 文件中的 HTML 和 JavaScript 程式碼，Fireworks 也會轉存與這個 HTML 相關的更新影像，並且將影像放置在指定的目標資料夾內。

如果 Fireworks 找不到相符的 HTML 程式碼進行更新，就會出現將新的 HTML 程式碼插入 Dreamweaver 文件中的選項。 Fireworks 會將新程式碼的 JavaScript 區段放在文件的起始處，並且將 HTML 表格或影像連結放在結尾處。

建立網站相簿

Dreamweaver CS5 中已不再支援「建立網站相簿」功能。

更快、更輕鬆地獲得協助

新的使用者？