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

2012年12月27日 星期四

表格使用基本功(7):把影音貼到照片上面去

 
  KompoZer!!
表格使用基本功(7)
把影音貼到照片上面去









 我最愛的回憶!海生館。想到流口水。


8 影音教學內容:

影音內容說明:

  • 設定表格置中。
  • 設定表格內文字的位置。
  • 表格內插入div,並位移。




圖像材料:



CSS 插入背景圖語法:

<style>
#bacimg0427 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 寬度px 高度px;
background-position: left top;
}
</style>



2012年12月25日 星期二

表格使用基本功(6):為照片加上透明文字腰帶


 
  KompoZer!!
表格使用基本功(6)
為照片加上透明文字腰帶
照片總是需要再說明,才 有更豐富的意義。
在照片上加入透明的文字腰帶,文字與照片這兩種「異質性」的媒材,在此,卻若有似無的相互結合在一起。
這正是多媒體文本的重要特色。












在秋天的印象下

從遠遠的視野,秋總是不見天日的看著你。
並不是一種伸手不見的感覺,
但,
總是讓人若有似無的走著走著向著天際線。



CSS語法:

<style>
.backimg0118 {
background-image: url(圖片網址);
background-repeat: no-repeat;
background-size: 570px;
}

.ironcontent0118 {
font-family: Verdana, '微軟正黑體';
font-size: 1.14em;
font-weight: normal;
line-height: 1.6;
text-align: left;
letter-spacing: 0.1em;
}

.littletitle0118 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.03em;
padding: 0.5em;
}

.transcolor {
background: rgba(255, 255, 240, 0.4);
}

</style>

補充的CSS:hover

.transcolor:hover {
opacity: 0;
}

8 影音教學內容:



影 音內容說明:

  • 插入背景圖語法; background-image: url(xxx);,xxx=圖片位置網址。
  • 背景圖不重覆語法; background-repeat: no-repeat; 。
  • 調整圖片大小; background-size: 570px;  。
  • 背景色透明度,0  (0~10); opacity: 0; 看不見 。



相關技能:

插入背景圖。 click here!
透明背景色。 click here!



2012年12月23日 星期日

表格使用基本功(5):不同分割比例的表格寫作

 
  KompoZer!!
表格使用基本功(5)
影像排排站呈現規律美


冬日 植物園

冬日走一走植物園,
看到的是另一種完全不同的景緻。
枯黃的外表中,一種強勁的生命力,正在等待著。

會動的,不只是風吹動的枝葉。
小小鳥兒、動物們,讓畫面有著無限的生命力。







 

8 影音教學內容:


影音內容說明:

  • 使用等比例分割,以及黃金分割二種平面構圖原理。
  • 合併表格時,請先選擇要合併的表格,再按滑鼠右鍵,按「加入選中的儲存格」,即可。





範例使用之CSS:

<style>

/*表格內小標 */
.littletitle010513 {

font-family: Verdana, '微軟正黑體';
font-size: 1.31em;
font-weight: bold;
line-height: 1.6;
text-align: right;
letter-spacing: 0.08em;
margin-bottom: 0.6em;
border-bottom: 1px solid gray;
}


/* 表格內基本細明體 */
.ironcontentmi010513 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.1em;
}
</style>



2012年12月22日 星期六

表格使用基本功(4):用表格來強調文字重點

 

  KompoZer!!
表格使用基本功(4)
用表格來強調文字重點

掃瞄性閱讀的重點強調@!!@形式
螢幕閱讀,讀者是沒有耐心的。
所以文章的重點,要能夠明顯的呈現出來,讓讀者快速判斷重點會是什麼。
讀者就可以決定是不是要花時間理解這文章。

 

8 影音教學內容:

影音內容重點說明:
  1. 手動來拉動表格的寬度。
  2. 使用表格格子內文字位置置放的功能。

★ 表格寫作的三個基本動作。一定要會! click!



CSS中標字樣態

CSS表格內基本微軟正黑體樣態。CSS表格內基本微軟正黑體樣態。



引文圖像材 料:







影音內文字所用之 CSS:

<style>

/*表格內小標 字*/
.littletitle010520 {

font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.08em;
border-bottom: 1px solid gray;
}


/* 表格內基本微軟正黑體 */
.ironcontentmi010413 {

font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: normal;
line-height: 2;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.1em;
}
</style>





2012年12月21日 星期五

表格使用基本功(3):文接圖// 文繞圖的技法



搞定圖像接文字的位置關係
一、文接圖/一行
二、文繞圖/填滿
弄清觀念,圖文的位置安排,搞定垂直對齊!





你可以把文字擺在這裡嗎?
看起來簡單,
但注意哦,左邊是有圖片在哦!
你不一定搞的出來。



這就是圖文位置關係的「觀念」和寫作「技法」。讓你的想法和表達,能夠有效呈現。





一、文接圖的呈現形態


文接圖,簡單的說,就是把圖片當「字母/文字」看待,所以反正最後只能是「一行」。如果進行斷行動作,就會跑到圖像的最下方,起始下一行。

文字(圖像)與文字的對齊方式,有三種,對齊底部、中間、頂部。


呈現範例:

接 在後面的文字。對齊底部。預設值。align="bottom"。


滑鼠移入 ↓

對齊頂部。align="top"。如果在此斷行,
文字就會直接跳到圖像的下面的起始的一行開始。




接在後面的文字。對齊中間。align="middle"。如果我們一直寫一直寫,超過編輯區域寬度,字就會自動跳到圖 像的最下面來,從這裡再開始新的一行。


語法:

<img style="width: 200px; height: 133px;" alt=""
src="https://farm5.staticflickr.com/4383/36486171504_1d707ce21d_o.jpg"
align="middle">接在後面的文字。對齊中間。align= "middle"。如果我們一直寫一直寫,超過編輯區域寬度,字就會自動跳到圖像的最下面來,從這裡再開始新的一行。<br>


