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”鍵,看看你做的拖動頁面酷不酷?
-
新手如何做好網頁美工設計
導語:當你看到一個新穎很有畫面感的網頁時候,可能你更多考慮到的是其中的美妙或者產品,你是否有想過,這樣一個網頁的背後是如何來設計或者美化的嗎?當你點擊開一個鏈接,被其中一個產品或者一個海報所吸引,你又是否想過是什麼樣的因素這樣牽引着你進一步去點入的呢?其實...
-
企業網頁美工設計如何凸顯重點內容
在企業網頁美工設計中,一定要凸顯重點內容,那麼企業網頁美工設計如何凸顯重點內容呢,下面我們一起來看看吧。方法一、對比:引發興趣為了更好地理解對比在網頁設計中的作用,我們先解釋下什麼是對比。對比就是在一個相對封閉的環境裏發生的某種元素間的一種關係。在我...
-
網頁美工設計的標題設計
導語:在設計網頁標題時,應注意同時兼顧對用户的注意力,以及對搜索引擎檢索的需要。這一原則在實際操作中可通過三個方面來體現,下面就由小編為大家介紹一下網頁美工設計的標題設計,希望對大家有所幫助!一、網頁標題不宜過短或者過長一般來説6-10個漢字比較理想,最好不...
-
美工必備技巧:如何製作尖鋭的描邊效果
大家在修圖的時候知道如何製作尖鋭的描邊效果嗎?下面小編為大家整理了美工必備技巧:如何製作尖鋭的描邊效果,希望能幫到大家!平時大多數人用字體描邊大多數是這個樣子今天教大家做成這個樣子,描邊不再是圓潤的,而是鋒利的。這才是真正的.描邊!———————————...