利用 HTML5 FUN 烘焙機自製的遊戲，除了可以放到 Blogger 中(參考「雄:在Blogger中放 HTML5 FUN 遊戲」)，也可以放到 Goolge Sites (協作平台)；使用 Google Sites 的好處是，因為它是專門用來設計網站的，會比較結構化，可以自訂的地方比較多，也比較好操作；內容較多時，想要美美的，又能輕鬆架站，跟 Blogger 比起來，它就會是較佳的選擇。
底下就如何在 Google Sites (協作平台) 放 HTML5 FUN 遊戲，做一個簡單的記錄，全文分為以下幾個部份：
如果已經有 Google Sites 的網站，可以按這裡，直接跳到第二部份「在網站加入自製遊戲」。
1 建立第一個 Google Sites 的網站
如果還沒有任何的 Google Sites 網站，就可以按照底下的步驟來建立一個一新的網站。
1-1 開啟 Google Sites
登入 Google 帳號以後，按右上角的「九宮格」圖示，如果看到「協作平台」的圖示，按下去以後，就會進入 Google Sites(協作平台)。
 |
| [圖1] 開啟 Google Sites(協作平台) |
不然，按底下的網址也可以：
1-2 建立新網站
進入 Google Sites 以後，我們可以由左上角的「空白」鈕從無到有來建立網站，也可以使用「範本」來建立並發展網站；有多少「範本」可用，則得看使用什麼帳號登入而有所不同。底下以「課程」的範本為例，先按一下「課程」的範本縮圖：
 |
| [圖2] 以範本建立網站 |
按完就會看到已建立好的一些頁面。
 |
| [圖3] 修改協作平台文件名稱 |
進到新網站的編輯界面，我們先修改左上角的「協作平台文件名稱」，協作平台文件會儲存在 Google 的雲端硬碟中，修改完以後，應該可以在雲端硬碟中看到這個名稱的文件。
 |
| [圖4] 修改內容並發布網站 |
接著我們可以先簡單地改一下頁的的標題或其它內容，好了就可以將網站「發布」。
要發布內容，只要按一下如圖4截圖右上角箭頭所指的「發布」按鈕，第一次發布時，Google Sites 會讓我們設定網站的網址：
 |
| [圖5] 自訂網站的網址 |
關於網站的網址，前綴的部份是固定的，我們可以在後面加上自訂的名稱，建議用英文或數字組合成一個簡潔又不易與人重覆的名稱；像我選用了「fun99」，它和前綴的網址組合完，就變成：
發布成功的話，按一下 [圖6] 箭頭所指的「檢視」，即可查看新網站。
 |
| [圖6] 成功發布協作平台的網站 |
1-3 修改共用設定
Google Sites 的網站發布以後，是不是知道網址的任何人都可以看得到呢？
我們按一下網站編輯界面上方「與他人共用」的圖示 (圖7)，來看看預設的共用設定：
 |
| [圖7] 共用的設定鈕 |
底下是用教育雲帳號所建立的網站共用設定內容：
 |
| [圖8] 將共用權限改為「公開」、「檢視」 |
它預設是只有自己及使用教育雲帳號登入的人，才可以看得到網站的內容。
 |
| [圖9] 確認共用設定改為「公開」、「檢視」 |
所以如果要讓任何人都可以看得到的話，就要像 [圖9] 將它改為「公開」，而權限是「檢視」。
完成以上的步驟，我們就擁有一個基本的網站了；接下來就可以準備在網站中，加入自製的 HTML5 FUN 的遊戲。
2 在網站加入自製遊戲
利用 HTML5 FUN 烘焙機可以自製遊戲，而它產生的語法即是 Google Sites 中，所謂的「HTML程式碼」，它是以小於符號和大於符號「<>」所組成的代表圖示，文字則會有「內嵌」或「嵌入」關鍵字；所以如果在 Google Sites 中，看到前述的圖文特徵，就可能是我們的目標。
底下的影片示範如何在 Google Sites (協作平台)中加入 HTML5 FUN 的遊戲：
2-1 新增頁面
在 Google Sites 編輯頁面中，右上角有「插入」、「頁面」、「主題」三個功能分頁，我們打算幫網站新增頁面，然後加入自製的遊戲；所以先按一下功能分頁的「頁面」
 |