說明:

預設值中,圖像可以被視之為是一個大型的字母,依字母接字母的慣性,所以後面的文字會緊接在圖像後面。
同時(1),kompozer中一按【enter】或是加上<br>,就會斷行。字就會跳到圖像的最下面的起始一行開始。
(2)又如果字寫得超過編輯寬度,也會自動跳到圖像的最下面去,再開始。



二、文繞圖的呈現方式


從上面可以觀察到,文接圖的方式,會產生大量的「空白」版面區域。如何不去產生這些空白區域呢?就要用文繞圖的方法。去「填滿」空白。

呈現範例:滑鼠移入↓

這是文繞圖的文字。可以看到,文在圖右方的空白區域內,進行持續寫作過程。字會一直往空白區填入。直到填滿為止。或是下 <br clear="both">這一特別的指令,就會停止填滿空白區,而直接跳到圖的最下方。這裡有下斷行指令:< br clear="all">
這是接在圖像下方的文字。




語法:

<img style="width: 200px; height: 133px;" alt=""
src="https://farm5.staticflickr.com/4383/36486171504_1d707ce21d_o.jpg"
align="left">這是文繞圖的文字。可以看到,文在圖右方的空白區 域內,進行持續寫作過程。字會一直往空白區填入,直到填滿為止。或是下
<br clear="all">這一特別的指令,就會停止填滿空白區,而直接跳到圖的最下方。<br clear="all">這是接在圖像下方的文字。<br>



這是文繞圖的文字,這次是圖在右,而文字在左。align="right"。同樣的也會進行填滿空白區域的動作。
即使斷行也也一 樣,會繼續填滿。所以才稱之為,「文繞圖」。如果你想要 直接斷行到圖像最下方。在kompozer中,請選【插入】/【斷行至圖片底下】,這一功能。
於是,文字就跳到最下方來了。可以再進行寫作的動作了。這就是文繞圖的基本操作模式。


說明:

如果是文接圖的CSS,那麼寫法是:

style="vertical-align: top;"

或是,

.imgclass {
    vertical-align: top;
}

// top, middle, bottom,三種模式。

又,
如果是CSS的文繞圖,請使用float語法。請看float詳細說明例如:

style="floatf: left;"   // left , right 兩種參數



<style>
.floatneed {
float: left;
}
</style>


課堂影音講解:




練習作業一


海上遊輪

是假日,也是非假日。

在高大的海上,看著一片風的湧動。



是心情,也是非心情


構思:

一、大圖做出文繞圖。
二、文字寫人右側空白區,圖片可以寫入。
三、使用<br clear="all">斷行到底部下行。



練習作業二





向前看的日子

未必是日日的一種重複,
走走看看,與配上的一種衣服的搭唱。

細細的網紋中,有著生活中鮮明的脈絡,在走走跳跳的忙碌中。



搞定上、中、下垂直對齊位置關係的使用技法


編輯物件之間的上、中、下之對齊關係,在使用html的狀況下, 表格/格子、圖像這二種編輯元素中,都有見到。

表格/格子:<td valign="top">  //參數,top、middle、bottom 。
圖像:<img align="top" src="xxx">  //參數,top、middle、bottom 。

可以看到,標記不同,有些混亂。所以在CSS的使用上,就變得統一了。

垂直對齊方式的CSS統一語法:

style="vertical-align: middle;"   //參數,top、middle、 bottom 。

圖像:<img style="vertical-align: middle" src="xxx">
表格/格子:<td style="vertical-align: middle;">



** 注意**

文字與文字之的垂直對齊,也可以使用vertical-align。但是只能有二種對齊方式:top、bottom。(如果你真的想用middle,那你 要把文字的span,轉成inline-block,就是變成「圖像」才能被居中。)

文字垂直對齊的CSS語 法:

<span style="vertical-align: top;">這是小字</span><span style="font-size: 3em;">這是大字</span><br>


呈現樣態:

這是小字這是大字


說明:

有 vertical-align 的 span,會去對齊那一行中最大字母的頂部或底部。



使用kompozer的操作方法


  KompoZer!!
表格使用基本功(3)
在表格內來文繞圖
文字
繞著
圖片

透水的浮光:文繞圖

文繞圖,有時就像會透著水的景色。
可以讓你看見全貌,但呈現的又是部分清楚、部分糊的。這像是生活的印象。

▲▲ 圖像與文字之間的「圍繞」關係,這一操作原則,除了在表格內可以使用外,在文字的其他編輯區都可以使用。本例只是藉由表格來說明。


8 影音教學內容:



影音內容補充說明:
(1)文繞圖狀況下,圖片四周給出一點空間,就可以讓圖片吸呼,讀者也就可以跟著呼吸。



2012年12月16日 星期日

表格使用基本功(2):表格本身的居中 v.s. 內容的居中

  KompoZer!!
表格使用基本功(2)
表格本身的居中 v.s. 內容的居中

表格本身
*二種不同的概念與技法*
表格的內容
在網頁的寫作、編輯過程中,使用表格,二個概念常被搞混。
(一)表格本身是一種技能。(二)對表格內容的操控又是另一種。



數位文本的文本組構特色之一,是「空間敘事」的敘事寫作技法
表格是數位寫作物質基礎,即各種數位寫作語法所構成的寫作形態,最容易拿來表現「空間敘事」的簡易數位寫作技能



8 影音教學內容:



影音內容補充說明:
(1) 如使用表格來居中,記得要拉動一下表格的寬度,如此寬度的大小才會被固定住。
(2) 表本身有居中的功能。如果是div,則就要使用語法來控制





2012年12月15日 星期六

表格使用基本功(1):好看的圖和圖說配置


  KompoZer!!
