使用 Fireworks 頁面製作網站和介面的原型

一個 Fireworks PNG 檔可以包含多個頁面,是製作網站和應用程式介面原型時的最佳工具。每個頁面對於畫布大小和色彩、影像解析度及導引線皆有獨特的設定。您可以為各頁面個別設定這些選項,也可以全域套用至文件中的所有頁面。除了網頁圖層以外,每一個頁面也包含唯一的一組圖層。不過,對於常用元素您可以使用主要頁面或是在多個頁面間共享圖層。(請參閱「共享圖層」。)

註解:

如果您沒有建立任何頁面,您的文件的所有元素都會保留在單一頁面中。

您可在「頁面」面板中檢視頁面,每頁的物件將在頁面名稱旁邊以縮圖顯示。作用中的頁面在面板中會反白標示,並在作用中文件上方的頁面彈出式選單中顯示。

如需有關匯出頁面的詳細資訊,請參閱「從工作區域匯出

影片

使用 Fireworks 或 Photoshop 建立高擬真度原型 (00:01:17)

獲得您如何可以使用 Fireworks 或 Photoshop 建立高擬真度原型的簡短概觀。

Jim Babbage 編著

新增、刪除和瀏覽頁面

使用「頁面」面板,您可新增頁面、刪除頁面和重製現有頁面。當您新增、刪除或移動頁面時,Fireworks 會自動更新頁面標題左邊的數字。這些自動產生的數字可協助您在大型的多頁面設計中快速瀏覽到特定的頁面。

新增頁面

頁面清單的末端將插入一頁空白頁面,然後成為作用中的頁面。

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

    • 在「頁面」面板,按一下「新增/重製頁面」按鈕。

    • 在面板上按一下滑鼠右鍵,然後從彈出式選單中選擇「新頁面」。

    • 選取「編輯 > 插入 > 頁面」。

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

    • 在「頁面」面板中選取一個頁面。

    • 在鍵盤上,使用 Page Up 和 Page Down 鍵。

    • 在文件視窗的頂端或是「頁面」面板右下角的頁面彈出式選單中選擇頁面。

    註解:

    頁面彈出式選單中的頁面名稱旁邊若標示星號,表示其為主要頁面。

重製頁面

執行重製會新增一個新頁面,其中包含與目前選取頁面相同的物件和圖層階層。重製的物件會保留原始物件的不透明度和混合模式。您可以更改重製的物件,而不影響原始物件。

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

    • 將頁面拖曳至「新增/重製頁面」按鈕。

    • 在頁面上按一下滑鼠右鍵,然後從彈出式選單中選取「重製頁面」。

移動一或多個頁面

在「頁面」面板中,移動頁面以便集合相關的設計並加速版面製作過程。

  1. (選擇性) 如果您正要移動多個頁面,請執行下列其中一個動作:

    • 按住 Shift 並按一下這些頁面,藉此可選取連續的群組。

    • 按住 Ctrl 並按一下 (Windows) 或是按住 Command 並按一下 (MAc OS) 這些頁面來選取不連續的群組。

  2. 在面板中往上或往下拖曳所選取的頁面。在其他頁面的上方或下方會出現深色的邊框,您可以在那裡放開滑鼠以便移動選取的頁面。

刪除頁面

所刪除頁面上方的頁面會變成作用中的頁面。

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

    • 在「頁面」面板中,將頁面拖曳至垃圾筒圖示

    • 在頁面上按一下滑鼠右鍵,然後從彈出式選單中選取「刪除頁面」。

編輯頁面畫布

每一頁都有唯一的畫布,使用獨立的畫布大小、色彩和影像解析度。

  1. 從「頁面」面板或從文件視窗頂端的頁面彈出式選單選取頁面。

  2. 選取「修改 > 畫布 > 影像大小」,「修改 > 畫布 > 畫布顏色」,或「修改 > 畫布 > 畫布大小」。

  3. 進行變更。在選取頁面的畫布後,也可使用「屬性」面板進行這些更改。

  4. 若只要將更改套用至選取的頁面,請選取「只有目前頁面」選項。若要將更改套用至所有頁面,請取消選取該選項。

使用主要頁面

若要在有頁面中使用同一組元素,請使用主要頁面。當您將一般頁面轉換為主要頁面後,一般頁面會移至「頁面」面板中清單的頂端。建立主要頁面後,每個頁面的圖層階層底部都會增加「主要頁面圖層」。

建立主要頁面

  1. 在「頁面」面板中,在現有頁面上按一下滑鼠右鍵,然後從彈出式選單中選擇「設成主要頁面」。

多個頁面間共享的任何圖層都會變成一般 (非共享) 圖層。不過,框架之間共享的圖層則維持原樣。要在連結的頁面顯示主要頁面框架,請參閱「檢視某狀態的物件」。

建立主要頁面之後,任何新建立的頁面都會自動繼承主要頁面的設計。現有頁面不會繼承這些設計,除非您將那些頁面連結至主要頁面。如果您之後變更主要頁面,所有連結的頁面都將自動更新。

