許願池教學第二篇來了!!
這一篇是關於「圖」、「文」的技巧,曾經在三月影像部落格的分享會中說過,我心目中最好的部落格呈現方式是「圖+文」。但是圖與文的結合有很多種方式,像是彎彎他就直接將話語加入圖片中,既清楚又明瞭。我大部分的做法是「看圖說故事」解釋圖片中的故事,原本以為這樣的方式太淺顯、沒深度,但似乎這樣的方式是最簡單瞭解的。有時候加一張圖片,是為了「裝飾單調的文章」,總之,一篇文章中,適宜地放一張圖片是非常必要的。
所以,我們來學一個小技巧,在學這個技巧之前,請大家看下面 Ver.1 & Ver.2 有什麼差異?大家喜歡哪一個版本?(稍後會回應這兩個做法的不同)
說明:這兩張照片是「一模一樣」的(根本就是同一張,按右鍵看內容就知道),請不要搞錯重點了。我的重點在於「圖與文之間的關係」。
Ver. 1
Ver. 2
文字原作於 October 21, 2005
2006/8/10 16:00 updated
現在來解答吧!
大家都答對了,這種「文繞圖」的效果就是重點所在。最簡單的語法就是
align="left" hspace="10" vspace="10">
align="left" 或者 "right" 都可以,看你想要照片排哪一邊。
h / v 代表著 horizontal(水平) / vertical(垂直),space 就是距離,因此橫向距離是 hspace,垂直的上下距離是 vspace。數字10則代表畫素 10px的意思,大家可依照需要任意調整。
Ver.1 的照片跟文字黏在一起,看起來非常不舒服。但是 Ver.2 就清爽多了,乾淨俐落,效果比起第一個黏在一起的,在視覺上絕對是好上許多。因此大家以後如果有使用到文繞圖的效果時,請要記得把圖跟文拉一點距離出來,免得太壓迫囉~
最後提醒,這也可以用CSS來使這一切一勞永逸,有誰知道要怎麼寫在CSS中?












































設計生活T恤
$299 











◎ Travel|艾瑪的旅歷表(34)






[分享] funP粉絲俱樂部貼紙的語法及建置方法
