製作工作流程原型

藉由「頁面」面板與其他 Fireworks 強大功能的結合,您可以快速地建立互動式網站和軟體原型。若要將製作完成的原型轉換為運作的網站,您只需要將它匯出到 Adobe Flash®、Adobe Flex®、Adobe AIR™ 或 Adobe Dreamweaver® 中即可。

請參閱 Fireworks 開發人員中心的下列文章,以取得製作原型工作流程的一般提示:

如需製作應用程式介面原型的視訊教學課程,請參閱 www.adobe.com/go/lrvid4034_fw_tw

建立頁面

在「頁面」面板中,為您的初始設計建立需要的頁面或畫面數量。隨著設計演進,您可以按照需要增加或去除頁面。

版面常用設計元素

在畫布上,您要在多個頁面中共享的版面設計元素,例如導覽列和背景影像。若要將元素對齊,請使用「智慧型導引線」。為了獲得最多的彈性,請使用 CSS 語言建構您的版面。(請參閱「智慧型導引線」和「建立以 CSS 為基礎的版面」)。

在多個頁面之間共享常用元素

共享常用元素時,單一變更會自動更新所有受影響的頁面。您可以使用主要頁面來共享內含的所有元素或共享圖層,以便複製元素的子集合。(請參閱「使用主要頁面」以及「共享圖層」。)

將唯一的元素加入單一頁面

在每個頁面上,增加唯一的設計、導覽或表格元素。在「通用元件庫」面板上有許多按鈕、文字方塊和彈出式選單,可協助您加速設計過程。在「Flex 元件」、「HTML」、「Mac」、「Win」、「網頁和應用程式」以及「選單列」資料夾中的元件,包含可讓您自訂個別元件實體的屬性。(請參閱「建立和使用元件」。)

利用連結來模擬使用者瀏覽

藉由例如分割、連結區或導覽按鈕等網頁物件,連結您原型中的不同頁面。(請參閱「連結 Fireworks 文件中的頁面」。)

匯出完成的互動原型

Fireworks 可為您的原型提供多種輸出格式,所有這些格式皆可保留導覽頁面的超文字連結。請參閱下列文章:

建立以 CSS 為基礎的版面

您可以在 Fireworks 文件中設計以 CSS 為基礎的版面,然後使用複製版面的 CSS 規則,將它們轉換為 HTML 頁面。以 CSS 為基礎的版面會提供標準方法和跨瀏覽器的易用程式碼。

如需建立以 CSS 為基礎的 HTML 頁面版面之視訊教學課程,請參閱www.adobe.com/go/lrvid4035_fw_tw。此外,也請參閱下列資源:

關於 CSS 頁面版面

Fireworks 會使用分析物件位置的匯出引擎,讓您能夠設計頁面且立即匯出 HTML 和 CSS 程式碼。此外,您也可以設定頁面對齊方式和指定重複的背景影像。

您可以使用可在「通用元件庫」的 HTML 資料夾中取得的 HTML 元素。HTML 資料夾包含 HTML 元素,例如按鈕、下拉式清單物件和文字欄位。您可以使用「元件屬性」面板,編輯這些元素的屬性。當您將任一表格元素拖曳至頁面時,匯出引擎會在匯出以 CSS 為基礎的版面時插入 <form> 標籤。

您已放置分割的任何文字都會以影像的形式出現在匯出的 HTML 上。如果您想讓此文字顯示為文字,請使用「通用元件庫」的 HTML 元件。HTML 元件包含標題 1-6 與連結元素。

以 CSS 為基礎的版面規則

在建立以 CSS 為基礎的版面以得到預期的結果時,您會注意到有幾項規則。

規則 1:使用矩形來將文字和分割匯出成匯出影像

匯出引擎會將放置在矩形中的文字匯出。因為只會匯出矩形分割所涵蓋的影像,所以請將分割放在影像上以將它們匯出。這些分割會「告訴」匯出引擎影像的所在位置。

規則 2:避免物件的重疊

匯出引擎會將文字、影像以及矩形視為矩形區塊。它會檢視這些物件的大小和位置,判斷要在版面上放置它們的邏輯橫列與直行。請謹慎放置物件,不要讓邊界重疊。

規則 3:規劃版面的橫列與直行

匯出引擎會在物件之間或物件的群組之間,尋找空曠且可供放置的邏輯分割。在矩形中包含直行版面,可以避免讓匯出引擎插入邏輯橫列而中斷直行版面。

規則 4:將文件視為平面

當您設計頁面時,請使用矩形來包含要視為矩形子元素的物件。匯出引擎會偵測出這類的父子關係。匯出引擎會根據規則 3 來進行掃描,找出邏輯橫列與直行的子元素。

