Dreamweaver如何制作拖拽效果

　　在網(wǎng)上，我們經(jīng)常可以看到一些非常實(shí)用的拖拽效果，特別是應(yīng)用于網(wǎng)上購物時(shí)，訪問者直接就可以把選中的物品拖拽到購物箱或者購物車?yán)铮�非常方便、有趣。不過大多數(shù)人不知道，其實(shí)用Dreamweaver中的Behaviors也可以做出同樣的效果來。以下是小編為大家搜索整理的Dreamweaver如何制作拖拽效果，希望能給大家?guī)�來幫�?更多精彩內(nèi)容請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!

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

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

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

　　圖1

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

　　圖2

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

　　圖3

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

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

【Dreamweaver如何制作拖拽效果】相關(guān)文章：

怎么用dreamweaver制作拖拽效果02-25

Dreamweaver如何制作網(wǎng)頁設(shè)計(jì)03-03

Dreamweaver如何制作彈出菜單03-27

Dreamweaver如何制作網(wǎng)頁模板07-22

利用Dreamweaver如何制作彈出菜單03-24

Dreamweaver如何制作能彈出菜單03-30

如何用Dreamweaver輕松制作彈出菜單03-01

制作dreamweaver的技巧02-27

關(guān)于Dreamweaver表格制作02-27