使用 Fireworks 和 Dreamweaver 可以簡化在 HTML 網頁中編輯、最佳化及放置網頁圖像的工作流程。
Adobe Dreamweaver 版本不支援這項功能。
插入 Fireworks 影像
Dreamweaver 和 Fireworks 可以辨識和共享許多相同的檔案編輯程序, 包括連結的變更、影像地圖、表格分割等。 整合使用時,這兩個應用程式可提供有效率的工作流程,包括 編輯、最佳化以及放置網站圖片檔案到 HTML 頁面中。
您可以使用「插入影像」 命令,將 Fireworks 轉存的圖形直接置入 Dreamweaver 文件中, 或是從 Dreamweaver 影像預留位置建立 新的 Fireworks 圖形。
選取「插入>影像」。
在「插入」面板的「一般」類別中,按一下 「影像」按鈕或將它拖曳到文件中。
如果這個 Fireworks 檔案並不在目前的 Dreamweaver 網站中,將會出現詢問是否要複製檔案到根資料夾的訊息。 按一下「是」。
從 Dreamweaver 中編輯 Fireworks 影像或表格
當您開啟和編輯影像或某個屬於 Fireworks 表格 一部分的影像分割時,Dreamweaver 便會啟動 Fireworks,以開啟該影像或表格所轉存的 PNG 檔案。
這裡假設 Fireworks 已設定為 PNG 檔案的主要影像編輯器。 您也許希望將 Photoshop 設定為 JPEG 和 GIF 檔案的預設編輯器,但 Fireworks 通常也可設定為這些檔案類型的預設編輯器。
當影像是 Fireworks 表格的一部分時,只要 HTML 代碼中存在 <!--fw table--> 註解,您就可以開啟整個 Fireworks 表格進行編輯。如果原始 PNG 檔案是使用 Dreamweaver 樣式的 HTML 和影像設定,從 Fireworks 轉存至 Dreamweaver 網站, Fireworks 表格的註解會自動插入 HTML 程式碼中。
當您選取由 Fireworks 轉存的影像時,「屬性」檢視窗會將選取範圍識別為 Fireworks 影像或表格,並且顯示 PNG 原始檔案的名稱。
在「屬性」檢視窗中按一下「編輯」。
按住 Control (Windows) 或 Command (Macintosh),然後按兩下選取的影像。
以滑鼠右鍵按一下 (Windows) 或 Control+按一下 (Macintosh) 選取的影像,然後從快顯選單中選取「使用 Fireworks 編輯」。
如果 Fireworks 找不到原始檔案,就會出現要您找出 PNG 原始檔案的提示。 當您使用 Fireworks 原始檔案時,變更會同時儲存於原始檔案和轉存檔案中,否則只會更新轉存檔案。
Fireworks 會將變更儲存在 PNG 檔案,轉存更新的影像 (或 HTML 和影像),然後畫面轉回 Dreamweaver。 在 Dreamweaver 中, 便會出現更新的影像或表格。
如需 Dreamweaver 和 Fireworks 整合的教學課程,請參閱 www.adobe.com/go/vid0188_tw。
從 Dreamweaver 最佳化 Fireworks 影像
您可以使用 Dreamweaver 快速變更 Fireworks 影像和動畫。 您可以在 Dreamweaver 中變更最佳化設定、動畫設定以及轉存的影像大小和區域。
選取「命令 > 最佳化影像」
按一下「屬性」檢視窗中的「編輯影像設定」按鈕。
若要編輯最佳化設定,請按一下「選項」 索引標籤。
若要編輯轉存影像的大小和區域,請按一下「檔案」 索引標籤。
使用 Fireworks 修改 Dreamweaver 影像預留位置
您可以在 Dreamweaver 文件中建立預留位置影像,然後啟動 Fireworks 設計圖片影像或 Fireworks 表格來取代它。
若要 從影像預留位置建立新影像,系統中必須安裝 Dreamweaver 和 Fireworks。
在「屬性」檢視窗中按一下「建立」。
按 Control (Windows) 或 Command (Macintosh),然後按兩下影像預留位置。
在影像預留位置上按一下右鍵 (Windows) 或 Control+按一下 (Macintosh), 然後選取「在 Fireworks 中建立影像」。
Fireworks 可以辨認下列的影像預留位置設定值,它們可能是您在 Dreamweaver 中處理影像預留位置時已經設定的:影像大小 (與 Fireworks 畫布大小相關聯)、影像 ID (Fireworks 用來做為 您所建立原始檔案和轉存檔案的預設文件名稱) 和文字對齊。 Fireworks 也能辨認您在 Dreamweaver 中工作時,附加到影像預留位置的連結和特定行為 (例如,調換影像、快顯視窗選單和設定文字)。
雖然 Fireworks 不會顯示您加入影像預留位置中的連結,但是會保留它們。 如果您在 Fireworks 中畫出連結區並加入連結,它並不會刪除您在 Dreamweaver 中加入影像預留位置中的連結;不過,如果您在 Fireworks 中對新的影像畫出分割,它就會在您取代影像預留位置時,刪除 Dreamweaver 文件中的連結。
Fireworks 無法辨認下列影像預留位置設定:影像對齊、顏色、垂直間距和水平間距以及地圖。 它在影像預留位置的「屬性」檢視窗中是停用的。
如果您在將影像預留位置插入 Dreamweaver 文件時有命名,Fireworks 會在「檔案名稱」方塊中顯示該名稱。 您可以變更這個名稱。
便會出現「轉存」對話方塊。 請使用此對話方塊,將影像以 GIF 或 JPEG 檔案格式轉存,如果是分割影像則以 HTML 和影像格式轉存。
「名稱」方塊便會自動顯示您使用的 PNG 檔案名稱。 您可以變更這個名稱。
這樣便會儲存檔案,而畫面也會轉回 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 中編輯選單。
來源 PNG 檔案便會在 Fireworks 中開啟。
Fireworks 便會將已編輯的快顯視窗選單傳送回 Dreamweaver。
如果您在 Fireworks MX 2004 或更早版本中建立快顯視窗選單,就可以使用「顯示快顯視窗選單」對話方塊 (可從「行為」面板中選取),在 Dreamweaver 中編輯它。
編輯在 Fireworks MX 2004 或更早版本中建立的快顯視窗選單
指定 Fireworks 原始檔案的啟動和編輯偏好設定
使用 Fireworks 編輯影像時,您放在網頁中的影像,通常是由 Fireworks 從原始 PNG 檔案所轉存。 當您在 Dreamweaver 中開啟影像檔進行編輯時,Fireworks 會自動開啟原始 PNG 檔案,如果找不到 PNG 檔時會提示您找出此檔案。 如果您願意的話,可以設定 Fireworks 中的偏好設定,讓 Dreamweaver 開啟插入的影像,或是讓 Fireworks 在您每次使用 Dreamweaver 開啟影像時,都提供選項以使用插入的影像檔或 Fireworks 原始檔案。
Dreamweaver 只有在特定的情況下,才能識別 Fireworks 啟動和編輯偏好設定。 更精確的說,您要開啟和最佳化的影像,必須不是 Fireworks 表格的一部分,但是含有前往來源 PNG 檔案的正確「設計備註」路徑。
永遠使用原始 PNG
自動開啟在「設計備註」中定義的 Fireworks PNG 檔案,做為置入影像的來源。 原始 PNG 檔案和其對應的置入影像都會進行更新。
永不使用原始 PNG
無論原始 PNG 檔案是否存在,都會自動開啟置入的 Fireworks 影像。 只有置入的影像會進行更新。
啟動時詢問
顯示詢問您是否要開啟原始 PNG 檔案的訊息。 您也可以從這個訊息指定統一的啟動和編輯偏好設定。
在 Dreamweaver 文件中插入 Fireworks HTML 程式碼
您可以從 Fireworks 使用「轉存」命令, 將最佳化影像和 HTML 檔案轉存並儲存到 Dreamweaver 網站 資料夾內的位置中。 然後您就可以在 Dreamweaver 中插入這個檔案。 Dreamweaver 讓您可以將 Fireworks 產生的 HTML 程式碼,連同相關影像、分割和 JavaScript 一併插入到文件中。
選取「插入>影像物件> Fireworks HTML」。
在「插入」面板的「常用」類別中,按一下 「影像」按鈕,然後從快顯視窗選單選擇 「插入 Fireworks HTML」。
如果 HTML 檔案是在網路磁碟中,就會被永久刪除,而不是移到「資源回收筒」或「垃圾筒」。
將 Fireworks HTML 程式碼貼到 Dreamweaver
要將 Fireworks 產生的影像和表格放在 Dreamweaver 中的快速方式就是:直接將 Fireworks HTML 程式碼複製並貼到 Dreamweaver 文件。
複製並將 Fireworks HTML 程式碼貼到 Dreamweaver
精靈便會轉存影像到指定的目的地,並且複製 HTML 程式碼到「剪貼簿」。
此時,所有與匯出 Fireworks 檔案相關的 HTML 和 JavaScript 程式碼都會複製到 Dreamweaver 文件,而所有影像的連結也會更新。
轉存並將 Fireworks HTML 程式碼貼到 Dreamweaver
此時,所有與匯出 Fireworks 檔案相關的 HTML 和 JavaScript 程式碼都會複製到 Dreamweaver 文件, 而所有影像的連結也會更新。
更新置入 Dreamweaver 的 Fireworks HTML 程式碼
在 Fireworks 中,更新置入 Dreamweaver 的 Fireworks 檔案的方法,除了啟動和編輯技術之外,另一種就是「檔案>更新 HTML」命令。 您可以使用「更新 HTML」編輯 Fireworks 中的 原始 PNG 影像,然後自動更新任何置入 Dreamweaver 文件中的轉存 HTML 程式碼和影像檔案。 這個命令甚至可以讓您在未執行 Dreamweaver 時更新 Dreamweaver 檔案。
Fireworks 便會更新 Dreamweaver 文件中的 HTML 和 JavaScript 程式碼, Fireworks 也會轉存與這個 HTML 相關的更新影像,並且將影像放置在指定的目標資料夾內。
如果 Fireworks 找不到相符的 HTML 程式碼進行更新,就會出現將新的 HTML 程式碼插入 Dreamweaver 文件中的選項。 Fireworks 會將新程式碼的 JavaScript 區段放在文件的起始處,並且將 HTML 表格或影像連結放在結尾處。
建立網站相簿
Dreamweaver CS5 中已不再 支援「建立網站相簿」功能。