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