*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2013年1月30日 星期三

ppt做出對話框 & 1px技法!






1px技法 隨意置放 | 對話框




加達默爾:「談話中的相互理解不是某種單純的自我表現和自己觀點的貫徹執行,而是一種使我們進入那種使我們自身也有所改變的公共性中的轉換」(加達默爾/洪漢鼎,2004:491)。
加達默爾/洪漢鼎譯(2004)。《真理與方法》(上卷)。上海:上海譯文出版社。


對話的力量

對話框是很後現代的文本呈現形式。
大家最熟悉的應是漫畫;但漫畫卻被認為是「通俗文化」。
然而,對話框卻是能把「對話形式」文本呈現樣態,充分在媒介上呈現的表現方法。在未來的「後現代社會」中,能不能充分展現以「對話」形態來表達想法,是未來媒體工作者最大的挑戰。
一個孤獨的個體無法展開對話。同樣的,在對話式文本中「讀者的存在與綜合才能成就作品」(Kolko, 2011:14)!
「對話者改變自己也改變別人」!




8 影音教學內容:
  1. 2017年版本
  2. 2013年版本


影音內容說明:
(1)對話框在完成後要設成群組,才能「整個」的變成圖檔,png檔。
(2)如果圖檔的寬度超過表格的寬度,請設一個 Div ,然後(注意!)要拉一下 Div ,之後再將對話框圖插入。
(3)移動 Div : position: relative 。向下移動10px: top: 10px ; 向右移動30px: left: 30px 。


 

Kolko, J. (2011). Thoughts on interaction design. Amsterdam : Morgan Kaufmann.





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↗】


文字列表快速使用:Kompozer文字處理


我要看2013年舊版本


字列表的使用
一眼掌握 | 迅速概括 |適合網路

  1. 網路文本是掃瞄式閱讀,閱讀時間短
  2. 要能快速提供文章的「理解背景」,才能往下閱讀
  3. 列表式文本呈現是網路文字寫作技巧,你要常常用
  4. 以下方式,讓你隨意呈現文字列表表現形態,ok啦



利用文字列表的形式來,來呈現文字的書寫,是很適合網路螢幕媒介閱讀環境的一種文字文本呈現的形態。

可以快速的理解所要傳達的大意。如果有要再加以說明,就可以再往下寫下去。


文字列表有二種樣態:ol (數字帶頭)以及 ul (符號帶頭)


一、ol 呈現樣態:

  1. 這是第一列文字。
  2. 這是第二列文字。
  3. 這是第三列文字。


HTML語法:

<ol>
<li>這是第一列文字。</li>
<li>這是第二列文字。</li>
<li>這是第三列文字。</li>
</ol>


二、ul 呈現樣態:

  • 這是第一列文字。
  • 這是第二列文字。
  • 這是 第三列文字。


HTML語法:

<ul>
<li>這是第一列文字。</li>
<li>這是第二列文字。</li>
<li>這是 第三列文字。</li>
</ul>

要使用Kompozer來書寫文字列表,請看下面的影音教學說明。

文字列表的CSS詳細語法,請看這裡

值得注意的是,ol/ li  或  ul/ li ,都是「區塊物件」。因之,所有的關係它們的空間位置關係的調整,你可以想像成 是以DIV的概念來僺作。

再來,一般而言,我們都會對ol、ul的呈現形式進行某種調整或改造,來符合我們的文本主現企圖。



對ol、ul 進行調整的步驟


先以ol 為範例來說明, 如下(滑鼠移入↓,ol 加邊線):



  1. 這是示範第一列文字。
  2. 這是示範第二列文字。
  3. 這是示範第三列文字。


上例HTML語法:

<ol class="lolichange20171111">
<li>這是示範第一列文字。</li>
<li>這是示範第二列文字。</li>
<li>這是示範第三列文字。</li>
</ol>

首先,左邊的空白區域,並不一定符合你的想法 (click here!!)
再來,數目字或符號,也不不盡合你的意。你想要更好看的圖案或表現形態。


修改的構思和步驟:

一、在ol處,設置 style=" padding-left: 0px; ",使得 li 向左靠到底。
二、在ol處,設置css語法, style=" list-style-type: none; “,使符號項目消失。
三、在li 處,設置style=" padding-left: 2em; ",使文字向右靠。
四、在li 處,設置背景圖,來代替想要符號。
五、你也可以用hove,來設定背景圖的互動。


下列是修改的css語法: (請 按此看效果

<style>

/*把這個class套入 ol 處*/
.lolichange20171111 {
padding-left: 0px;
list-style-type: none;
}

.lolichange20171111 >li {
padding-left: 2em;
background: url(圖像網址) no-repeat left 3px center/ contain;
}
</style>



開頭文字列表範例構思講解


構思方向:
  1. 設定ol,使「文 字」可以完全靠左。
  2. 對ol設定,使標 記的數字消失。
  3. 設定li,讓文字 向右,空出位置給背景圖像當作icon。
  4. 設定li背景圖像 的位 置。

上列範例CSS:

<style>

/* ol 的內容設定 */
#olli20170815 {
padding-left: 0px;        /* 使列表文字靠左*/
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: bold;
line-height: 1.9;
list-style-type: none;     /* 數字標記消失*/
}

/* li 的內容設定 */
#olli20170815 >li {
padding-left: 2.5em;      /* 空出位置呈現背景圖*/
background-image: url(圖像icon網址);
background-repeat: no-repeat;
background-size: 22px;
background-position: left top 5px;     /* 調整背景圖位置*/
transition: 0.4s linear;
}

/* li 的互動設定 */
#olli20170815 >li:hover {
background-image: url(圖像icon網址);
}

</style>

影音教學:




 
2013年教學版本


  解文字,寫成列表  
                       


數位文本是以螢幕為閱讀媒介,快速掌握重點是「掃瞄閱讀」的要求。
  • 大量文字要柝解成小區塊文字。
  • 可以列表呈現的,就要列表呈現。
這樣,讀者可以快速決定要不要往下繼續把時間花在這一訊息。


8 影音教學內容:



影音內容說明:

  • 列表小icon的網站網址:http://www.websitebullets.com/
  • 使用小圖示icon列表的語法: list-style-image: url(xxx) ;xxx=列表icon的位 置網址。