表格使用基本功(1)
好看的圖和圖說配置

一隻會思考的狗!
多媒體媒材的整合性寫作,媒材之間的「空間位置」關係是寫作上的必要考量事項;換言之,寫作的同時即要考慮排版問題。這是數位媒體寫作和傳統文字寫作很大的差異之處,此即前製和後製要集於作者一身。而表格是數位文本中排版的最基礎技能,透過表格的運作,才能將多媒體素材進行初步的整合。因之,表格的運用,非學不可。

8 影音教學內容:

>

影音內容補充說明:
(1)使用表格的居中功能。
(2)使用表格格內的文字居中功能。
(3)在表格內置入DIV。



影音中使用之 CSS語法:

<style>

/* 表格內基本黑體字 */
.tabword0515 {
font-family: Verdana, '微軟正黑體';
font-size: 1.12em;
font-weight: normal;
line-height: 1.4;
color: white;
border-bottom: 1px solid black;
}

</style>




2012年12月10日 星期一

有聲音的照片



聲音為影像做解釋。
讓影像內容豐富度可以因聲音的加入而更為具體。



 w 那天下雨,水盆的水和雨同時搖盪。傾聽雨聲,水漫的山河大地。

 


創作的流程:

(1)先做一個表格。
(2)表格插入背景圖。
(3)將mp3聲音檔放置網路空間(ftp),並取得mp3檔案位置網址。
(4)表格的內文設置為置底和置左。
(5)表格內插入mp3 flash player 。或著使用html5的聲音播放語法。



應用的方向:

(1)人物的訪問呈現方式,以照片加上聲音。
(2)拍攝到具有強大張力的照片,經判斷後認為照片比影音更有撼動力,也適用照片 加聲音



使用html5 的聲音播放語法(2017/07/26補充):

<audio controls autoplay >
<source src="http://lmcdwriting.org/userfiles/lmcsilver20121007/audiox/rainfall1208.mp3" type="audio/mpeg">
</audio>


使用google drive呈現在網頁上:請按此看文章







