數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2013年1月5日 星期六

互動文本:按一下滑鼠跳出小視窗





為什麼一定要互動?怪了!



123  搞定Javascript
8 按一下滑鼠,跳出小視窗!


← 花蓮的海豚

如果你夠幸運,
在夏天的時候,到花蓮去一趟。
或許,
有機會可以看到海中跳舞的精靈。

風和著藍天,
舞動和著波浪,
只看一眼絕對是不夠的,…。

video 水中的嬉


資訊分層的寫作思維
網路的資訊安排往往是有淺深不同層面的。
我們第一眼在螢幕上看的訊息要淺,要易於理解。
而Click下去再跑出來的,往往要求深度訊息、詳細訊息。



8 影音教學內容:

創作流程:
  1. 先做好新視窗要呈現的網頁。
  2. 把網頁儲到ftpdropbox
  3. 將所要連結的文字寫入開新視窗作用的javascript。


影音內容說明:
(1)使連結無效的程式碼:javascript: void(0)
(2)字要按一下的程式碼選用: onclick ;開新視窗作用的程式碼:
window.open ('xxx', 'newwindow', config='height=345,width=450')
(3) xxx=新視窗網頁的位置網址。 height=高度,width=寬度,都要比所選用的影音高度和寬度大,本例為各加30px。
(4)請注意 height 和 width 兩個指令是以逗號分開,但兩個之間不可有空格。


補充:載入 youtube 影片的語法:

按一下跳出 youtube 影片的視窗

<a
href="javascript:window.open ('http://www.youtube.com/embed/MWMwLra7yXM?rel=0', 'newwindow', config='height=315,width=560')">
按一下跳出 youtube 影片的視窗</a><br>
【影音教學 video↗】


沒有留言:

張貼留言