用Dreamweaver制作拖拽效果_Dreamweaver教程
在做拖拽效果的網(wǎng)頁之前,首先我們要預備一些圖片。比如用作購物箱或購物車的一張大圖片,外加幾張代表物品的小圖片。我在這兒預備了一個購物袋,還有幾樣物品,它們分別是:手機、游戲手柄和汽車(哇!汽車也可以拖進購物袋中啊!)。
預備好了圖片,就可以開始我們的工作了。打開Dreamweaver,新建一個頁面,在對象面板中選擇圖層工具,然后用鼠標在頁面上拖出一個圖層來(或者選擇“Insert/Layer”,插入一個新層)。然后,把鼠標放進層中,再選擇“對象/插入圖像工具”,在此圖層中插入剛才預備好的一個圖片。
重復上面的動作,再接著插入3個圖層,然后在此3個圖層中分別插入你預備好的另外幾張圖片。完成后效果如圖1。
圖1
好了,重要的一步來了。點擊“窗口/動作”,會彈出“動作(Behaviors)”對話框來,如圖2。點擊對話框上方的“ ”號后,會再彈出一個菜單,選擇此菜單中的“Drag Layer”,接著再彈出的,就是“Drag Layer”對話框了,如圖3。
圖2
在此對話框中可以分別設(shè)置幾個圖層的屬性。我們把插入購物袋圖像的那個圖層設(shè)置為“不可移動層(Unconstrained)”,其余的幾個圖層設(shè)置為“可移動層(Constrained)”。在此對話框上還有一個“Advanced”選項,點擊它,在此面板上勾選“When Drag”選項,然后再把“Ring layer to front,then”選項設(shè)定為“Restored z-index”就可以了。
圖3
重復上述步驟,分別設(shè)置好其他幾個圖層的屬性,設(shè)置好的“Behaviors”對話框的中間文本框中多出了4個“onLoad”標記。
好了,設(shè)置完這些,我們的工作也完成了,別忘了保存網(wǎng)頁,然后按下“F12”鍵,看看你做的拖動頁面酷不酷?
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
猜你也喜歡看這些
- FIF小組Dreamweaver制作網(wǎng)頁視頻教程
- Dreamweaver系列視頻教程
- 網(wǎng)站重構(gòu)&web標準設(shè)計教程
- 巧學巧用Dreamweaver8制作網(wǎng)頁
- java實例教程在線支付系統(tǒng)制作
- Dreamweaver 8中文版職業(yè)應(yīng)用視頻教程
- Dreamweaver網(wǎng)頁制作與色彩搭配全攻略(感激驢友boerly,新增完整版pdf)
- 呂聰賢dreamweaver視頻教程下載
- 通過Dreamweaver CS3學習HTML+DIV+CSS 光盤/教程
- Dreamweaver 8完美網(wǎng)頁設(shè)計:商業(yè)網(wǎng)站篇
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-用Dreamweaver制作拖拽效果。