網站設計制作自由拖動層用Dreamweaver可以制作出具有很好交互性的網頁，例如，利用拖動層制作拼圖游戲。但是在Dreamweaver中，所插入的層，在用瀏覽器瀏覽時，一般情況下是不能被移動的，而拼圖游戲本身要求每張圖片都能夠自由移動。要解決這個問題，其實并不困難，因為Dreamweaver提供了一個“拖動AP元素”行為，利用它不但能夠實現層的拖動，還能為每個層設置目標位置的坐標值。在瀏覽網頁時，只要拖動該圖片到正確的位置附近，圖片就會被動“吸”到坐標點上。下面利用該行為介紹拼圖游戲的制作過程。
【操作步驟】
第1步，在制作拼圖游戲之前，首先要找一幅圖片，并利用Photoshop將圖片切分成多塊。如圖7-8所示將張完整的圖片平均分成9塊。
網站設計拼圖處理實操示意圖7-8
技巧：在工具箱中選擇【}刀片選取工具】，在工具選項欄中單擊【劃分】按鈕，打開【劃分切片】對話框，選中【水平劃分為】復選框，然后在下面的文本框中輸入數字3，設置水平分為3欄；選中【垂直劃分為】復選框，然后在下面的文本框中輸入數字3．設置垂直分為3欄，設置如圖7-9所示。
單擊【確定】按鈕，關閉【劃分}刀片】對話框，此時Photoshop會自動把整個圖片分割成9塊。
第2步在Photoshop中選擇【文件】【存儲為Web所用格式】命令引開【存儲為Web所用格式】對話框，如圖7-10所示。
網站設計拼圖處理實操示意圖7-10
第3步，保存默認設置，單擊【存儲】按鈕，打開【將優(yōu)化結果存儲為】對話框，在【文件名】文本框中設置網頁的名稱，建議以英文字母配合數值進行命名；在【格式】下拉列表框中選擇【HTML和圖像】選項；在【設置】下拉列表框中保持默認設置，在【切片】下拉列表框中選擇【所有用戶切片】選項，詳細設置如圖7-11所示
第4步，單擊【保存】按鈕，輸出并存儲切片和網頁，可以在當前站點目錄下看到所存儲的HTML文檔和images文件夾，在images文件夾中保存著所有的用戶切片圖像，直接雙擊HTML文件名，即可在網頁測覽器中預覽網頁效果，如圖7-12所示。
第5步，啟動Dreamweaver，打開使用Photoshop輸出的HTivIL文檔?？梢钥吹皆擁撁鏋楸砀癫季猪撁?，如圖7-13所示。
網站設計拼圖處理實操示意圖7-11
網站設計拼圖處理實操示意圖7-13使用Dreamweaver打開Photoshop輸出頁面第6步，選擇【文件】【另存為】命令，把index.html另存為pintu.html。然后切換到代碼視圖，使用css把表格布局的圖像轉換為圖層布局圖像，如圖7-14所示，具體源代碼可以參考本站前面示例源代碼。
提示：在Dreamweaver以前的版本中，可以陜速把表格布局轉換為圖層布局。萬法是：選擇【修改】【轉化】【表格到層】命令，把插入的表格圖像文件轉換為層布局網頁。
第7步，選擇【面口】【行為】命令打開【行為】面板。
第8步，在【標簽選擇器】內選擇整個網頁標簽<bodv>，再單擊【行為】面板中的
按鈕，彈出個菜單，在菜單中選擇【拖動AP元素】命令，打開【拖動AP元素】對話框如圖7-15所示。
網站設計拼圖處理技巧實操示意圖7-15【拖動AP元索】對話框
第9步，在【AP元素】下拉列表框中選擇要設置的層。在本例中，由于插入了9個層，在該對話框中依次選擇這9個層，并分別設置其目標位置的坐標值等參數。
第10步，在【移動】下拉列表框中選擇【不限制】選項。該列表框提供了兩種拖動方式
1.【不限制】為不受限制拖動，可將層拖動到瀏覽器的任何位置。
2.【限制】為受限制拖動．在該對話框中．可利用【上】、【下】、【左】、
3.選項為拖動層設置個矩形范圍，這樣瀏覽者就只能在該范圍內拖動層。
第11步，在【放下目標】選項組的【左】和【上】文本框中輸入層目標位置的坐標值。它是指每個圖片在目標位置時，其左上角的坐標值。
提示：如果不能確定該坐標值，可用下面的方法來獲取坐標值。
4.選擇【查看】【標尺】【顯示】命令，在窗口中顯示出標尺，并將鼠標指針移到單元格的左上角，記下標尺上虛線所對應的數值其中頂部標尺顯示的是【左】文本框的值，左面標尺顯示的是【右】文本框的值。
5.先將層拖到對應的單元格中，并用鍵盤上的方向鍵調整好層的位置；然后打開【拖動AP元素】對話框，單擊【取得目前位置】按鈕
即可自動獲取該圖片的坐標值。
第12步，在【靠齊距離】文本框中設置目標點的允許誤差范圍。例如設為50，表示如果圖片被拖動到距離目標位置小于50個像素時，就認
為已經拖動到了目標點上。完成對話框設置如圖7-16所示。
網站設計拼圖處理實操一圖7-16設置拖動參數
第13步，重復第8步’第12步操作，分別為其他8個層設置移動操作行為。最后，設置拖動觸發(fā)事件為onLoad，如圖7-17所示。
網站設計拼圖處理實操示意圖7-17定義觸發(fā)事件
第14步，完成設置后，保存文檔，按F12鍵預覽頁面，效果如圖7-18所示。如果想把游戲做得更好些，可在其中加入些動畫以及設置【開始】、【重玩】和【結束】等按鈕。【拓展】經過以上設置后，基本上已經能夠實現所需要的功能了。如果需要對層進行更進步的設置，例如層被拖動后的層次、拖動到目標點后引發(fā)的動作等，可單擊【高級】標簽，打開【高級】選項卡，如圖7-19（a）所示。
網站設計拼圖拖動處理實操示意7-18制作的拼圖游戲效果
在該選項卡中，可設置的選項如下。
6.拖動控制點：該下拉列表框用于設置可拖動的區(qū)域，其默認值為【整個元素】，即在該圖片上的任何位置都可以拖動。如果選擇了【元素內的區(qū)域】選項，則對話框如圖7.19(b)所示。列表框右側的【左】、【上】、【寬】和【高】文本框用于確定拖動區(qū)域在圖片上的位置，其中【左】和【上】文本框用于定位拖動區(qū)域距圖片左邊和頂邊的距離．【寬】和【高】文本框用于設置拖動區(qū)域的寬度和高度。
7.拖動時：在該選項組中，如果不選中【將元素置于頂層，然后】復選框，在拖動層時將不改變層的疊放次序，這意味著它有可能被其他層遮蓋；如果選中該復選框，并在后面的下拉列表框中選擇【留在最上方】選項，則層在拖動時將處于最頂層，釋放鼠標后，該層也將變?yōu)轫攲?；如果選擇【恢復z軸】選項．則層在被拖動時處于頂層．放開鼠標指針后將恢復原來的層次。
8.呼叫JavaScript:該文本框用于調用JavaScript?？梢栽谄浜竺娴奈谋究蛑休斎胪暾腏avaScript語句。同時該選項電可進行某函數的調用。在拖動層時系統將反復執(zhí)行所輸入的語句。
9.放下時．呼叫JavaScript:用于在釋放鼠標時闊用JavaScript語句?？梢栽诖宋谋究蛑休斎隞avaScript語句或其他函數。所輸入的語句或函數，將在圖形被拖動完成后執(zhí)行。如果選中【只有在靠齊時】復選框，則只有當圖形被拖動到目標位置后才能執(zhí)行所輸入的語句。
利用【高級】選項卡中提供的這種可調用JavaScript語句的功能，可制作巧妙的換圖效果。例如，當拖動該層到目標位置時，該圖片立刻切換為其他圖片。好了，關于網站設計怎樣處理拼圖自由拖動的實際操作案例本文就介紹到這里。深圳網站制作博納網絡編輯整理。