| [圖10] 新增頁面 |
然後將滑鼠游標移到右下方的圓形加號圖示上(如果是觸控螢幕的，則是按一下)，出現選單後，點選「新增頁面」。
跳出「新增頁面」的小對話框以後，輸入頁面的名稱後，按「完成」，畫面即出現網站的新頁面。接下來，就可以利用「插入」的功能頁來新增想增添的內容了。
2-2 插入「內嵌」
想要在網站的頁面中新增內容，就要利用 Google Site 右上方「插入」的功能頁，裡面有各式各樣的「元件」可以選用。
 |
| [圖11] 插入「內嵌」的元件 |
因為 HTML5 FUN 烘焙機所產生的語法是程式碼，所以會使用到 Google Sites 的「內嵌」元件；如 [圖11]，先按一下「插入」，再按一下「內嵌」。
 |
| [圖12] 嵌入網頁的內容對話框 |
跳出 「嵌入網頁的內容」對話框(圖12)，按一下「嵌入程式碼」的分頁，按完就可以去 HTML5 FUN 烘焙機製作遊戲，再把製作好的「程式碼」貼過來。
2-3 以烘焙機自製遊戲
在 Google Sites 的頁面中插入「內嵌」以後，我們就可以打開 HTML5 FUN 烘焙機，準備製作並測試遊戲，烘焙機在這裡(連結常駐我網誌的右上角)：
進入烘焙機的頁面，先按「按這裡開啟 HTML5 FUN 烘焙機」的按鈕：
 |
| [圖13] 開啟烘焙機 |
接著進入烘焙機的「步驟1」，選定要製作的遊戲及題庫樣版：
 |
| [圖14] 選定遊戲及題庫樣版 |
輸入題庫內容，並設定好選項，就可以進入烘焙機的「步驟2]，按紅色的按鈕來試玩：
 |
| [圖15] 按紅色按鈕試玩自製遊戲 |
試玩沒問題以後，在遊戲畫面的右上角，有一個半透明的「叉叉」，按下去就可以離開遊戲，並進入「步驟3，準備複製遊戲的程式碼。
 |
| [圖16] Google Sites 專用選項 |
如 [圖16] 所示，因為在 Google Sites 插入外部程式碼的方式與 Blogger 不同，所以我們在烘焙機的「步驟3」有 Google Sites 專用的選項，「是否要嵌入Google Sites」中的「應用於Google Sites」，請務必要勾選，不然遊戲會無法運作。
 |
| [圖17] 按按鈕將遊戲程式碼複製到剪貼簿中 |
在烘焙機的「步驟3」有三大功能，因為我們是要在 Google Sites 網站中放遊戲，所以確定前面已經勾選了「應用於Google Sites」，就按「查看合併後的原始碼-自動複製到剪貼簿」這個按鈕，來複製遊戲及題庫的程式碼；按一下，它就會將需要的程式碼複製到剪貼簿中備用。好了就可以切回 Google Sites 的編輯頁面。
2-4 將遊戲代碼貼到頁面中
在烘焙機製作遊戲，複製好語法，要貼到 Google Sites 「內篏」「嵌入程式碼」的輸入區中
 |
| [圖18] 將遊戲的程式碼貼到「嵌入程式碼」中 |
貼好程式碼，就可以按「下一個」的按鈕。看到遊戲的啟動按鈕，再按「插入」鈕：
 |
| [圖19] 插入遊戲 |
將遊戲插入網頁中以後，我們可以利用遊戲區塊邊線上的控制點(圓點點)，來調整遊戲區塊的大小：
 |
| [圖20] 調整區塊的大小 |
拖曳圓點，就可以調整遊戲區塊的大小
 |
