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

---