Dreamweaver製作簡易的拼圖遊戲教程

一.

如果您的電腦中沒有Dreamweaver 8可以先下載一個,這是下載地址:http://www.skycn.com/soft/458.html

自己電腦裡有直接開啟就可以了.這個軟體挺好用的,我用的就是這個.

在製作拼圖遊戲前,我們需要製作拼圖切片(就是把一個完整的圖片切成若干個小圖片),下面的連結是如何製作拼圖切片的教程:http://blog.csdn.net/yudandan10/article/details/7675888

這是利用photoshop製作的,如果您電腦中沒有photoshop,可以用windows自帶的工具自己剪下.但還是建議用photoshop.

製作好了圖片,我們就需要開啟Dreamweaver 8 如下圖,建立一個html檔案

這是進入後的介面/:

進入後我們先插入一個表格,表格的行列可以根據自己的需要進行調節,我們選三行三列此處需要注意,我們要了解你選擇圖片的大小即寬*高是多少,如果圖片太大,可以用美圖看看,那裡面就帶修改圖片大小的工具,挺方便的.我選擇的圖片是500*313的所以設定的過程如下:

插入表格既可以在選單欄上選擇,同時也可以再工具欄上選擇

點選表格後就會彈出對話方塊進行設定.

設定好的介面如下,我們需要在下面的屬性裡面修改相關的值

接下來就是在每個表格中插入我們剪下好的圖片,按順序新增進去就可以(注意：切片圖片要排列成一副完整影象)

如下圖在選單欄上就有插入圖片的按鈕

插入完成後,我們要把表格選中,如果沒有選中則無法完成下面的操作.選擇選單欄上的修改/轉換/表格到層,後出現如下的畫面,

這是我根據自己的需要修改好的每層的名字,使用者也可以自己進行修改.

我們的圖片上一共有九個塊,記九個層,然後我們分別選中每一個,對其的行為進行設定,選擇選單欄上的視窗/行為然後彈出行為選單選擇拖動層,彈出

分別對每層進行設定,一定要點選取得目前位置,依次對九個層進行設定就可以了,這個每個圖層的行為設定好後,儲存成網頁文件即可,為了遊戲的進一步提高,我們也可以在旁邊建立表格,將圖片以打亂的順序排列,然後讓玩家去拼回原來的面貌.這就是簡單的拼圖遊戲製作,有興趣的也可以自己去新增更多的功能,使你的遊戲更加絢麗多彩.下面的圖是我自己簡單的設計了一下,執行後的樣子:

用網頁開啟後就是這樣,剩下的就需要你們去完善改進和美化啦!!!讓我們的網頁變的要多嗨有多嗨 下面就是製作完成後的網頁檔案的樣子