除這些規則之外,您還會注意到下列情況:

  • 匯出引擎只會匯出原始矩形。若要匯出圓角矩形,請在圓角上放置矩形分割。

  • 若要匯出含筆畫的矩形,請在有筆畫的矩形上放置矩形分割。

  • 若要匯出元件,請在元件上放置矩形分割。

  • 若要匯出您套用到文字或矩形的濾鏡,請在濾鏡上放置矩形分割。

匯出 CSS 版面

Fireworks 可以讓您將建立的版面匯出成以 CSS 為基礎的檔案。接下來,您就可以在 Dreamweaver 或其他與 CSS 相容的編輯器中開啟和編輯這些以 CSS 為基礎的檔案。

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

  2. 從「匯出」彈出式選單中,選擇「CSS 和影像」。

  3. 按一下「選項」以設定 HTML 頁面屬性。

  4. 按一下「瀏覽」以指定背景影像並設定背景影像的拼貼方式:

    • 選取「無重複」,僅顯示一次影像。

    • 選取「重複」,以水平和垂直排列方式重複 (並排) 顯示背景影像。

    • 選取「水平重複」,以水平排列方式顯示影像。

    • 選取「垂直重複」選項,以垂直排列方式顯示影像。

  5. 選取頁面在瀏覽器上的對齊方式:靠左、置中或靠右。

  6. 選取附件的捲動方式為固定或捲動。

  7. 按一下「確定」,然後按一下「儲存」。

建立文件示範

您可以為正在處理的 Fireworks 文件建立示範。該展示會在瀏覽器中開啟,以展示功能預覽功能並讓您瀏覽頁面。

  1. 選取「命令 > 示範目前文件」

  2. 選取您想要建立示範的頁面,然後按一下「建立示範」。

  3. 選取該資料夾,然後按一下「開啟」。

製作 Flex 應用程式原型

Flex 的原型製作程序就如同網站和軟體介面所用的工作流程一樣。(請參閱「製作工作流程原型」。)您可使用 Fireworks 將 Flex 元件拖曳到畫布上、指定其屬性,然後再將產生的使用者介面匯出為 MXML。接下來,您可在 Flex Builder 中美化該使用者介面。

建立 Flex 使用者介面

使用「頁面」面板,為您的初始設計建立需要的介面畫面數量。

將 Flex 設計元件插入版面