影音教學:

 
影音教學內容重點項目:
(1)請先確定照片的大小或裁圖
(2)表格的大小要和照片的大小一致。
(3)使用kompoZer製作表格。
(4)插入背景圖語法:background-image: url(http://newsweek.shu.edu.tw:8080/lmcsilver20121007/image201210/590x393001.jpg)。
(5)Ftp的使用或網路空間的使用(dropbox)
(6)flash mp3 player的 mp3語法產生器(第一點)。 mp3語法產生器(第二點)


《新約全書.馬太福音第十章》
「所以,不要怕他們,因為掩蓋的事,沒有不露出來的;隱藏的事,沒有不被人知道的。」


《六祖壇經.釋功德淨土第二》
善知識,念念無間是功,心行平直是德。自修性是功,自修身是德。

2012年12月3日 星期一

不小心就會動畫了:PPT傻瓜大法

go
動畫其實真的不困難。

如果你已經會把Flash檔案嵌入網頁, 就像把 image gallery 嵌入網頁一樣。

那麼你就可以用PPT做出簡單動畫, 再用 iSpring Free 轉成Flash檔。

靠PowerPoint就可以用動畫來表現新聞內容!


我的照片就會「動起來」!




2012年11月17日 星期六

影音剪輯嚇嚇叫:剪輯、上傳、嵌入,一氣呵成。


怪事!影音剪輯完全不會「頭痛」了。
Movie Maker讓你隨便就「嚇嚇叫」!

v 李明哲 嚴選保證 兩大理由必學 Movie Maker
有一句老話:「莫輕新學」,就是不要輕視新手;其實對一些入門級的軟體亦然。Movie Maker 是影音初學、入門者最好的實戰軟體。去網路查一下,把Movie Maker推廌為免費影音剪輯軟體第一名者,可謂多如過江之鯽。它超好用,易上手,可以幫你打下影音剪輯的各種基本概念。對一般網路影音剪輯使用者,足夠嚇嚇叫了。


î Movie Maker,七分鐘完全上手搞定!

(1)使用軟體:windows作業系統內建附屬軟體,movie maker。
(2)下載處:如果你的作業系統不知為什麼沒有這個軟體,請免費下載


注意事項:
(1)如果你的電腦讀不出你要剪輯的影音,請先用格式工廠轉成*.WMV檔
(2)movie maker 內可以放入影音,也可以置入照片。
(3)編輯時請留意一下你所處理的片段是影音片段,還是聲音片段。


î 影音上傳Youtube到再嵌入到網頁!

(1)使用影音網站:Youtube


注意事項:
(1)請先開設你的youtube影音頻道。
(2)請到影片管理員/編輯/標題,寫上一個好的標題名稱,讓讀者可以判斷要不要往下看。


î 剪輯成果




Premier影音剪輯教學系列:

Adobe Premiere操作實務


2012年11月12日 星期一

當古典碰到新科技 《google + 論語》



我的《google+ 論語》要來開張了。


這是還王淮老師人情。
據說他是當年牟宗三的第一大弟子,
但他也因走入道家而被逐出師門。
可是,他上論、孟卻是最精采的,
他說他要還牟宗三的人情。
大學時,我聽了四年他的課。
因他,我才能讀懂古典。
我有強烈的感覺,
要把《論、孟》講下去,
才能還他人情。
也是還孔丘人情。
這可以算是緣起>>




《google+ 論語》計畫

如果可以,
þ 我星期一、三、五晚上十點半,來講個五到十分鐘。

利用 google + 的 Hangouts 的直播功能,現場來直播,講論語。
這樣我覺得很刺激,也是一種重要的動力。
þ 大家可以到我的 youtube 頻道來看講論語的「數位網路」現場。

我希望能一直的持續下去,
直到我覺得沒有欠人情為止。

如果可以,我要打開阮的心,感謝老師您。


《google+ 論語》No. 1

《論語.為政》:吾十有五而志於學… >>

以後往下講的,都在  youtube 的播放清單中>>。




2012年10月31日 星期三

讓圖像說更多:DIV + 照片的變化處理



影像視覺投 射出意義!

圖像畫面的細微變化,不是為了悅目,而是要呈現出更多豐富意義。
DIV + 圖像背景圖 + 文字寫作 的整合性寫作技法


DIV + 背景圖 + 文字的圖文寫作之前後對比#1


為什麼不直接對影像進行變化作用,而是要把影像以背景圖的方式塞到DIV,再對DIV進 行變化作用呢?

before
after



那是因為,把圖像以背景圖方式塞到DIV中,可以「圖文整合」表達出更多層次的、可以互動的圖像豐富意義。只要你有能力掌握DIV…

寫作 v.s. 排版#2


數位文本的寫作是一種「有版型概念下的寫作」,換言之,在下筆之前即要構思區塊文本之內異質媒材之間的「排版」關係。
例如,陰影的使用,代表「立體化」;立體化代表「對象化」的強調。對象化,代表對描述客體的加重意義。
圓框化,代表對圖像在意義上的一種柔化的意義呈現。
圖像細微的變化所產生的「意義感受」和文字的寫作搭配起來,會形成豐富層次的意義表達。


數位文本創作者,用傳統的平面術語而言,應是作者、文編和美編的三合一。這並不是媒體競爭環境中對工作人員精簡需求下而來的工作者「多技能」要求,而是數位多媒材文本多重形構寫作概念下的「必要寫作技能」。


#1
網路寫作的「視覺性」
網路文本要重視「視覺性」, 或著說網路新聞的記者要有「為視覺效果而寫作」的能力。
--Stovall(2004),Web Journalims.
Artwick 強調,記者在構思新聞的結構時要有「視覺化的思考」(thinking visually)(Artwick, 2004: 151)。強調「視覺化」指的是要重視數位文本的「呈現樣態」,用傳統平面的術語,亦即是要重視「版型」,而並不是要多用圖像或是濫用圖像,這是一般所常被(學生)誤解的。

因之,視覺化寫作所強調的,即是「版型」的概念對創作者在寫作過程所提出的新要求;如果在螢幕閱讀中掃瞄是最重要的閱讀行為,那麼「版型」之於數位文本的創作,在重要性上就更勝於在其他媒介之上。

照片處理,就是數位文本「版型寫作」模式的必要寫作技能


陰影、圓角效果語法範例#3


「照片處理的前後對比#1」這一文本區塊的完整語法:
<div style="-webkit-box-shadow: 2px 4px 5px gray; background-image: url(https://c1.staticflickr.com/3/2853/33832379760_80526cd4f4_b.jpg); border-radius: 25px; float: right; height: 202px; margin: 10px; width: 270px;">

<span style="font-size: 130%;">after</span></div>

<div style="background-image: url(https://c1.staticflickr.com/3/2853/33832379760_80526cd4f4_b.jpg); height: 202px; margin: 10px; width: 270px;">

<span style="font-size: 130%;">before</span></div>
語法說明:
style="-webkit-box-shadow: 2px 4px 5px gray;",這是陰影框的語法。2px 指陰影 x 軸右移2px,4px 指陰影 y 軸下移 4px, 5px 是指陰影的擴散範圍。gray 是指陰影的顏色,灰色。
style="border-radius: 25px;",這是圓角框的語法。25px 是指彎曲度。

使用kompozer的影音教學:





影音教學中的CSS:
<style>
.divshadow {
-webkit-box-shadow: 2px 2px 2px gray;
}

.divradius {
border-radius: 25px;
}
</style>


對圖像的處理,有二種思考方法,一是對圖像本身進行後製處置。二、把圖像以背景圖方式塞入DIV,再對DIV進行變化操作。第二種方法是我們在此所要強調的,建議常以此種方式來思考對圖像的使用。


新聞是一種「創作」,本來就是,一種有特定規則的創作。

但正如我課堂講的,網路新聞的「閱讀性」,已從「時間性」轉往「空間性」,也就是我愛談的「排版寫作」。

換言之,形式是要帶入對意義的表達過程。

就這點而言,亦即就「空間性」的構思而言,往往易有靈感「枯竭」之感。

來,請看這本…
《前衛藝術理論》
Theorie der Avantgarde
http://www.books.com.tw/products/0010069676

請你不要想去「讀懂它」,真的。你功力遠遠不夠。
但要去翻一下,
前衛藝術,或是現代藝術(以及可能的當代藝術),
有很多範例,
光是作品本身就會給你很多想像。
讓你敢「跨出去」。

補上這本http://www.books.com.tw/products/0010551638
《當代藝術這麼說》





2012年10月28日 星期日

圖文整合寫作的圖像編輯 三步驟搞定!






圖像處理  三步驟
1 視覺焦點
2 主體呈現
3 背景層次
三步驟,精準完成圖文整合。





果有照片之類的東西,就需要在新聞中以某種方式提及,並使讀者把兩者聯繫起來。如果不想在圖片下面加上長的圖片說明或圖片說明區,那就應該在正文中提及圖片。……。如果圖像與文字不吻合,大腦會自動地選擇圖像而拒絕文字。但這樣令人費解,從而會導致新聞報導的失敗(Wolk/彭蘭等譯,2003:92)。
  ──Wolk, R.(2003)。《網絡新聞導論》(彭蘭等譯)。北京:中國人民大學出版社。





1 視覺焦點

視覺焦點:是指當受眾接觸到圖像後,視覺會在圖像上所停止的位置,然後再從此位置開始對圖像的內容及意義進行深一層的理解。

Robert Clay :
眼睛在漫步時,它們還需要有休息的地方,或者為之停留的焦點。
── (2010: 132),《設計之美》。

一般而言,如果畫面沒有特別的設計有意將受眾的視線特定引導到畫面某一「定點」,那麼受眾會依由左而右、由上而下的次序,掃瞄井字型的四個交义點區域,再判定要停在那區域,即視覺焦點,並進行圖像的理解和解讀。

因此,影像媒材的創作者,最好將能凸顯出「針對性」意義的物件元素放在井字型的四個交义點區域。

以下範例,請你移動滑鼠, 找一下視覺焦點在井字型構圖線的那裡。












2 主體呈現

主體呈現:依上述,被放置在井字型四交义點附近區域的物件元素,是為了讓讀者可以快速理解出圖像內具有「針對性」的意義,以與其他媒材進行互文性的理解。

因之,這「物件元素」應是能讓受眾從畫面中形成主體或主題判斷的「重要關係物件」。

下圖是 Dawkins & Wynd 在 Vidoe production: Putting theory into practice 一書中所舉的圖例。四個小朋友的頭部大約集中於橫上方線,共同形成小朋友「群集」的主題。

資料來源:Video production (p. 70), by S. Dawkin & A. I. Wynd, 2010, New York : Palgrave Macmillan.

3 背景層次

背景層次:在畫面中,被判斷成「主體」或「主題」物件元素之外的其他部分,就是背景區域。背景區域會烘托或襯托主體的意義深度或複雜度。

圖像的背景會對圖像與其他媒材形成共構式互文作用解讀時,產生更為豐富的意義添加。

更多的圖例,是我的隨手拍,但也都依井字型構圖法來思考圖像表現,拍得有好有壞,各位可以一張一張看看,我拍攝時心中主體是什麼?


簡單的主題是最好的,用一張主題明確的簡單照片,不要讓讀者疑惑。 Golombisky, K, & Hagen, R./林安琪、于冠雲譯(2012)。《設計之鑰》。台北市:碁峰。 p. 133。


圖像拍攝與精準的意義

視覺焦點、主體呈現與背景層次,這樣的對圖像的解讀過程,是為了要讀出圖像的精準意義出來。

圖文整合,在於文字和圖像要共同作用之下,來形成「共構式」的意義給出。這是多重型構式的文本。即,文字和圖像扮演「同樣重要」的角色。

所以,圖像被解讀出來的意義,一定要清楚。否則,圖文整合式的共構式文本構成,就無法產生可被理解的意義。

再講一次,視覺焦點、主體呈現與背景層次,是解讀出圖像意義的過程。所以,你選擇出來的圖像,要能被以如此的方法來解讀出來。

同樣的,如果你是拍攝者,你就要以這種「構圖方式」來拍攝出圖像。如此,讀者才能解讀出你的拍攝意圖出來。

參考資料:

李明哲(2013)。《多媒體互動新聞寫作:理論與實務》。台北:五南。




4 電視新聞畫面的構圖

來自BBC的新聞畫面,請觀察「如何使用構圖法則」來拍攝畫面。






2012年10月26日 星期五

又一超好用的 image gallery,忍不住要教!



超適合新聞報導用的 Image Gallery! 驚奇!
有大圖、小圖、圖說,可以完整的用Galley來說上故事。
快速。好用。支援中文。幾個步驟,簡單語法,馬上嵌入網頁。

實例展演

秋高氣爽,最適合上陽明山。那是我愛得不得了的山。光是看著陽光灑上樹葉上的綠,心中的莫名就愉快了起來。這種時節,去文化大學上課是很棒的。乾爽的空氣會導引著你>>

Free! 我超愛
Juicebox


執行步驟:

  1. 到 Juicebox 官方網站下載免費的 Juicebox-Lite。檔案為Zip壓縮檔。
  2. 解壓縮。執行 JuiceoxBuilder-Lite.air。xx.air檔,表示你要下載Adobe AIR,安裝,才能執行Juicebox。一般而言,如果你有安裝Adobe CS,就會有安裝Adobe AIR。
  3. 執行後,跟著4個步驟做,很快就完成了。我的教學影音很詳細>>。
  4. 把完成作品的「資料夾」,放到網路空間或新聞系的FTP
  5. 再簡簡單單的下<iframe>語法,就可以嵌到網頁的Html中了。


用<iframe>嵌入網頁語法:

<iframe frameborder="0" height="600" scrolling="no" src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/gallery1026/juicebox1026/index.html" width="580"></iframe>
語法說明:
  • 紅色部分為做好的資料夾中 index.html 檔案的網址位置。此例放在新聞系FTP。
  • <iframe>xxx</iframe>中的寬度 widht="xxx" 和高度 height="xxx"要特別留意一下。<iframe>的寬度要比「大相片」的寬度為寬才行,依我的經驗我會依相片的寬度再多加上40~60px。如依此例,相片是540px,我再加上40px,所以是width="580"。高度也一樣,最好是依相片的高度,再加上照片的三分之二的數值。依此例,高度是360,360的三分之二是240,所以是height="600"。



Q&A: 要改變圖片的大小,如何找出正確的長、寬數字?很簡單,影片>>



影音教學實作作品: 在城市與公園的界線中間>>


往外一跨,即是另一世界。
綠與藍的寂靜,一時間就無蹤無影。
城市的樂趣,就在此,一步間,
站在界線的中間,
我想,
張開雙臂擁抱。

2012年10月25日 星期四

數位寫作:文字對齊的選擇


文字對齊的選擇?

文字對齊模式有四種,
其實會形成不同的視覺效果,
這代表不同的文字位階。


4種靠法:大家都知道,在處理文字的「靠邊」形式,共有四種。靠左、靠右、置中、左右對齊。但,大概你沒有想過,什麼時候用那一種「靠邊」模式,才算「合理」。

主文:就中文字而言,一般的主文,我們會選擇「左右對齊」。因為這會讓文字形成一種文字塊,讓人知道,裡面有很多豐富的訊息想讓你知道。而且訊息量還很多呢!同時,文字塊也有一種較為「正經」的視覺效果,因之一般的「內文」、「主文」等概念下的文字,最好都以「左右對齊」的格式來處理。

標題:那「靠左」、「靠右」以及「置中」這種模式,因為不會形成文字塊狀,至少會有一邊形成不規則狀,這就有某種「對比性」的視覺效果。適合,「標題」概念下的文字,或是「圖說」概念下的文字。

觀察:有了以上的概念,你就可以去觀察文字對齊方式被使用的時機 。我講的只是一個大方向,你最後會形成自己的「文字排列設計法門」。
在版面中的主要文字部分以兩邊對齊的方式放上文字,塑造一種塊面感,並產生一 種力度。
──夏井藝華,《版面設計》





補充資訊# 1:
陰 影框語法
<div style="-webkit-box-shadow: 1px 1px 3px gray; font-size: 130%; font-weight: bold; line-height: 36px; padding: 10px 10px 10px 10px; width: 260px;">
文字對齊模式有四種,<br />
其實會形成不同的視覺效果,<br />
這代表不同的文字位階。<br />
</div>
語法說明:紅色字,即為陰影框的語法。1px x軸位移1px,1px y軸位移1px,3px 陰影柔化範圍 3px,gray 陰影顏色灰色。

補充資訊# 2 :
中文字左右對齊的語法如下:
<div style="text-align: justify;  text-justify: distribute; width: 380px;" title="內文,所以是左右對齊。">
xxxxx
</div>
語法說明:中文較為麻煩,所以紅色兩部分兩者都要寫進去。

2012年10月21日 星期日

數位新聞的寫作結構:分層文本結構


走出「線性結構」,學會「分層文本」寫作


傳統的報紙文字寫法,即是線性結構;
也就是所謂線性文本。
數位文本的文本結構,是「分層文本」結構;
你需要重新來學習。




➲ 文本的結構?

我們一般大概很少去想到:平常在寫、或拍的新聞作品,其實敘事開展的過程是有結構的。在學習數位文本/數位新聞寫作,最大的困難,並不是那些多媒材掌握的技能,而是在於思考文本表達時,那種寫作習慣上結構性的全新改變。

一般而言,常有四種結構形態來表達文本的結構:

  • 直線式(linear)
  • 階層式(hierarchical)
  • 非直線式( nonlinear)
  • 組合式( composite)

如下圖:
資訊來源:Multimedia: Making it work (p. 409), by T. Vaughan, 2008, New York: Sage. 原圖>>

  組合式:敘事性文本最常用的文本結構

一般的平面、電視等文本的訊息流動,都是直線式的。要從頭看到尾,否則就是中斷閱讀。

數位敘事文本/網路新聞文本,在其文本呈現的結構上最常見的是「組合式的」分層文本>8。讀者在閱讀過程中有極大文本控制權,但同時也不至於無方向感的亂讀。換言之,多媒體互動新聞文本的組構,最好是以「組合式」「分層文本」的想法來表現。

用「分層」的想法來寫文章。哈!我猜一定沒都沒想過。所以 寫起數位文本才會那麼痛苦。因為你忽然發現,用線性的思考方式之外,你變得不會思考了!


上課影音分層文本下的互動文本寫作

1.同層互文、2.淺文本到深文本、3.同層補充,這是數位文本「互動寫作」的三種運用模式>>


➲ 怎麼練習?

就去練習寫作分層文本的文章或新聞啊?

不會!看看這個網站:L.V.

有沒有發現,其實就是你在寫 powerpoint 簡報時的那一回事。將你的資料分成幾個重點區塊,每個重點區塊再依內容的重要性,區分成由上而上的文本分層區塊,形成分層文本結構安排。

真的。最後,只是要更多地在區塊裡加入可以連結到其他文本區塊的「連結點」而已。這也就是我上課的一定會要求的習作練習:用 powerpoin 來寫作一篇多媒體互動文章。

然後,愈是在分層文本的上部分的,訊息要愈簡單,以讓讀者快速掌握。而被安排在分層文本下層部分的,則可以是愈「深入」的訊息。因為讀者已被吸引到這裡來了,他/她想要看的是「更深人、更仔細」的內容。


圓 角框線語法 <div id="20121021" style="border-radius: 15px; border: 2px solid orange; height: 240px; margin-bottom: -240px; position: relative; top: -320px; width: 540px;">
<br />
<span style="color: red;">☆</span> 組合式:敘事性文本最常用的文本結構 <span style="color: red;">☆</span>
</div>
語法說明:紅色字 即為圓角框線的語法,15px 即圓的程度。

2012年10月20日 星期六

版型的重要:新的發現


這個時候,我們要記得偉大的編輯是偉大的溝通者。
這個時候,我們也要記得此地並沒有真正的編輯教育,不要相信新聞系、大傳系曾經訓練出屬於台灣的編 輯,台灣的編輯是自學的。
──詹宏志(1991)。〈序:編輯的人格與風格〉.《創意編輯》(台 北:美 璟文化)。


這的確是我的新發現

當過雜誌的總編輯,對版型的要求,那是一定的。但我一直對數位文本的版型之重要性,不太有感覺。多媒材的整合寫作,一直是我掛心的思考點;版型的力量彷若蒸發。

這陣子,那種感覺又回來了。那是因為我又忙著思考:如何才能創造最好的數位文本在閱讀上的「掃瞄效果」。掃瞄,是螢幕閱讀的「正常」行為!

那麼,數位文本中版型的結構要如何才能創造最好的「多媒材的掃瞄效果」呢?我思考著。我觀察著。於是,我也試著創作著。



逛到北京.長城

那天天氣好的不得了。 到了北京,長城,吸引我的地方倒是那幾座廟。
我一直好奇,在面對生死交迫的地方,人們如何來呈現出他們對生命的渴 望。
這座香爐,很新。1997年。
看不出向著生死的卑微,而是一種面對富裕的自信。
彷若唐朝的佛像一般,但少了一種對上蒼冥冥的感動。



版型的構思

先來思考版型的構思流程,再來擔心語法問題。這次我們看的是「長城圖片」的左邊部分:
  1. 先作出一個表格。
  2. 寫字寫到想插圖的地方,就插上圖。但是:(1)圖片要設為置左,這會有 float 的效果,亦即字會向右填滿。語法:<img align="left" xxxx>。 (2)用 CSS 在圖片上設定位置向左位移 100px,語法:style="position: relative; left: -100px;"。
  3. 圖片位移後會有空白出來,所以圖片的右邊界要設為內縮 90 px,以補上空白。語法: style="margin-right: -90px;" 。
  4. 再來就繼續寫字寫下去。

完整語法如下:
<table border="0" cellpadding="2" cellspacing="2" style="width: 372px; line-height: 24px;">
<tbody>
<tr>
<td valign="top">那天天氣好的不得了。
到了北京,長城,吸引我的地方倒是那幾座廟。<img align="left" alt="" height="146" src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/image201210/P80951901019.jpg" style="left: -100px; margin-right: -90px; position: relative; margin-top: 2px; margin-bottom: 0px;" width="300" /><br />我一直好奇,在面對生死交迫的地方,人們如何來呈現出他們對生命的渴
望。<br />
這座香爐,很新。1997年。<br />
看不出向著生死的卑微,而是一種面對富裕的自信。<br />
彷若唐朝的佛像一般,但少了一種對上蒼冥冥的感動。<br />
</td>
</tr>
</tbody>
</table>


2012年10月18日 星期四

網路新聞文字寫作技巧 #10 Tips



事實上,你可能寫得比海明威還要好,但那又如何,如果你不知道如何為網頁而寫作。
── Wagner, R. (2006). Web Design.











技 巧 # 1 標題及次標題有重點。文字內容要有具體意義,要能讓讀者快速掌握重點,以決定是否要往下閱讀。

技 巧 # 2 段落不要過長。太長的段落不適合螢幕閱讀,可以將長段落打散成小段落。文字的內容要直指重點,不要浪費讀者的時間。

技 巧 # 3 要充分使用連結功能。要將文字寫成適合螢幕閱讀,那麼文章構思中的更多資訊就要善用連結功能,引導讀者前往。

技 巧 # 4 文字的使用要精簡。不要有多餘的癈話;動詞要精準,不用過多的形容詞。當然,如果你是文學創作,那就另當別論。

技 巧 # 5 善用條列式的寫法。條列式的寫法可以讓讀者一目了然,快速掌握重點。

技 巧 # 6 隨時整理出小標。小標可以讓讀者不會害怕網路中的大量文字。要讓讀者有耐心看下去,一定要隨時給小標。

技 巧 # 7 多媒體寫作思考。不要什麼都想用文字來表達,有些細節其他媒材可以有更好的表現。當用則用。

技 巧 # 8 增強個人風格式的寫法。個人風格的文體在網路是可以被接受的,但也不要太過分,尤其是寫新聞。

技 巧 # 9 每個段落只有一個重點。不要在一個段落中塞入太多重點,將一個重點談乾淨即可。

技 巧 # 10 經常練習。寫作的文字使用和媒介有很大的關係。如果常寫作網路文章,自然就會感受出文字鋪陳應有的節奏。





陰 影字語法 <td align="center" style="background-color: white; color: white; font-size: 400%; font-weight: bold; text-shadow: gray 1px 1px 3px;" valign="top" width="20%">

網<br />路<br />新<br />聞<br />文<br />字<br />寫<br />作<br />技<br />巧

</td>
語法說明:紅色字,即為陰影字的語法。gray 陰影顏色灰色,1px x軸位移1px,1px y軸位移1px,3px 陰影柔化範圍 3px。



2012年10月17日 星期三

讓文字活起來:重點引文強調的表現


把文字引號起來了



網路書寫,在於文字的表現力上要適合「掃瞄性」。所以,重點強調式的文字框呈現,就是讓讀者快速掌握重點的方式之一。

這種形式的表達,很容易以「表格」的功能來處理。我們可以看一下以下範例如何運用表格。

以下這是一個範例:
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是審美的!……


表格文字框的語法:
<div style="width: 590px;">
<table border="0" cellpadding="5" cellspacing="2" style="border-bottom: 1px solid gray; border-top: 1px solid gray; font-family: '微軟正黑體'; font-size: 130%; line-height: 28px; width: 100%;">
<tbody>
<tr>
<td align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="top" width="10%">「
</td>
<td valign="top">……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……</td>
<td  align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="bottom" width="10%">

</td>
</tr>
</tbody>
</table>
</div>


思考過程:


.先做出一個一列三欄的表格:
  • 左右格各設為整體表格的10%。
  • 整體表格,字體設為「微軟正黑體」,字的大小為130%,行高為28px。
  • 左、右格的字再設為紅色,置中,大小180%,粗體。

10%
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……
10%

.去掉表格格線,再用css的style為表格的上、下加上灰色線。

10%
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……
10%

.再於左、右格去掉「10%」,各加上引號。左格設為置頂,右格設為置底。
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……





▒ CSS 的引號強調作用

這是一段文字。引文的作用在於對文章的重點作出提示。這是網路文字效果運用中常見的技巧手法。這一範例是使用CSS語 法寫成。


CSS語法:使用 class="quo" 即可

.quo {
font-size: 110%;
font-family: '微軟正黑體';
font-weight: bold;
line-height:1.5;
padding: 20px 80px 20px 80px;
background-color: #f0f0f0;
position: relative;
}

.quo::before {
content: open-quote;
font-size: 400%;
font-weight:bold;
position: absolute;
left: 15px;
top: -8px;
}

.quo::after {
content: close-quote;
font-size: 400%;
font-weight:bold;
position: absolute;
right: 15px;
top:-8px;
}



2012年10月14日 星期日

《聯合報》項國寧社長:新聞匯流對記者的改變


2012年10月13日項社長專題演講於銘傳大學舉辦「新興傳播媒體之發展趨勢與影響」論壇。
《聯合報》項國寧社長:
新聞匯流對記者的採訪、寫作會產生物理、化學的改變

X 記者在現場
v 一位記者在到現場後,心中要想的是:
  1. 這則新聞適合那種型態表現,文字為主,video為主,還是整合文本。
  2. 這則新聞要在那個平台出現最好。
v 再來是,「新的科技讓記者增加說故事的方法」。例如,Imagegallery  Slideshow就是說故事的新方法。釋放了傳統媒體所不能做的事情打破了傳統媒體的界線,例如CNN…>>


我的 >> 大跟屁,小評論
這次我請出項社長這位「權威」人物,
再一次來印證老師上課所「屁」的那些東東,
真的不是「屁」哦!
X 記者的技能
因之,聯合報如何來「選擇」記者:


除 了傳統的那些,我們會加考「影音」,video。


2012年10月13日 星期六

我要性感的! 半透明的誘惑 >> 在背景色


真的,我也很喜歡看性感的!

尤其是半透明的那種,癢癢的讓人說不出的「愉悅」。愉悅,這是「文化研究」專用術語啊,同學!。
  • 文化研究是「左派的」,非常「嚴肅」研究流行文化的學問!
我特別喜歡那種「半透明」的,隔上一層的,那種版面的性感。

【段落旋轉語法 ↘】

<div style="font-family: 微軟正黑體; font-size: 210%; font-weight: bold; -webkit-transform:rotate(12deg);">

或者加入互動的class

<style>
.rotate101101 {
-webkit-transform: rotate(0deg);
font-family: 微軟正黑體;
font-size: 210%;
font-weight: bold;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.rotate101101:hover {
-webkit-transform: rotate(6deg);
}
</style>



半透明背景色網頁視覺效果:

 
半透明的背景色!(+)
如果放在圖片上面,背景色就會很性感的
看透過去哦!
但「字」卻仍會清清楚楚,不會變透明的!
語法:
<div style="background-color: rgba(255,181,181,0.2); height: 200px; width: 300px; ">
<br />
<br />
半透明的背景色!<br />
如果放在圖片上面,背景色就會很性感的看透過去哦!<br />
但「字」卻仍會清清楚楚,不會變透明的!
</div>
語法說明:
  • 就用上這個:「background-color: rgba(255,181,181,0.2);」。255, 181, 181,是顏色的RGB碼(>),0.2 是指透明程度。0.0是完全透明,1.0就是不透明了。



背景色   v.s.  透明背景色 (mouseover)
<style>
/* 不透明背景色 */
.bg2016101101 {
background-color: lightgray;
}

/* 透明背景色 */
.bg2016101102 {
background-color: rgba(255,181,181,0.4);
}

</style>


實作影音範例,請按此




背景色的習作:


請做出DIV堆積木法版型。請按此看效果
再請做出不同透明度的背景色,來觀察文本所產生的意義呈現感受。

文字DIV黑色背景色,background-color: rgba(0, 0, 0, 1);
透明層級的變化:     0    0.3   0.5,      0.7,        1   。(←請按看效果




雨天的溫泉鄉

那是烏來,一個在半山中的小鄉。
冬天,飄雨是應景氛圍。
三三兩兩的,是人;
昏昏暗暗的,是路燈的心情。




做法構思:

  1. 先置入一張大圖。
  2. 在圖的下方做一文字框DIV。DIV內寫入標題及內文。
  3. 在標題的文字部分,又設置一個DIV將其包起來。這形成了文字DIV內有標題DIV的結構。
  4. 最後將文字框DIV上移。此即將CSS套入文字DIV內,亦即將class "divword20171108" 設置入文字DIV,即可。


寫作注意事項:

如果上方版面區域的媒材是「圖 片」, 當下方背景圖或背景色,使用 margin-top 的功能上移;當重疊時,那麼背景圖或背景色的功能會失效。

因為,「強勢」的圖片,會蓋住「背 景圖、背景色」。 所以在圖片後面的DIV區塊,如果要使用margin-top去蓋住圖像,則要使用重疊css語法,使 其疊在圖像之上,效果才會出來。例如:

<style>
position: relative;
z-index: 2;
</style>


這樣,圖像下方的DIV區塊的所有效果,就會出來。我要取消z-index功能


我想看文字DIV設定的 style 語法:

<style>

/*文字DIV的CSS*/
.divword20171108 {
box-sizing: border-box;
width: 520px;    /*你可以重新設置寬度,例如width: 560px; ,或是拿掉以預設值來做。*/
margin: auto;
padding: 1em 0em 1em 2em;
background-color: rgba(0, 0, 0, 1);    /*請重新設置參數使其文字DIV透明背景色出現,例如 background-color: rgba(0, 0, 0, 0.3); 。*/
color: white;
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.12em;
margin-top: 0em;    /*請重新設置參數使其文字DIV上移,例如 margin-top: -10em; 。*/
transition: 1s ;
position: relative;           /*以下這二個一定要加才會有文字DIV上升到最上層的效果*/
z-index: 2;
}

/*大標*/
.divword20171108 >div{
font-size: 1.45em;
}

</style>


影音教學: