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

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>



影音教學:

 
影音教學內容重點項目:
(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就可以用動畫來表現新聞內容!


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