在畫布上,將 Flex 資料夾中的 Flex 元件插入「通用元件庫」面板。這些元件可特別搭配 MXML 匯出,確保您能得到預期的結果。當您將文件匯出為 MXML 時,這些文件都會全部轉換成各自的 MXML 標籤。無法識別為 Flex 元件的物件會改成匯出為點陣圖,而這些點陣圖會透過 <mx:Image> 標籤與 MXML 連結。(請參閱「建立和使用元件符號」。

註解:

在 Fireworks 中編輯 Flex 設計元件時,您可以將修改過的 XML 程式碼複製到 Flex 專案中。當您想要在專案中重複修改的元件行為時,這樣可節省時間。

在進行 MXML 輸出時會忽略「游標」、「捲軸」、「索引標籤」和「工具提示」元件,因為這些元件無法直接從 Fireworks 轉換為 MXML。例如,當 Flex 容器實體可捲動時,其中便會自動出現「捲動列」元件。在 Fireworks 中,這些元件只會作為介面設計某部分之運作方式的指示器。

註解:

影像分割、變換和連結區僅適用於以 HTML 為基礎的原型。建立 Flex 原型時,請避開這些網頁物件。

在多個頁面之間共享常用的 Flex 元件

當在多個頁面共享單一 Flex 元件時,一有變更就會自動更新所有影響頁面 (或畫面)。您可以使用主要頁面來共享內含的所有 Flex 元件,或共享圖層來複製元件的子集合。(請參閱「使用主要頁面」以及「共享圖層」。)

指定 Flex 元件的屬性

在「元件屬性」面板 (「Window > 元件屬性」) 中,指定已插入到畫布之各項 Flex 元件的屬性和事件。

將 Flex 版面匯出為 MXML

匯出 Flex 使用者介面版面,並在 Flex 中開啟產生的 MXML 檔案。Fireworks 會匯出所需的 MXML,其中所有的樣式設定和絕對定位都會保留。Flex 開發人員可以使用此介面,而無須在 Flex 中重新建立版面。

編輯 Flex 元件屬性

您可以在「元件屬性」面版中編輯 Flex 元件的屬性和事件。

  1. 在畫布上選取 Flex 元件。

  2. 開啟「元件屬性」面板 (「Window > 元件屬性」)。

  3. 在「元件屬性」面板中設定元件的屬性和事件。

將 Fireworks 文件匯出為 MXML

Fireworks 可啟用匯出通用元件庫資源 (如 Adobe Flex Builder 中使用的已知元件),藉以協助您建立多樣化網際網路應用程式 (RIA) 的版面。Fireworks 會匯出所需的 Flex 程式碼 (MXML),其中所有的樣式設定和絕對定位都會保留。

當完成 Flex 應用程式原型後,將其匯出為 MXML 以供進一步在 Flex Builder 中編輯。在「設計」檢視中,除了沒有匯出的游標和捲軸等元件之外,原型外觀看起來就如同其 Fireworks 副本一樣。

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

  2. 從「匯出」彈出式選單中,選擇「MXML 和影像」。

  3. 如果您要將影像儲存至與 MXML 程式碼不同的資料夾,請選取「將影像放入子資料夾」。

  4. 選取「僅目前頁面」以僅匯出目前選取的頁面。

  5. 按一下「儲存」以完成匯出。

    與原型相關的任何影像都會匯出到影像資料夾。此外,也會與其他影像檔案一併建立完整 MXML 頁面的影像。MXML 頁面不需這些預覽影像,而且可將這些頁面移除。

建立和匯出 Flex 面板

您可以在 Fireworks 中建立 Flex 元件的面板,然後將它們匯出來用於建置以 Flex 為基礎的網站及應用程式介面。

包裝 Flex 元件

您可以根據 Flex 面板範本來建立各種 Flex 元件的面板,並在 Fireworks 中編輯它們。

  1. 選取「命令 > 建立 Flex 面板 > 新增 Flex 面板」。

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

    • 若要為所有可用元件建立 Flex 面板,請選取「多個元件」。

      Fireworks 會以所有可用的 Flex 元件建立單一文件。

    • 若要指定您要為其建立面板的元件,請選取「指定元件」。

      您可以僅選取附加了特定樣式的元件,或選取元件的全部實體。

  3. 按一下「確定」。

匯出 Flex 面板

  1. 選取「命令 > 建立 Flex 面板 > 匯出 Flex 面板」。

  2. 選取您要將 Fireworks 文件匯出到的資料夾,並按一下「開啟」。

MXML 匯出限制

在使用 Flex MXML 匯出功能之前,請務必瞭解其功能與限制:

匯出 MXML 並不會建立元件的面板

在 Flex 中匯出 MXML 並不會建立元件的面板,即使您已在 Fireworks 中修改過這些元件。匯出 MXML 只會產生用於 Flex 的 MXML 文件。這些文件也可能包含無法轉換成 MXML 標籤之 Fireworks 物件的連結影像。這些影像會透過 <mx:Image> 標籤新增到 MXML 文件。

匯出 MXML 時會忽略分割

因為匯出 MXML 可產生以標籤為基礎的文件以用於 Flex,建立影像或表格儲存格時則不會考慮分割。匯出 MXML 建立影像時,會使用文件的最佳化設定來決定影像格式和壓縮方法。

MXML 屬性僅限為豐富元件屬性

MXML 匯出功能是以 Fireworks 中的 Flex 元件作為 MXML 標籤屬性的基礎。Fireworks 會將數量有限的屬性提供給 Flex 元件子集合。

樣式為內嵌

識別為樣式的屬性會與建立的 MXML 標籤分開,但會保留在 <mx:Style> 標籤中的相同 MXML 文件內。Fireworks 無法定義外部 CSS 檔案的樣式。

不支援框架

建立要匯出 MXML 的設計與版面時,請勿使用框架。如果您想要一個文件中有不同的設計,請使用頁面。

製作 Adobe AIR 應用程式原型

Fireworks 的 Adobe® AIR™ 可讓您將 Fireworks 原型轉換為桌面應用程式。例如,某些原型頁面會彼此互動以顯示資料。您可以使用 Adobe AIR 來將此頁面組套成小型應用程式,可安裝在使用者的電腦上。當使用者從桌面執行應用程式時,該應用程式會在其自身的應用程式視窗中載入並顯示原型,而不需瀏覽器。使用者之後便能在電腦本機上瀏覽原型,而不需要網際網路連線。

請參閱 Ethan Eismann 之 Adobe AIR 和品牌體驗的文章:http://www.adobe.com/go/learn_fw_airexperiencebrand_tw

新增 Adobe AIR 滑鼠事件

您可以對文件中的物件新增預先定義的 Adobe AIR 滑鼠事件。Fireworks 提供四個預先定義的滑鼠事件:關閉視窗、拖曳視窗、最大化視窗以及最小化視窗。

  1. 在畫布上選取想要套用滑鼠事件行為的物件。

  2. 選取「命令 > AIR 滑鼠事件」,然後選擇事件。

預覽 Adobe AIR 應用程式

您無需設定任何 Adobe AIR 應用程式參數,便可以預覽 Adobe AIR 應用程式。

  1. 選取「命令 > 建立 AIR 套件」,然後按一下「預覽」。

建立 Adobe AIR 應用程式

  1. 選取「命令 > 建立 AIR 套件」,然後設定下列選項:

    應用程式名稱

    指定使用者安裝應用程式時顯示在安裝畫面上的名稱。副檔名依預設會指定為 Fireworks 網站的名稱。

    應用程式 ID

    為應用程式輸入唯一的 ID。請勿在 ID 中使用空格或特殊字元。有效字元只有 0 到 9、a 到 z、A 到 Z、.(點) 和 - (破折號)。此為必要的設定。

    版本

    指定您應用程式的版本號碼。此為必要的設定。

    程式選單資料夾

    在 Windows 的「開始」選單中指定您想要建立應用程式捷徑的資料夾。(不適用於 Mac OS)

    說明

    增加使用者安裝應用程式時要顯示的應用程式說明。

    版權

    指定在 Mac OS 上安裝 Adobe AIR 應用程式時,要在「關於」資訊中顯示的版權資訊。此資訊不適用於安裝在 Windows 上的應用程式。

    套件內容

    選取「目前文件」,自動選取包含那些檔案的資料夾。

    根內容

    按一下「瀏覽」以選取顯示為根內容的頁面。如果您已選取「目前文件」,便會自動設定根內容。

    內含的檔案

    指定應用程式中要包含的檔案或資料夾。您可以新增 HTML 和 CSS 檔案、影像檔案 和 JavaScript 元件庫檔案。按一下加號 (+) 按鈕來增加檔案,或按一下「資料夾」圖示來增加資料夾。若要刪除清單中的檔案或資料夾,請選取檔案或資料夾然後按一下減號 (-) 按鈕。您選取要包含在 Adobe AIR 套件中的檔案或資料夾,都必須屬於根內容資料夾。

    系統組件區塊及透明

    指定使用者在其電腦上執行應用程式時使用的視窗樣式 (或組件區塊)。系統組件區塊會以作業系統的標準視窗控制圍繞應用程式。使用「透明」組件區塊來消除標準系統組件區塊,並可讓您建立自己的應用程式組件區塊。透明功能可讓您建立非矩形的應用程式視窗。

    寬度與高度

    以像素為單位,指定應用程式視窗開啟時的尺寸。

    選取圖示影像

    按一下即可選取自訂影像作為應用程式圖示。選取用於每個圖示大小的資料夾,並選取您要使用的影像檔案。僅支援 PNG 檔案作為應用程式圖示影像。

    註解:

    選取的自訂影像必須常駐於應用程式網站中,且其路徑必須與網站根目錄相對。

    數位簽名

    按一下「設定」以使用數位簽名簽署應用程式。此為必要的設定。如需詳細資訊,請參閱下列小節。

    套件檔案

    指定要儲存新應用程式安裝程式 (.air 檔案) 的資料夾。預設位置為網站根目錄。按一下「瀏覽」按鈕以選取其他位置。預設檔案名稱是網站名稱再加上副檔名 .air。此為必要的設定。

使用數位憑證簽署 Adobe AIR 應用程式

數位簽名可保障應用程式在由軟體作者建立後,其程式碼未遭變更或毀損。所有 Adobe AIR 應用程式皆需數位簽名,且若沒有簽名便無法進行安裝。

  1. 在「建立 AIR 套件」對話方塊中,按一下「數位簽名」選項旁邊的「設定」按鈕。

  2. 在「數位簽名」對話方塊中,執行下列其中一項:

    • 若要使用預先購買的數位憑證來簽署應用程式,請按一下「瀏覽」按鈕,選取憑證,輸入對應的密碼,然後按一下「確定」。

    • 若要建立專屬的自我簽署數位憑證,請按一下「建立」按鈕並完成該對話方塊。憑證的「金鑰類型」選項會參照憑證的安全等級:1024-RSA 會使用 1024 位元金鑰 (安全性較低),而 2048-RSA 則使用 2048 位元金鑰 (安全性較高)。完成時,請按一下「建立」。然後在「數位簽名」對話方塊中輸入對應的密碼,然後按一下「確定」。

      注意: 您必須已在電腦上安裝 Java® Runtime Environment (JRE)。

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

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