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

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>


沒有留言:

張貼留言