搞定圖像接文字的位置關係
|
一、文接圖／一行
|
二、文繞圖／填滿
|
弄清觀念，圖文的位置安排，搞定垂直對齊！
你可以把文字擺在這裡嗎？
看起來簡單，
但注意哦，左邊是有圖片在哦！
你不一定搞的出來。
這就是圖文位置關係的「觀念」和寫作「技法」。讓你的想法和表達，能夠有效呈現。
一、文接圖的呈現形態
文接圖，簡單的說，就是把圖片當「字母／文字」看待，所以反正最後只能是「一行」。如果進行斷行動作，就會跑到圖像的最下方，起始下一行。
文字（圖像）與文字的對齊方式，有三種，對齊底部、中間、頂部。
呈現範例：
接
在後面的文字。對齊底部。
預設值。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)文繞圖狀況下，圖片四周給出一點空間，就可以讓圖片吸呼，讀者也就可以跟著呼吸。