| [圖21] 準備發布 |
區塊調整完大小以後，我們就可以按「發布」鈕，準備發布
 |
| [圖22] 發布 |
出現 [圖22] 的確認畫面，就勇敢地按下「發布」鈕吧！
我們來看看加到 Google Sites 的遊戲長什麼樣子。想觀看已發布的網站，可以按一下「發布」鈕旁的小三角形：
 |
| [圖24] 查看已發布的網站 |
按一下如 [圖24] 清單中的「查看已發布的網站」，就可以看到該頁面的樣子：
 |
| [圖25] 已發布的遊戲 |
 |
| [圖26] 啟動後的遊戲 |
[圖26] 是啟動後的遊戲，如果和在 Blogger 中遊戲比較，在 Google Sites 的遊戲沒有填滿整個頁面；是的，這是使用 Google Sites 「內篏」插入遊戲的限制。如何突破限制呢？就請繼續參考底下的說明。
3 整頁顯示的自製遊戲
3-1 利用「將遊戲開始在獨立的視窗」整頁顯示遊戲
前面提到使用 Google Sites 「內篏」插入的遊戲，顯示的範圍會受到編輯時的區塊大小限制，沒關係，我們可以在烘焙機的「第三步驟」中，勾選「將遊戲開始在獨立的視窗」：
 |
| [圖27] 勾選「將遊戲開始在獨立的視窗」 |
確定兩個 Google Sites 專用的選項「應用於Google Sites」跟「將遊戲開始在獨立的視窗」都勾選了，再按「查看合併後的原始碼-自動複製到剪貼簿」來重新複製遊戲的程式碼；並貼到「嵌入程式碼」的輸入區中，結果跟前面有一點點不同哦！遊戲啟動的按鈕是綠色的：
 |
| [圖28] 拖曳區塊可以調整區塊的位置 |
這一次不用調整遊戲區塊的大小了，因為當我按下遊戲啟的按鈕時，遊戲會開啟在新的視窗中，並充滿整個視窗。我們可以讓游標對準區塊後拖曳，調整區塊擺放的位置。
底下是測試的結果：
 |
| [圖29] 調整後的遊戲區塊 |
 |
| [圖30] 啟動的遊戲是開在新的視窗中 |
3-2 利用「整頁嵌入」整頁顯示遊戲
前一小節是利用開啟新的視窗後，才載入遊戲並執行，這樣就可以擺脫 Google Sites 的區塊大小限制。如果不想開新視窗跳離 Google Sites 的網站，可以新增「整頁嵌入」的頁面，缺點是該頁面就只能加入遊戲，而無法再插入別的 Google Sites 網頁元件。可以比較看看，喜歡哪一種方式放遊戲。
 |
| [圖31] 新增「整頁嵌入」的頁面 |
如 [圖31] 所示，先按一下「頁面」的功能分頁，然後將滑鼠游標移到圖形的加號圖示後，清單中會有一個「整頁嵌入」；點選「整頁嵌入」來新增頁面。
新增的頁面裡，有一個「新增嵌入內容」，按一下以後，如同前面 2-3 小節的方法，在烘焙機的「步驟3」中，只勾選「應用於Google Sites」一個專用選項，然後按「查看合併後的原始碼-自動複製到剪貼簿」來複製題庫及程式碼，貼到「新增嵌入內容」的對話框中，完成以後，遊戲的啟動按鈕，應該是紅色的：
 |
| [圖32] 整頁嵌入的遊戲畫面 |
按下遊戲的啟動按鈕後，遊戲會在現有的頁面中開啟，並自動使用最大的範圍：
 |
| [圖33] 使用整頁嵌入的青蛙過河 |
前面兩種方式各有優劣，就看個人喜好；當然囉！如果照排列組合，其實是有第四種方案的，看至此，應該已經快昏頭了，就不要再繼續吧！
以上是如何在 Google Sites 中放 HTML5 FUN 遊戲的簡單介紹，相關的示範影片，如果錄好，會再附上。
發表文章
沒有留言:
張貼留言