下列限制適用從主要頁面繼承到其他頁面的物件和行為:

  • 頁面只會繼承主要頁面中所有物件的目前狀態。若要繼承各頁面上所有物件的所有狀態,請使用狀態的最高數目來新增相等或更多的狀態到物件中。該頁面的所有物件會繼承主要頁面的所有狀態。

  • 變更一個頁面的畫布大小或影像大小會影響所有頁面,包括未連結至主要頁面的頁面。若要限制僅變更目前頁面,請選取「僅目前頁面」。

  • 只有連結的頁面會繼承主要頁面的畫布顏色變更。

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

    • 在「頁面」面板中,在頁面按一下滑鼠右鍵,然後從彈出式選單中選擇「連結至主要頁面」。

    • 在「頁面」面板中,按一下頁面縮圖左側的欄位。連結圖示表示該頁面已連結至主要頁面。

      注意: 當您變更連結至主要頁面之頁面的設定,新的設定會生效,但將中斷與主要頁面的連結。

顯示或隱藏主要頁面圖層

可見性的變更將反映在所有頁面上。

  1. 在「圖層」面板中,按一下主要頁面圖層左邊的眼睛圖示。

移除主要頁面圖層

  1. 在「圖層」面板按一下滑鼠右鍵,然後從彈出式選單選取「移除主要頁面圖層」。

若要將主要頁面圖層加回頁面,請在「圖層」面板按一下滑鼠右鍵,然後從彈出式選單選取「增加主要頁面圖層」。

將主要頁面變更回一般頁面

  1. 在「頁面」面板上按一下滑鼠右鍵,然後從彈出式選單中選擇「重設主要頁面」。

匯出選取的頁面

您可以在單一步驟匯出多個頁面。只會匯出選取的頁面。匯出頁面時,為個別頁面指定的最佳化設定會用於匯出檔案。

  1. 在「頁面」面板中,選取您要匯出的頁面。

  2. 按一下滑鼠右鍵,然後選取「匯出選取的頁面」。

  3. 在「匯出」對話框中,從「匯出」選單選取其中一個選項:

    圖層至檔案

    將所選頁面中的圖層匯出為個別檔案。

    狀態至檔案

    將所選頁面中的狀態匯出為個別檔案。

    頁面至檔案

    將選取的頁面匯出為個別檔案。

在匯出頁面時自訂檔案名稱

  1. 在「頁面」面板中,選取您要匯出的頁面。

  2. 按一下滑鼠右鍵,然後選取「匯出選取的頁面」。

  3. 在「匯出」對話框中,按一下「選項」。「選項」按鈕會依「匯出」選單中所選取的選項而啟動。

  4. 在「匯出選項」對話框中,選取「增加字首」或「增加字尾」,然後從選單選取選項。您可以使用下列任何選項來命名檔案:

    doc.name

    來源檔案名稱會增加成字首或字尾。例如,如果您使用「增加字首」選項,從來源檔案 sites.png 匯出具有名稱索引的頁面,會產生名為 Sites_Index.gif 的檔案。

    數值 (1, 2, 3...或 01, 02, 03...)

    檔案會依數值順序產生並且將該編號增加至字首或字尾。所有匯出的頁面檔案都會按照在頁面面板中的顯示順序加以編號。匯出許多頁面時,請使用雙位數的順序。

  5. 使用「檔案類型」選單中的選項,將匯出檔案的設定最佳化。

匯出所選頁面中的分割

匯出檔案時,會忽略來源檔案中的分割。若要匯出分割,請使用「匯出」對話框中的下列設定。

  1. 在「匯出」選單中,選取「HTML 和影像」或是「只有影像」。

  2. 在「HTML」選單中,選取「匯出 HTML 檔案」。

  3. 在「分割」選單中,選取「匯出分割」。

  4. 選取下列其中一個選項:

    只有選取的分割

    同時也會匯出標示為分割的區域。

    包含不含分割的區域

    同時也會匯出未標示為分割的區域。

多頁預覽

匯入或開啟檔案時,預覽主要頁面以外的所有頁面。開啟檔案時,預覽時所選取的頁面會變成焦點頁面。

從主要圖層插入含有物件的頁面時,主要頁面會轉換成一般圖層並加以匯入。

啟動多頁預覽

匯入或開啟檔案時,預覽檔案中的所有頁面。在「偏好設定」對話框中預設會啟動多頁預覽選項。

若要為在舊版中所建立的檔案啟動多頁預覽,請在目前的版本中開啟並儲存檔案。

  1. 在「偏好設定」對話框中,選取「一般」。

  2. 選取「儲存每頁縮圖」以啟動多頁預覽。如果停用此選項,會儲存頁面名稱,但是不會產生這些檔案的縮圖。

開啟或匯入頁面之前先預覽頁面

  • 在 Windows 中,當您匯入或開啟檔案時,會在「匯入」或「開啟」對話框中顯示預覽。

  • 在 Mac 中,按一下「開啟」或「匯入」對話框中的「預覽」。或者,您可以按兩下「匯入」對話框中的檔案,進入「預覽」模式。

    匯入檔案時,選取「在目前頁面後插入」以在文件中目前所選取的頁面後新增匯入頁面。

更快、更輕鬆地獲得協助

新的使用者?