與 Dreamweaver 搭配使用 Fireworks

Adobe Dreamweaver® 和 Fireworks 能辨識和共享許多相同的檔案編輯功能,包含連結的更改、影像地圖和表格分割。此外,Dreamweaver 和 Fireworks 可以簡化在 HTML 網頁中編輯、最佳化及放置網頁圖像檔案的工作流程。

在 Dreamweaver 檔案中放置 Fireworks 影像

在 Dreamweaver 中插入 Fireworks JEPG 檔案時,會自動計算檔案的品質。某些檔案的數值會是 79。

註解:

使用下列任何程序前,請務必先在「HTML 設定」對話方塊中選取「Dreamweaver」作為 HTML 類型。

使用「檔案」面板將 Fireworks 影像插入 Dreamweaver

  1. 從 Fireworks 將影像匯出到 Dreamweaver 定義的本機網站資料夾。

  2. 開啟 Dreamweaver 文件,並確認您在「設計」檢視中。

  3. 從「檔案」面板將影像拖曳到 Dreamweaver 文件中。

使用「插入」選單將 Fireworks 影像插入 Dreamweaver

  1. 將插入指標放置在您要讓影像出現在 Dreamweaver 文件視窗中的位置。

  2. 請執行下列步驟之一:

    • 選取「插入 > 影像」。

    • 按一下「影像」:「插入」列「常用」類別中的「影像」按鈕。

  3. 瀏覽到您從 Fireworks 匯出的影像,並按一下「確定」。

從 Dreamweaver 的預留位置建立新的 Fireworks 檔案

影像預留位置讓您得以在建立網頁的最終外觀之前,嘗試多種網頁配置。使用影像預留位置指定將要放置在 Dreamweaver 中的 Fireworks 影像大小和位置。

當您從 Dreamweaver 影像預留位置建立 Fireworks 影像時,新的 Fireworks 文件便會建立,其畫布尺寸會與選取的預留位置相同。

註解:

在 Fireworks 中套用的所有行為都會在匯出回 Dreamweaver 時保留。同樣的,套用到影像預留位置的大部分 Dreamweaver 行為也會在以 Fireworks 啟動和編輯時保留。但是有一種例外情況:在 Fireworks 開啟和編輯套用至 Dreamweaver 中的影像預留位置的斷續變換影像時,不會保留這些影像的行為。

一旦結束 Fireworks 的工作階段並返回 Dreamweaver,您建立的新 Fireworks 圖像就會取代原來選取的影像預留位置。

  1. 在 Dreamweaver 中,將您要的 HTML 文件儲存到 Dreamweaver 網站資料夾內的某個位置。

  2. 將插入點放在文件中的需要位置,然後執行下列其中一項:

    • 選取「插入 > 影像物件 > 影像預留位置」。

    • 按一下「影像」:「插入」列上「常用」類別中的「影像」彈出式選單,並選擇「影像預留位置」。

  3. 輸入影像預留位置的名稱、尺寸、顏色和替代文字。

    影像預留位置便會插入 Dreamweaver 文件中。

    影像預留位置
    影像預留位置

  4. 請執行下列步驟之一:

    • 選取這個影像預留位置,並按一下「屬性」檢視窗中的「建立」。

    • 按住 Control 並按兩下 (Windows) 或 Command 並按兩下 (Mac OS) 影像預留位置。

    • 以滑鼠右鍵按一下 (Windows),或按住 Control 並按一下 (Mac OS),然後選擇 Fireworks 中的「建立影像」。

      Fireworks 就會開啟和影像預留位置大小完全相同的空白畫布。「文件」視窗的頂端會指出您目前是從 Dreamweaver 編輯影像。

  5. 在 Fireworks 中建立影像,然後按一下「完成」。

  6. 指定來源 PNG 檔案的名稱和位置。

  7. 指定匯出影像檔案的名稱。

    這些是顯示在 Dreamweaver 中的影像檔。

  8. 指定匯出影像檔案在 Dreamweaver 網站資料夾內的位置,然後按一下「儲存」。

    返回 Dreamweaver 時,新 Fireworks 影像或表格會取代您原來選取的影像預留位置。

    影像預留位置已由新的 Fireworks 影像取代
    影像預留位置已由新的 Fireworks 影像取代

在 Dreamweaver 中放置 Fireworks HTML 程式碼

