數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2017年4月7日 星期五

文繞圖的方法:CSS: float




文繞圖的方法:CSS: float


<style>
.floatneed {
float: left;
}
</style>

把 上方的class加到圖像裡去,那麼就可以有「文繞圖」的排版效果出來。
<img class="floatneed" style="width: 324px; height: 216px; margin-right: 1.5em;"   src="https://c1.staticflickr.com/4/3758/33372767845_45b69fa2d8_b.jpg">
如下例:

<沒有float的效果;無文繞圖
這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文 字這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這 是文字這是文字這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字。


這有什麼了不起的嗎? 有。

一、就網頁文本的區塊寫作技巧原則而言,這是可以把照片右邊的「空白區」填滿文字(或其它媒材)的方法。亦即CSS: float 語法的效果。 click here!

二、在之前所常用的區塊寫作技巧中,Div以及表格(table),都是具有block的特質,亦即會「限死」區塊中沒有被使用到的空 白。
換言之,「區塊」中的空 白,是無法直接被使用。而以前教的解決方法是,div或表格「堆積木法」。現在我們可以使用float這一語法,如下:

這是div內的文字。
width: 220px;
height: 160px;
border: 1px solid darkred;
按此,DIV變float功能!下方文字就擠進右方空白處來了。/再按:復原
DIV後要再增加的文字會被移到下面來(目前即是此例)。也就是說div(區塊模式)右邊的空白處,是無法被使用的。

三、一旦對DIV進行float的設定(請按上例),可以看到,DIV右邊空白處,即成為可被其他媒材(文字)來填滿的地方。原本DIV下方的文字,就自動擠進去空白處。

四、要停上對空白處的「填滿」,請下此指令 <br clear="both"> 。如要讓圖靠右讓文字填在左邊空白,使用 float: right  。

五、div 、table等 block的寫作元素,都可以使用此一技巧,讓文字填滿「空白處」。

範例:
<div style="width: 520px; height: 120px; border: 1px solid darkred; float: right; margin-left: 5px;">
這是一個div。
</div>
這是文字這是文字<br>這是文字…

呈現:
這是一個向右float的 div。
我們將看到,加入<br clear="all">之後,就停止對空白的填滿,而直接回復block的狀態,亦即空白處不再被使用。
按 這裡加入 clear="all",click here!
這是文字這是文字
這是文字這是文字這是文字這是文字這是文字這是文字這是文字。


教學影音:



沒有留言:

張貼留言