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

 

  KompoZer!!
表格使用基本功(7)

把影音貼到照片上面去

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

8 影音教學內容：

影音內容說明：

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

圖像材料：



CSS 插入背景圖語法：

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

---

表格使用基本功(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!

表格使用基本功(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>

表格使用基本功(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>

---

表格使用基本功(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)文繞圖狀況下，圖片四周給出一點空間，就可以讓圖片吸呼，讀者也就可以跟著呼吸。

---

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

  KompoZer!!
表格使用基本功(2)

表格本身的居中 v.s. 內容的居中

表格本身 ＊二種不同的概念與技法＊ 表格的內容

在網頁的寫作、編輯過程中，使用表格，二個概念常被搞混。 （一）表格本身是一種技能。（二）對表格內容的操控又是另一種。

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

8 影音教學內容：



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

---

表格使用基本功(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>

---

有聲音的照片

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

　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語法產生器（第二點）。

《新約全書．馬太福音第十章》

「所以，不要怕他們，因為掩蓋的事，沒有不露出來的；隱藏的事，沒有不被人知道的。」

《六祖壇經．釋功德淨土第二》

善知識，念念無間是功，心行平直是德。自修性是功，自修身是德。

---

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

go

動畫其實真的不困難。

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

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

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

按我的照片就會「動起來」！

---

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

怪事！影音剪輯完全不會「頭痛」了。
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操作實務。

---

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

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

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

《google+ 論語》計畫

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

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

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

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

《google+ 論語》No. 1

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

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

---

讓圖像說更多：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
《當代藝術這麼說》

---

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

圖像處理 　三步驟

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的新聞畫面，請觀察「如何使用構圖法則」來拍攝畫面。

---

又一超好用的 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. 把完成作品的「資料夾」，放到網路空間或新聞系的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： 要改變圖片的大小，如何找出正確的長、寬數字？很簡單，影片>>

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

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

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

文字對齊的選擇？

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

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

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

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

觀察：有了以上的概念，你就可以去觀察文字對齊方式被使用的時機 。我講的只是一個大方向，你最後會形成自己的「文字排列設計法門」。

「

在版面中的主要文字部分以兩邊對齊的方式放上文字，塑造一種塊面感，並產生一 種力度。 ──夏井藝華，《版面設計》

」

補充資訊# 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>

語法說明：中文較為麻煩，所以紅色兩部分兩者都要寫進去。

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

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

---

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

---

➲ 文本的結構？

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

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

• 直線式（linear）
• 階層式（hierarchical）
• 非直線式（ nonlinear）
• 組合式（ composite）

如下圖：

資訊來源：Ｍultimedia: 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 即圓的程度。

版型的重要：新的發現

這個時候，我們要記得偉大的編輯是偉大的溝通者。 這個時候，我們也要記得此地並沒有真正的編輯教育，不要相信新聞系、大傳系曾經訓練出屬於台灣的編 輯，台灣的編輯是自學的。 ──詹宏志（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>

網路新聞文字寫作技巧 #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。

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

把文字引號起來了

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

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

以下這是一個範例：

「

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

」

表格文字框的語法：

<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月13日項社長專題演講於銘傳大學舉辦「新興傳播媒體之發展趨勢與影響」論壇。

《聯合報》項國寧社長： 新聞匯流對記者的採訪、寫作會產生物理、化學的改變

X　記者在現場

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

我的 >> 大跟屁，小評論 這次我請出項社長這位「權威」人物， 再一次來印證老師上課所「屁」的那些東東， 真的不是「屁」哦！

X　記者的技能

因之，聯合報如何來「選擇」記者：

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

---

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

真的，我也很喜歡看性感的！

尤其是半透明的那種，癢癢的讓人說不出的「愉悅」。愉悅，這是「文化研究」專用術語啊，同學！。

• 文化研究是「左派的」，非常「嚴肅」研究流行文化的學問！

我特別喜歡那種「半透明」的，隔上一層的，那種版面的性感。

【段落旋轉語法 ↘】

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


影音教學：