匯出 Fireworks 檔案至 Dreamweaver 的程序包含兩個步驟。首先,從 Fireworks 直接匯出檔案到 Dreamweaver 網站資料夾。這項操作會在您所指定的位置產生 HTML 檔案和關聯的影像檔案。接下來,使用「插入 Fireworks HTML」功能將 HTML 程式碼放入 Dreamweaver。

  1. 以 HTML 格式匯出 Fireworks HTML 文件。

  2. 在 Dreamweaver 中,將文件儲存在定義的網站中。

  3. 將插入指標放置在您想要所插入的 HTML 程式碼在文件中開始的地方。

  4. 請執行下列步驟之一:

    • 選取「插入>影像物件>Fireworks HTML」。

    • 按一下「影像」:「插入」列上「常用」類別中的「影像」彈出式選單,並選擇「Fireworks HTML」。

  5. 在出現的對話方塊中,按一下「瀏覽」以選擇您要的 Fireworks HTML 檔案。

  6. (選擇性) 完成這項操作後,請選取「插入後刪除檔案」,將 HTML 檔案移動到「資源回收筒」(Windows) 或永久刪除它 (Mac OS)。

    這個選項不會影響與 HTML 檔案相關的來源 PNG 檔案。

  7. 按一下「確定」將 HTML 程式碼及其關聯影像、分割和 JavaScript 插入 Dreamweaver 文件。

複製 Fireworks HTML 程式碼以使用於 Dreamweaver

當您將 Fireworks HTML 程式碼複製到剪貼簿時,所有與這個 Fireworks 文件關聯的 HTML 和 JavaScript 程式碼都會複製到 Dreamweaver 文件,影像會匯出到您指定的位置,Dreamweaver 則會以連結到這些影像的文件相關連結來更新 HTML。

註解:

這個方法只能使用於 Dreamweave,不能使用於其他 HTML 編輯器。

  1. 在 Fireworks 中複製 HTML 到剪貼簿,然後將它貼入 Dreamweaver 文件。

註解:

您也可以在 Dreamweaver 中開啟匯出的 Fireworks HTML 檔案,然後將您要的部分複製並貼上另一份 Dreamweaver 文件。

更新匯出到 Dreamweaver 的 Fireworks HTML

註解:

在處理匯出到 Dreamweaver 的 HTML 時,「交互 HTML」具有許多優點。(請參閱「關於交互 HTML」。)

  1. 在 Fireworks 中更改 PNG 文件。

  2. 選取「檔案 > 更新 HTML」。

  3. 瀏覽到包含您要更新的 HTML 的 Dreamweaver 檔案,然後按一下「開啟舊檔」。

  4. 瀏覽到您想要放置更新的影像檔案的資料夾,然後按一下「開啟」。

    Fireworks 便會更新 Dreamweaver 文件中的 HTML 和 JavaScript 程式碼,而且也會匯出與 HTML 關聯的更新影像,並將影像放置在指定的目標資料夾內。

    註解:

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

匯出 Fireworks 檔案至 Dreamweaver 圖庫

圖庫項目就是在您的網站根目錄中 Library 資料夾中 HTML 檔案的一部分。圖庫項目在 Dreamweaver 的「資源」面板中會顯示為類別。在 Dreamweaver 中,圖庫項目簡化了常用網頁組件的編輯和更新。您可以從「資源」面板將圖庫項目 (具有副檔名 .lbi 的檔案) 拖曳到網站的任何頁面。

您無法直接在 Dreamweaver 文件中編輯圖庫項目;您只能編輯主要的圖庫項目,然後讓 Dreamweaver 更新該項目在網站各處的每個複本。Dreamweaver 圖庫項目很類似 Fireworks 的元件;對主要圖庫 (LBI) 文件所做的更改都會反映在整個網站中的所有圖庫實體。

註解:

Dreamweaver 圖庫項目不支援彈出式選單。

  1. 選取「檔案 > 匯出」。

  2. 從「匯出」彈出式選單中選取「Dreamweaver 圖庫」。

    在 Dreamweaver 網站中選取或建立名為 Library 的資料夾作為檔案位置。此名稱必須區分大小寫。

    註解:

    除非將匯出的檔案儲存到 Library 資料夾,否則 Dreamweaver 無法辨識它是否為圖庫項目。

  3. 輸入檔案名稱。

  4. (選擇性) 如果您的影像包含分割,請選擇分割選項。

  5. 選取「將影像放入子資料夾」來選擇儲存影像的個別資料夾。

  6. 按一下「儲存檔案」。

從 Dreamweaver 編輯 Fireworks 檔案

「交互 HTML」功能可緊密整合 Fireworks 和 Dreamweaver。它讓您在一個應用程式中進行更改,然後將這些更改完整的反映到另一個應用程式中。

關於交互 HTML

Fireworks 可以辨識和保留在 Dreamweaver 中對文件所做的大多數編輯類型,包括 HTML 分割中的更改連結、編輯的影像地圖、編輯的文字和 HTML,以及 Fireworks 和 Dreamweaver 之間共享的行為。Dreamweaver 中的「屬性」檢視窗可協助您在文件中辨識 Fireworks 產生的影像、表格分割及表格。

Fireworks 支援大多數的 Dreamweaver 編輯類型。不過在 Dreamweaver 中對表格結構的大量更改,可能會導致兩個應用程式間產生無法協調的差異。在大量更改表格配置時,請使用 Dreamweaver 的啟動和編輯功能來編輯 Fireworks 中的表格。

註解:

Dreamweaver 利用 Fireworks 技術提供基本的影像編輯功能,讓您能夠修改影像而不需要啟動外部影像編輯應用程式。Dreamweaver 影像編輯功能只適用於 JPEG 和 GIF 影像檔案格式。

編輯置入 Dreamweaver 的 Fireworks 影像

註解:

在從 Dreamweaver 編輯 Fireworks 圖像之前,請先執行一些預備工作。如需詳細資訊,請參閱「設定啟動和編輯選項」。

  1. 在 Dreamweaver 中,選擇「視窗 > 屬性」以開啟「屬性」檢視窗。

  2. 請執行下列步驟之一:

    • 選取您要的影像(「屬性」檢視窗會將這個選取項目識別為 Fireworks 影像,並顯示影像的已知 PNG 來源檔案名稱)。然後在「屬性」檢視窗中按一下「編輯」。

    • 按住 Control 並按兩下 (Windows) 或按住 Command 並按兩下 (Mac OS) 想要編輯的影像。

    • 以滑鼠右鍵按一下 (Windows) 或按住 Control 並按一下 (Mac OS) 想要的影像,然後從快顯選單選擇「使用 Fireworks 編輯」。

  3. 如果出現提示,請指定是否要指出置入影像的來源 Fireworks 檔案。

  4. 在 Fireworks 中編輯影像。

    您所套用的編輯會保留在 Dreamweaver 中。

  5. 按一下「完成」使用目前的最佳化設定匯出影像,並更新 Dreamweaver 使用的 GIF 或 JPEG 檔案。如果選取了來源檔案,也會儲存 PNG 來源檔案。

    註解:

    當您從 Dreamweaver 的「網站」面板中開啟影像時,在 Dreamweaver「偏好設定」中設定的預設編輯器就會開啟這個檔案。當影像從這個位置開啟時,Fireworks 不會開啟原始 PNG 檔案。若要使用 Fireworks 整合功能,請從 Dreamweaver 的「文件」視窗內開啟影像。

編輯置入 Dreamweaver 的 Fireworks 表格

註解:

在從 Dreamweaver 編輯 Fireworks 表格之前,請先執行一些預備的啟動和編輯工作。如需詳細資訊,請參閱「設定啟動和編輯選項」。

  1. 在 Dreamweaver 中,選擇「視窗 > 屬性」以開啟「屬性」檢視窗。

  2. 請執行下列步驟之一,在文件視窗中開啟來源 PNG 檔案:

    • 在表格內按一下,然後按一下狀態列中的 TABLE 標記以選取整個表格。(「屬性」檢視窗會將這個選取範圍識別為 Fireworks 表格,並顯示表格的已知 PNG 來源檔案名稱)。然後在「屬性」檢視窗中按一下「編輯」。

    • 選取表格中的影像,然後按一下「屬性」檢視窗中的「編輯」。

    • 以滑鼠右鍵按一下 (Windows) 或按住 Control 並按一下 (Mac OS) 影像,然後從快顯選單中選擇「使用 Fireworks 編輯」。

  3. 在 Fireworks 中進行編輯。

    Dreamweaver 會辨識並保留在 Fireworks 中套用到表格的所有編輯動作。

  4. 編輯完表格之後,請在文件視窗中按一下「完成」。

    這個表格的 HTML 和影像分割檔案會使用目前的最佳化設定匯出,放置在 Dreamweaver 中的表格會更新,而 PNG 來源檔案也會儲存。

    註解:

    如果讓原始的 Fireworks 產生的表格內有另一個表格形成巢狀,並嘗試使用 Dreamweaver 中的「交互編輯」來編輯表格,就可能出現一項 Dreamweaver 錯誤。如需詳細資訊,請參閱 Adobe 網站上的 TechNote 19231。

關於支援與不支援的 Dreamweaver 行為

如果將單一、未分割的 Fireworks 圖像插入到 Dreamweaver 文件,並套用 Dreamweaver 行為,則在 Fireworks 中開啟和編輯這個圖像時,圖像的頂端就會出現分割。這個分割起初是不可見的,因為當您開啟和編輯已套用 Dreamweaver 行為的單一、未分割影像時,分割會自動關閉。只要從「圖層」面板的「網頁圖層」開啟分割的可見性,您仍然可以檢視這個分割。

當您在 Fireworks 中檢視附加了 Dreamweaver 行為的分割的屬性時,「屬性」檢視窗中的「連結」文字方塊中可能會顯示 javascript:;。刪除這項文字是無害的。需要的話,您也可以在此輸入 URL,返回 Dreamweaver 之後,行為依然會保持原樣。

當您從 Dreamweaver 使用「交互 HTML」時,Fireworks 會支援伺服器端檔案格式 (例如 CFM 和 PHP)。

Dreamweaver 支援在 Fireworks 中套用的所有行為,其中也包括變換影像和按鈕所需要的行為。

註解:

Dreamweaver 圖庫項目不支援彈出式選單。

在進行啟動和編輯工作階段時,Fireworks 支援下列的 Dreamweaver 行為:

  • 簡易變換影像

  • 調換影像

  • 復原調換影像

  • 設定狀態列文字

  • 設定導覽列影像

  • 彈出式選單

註解:

Fireworks 不支援非原生行為,這些包括伺服器端行為。

最佳化放置於 Dreamweaver 中的 Fireworks 影像和動畫

更改置入 Dreamweaver 的 Fireworks 影像的最佳化設定

  1. 在 Dreamweaver 中選取影像,然後執行下列其中一項:

    • 選取「命令 > 最佳化影像」。

    • 按一下「屬性」檢視窗中的「最佳化」按鈕。

    • 按一下滑鼠右鍵 (Windows) 或按住 Control 並按一下 (Mac OS),再從彈出式選單中選擇「使用 Fireworks 最佳化」。

  2. 如果出現提示,請指定是否要為置入的影像開啟 Fireworks 來源檔案。

  3. 在「匯出預覽」對話方塊中進行編輯:

    • 若要編輯最佳化設定,請按一下「選項」索引標籤。

    • 若要編輯匯出影像的大小和區域,請按一下「檔案」索引標籤。如果您在 Fireworks 中更改影像尺寸,返回 Dreamweaver 之後也必須在「屬性」檢視窗中重設影像大小。

    • 若要編輯影像的動畫設定,請按一下「動畫」索引標籤。

  4. 完成影像編輯後,按一下「確定」匯出影像、在 Dreamweaver 中更新影像並儲存 PNG。

    如果您更改影像的格式,Dreamweaver 連結檢查程式會提示您更新影像的參考。

更改動畫設定

如果是在開啟和最佳化 GIF 動畫檔案,您也可以編輯動畫設定。「匯出預覽」對話方塊中的動畫選項與 Fireworks「狀態」面板中提供的選項類似。

註解:

若要編輯 Fireworks 動畫中的個別圖像元素,您必須開啟並編輯 Fireworks 動畫。

設定啟動和編輯選項

若要有效的使用「交互 HTML」,您必須執行一些預備的工作,例如在 Dreamweaver 中設定 Fireworks 為主要的影像編輯器、在 Fireworks 中指定啟動和編輯偏好設定,以及在 Dreamweaver 中定義本機網站。

設定 Fireworks 為 Dreamweaver 的主要外部影像編輯器

