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, 數位班級管理

7 comments :

lienyujen said...

我按廣告了:)
這個要玩得好,還是需要一點點html的基本功!

ChineseDigger said...

Hi L大, 好久不見, 多謝捧場!

只看錄影片學習, 是需要有些html基本概念。

不過將這份檔案, 切割成頭、尾、和主體後, 再用線上編輯器來加物件, 應該比較容易些。很多老師們, 有剪貼和修改的數位能力。

lahohwa said...

有frontpage的編輯器就一點困難也沒有了....
哪裡可以找到編輯器?
除了blog還有moodle嘛!

ChineseDigger said...

To lahohwa,

在第四步那裡, 連有3個線上HTML網頁編輯器。

我沒用過frontpage, 不知道是否還有人用這老舊的東西。你貼好, 看過表單再看原始碼時, 它和原來貼的是相同的嗎?

還沒有試過Moodle的編輯器, 它會保持原來的code嗎?

lahohwa said...

frontpage, dreamweaver, expression這些語法編輯器是不會更動你填入的語法,我在部落格和moodle試過,由於權限的關係,有一些語法是會被自動刪除的。
華文網部落格和moodle輸入html語法編輯器設限很多,部落格情況還好一點,貼上moodle就不要再去更動,不然原先出現的東西會自動消失。

Jennifer Yueh said...

我想請教的是:我學著向老師一樣,使用了ifram的方式將注音小鍵盤和拼音小鍵盤放在google doc
上並嵌入在我的部落格上,可是發現學生做完的答案沒有顯現在我的文件裡,讓我很納悶!我哪裡有做錯嗎?華文網岳老師

ChineseDigger said...

岳老師, 你好.

不知道你自己作答後, 是否會顯示在檔案中呢?

如果你的答案可以顯示的話, 就表示學生使用的方法, 可能不正確。那就得教學生正確的作答法了。

如果自己作答, 都無法顯示的話, 可能是漏了哪個步驟, 電腦是很笨的, 指令少了, 它就頭暈了。