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

來源:互聯網
上載者:User
設計|網頁|網頁設計    八、 建立切片
  我們的基本導航及頁面結構已經建立好了,現在到了增加切片的時候了。Fireworks中的切片是輸出圖形及產生互動的主要參考物件,匯出的文檔將根據切片來將圖形切割成不同的部分,並在瀏覽器中通過表格組裝到一起。同時,所有的互動行為也是通過切片之間的聯絡來產生的,如翻轉圖、快顯功能表等等。
  1、 我們前面建立的按鈕本身已經帶有了自己的切片,因此我們需要對其他對象建立各自的切片。
  2、 建立切片通常使用工具面板中的Slice工具直接繪製 ,但如果想建立精確大小的切片,我們可以選擇對象並執行右鍵菜單中的Insert Slice自動插入切片。
  3、 我們使用工具面板中的Slice工具在頁面中間繪製一個資訊顯示切片,我們將在下一步把導航條的每個按鈕相關資訊顯示在這裡。

  4、 我們增加的切片預設情況下是綠色的半透明對象,它們都放置在Web Layer層上.

   九、 建立拖拽翻轉效果
  1、 單擊"企業概況"按鈕處的切片,此切片中心將出現一個圓形標誌,用滑鼠將其拖動到上一步建立的切片左上方,這將設定一個翻轉效果,在彈出的對話方塊中設定滑鼠滑過時交換為第二幀的內容,如下圖所示:

  2、 重複上述步驟,分別為"企業人才"、"產品展示"兩個按鈕增加翻轉效果,並分別對應第三幀和第四幀。
  3、 我們在後面各幀相同的位置出分別放置對應每個按鈕的解說文字。
  4、 最後的效果如下圖所示:

   十、 建立快顯功能表
  通常我們網站裡的導航資訊必須非常的簡練和實用,只有那些最重要的資訊才出現在導航條中,而更多的導航和內容資訊通常都隱藏起來。對於複雜的展點和多重資訊組織,快顯功能表是分層導航的最有效工具,快顯功能表可以在很小的空間中設定大量的目標選項。Fireworks4新增的建立快顯功能表功能,可以非常容易的實現這種導航結構,我們只需將分層資訊添加到快顯功能表編輯器中,程式會自動產生相應的互動式代碼。
  1、 選擇導覽列上的"產品展示"按鈕,確保Web Layer當前顯示及切片可見。
  2、 點擊此按鈕上切片中心的圓形標誌,從快顯功能表中選擇"Add Pop-up Menu"增加快顯功能表,如下圖所示:

  3、 在彈出的編輯器中輸入如下圖所示內容,在Text和Link輸入框中輸入內容後,點及上部的"+"即可添加新的菜單內容:

  4、 繼續輸入二級菜單內容,選中一個條目後,點擊上部的 可以使當前條目縮排,成為下一級菜單;點擊 可以使當前的條目恢複為上一級菜單。最後的結果入圖所示:

  5、 點擊Next進入下一個設定視窗,在這裡我們可以設定文字的大小,菜單的樣式等屬性,您既可以選擇最終的菜單外觀是標準的HTML格式,或者是Image圖片格式。我們選擇圖片格式,並設定文字大小為10。

  6、 當您選擇了Image格式時,需要在下部的兩個視窗設定Up和Over狀態的菜單樣式,您的懸想也許和我們這裡的不同,這是因為我們使用了自訂的樣式檔案。我們可以根據不同設計項目的需要將自訂的樣式作為快顯功能表的選項。
  7、 我們首先繪製一個最終的快顯功能表的矩形,並設定好需要的填充、描邊和特效。
如下圖:

  8、 開啟Style面板,選中剛才建立的矩形,在Style面板的快顯功能表中選擇New Style建立一個新的樣式,並命名為MyStyle,如下圖:

  此時您的Style面板中已經添加了一個新的樣式。
  9、 選擇Style面板快顯功能表中的Export Styles將剛才的這個自訂樣式輸出到Fireworks目錄裡/Configuration/Nav Menu/,並將它命名為Styles.stl,但要注意必須先將原有的Styles.stl檔案備份。
  10、 我們再次編輯剛才建立的快顯功能表,就可以選擇我們自訂的樣式了。
  11、 按F12預覽產生的快顯功能表,如下圖:

  12、 此時表示二級菜單的小箭頭預設為黑色,所以看不見,我們也可以在最後修改此箭頭樣式和顏色,具體方法參見本書前面章節。

   十一、 建立變形動畫
  給一個網站添加動畫對於訪問者的時間和金錢都是一個不小的花銷,因此在添加您的動畫前,一定要先考慮好如下問題:動畫能否增進您的資訊傳達力度,訪問者下載和播放動畫是否迅速、方便,是否有足夠的組成動畫的內容和資源。儘管網路動畫及其傳遞方式正在不斷的發生改變,但傳統的GIF動畫依然有著不可忽視的優勢,我們在這裡介紹一下建立GIF動畫的兩種途徑。
  1、 在層面板建立一個Logo層,將其置於Web Layer層下方。
  2、 我們需要將背景層修改為一個共用圖層,開啟層面板,切換到背景層,在快顯功能表中選擇Share This Layer,將背景層共用,此層上的內容將在所有幀都可見,此層的後面將出現一個共用表徵圖,如下圖:

  3、 切換到Logo層,在文檔的右上方建立www.karsong.com文字。
  4、 按F8將其轉換為圖形符號Graphic Symbol。
  5、 開啟Effect面板,對此符號的執行個體添加紅色Glow效果,如下圖所示:

  6、 選中此執行個體,在右鍵快顯功能表中執行Edit>Clone,複製出一個新的執行個體,並且帶有相同的Glow特效。
  7、 在Effect面板修改第二個執行個體的特效,將其改為黃色,並改變Glow的範圍和大小,如下圖:

  8、 選擇這兩個執行個體,在右鍵快顯功能表中執行Symbols>Tween Instances建立變形動畫,設定插入幀數為6幀,並勾選Distribute to Frames分布到幀,如下圖所示:

  9、 開啟Web Layer圖層的顯示,在此動畫位置建立一個切片。
  10、 開啟Optimize最佳化面板,設定此切片的類型為Animated GIF,並設定顏色數為32色,如下圖所示:

  11、 此動畫完成,您可以開啟幀面板設定動畫幀之間顯示的時間。

相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。