Dreamweaver 提供自動啟動特定應用程式來編輯特定檔案類型的偏好設定選項。若要使用 Fireworks 的啟動和編輯功能,請務必在 Dreamweaver 中將 Fireworks 設定為 GIF、JPEG 和 PNG 檔案的主要編輯器。

註解:

只有在從 Dreamweaver 啟動 Fireworks 有問題時,才需要設定這項偏好設定。

  1. 在 Dreamweaver 中,選擇「編輯 > 偏好設定」,然後選擇「檔案型態/編輯器」。

  2. 在「副檔名」清單中,選取網頁影像檔案的副檔名 (.gif、.jpg 或 .png)。

  3. 在「編輯器」清單中,選取「Fireworks」。如果 Fireworks 不在清單中,請按一下「加號」(+) 按鈕,找出硬碟上的 Fireworks 應用程式,然後按一下「開啟」。

    Dreamweaver 偏好設定
    Dreamweaver 偏好設定

  4. 按一下「設為主要的」。

  5. 重複步驟 2 到步驟 4,將 Fireworks 設定為其他網頁影像檔案類型的主要編輯器。

設定 Fireworks 來源檔案的啟動和編輯偏好設定

Fireworks 啟動和編輯偏好設定可讓您指定在從另一個應用程式開啟 Fireworks 時,處理來源 PNG 檔案的方式。

只有在您所開啟和最佳化的影像不是 Fireworks 表格的一部分,而且不包含正確通往來源 PNG 檔案的「設計備註」路徑時,Dreamweaver 才會辨識 Fireworks 的啟動和編輯偏好設定。在其他所有情況 (包括所有與 Fireworks 影像有關的啟動和編輯) 中,Dreamweaver 都會自動開啟來源 PNG 檔案,並在找不到這個檔案時,提示您找出來源檔案。

  1. 在 Fireworks 中,請選擇「編輯 > 偏好設定」(Windows) 或「Fireworks > 偏好設定」(Mac OS)。

  2. 按一下「啟動和編輯」類別,並視需要設定選項。

    如需詳細資訊,請參閱「啟動和編輯偏好設定」。

關於設計備註和來源檔案

每當您從儲存的來源 PNG 檔案匯出 Fireworks 檔案到 Dreamweaver 網站時,Fireworks 就會寫入包含 PNG 檔案相關資訊的「設計備註」。當您從 Dreamweaver 內開啟和編輯 Fireworks 影像時,Dreamweaver 會使用「設計備註」來找出該檔案的來源 PNG。若要獲得最佳效果,請記得永遠將 Fireworks 來源 PNG 檔案和匯出檔案儲存在 Dreamweaver 網站中。這項操作可以確保共享這個網站的任何使用者,從 Dreamweaver 內啟動 Fireworks 時都能找到來源 PNG。

使用「檔案管理」按鈕傳送網站檔案

「檔案管理」按鈕  位於文件視窗的頂端,可讓您輕鬆存取檔案傳輸命令。如果您的文件是在 Dreamweaver 網站資料夾中,而且這個網站能夠存取遠端伺服器,請使用此按鈕。若要讓 Fireworks 將資料夾辨識為網站,請使用 Dreamweaver 中的「管理網站」對話方塊,將目標資料夾 (或包含目標資料夾的資料夾) 定義為網站的本機根資料夾。

註解:

在使用 Fireworks 的存回與取出選項之前,請先選取文件所在 Dreamweaver 網站的「啟用檔案存回和取出」選項。

下載

會將檔案的遠端版本複製到本機網站,並以遠端的複本覆寫本機的檔案。

取出

會將檔案取出,並以遠端版本覆寫本機的檔案。

上傳

會將檔案的本機版本複製到遠端網站,並以本機複本覆寫遠端檔案。

存回

會將檔案存回,並以本機複本覆寫遠端檔案。

還原取出

會還原本機檔案的「取出」動作,並將該檔存回,以遠端複本覆寫本機檔案。

註解:

文件所在的 Dreamweaver 網站資料夾必須已經定義遠端伺服器,才會在 Fireworks 啟用「檔案管理」命令。Fireworks 的「檔案管理」命令,只能對使用「本機/網路」和 FTP 傳輸方法的網站中的檔案使用。使用 SFTP 或協力廠商傳輸方法 (如 SourceSafe、WebDAV 和 RDS) 的網站中的檔案,都不能從 Fireworks 內部對遠端伺服器來回傳送。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策