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