Dreamweaver制作拖拽效果的教程

　　在做拖拽效果的網(wǎng)頁(yè)之前，首先我們要準備一些圖片。比如用作購物箱或購物車(chē)的一張大圖片，外加幾張代表物品的小圖片。我在這兒準備了一個(gè)購物袋，還有幾樣物品，它們分別是：手機、游戲手柄和汽車(chē)(哇!汽車(chē)也可以拖進(jìn)購物袋中啊!)。

　　準備好了圖片，就可以開(kāi)始我們的工作了。打開(kāi)Dreamweaver，新建一個(gè)頁(yè)面，在對象面板中選擇圖層工具，然后用鼠標在頁(yè)面上拖出一個(gè)圖層來(lái)(或者選擇“Insert/Layer”，插入一個(gè)新層)。然后，把鼠標放進(jìn)層中，再選擇“對象/插入圖像工具”，在此圖層中插入剛才準備好的一個(gè)圖片。

　　重復上面的動(dòng)作，再接著(zhù)插入3個(gè)圖層，然后在此3個(gè)圖層中分別插入你準備好的另外幾張圖片。完成后效果如圖1。

　　圖1

　　好了，重要的一步來(lái)了。點(diǎn)擊“窗口/動(dòng)作”，會(huì )彈出“動(dòng)作(Behaviors)”對話(huà)框來(lái)，如圖2。點(diǎn)擊對話(huà)框上方的“+”號后，會(huì )再彈出一個(gè)菜單，選擇此菜單中的“Drag Layer”，接著(zhù)再彈出的，就是“Drag Layer”對話(huà)框了，如圖3。

　　圖2

　　在此對話(huà)框中可以分別設置幾個(gè)圖層的屬性。我們把插入購物袋圖像的那個(gè)圖層設置為“不可移動(dòng)層(Unconstrained)”，其余的幾個(gè)圖層設置為“可移動(dòng)層(Constrained)”。在此對話(huà)框上還有一個(gè)“Advanced”選項，點(diǎn)擊它，在此面板上勾選“When Drag”選項，然后再把“Ring layer to front，then”選項設定為“Restored z-index”就可以了。

　　圖3

　　重復上述步驟，分別設置好其他幾個(gè)圖層的屬性，設置好的“Behaviors”對話(huà)框的中間文本框中多出了4個(gè)“onLoad”標記。

　　好了，設置完這些，我們的工作也完成了，別忘了保存網(wǎng)頁(yè)，然后按下“F12”鍵，看看你做的拖動(dòng)頁(yè)面酷不酷?

【Dreamweaver制作拖拽效果的教程】相關(guān)文章：

Fireworks制作炫光效果的教程06-24

PS把照片制作卡通效果的教程05-14

Photoshop制作漸進(jìn)效果圖片的教程06-29

photoshop金屬光澤效果制作教程07-18

Dreamweaver插入圖像的教程07-13

制作毛筆寫(xiě)字效果動(dòng)畫(huà)實(shí)例教程06-25

ps制作3D圖片效果教程11-05

3DMAX效果圖制作教程10-15

PS制作3D火焰效果教程06-04

PS制作皮膚質(zhì)感文字效果教程07-18