Fireworks 網頁設計綜合執行個體-4

來源:互聯網
上載者:User
設計|網頁|網頁設計    十二、 建立即時動畫Live Aniamation
  Fireworks4新增了一種即時動畫創作方式,這種方式可以快速的建立一個動畫符號,產生的動畫具有即時編輯效能,及您可以在任意時間修改形成動畫的各種元素屬性。
  1、 在文檔左上方新增一個切片,點擊工具面板最下方的按鈕關閉切片顯示[點擊旁邊的按鈕可以開啟切片顯示]。
  2、 在層面板中切換到Logo層,在剛才的左上方位置處輸入文字"Karsong"。
  3、 選擇此文字對象,按F8快速鍵將其轉換為一個動畫符號,將其命名為"Animate Logo",符號類型為"Animation",如下圖所示:

  4、 在彈出的設定視窗中設定插入幀數為8,並進行如下設定:

  5、 拖動產生的動畫符號中心的小紅點,將其向右拖動到適當位置,注意不要將其拖出剛才建立的切片範圍之外。

  6、 開啟最佳化面板Optimize設定此切片的類型為"Animated GIF",顏色數為32,如下圖所示:

   十三、 最佳化映像
  我們的設計稿基本完成,下面我們需要針對不同對象設定各自的最佳化參數和輸出格式。
  1、 根據不同的輸出品質要求及各部分功能,分別設定各自的切片,注意切片應儘可能劃分整齊、簡單。
  2、 選中左邊人像部分的切片,開啟最佳化面板,設定輸出格式為JPEG,品質為60。
  3、 我們可以切換到2-Up預覽視窗觀察最佳化前後的結果,如下圖所示:

  4、 對於上面建立的兩個動畫,我們已經設定了輸出類型為Animated GIF。
  5、 我們還可以對文檔正中的切片設定為文字切片,及將來輸出時此部分輸出為文字內容。
  6、 選中文檔中間部分的切片,開啟Object面板,在物件類型裡選擇Text,在下部的視窗輸入最終的文字內容。需要注意的是,您在這裡不僅可以輸入普通的文字內容,還可以輸入標準的HTML格式內容,如我們輸入的<center>和<font color="white">。這樣最終的輸出結果將根據這裡的定義自動格式化文本。如下圖所示:

   十四、 輸出HTML檔案到Dreamweaver
  我們的設計文檔已經完成,可以將其輸出為HTML檔案,並轉到Dreamweaver中繼續進行編輯。
  1、 選擇檔案菜單下的Export Preview,開啟輸出最佳化面板,在最佳化面板中,所有沒有使用切片的會自動使用預設的輸出設定。選擇輸出格式為GIF格式,色彩數為128色。
  2、 點擊Export,檔案類型選擇"Html and Images";HTML選項裡選擇"Export HTML File";Slices選項裡選擇"Export Slices"。
  3、 在Option選項中可以進行更詳細的設定,選擇General標籤,確定在HTML style選項中Dreamweaver被選擇。
  4、 切換到Table標籤,在"Space from"中選擇"1-Pixel Transparent SpacerNested Tables"。
  5、 在Empty Cell地區,在快顯功能表中選擇"Spacer Image"。
  6、 切換到Document Specific面板,勾選下部的"Multiple Nav Bar HTML Pages",這樣建會為每個按鈕所對應的欄目輸出各自的頁面。
  7、 點擊確定將檔案輸出。查看輸出的檔案如下圖所示:

   十五、 在Dreamweaver中進行往返表格編輯
  1、 啟動Dreamweaver,在您的輸出檔案夾中開啟剛才輸出的Example.htm在中間的表格單元中選擇文本,並改變其中的內容,在這段文本的最上端加入一句話"企業理念",然後改變文字的顏色為淺灰色。此時文本的樣式如下圖所示:

  2、 選擇整個表格使用文件視窗底部的快速標籤選取器選擇<table>標籤。
  3、 開啟屬性面板,注意此時的屬性面板左上方有Fireworks Table標籤,點擊右下方的Edit編輯按鈕。

  4、 此時會啟動Fireworks4,並開啟Example.png文檔。注意此時文件視窗頂端有"Edit From Dreamweaver"標誌,如下圖所示:

  5、 選中文檔中間的文本切片,開啟Object面板,我們可以看到剛才在Dreamweaver中隊文字所作的修改已經反映在了這裡,相應的HTML代碼也已經添加。如下圖所示:

  6、 我們現在在Fireworks中作一點小修改,在"卡爾松服飾有限公司"下方增加文字"2001.4"。
  7、 點擊文件視窗頂部的"Done"按鈕,這將返回DW,你將看到圖片被更新了,但文檔切片部分的文字格式化資訊依然存在。

   寫在後面的話
  到這裡,我們的這個網頁設計執行個體教程介紹完了。需要指出的是,我們最終輸出的是整個頁面,在Dreamweaver中可編輯的部分只有中間一小部分,但Fireworks能做到的並不僅僅是這樣,作為一個執行個體我們只是介紹了利用Fireworks進行頁面設計時,可以做到的方方面面。但是具體到實際應用,我們應該根據具體的內容設計您的版面,而且儘可能的多利用Fireworks的局部輸出功能,將一個頁面分成多個部分輸出,這樣可以使頁面具有更大的靈活性和可操作性。例如本例我們可以將整個頁面分為上中下三部分單獨輸出,上部的導航條與動畫作為一部分輸出,中間部分還可以分為左右兩部分,下部的著作權資訊可以單獨作為一部分,或者可以在Dreamweaver中輸入單獨的文字。最後將這些單獨輸出的部分在Dreamweaver中利用表格組裝起來,這樣可以最大限度的保持頁面的適應性和靈活性。此外還可以將一些可以作為背景圖片使用的內容以圖片輸出,如頁面主要部分的直線紋理可以單獨輸出為一個背景圖片,並在Dreamweaver中定義為儲存格的背景。

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。