這篇文章主要講解了“怎么用Dreamweaver實(shí)現(xiàn)網(wǎng)頁上漫天花雨效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用Dreamweaver實(shí)現(xiàn)網(wǎng)頁上漫天花雨效果”吧！

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出德宏州免費(fèi)做網(wǎng)站回饋大家。

淡藍(lán)色的天空下，一朵朵花瓣隨風(fēng)飄下，慢慢的在屏幕中飄蕩。你一定要說這種效果用FLASH可以實(shí)現(xiàn)。其實(shí)用DREAMWEAVER也可以很輕松的實(shí)現(xiàn)！

Dreamweaver之所以能夠超過Frontpage而成為網(wǎng)頁設(shè)計(jì)師的選設(shè)計(jì)工具，在于它對(duì)DHTML的強(qiáng)大設(shè)計(jì)功能，上面所說的效果，其實(shí)是DHTML的一種。但是使用Dreamweaver，你無須去編寫冗長(zhǎng)的代碼，在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è)花瓣就制作完成了。

下面我們來讓花瓣動(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所示。

然后在動(dòng)畫面板上，選中第二影格的位置，回到層面板，顯示Flower2層，隱藏Flower層。然后選中Flower2層，按Ctel + T，這時(shí)花瓣處于自由變換狀態(tài)，可以用鼠標(biāo)左右上下移動(dòng)來改變花瓣的形狀。如圖5所示。

將第二影格所顯示的Flower2層的花瓣用自由變換做一點(diǎn)小的變化。然后再用上面所講述的方法，新建第三影格和Flower3層，再用自由變換做一些小的變化，依次可以做6層左右，注意最后一個(gè)影格與第一個(gè)影格的連續(xù)性。每一個(gè)影格里只能顯示相對(duì)的圖層，其余的圖層要隱藏起來。

做完后，在動(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è)空心的句號(hào)樣的圓圈，用直線連接起來，兩個(gè)圓圈表示是關(guān)鍵影格，確定了花瓣移動(dòng)的軌跡。如圖7所示。

確定等時(shí)線里紅線在第一格的位置，然后在Dreamweaver的主面板里拖動(dòng)圖層到右上角，這一步是確認(rèn)花瓣飄落的起點(diǎn)。再將等時(shí)線里的flower1層的最后一格拉到第60格的位置，然后確定那條紅線在第60格的位置，回到DW面板將flower1圖層拉到屏幕的左下角，這一步驟是確定圖片飄落的終點(diǎn)。注意確定起點(diǎn)和終點(diǎn)的時(shí)候，一定要看清紅線的位置，紅線的位置代表了你當(dāng)前再做第幾影格的操作。開始影格和終點(diǎn)影格一定要是關(guān)鍵影格。然后選中上方的Autoplay和Loop，如圖8所示，意思是自動(dòng)運(yùn)行和循環(huán)運(yùn)行。這時(shí)候你可以按F12預(yù)覽一下，你已經(jīng)可以看到花瓣沿一條直線在運(yùn)動(dòng)了。

下面我們讓花瓣的運(yùn)動(dòng)顯得柔和一點(diǎn)，無規(guī)則一點(diǎn)。在等時(shí)線面板里，在第15影格的地方單擊一下，確認(rèn)等時(shí)線里的紅線在第15格的位置，按右鍵，選擇add keyfreme，如圖9所示，這時(shí)主面板的圖層會(huì)自動(dòng)移到第15格應(yīng)該走到的位置，拖動(dòng)圖層到其他的地方（可以任意的拖動(dòng)，取決于你想讓這個(gè)花瓣如何運(yùn)動(dòng)），這一步是確認(rèn)該圖層移動(dòng)到第15影格的時(shí)候應(yīng)該在什么地方。然后將紅線移到第30格、第45格的位置重復(fù)上面的動(dòng)作，再按F12預(yù)覽一下，此時(shí)花瓣就呈不規(guī)則的移動(dòng)了。再次提醒，插入等時(shí)線的一定要是圖層而不是圖片，否則花瓣將不會(huì)移動(dòng)。

按照上面的做法，我們?cè)僭黾右粋€(gè)圖層，在圖層中插入另外一幅稍小的圖片，重復(fù)上面的動(dòng)作，只是圖層移動(dòng)的軌跡可以改變一下，只需要改邊當(dāng)選中某個(gè)關(guān)鍵影格的時(shí)候，圖層在主面板的位置就可以了。以次類推，一般加到Flower10層以上的樣子，才有滿天花雨的效果。

感謝各位的閱讀，以上就是“怎么用Dreamweaver實(shí)現(xiàn)網(wǎng)頁上漫天花雨效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用Dreamweaver實(shí)現(xiàn)網(wǎng)頁上漫天花雨效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁題目：怎么用Dreamweaver實(shí)現(xiàn)網(wǎng)頁上漫天花雨效果-創(chuàng)新互聯(lián)
路徑分享：http://chinadenli.net/article34/dijdse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄、網(wǎng)站維護(hù)、微信公眾號(hào)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)