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