用Dreamweaver實(shí)現(xiàn)漫天花雨效果_Dreamweaver教程
Dreamweaver之所以能夠超過Frontpage而成為網(wǎng)頁設(shè)計(jì)師的首選設(shè)計(jì)工具,在于它對DHTML的強(qiáng)大設(shè)計(jì)功能,上面所說的效果,其實(shí)是DHTML的一種。但是使用Dreamweaver,你無須去編寫冗長的代碼,在DW的窗口里幾個(gè)拖放,就能輕松搞定。
首先用Firework或Imageready一類的軟件制作出幾幅動(dòng)態(tài)的GIF花瓣圖片來。以ImageReady3.0為例子。按Ctrl N 新建一個(gè)文件,大小100*100左右,背景色可根據(jù)網(wǎng)頁的背景自行設(shè)定。按Ctrl Shift N新建一層,取名Flower1,用勾畫工具(Polygonal Lasso Tool),勾畫出一個(gè)花瓣的外形,如圖1所示。然后將前景色設(shè)為粉紅色(顏色代碼為:FF99FF),按Edit / Fill 填充,然后在層面版的Flower1上按右鍵,選擇Layer Style / Stroke ,如圖2所示。在彈出的Stroke面板里的選擇色彩的地方選擇一個(gè)比剛才的粉紅略深的顏色,(顏色代碼為:C764B4),Size選擇為1,這樣花瓣就被描邊,看上去更真實(shí)一些。這樣一個(gè)花瓣就制作完成了。
圖1
圖2
下面我們來讓花瓣動(dòng)起來。將Flower1復(fù)制一層,在層上按右鍵,選擇Duplicate Layer。取名為Flower2。打開Imageready的動(dòng)畫面板,操作方式為:Window / Show Animation,出現(xiàn)如圖3的動(dòng)畫面板。按下最下面一排倒數(shù)第二個(gè)按紐,新建一個(gè)動(dòng)畫影格。回到并選中第一影格的位置,在層面板上將Flower2層隱藏。操作方式為單擊層前的那個(gè)眼睛,如圖4所示。
圖3
圖4
然后在動(dòng)畫面板上,選中第二影格的位置,回到層面板,顯示Flower2層,隱藏Flower層。然后選中Flower2層,按Ctel T,這時(shí)花瓣處于自由變換狀態(tài),可以用鼠標(biāo)左右上下移動(dòng)來改變花瓣的外形。如圖5所示。
圖5
將第二影格所顯示的Flower2層的花瓣用自由變換做一點(diǎn)小的變化。然后再用上面所講述的方法,新建第三影格和Flower3層,再用自由變換做一些小的變化,依次可以做6層左右,注重最后一個(gè)影格與第一個(gè)影格的連續(xù)性。每一個(gè)影格里只能顯示相對的圖層,其余的圖層要隱藏起來。
做完后,在動(dòng)畫面板里,按住Ctrl鍵,將所有的影格全部選中,然后在0 sec的地方按右鍵選擇每一個(gè)影格之間的間隔時(shí)間,建議不要超過0.1秒。這樣一個(gè)花瓣的動(dòng)畫就完成了。可以按動(dòng)畫面板上的播放鍵(那個(gè)三角形)來觀看你做的動(dòng)畫花瓣。花瓣不規(guī)則的在原地變換移動(dòng),按上述的方法做幾張大的,在100*100px,90*90px左右,用于近處的花瓣;也做幾張小的,在60*60px左右,用于遠(yuǎn)處的花瓣。可以在Imageready里做好一個(gè)動(dòng)畫,然后使用翻轉(zhuǎn)功能(EDIT / Transform /),讓圖片不同角度的翻轉(zhuǎn),出現(xiàn)的就是不同角度的變化,這樣在做最后的效果的時(shí)候,就可以避免花瓣的單一性。
打開Dreamweaver,按Ctrl N新建一個(gè)Html文檔。然后按Insert / Layer,插入一個(gè)圖層,取名為“flower1”,在圖層中按Insert Image,插入我們剛才所做的那幾幅圖片中的一幅,將圖層的大小變得和圖片的大小一樣,點(diǎn)擊選中該圖層(選中后一定要是圖6的樣子才是選中了圖層),確定選中圖層而不是圖片,然后選擇 Modify / Timeline / Add object to Timeline,此時(shí)該圖層會(huì)加入等時(shí)線,這時(shí)候等時(shí)線上會(huì)出現(xiàn)兩個(gè)空心的句號樣的圓圈,用直線連接起來,兩個(gè)圓圈表示是要害影格,確定了花瓣移動(dòng)的軌跡。如圖7所示。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver開發(fā)ASP實(shí)例視頻教程復(fù)雜站內(nèi)搜索
- 表格邊框魔鬼教程
- 入門:Dreamweaver8設(shè)計(jì)網(wǎng)頁背景實(shí)例講解
- Dreamweaver網(wǎng)頁制作教程:發(fā)布網(wǎng)站
- 用戶登錄的實(shí)現(xiàn)-Dreamweaver構(gòu)建Blog
- 用Dreamweaver輕松實(shí)現(xiàn)個(gè)性化鼠標(biāo)指針
- Dreamweaver MX進(jìn)階教程(三)輕松制作彈出菜單
- 用Dreamweaver8學(xué)習(xí)網(wǎng)頁滾動(dòng)字幕的制作
- 用Dreamweaver進(jìn)行數(shù)據(jù)庫操作
- Dreamweaver制作網(wǎng)頁技巧之對進(jìn)行網(wǎng)頁優(yōu)化
猜你也喜歡看這些
- 通過Dreamweaver CS3學(xué)習(xí)HTML+DIV+CSS 光盤/教程
- 新編Dreamweaver MX2004 中文版輕松入門視頻教程 2CD
- Dreamveaver中CSS視頻教程
- 網(wǎng)站重構(gòu)&web標(biāo)準(zhǔn)設(shè)計(jì)教程
- Dreamweaver 8中文版職業(yè)應(yīng)用視頻教程
- 4u2v Drwamweaver網(wǎng)頁制作實(shí)例教程100例
- Dreamweaver系列視頻教程
- 學(xué)通JavaScript視頻教程下載
- 動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)視頻全教程
- 挑戰(zhàn)DREAMWEAVER MX互動(dòng)網(wǎng)站百寶箱FOR ASP
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-用Dreamweaver實(shí)現(xiàn)漫天花雨效果。