Dreamweaver如何制作拖拽效果

　　在網上，我們經常可以看到一些非常實用的拖拽效果，特別是應用于網上購物時，訪問者直接就可以把選中的物品拖拽到購物箱或者購物車里，非常方便、有趣。不過大多數人不知道，其實用Dreamweaver中的Behaviors也可以做出同樣的效果來。以下是小編為大家搜索整理的Dreamweaver如何制作拖拽效果，希望能給大家帶來幫助!更多精彩內容請持續關注我們應屆畢業生考試網!

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

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

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

　　圖1

　　好了，重要的一步來了。點擊“窗口/動作”，會彈出“動作(Behaviors)”對話框來，如圖2。點擊對話框上方的“+”號后，會再彈出一個菜單，選擇此菜單中的“Drag Layer”，接著再彈出的，就是“Drag Layer”對話框了，如圖3。

　　圖2

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

　　圖3

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

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

【Dreamweaver如何制作拖拽效果】相關文章：

Dreamweaver怎么制作拖拽效果03-28

怎么用dreamweaver制作拖拽效果04-22

怎樣用Dreamweaver制作拖拽效果07-25

Dreamweaver如何制作網頁08-13

Dreamweaver如何制作網頁設計07-02

Dreamweaver如何制作彈出菜單05-29

Dreamweaver如何制作網頁模板07-22

利用Dreamweaver如何制作彈出菜單07-16

Dreamweaver如何制作錨點鏈接02-13