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

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)文繞圖狀況下,圖片四周給出一點空間,就可以讓圖片吸呼,讀者也就可以跟著呼吸。



沒有留言:

張貼留言