萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Fireworks教程 >> FireWorks--用Fireworks做動態頁在線閱讀

FireWorks--用Fireworks做動態頁在線閱讀


  軟件的更新換代速度越來越快了,新軟件一波接一波——首先是flash5.0開始,然後有Photoshop6.0,再到最近的DreamWeaver4.0和Fireworks4.0,真有點吃不消的感覺。Firewoks4.0令我感到最方便的,就是它加強的Behaviour功能,只用鼠標的簡單拖動,就可以做出眩目的效果來。今天要講的是用Fireworks4.0做出來的一個效果(具體可以看:http://981622.class.netbig.com)。
   首先的第一步當然就是創意,我這裡講的主要是技術上的問題,所以略去構思不講。版面構造如圖一。我這裡用的是WMP7.0版本的一個skin,你也可以找一個一模一樣的來。
   版面構造好以後,就是用slice工具切割了。注意的是必須切換到slice view。我是這樣切割的:首先是五個按鈕,因為一共有五個欄目;然後是顯示欄目內容的黃色背景,我預置了981622幾個藝術字。要注意把其他的空白地方也要搞切圖,這樣整體文件小一些。效果如圖一。


   單擊frame標簽,在三角形中拉出菜單,選擇add frames,在當前frame後添加5個frames(因為一共有5個欄目),然後在每一個frame的黃色背景下添加欄目簡介內容。如圖二。


   好了,回到frame1,單擊第一個按鈕,按鈕中間出現一個符號,然後是最關鍵的一步:把符號拖到黃色背景中,在隨後出現的對話框中選擇frame2。如圖三所視。按鈕到所視區域出現了一條藍色曲線,表示behaviour添加成功。其他的按鈕也是這麼做,依次選擇frame2,3,4,5。


   好了,做了這麼久,應該保存一下,預覽了。按f12(就和dreamweaver一樣),就可以看到作品在浏覽器中的樣子了。
   怎麼輸出到dreamweaver中修改呢?選擇file/export,在對話框中選擇export html file,建議選擇“put images to subfolder”,並把子目錄設置成images,這樣圖片就不會全部保存在根目錄下了。(圖四)


   好了,作為專門設計網頁圖形的fireworks,有這樣的功能比起photoshop已經強大很多了。當然,firewoks還有許多功能,有機會大家一起探討。  


copyright © 萬盛學電腦網 all rights reserved