Google表單多媒體製作法

看過Google 表單變化使用法後, 介紹一下怎麼使用Chrome來修改它。

第一步, 按Mouse右鍵, 選Save as, 存網頁檔。



第二步, 修正網址, 確定這份網頁在任何地方都可以看到正確的背景。

我修改3處, 兩處theme的網址, 加上標準的【http:】, 並且將CSS的網址, 將數字前的一段, 改成【https://docs.google.com/static/spreadsheets/client/css】


測試是否改對了, 可以copy and paste修正過的網址到任何瀏覽器上, 應該是可以看到很多code, 看不懂沒關係, 只要沒有看到無法顯示, 或者 404 找不到網頁即可。

第三步, 切除頭尾, 因為網路上的HTML editors不喜歡太複雜的codes。

尾巴比較容易, 只需要刪除 </body></html> 即可。

開頭的話, 先找到【<div class="ss-form-container">】, 在這之前的code都屬於頭, 這行到尾巴之間的是主要的表單code, 在此簡稱"表單"。

第四步, 將表單code, 剪貼到線上Html編輯器, 這樣編輯器就比較不會弄亂樸實表單的code了。

CKEditor, or HTML Editor. 這兩個網頁編輯器類同。還有克校長介紹的Free online html editor. 使用網頁編輯器修改, 類似修改部落格的文章, 比較容易理解。

按source button, 如果小icons變成灰色, 表示使用code. 將去頭尾的表單code貼上, 再按一下source button, 即可看到被編輯器改過的code.

§ 註: 很重要的是, 不論哪個編輯器, 如果貼上全部的code, 也許可以看到表單背景, 但再看code時, 會發現原來的頭尾, 都被改的和原始不相同了。貼在華文網部落格上, 情況似乎更糟糕, 修改內文有bug, 插入圖片, 也無法預覽, 必須存檔出去, 再開啟檔案。



貼入去設定複雜頭尾的表單, 重新看source, 編輯器會自動加上最簡易的頭尾, 讓網頁檔完整。



第五步, 練習用iframe加雄老師的小鍵盤, 先將cursor放在想要的位置, 按iframe.


輸入網址及尺寸, 按ok


會顯示出iframe的位置


按source, 會看到新加入的code


第六步: 將修改過的code, 去頭尾, 再貼入原來表單的頭尾之間, 另存新檔, 用browser看時, 即可看到新加入的小鍵盤顯示在表單上端。


如果想要加聲音, 圖片等, 可以利用其他的小icon功能插入。**記得先剪裁圖片後再使用, 免得網頁開啟時花太多時間。花太多時間才能開啟, 或是自動播放音樂的網頁, 通常我就不會去看了, 請老師們不要讓學生很痛苦的看這樣的網頁。

第七步, 將改過的網頁檔, 上傳到網路空間, 即可讓大眾使用了。

只有七個步驟, 還好啦, 不是太難的, 不是嗎? 喜歡的話, 按一個廣告, 支持一下作者喔~

補記:

• 如果想改上面的圖, 在heading 部分, 找到類似下面的code, 先檢視圖片網址(紫色部分), 參考圖的尺寸, 然後換上尺寸類同的圖片。
  body{background:#000 url('http://themes.googleusercontent.com/image?id=1i_daHMzkzBNcV-v7uOhVYquMt20FCMbbTFxcHAARidZ6PYKs5-KeUa4Gm0erJ5vHVpot&tw=600&th=600')
• Gotcha: 要記得喔, 如果是必須填而沒填某個問題時, 它會送到原始的Google form去, 使用者會看到原來的表單, 而不是修改過的表單。
  
  找到這份進階學習, 怎麼換Style sheet. 有空可以試試看。
  
  
• 克拉克校長的教學講義, 及影片集, 目前有七部, 按下面邊框可顯示。
  
  

有關系列: 免費網站, 檔案分享 3 - dropbox, 數位班級管理