Simon 老師的電腦知行工房

=>開啟網頁檔案 puzzle.htm

=>[插入]面板/版面/繪製 AP Div，畫出第一個AP元素(apDiv1)，將此 apDiv1 元素的寬高均設定為150px，位置為[左：17px]、[上：92px](此位置可自行規劃設定)。

=>於 apDiv1 元素中插入影像puzzle.jpg

=>[插入]面板/版面/繪製 AP Div，畫出第二個AP元素(apDiv2)，將此 apDiv2 元素的寬高均設定為450px，位置為[左：185px]、[上：92px](此位置可自行規劃設定)。

=>將 apDiv1 元素設定顯示虛線方框=>[CSS樣式]面板/選取 apDiv1 元素並按下[編輯樣式]鈕

=>設定 apDiv1 元素的CSS樣式=>分類：邊框、Style：勾選[全部一樣]/dotted、Width：勾選[全部一樣]/1 px、Color：勾選[全部一樣]/#999=>設定後按下[確定]

=>以上述相同的方法設定 apDiv2 元素顯示虛線方框。

=>拼圖完整大小的影像為 450 px*450 px，將其平均切割為9張拼圖，所以每一張拼圖的寬高皆為150 px，所以在此畫出第三個AP元素(apDiv3)，將此 apDiv3 元素的寬高均設定為150px，位置為[左：650px]、[上：30px](此位置可自行規劃設定)。

=>於apDiv3 元素中插入影像puzzle_01.jpg

=>以apDiv3 為主依序由左到右建立其它8個apDiv元素(apDiv4~apDiv11)，並依序插入影像puzzle_02.jpg~puzzle_09.jpg。(這9個AP元素先調整大小與插入影像即可，位置先不用精確設定)

=>[AP元素]面板/勾選[防止重疊]=>將9個AP元素拖曳使其完成拼圖組合。可利用第一個AP元素的位置，計算出其他AP元素的位置，並設定到AP元素中，這樣會很精準的將拼圖的每一個小圖拼製組合完成。

這裡要特別注意，在9個AP元素組合時要注事是否每個AP元素都有完美的緊貼在一起，如果有空隙產生，將會影響到最後作品的呈現。

=>將已經貼齊組合好的9個AP元素選取，將滑鼠指標放在任一個AP元素上，當指標變成十字時，將9個AP元素拖曳到apDiv2 元素上，使9個AP元素完全與apDiv2 元素貼齊。

=>在不選取任何AP元素的狀態下(網頁編輯區中空白處點一下左鍵)=>[行為]面板/+/拖曳AP元素=>開啟[拖曳AP元素]設定視窗

=>設定9個AP元素中的第一個(apDiv3)=>選取[div “apDiv3”]=>按下[取得目前位置]，以取得apDiv3 元素目前所在的位置(即在apDiv2 元素上的左上角位置)，藉以設定第一塊拼圖元素的定位=>按下[確定]鈕

=>設定後可在[行為]面板中看到行為指令為[拖曳AP元素]，觸發動作為[onLoad]。

=>以上述步驟依序為其他8個AP元素(apDiv4~apDiv11)套用相同的行為指令，以設定8個AP元素的拼圖定位。

=>將9個AP元素(apDiv3~apDiv11)拖曳到畫面右側空白編輯區任意擺放，即可完成。

=>按下[F12]預覽網頁，當每一塊拼圖拖曳到中央虛線框內放置時，該拼圖接近正確位置並放開滑鼠左鍵，就會有被吸附過去的效果，使該拼圖放在正確的位置。