巧用DW制作拼圖游戲

摘要：Dreamweaver是集網頁制作和管理網站于一身的所見即所得的網頁編輯器，利用Dreamweaver可輕而易舉地制作出跨越平臺限制和瀏覽器限制的充滿動感的網頁。本文就利用Dreamweaver這個經典利器來制作拼圖游戲。

關鍵詞：網頁制作 層 拼圖游戲

中圖分類號：TP317.4 文獻標識碼：B 文章編號：1002-2422(2010)02-0104-02

在瀏覽網頁時，經常發現網頁上的某些圖片(或文字)可以用鼠標隨意拖動，特別是一些拼圖類簡單游戲，更增添了網頁無窮樂趣。下面就用DW來制作一個簡單的拼圖游戲，相信你跟著做完后，會發出這樣的感嘆：制作是如此簡單啊。

1 準備階段

準備圖片若干張(能拼成一張大圖)，如沒有可用PS進行切片操作，操作步驟如下：

(1)啟動PS，打開一張圖片，如圖1所示。選切片工具，右擊圖片，選“劃分切片”命令，將水平、垂直各劃分為三等分，如圖2所示。

(2)單擊“確定”按鈕，如圖3所示。再單擊“文件一存儲為WEB和設備所用格式”命令，如圖4所示。彈出“文件一存儲為WEB和設備所用格式”對話框，如圖5所示。在對話框中，選擇預設類型，如“JPG高”，再單擊“存儲”按鈕，彈出“將優化結果存儲為”對話框，如圖6所示。選擇保存類型“HTML和圖像”，選擇好存儲位置并輸入文件名，最后單擊“保存”按鈕，即可完成圖片切片工作。

2 制作階段

(1)啟動DW，新建一網頁文檔，根據切片圖片的大小和數量建立表格(本題為3行3列，單元格大小為117×96象素)，同時將一張切片圖片插入到表格合適位置(本題為左上角，主要用于圖片的定位)，如圖7所示。為顯示其他切片圖片，需要再制作一表格，為便于布局，建議將兩表格制作成一表格(本題表格為3行8列，大小為850×288象素，存放圖片的單元格大小為117x96象素，單元格間距、邊距、邊框均為0)，如圖8所示。

(2)制作活動圖形。為便于說明，將用于顯示活動圖片

的位置編號，如圖9所示(因使用拖動層命令，建議使用DW 8)。在單元格編號為“1”的位置插入層(名稱“Lay-erl”，大小為117×96象素，位置與單元格重疊)，如圖10所示。

(3)在該層中插入切片圖片，如圖11所示。依此類推，分別插入層2，……，層8，并在相應層中依次插入切片圖片(注意：切片圖片要排列成一副完整圖像)，如圖12所示。

(4)在表格外部單擊，選擇“窗口”中的“行為”命令，打開行為面板，再單擊“+”按鈕，彈出行為菜單，如圖13所示。單擊“拖動層”命令，彈出“拖動層”對話框，在“層”中選擇“Layerl”，單擊“獲取目前位置”獲取當前層的位置，靠齊距離為“50”象素，如圖14所示，單擊“確定”按鈕，完成層“Layerl”的設置。

(5)依此類推，分別設置層“Layer2”，……，“Lay-er8”，并設置好相關參數，如圖15所示；為創建游戲的可操作性和趣味性。將所有插入切片圖片的層調整到右邊表格中(注意打亂切片圖片的順序)，如圖16所示。

(6)掃尾工作，將表格中的數字刪去，同時在右邊表格中加上適當的文字說明，最后保存成網頁文檔，即完成拼圖游戲制作，最終效果如圖17所示。

2 結束語

拼圖游戲只是DW中行為命令的一個簡單應用，還有更多的功能在等著進一步去開發，把網頁點綴得更精彩吧!