許願池教學第二篇來了!!
這一篇是關於「圖」、「文」的技巧,曾經在三月影像部落格的分享會中說過,我心目中最好的部落格呈現方式是「圖+文」。但是圖與文的結合有很多種方式,像是彎彎他就直接將話語加入圖片中,既清楚又明瞭。我大部分的做法是「看圖說故事」解釋圖片中的故事,原本以為這樣的方式太淺顯、沒深度,但似乎這樣的方式是最簡單瞭解的。有時候加一張圖片,是為了「裝飾單調的文章」,總之,一篇文章中,適宜地放一張圖片是非常必要的。
所以,我們來學一個小技巧,在學這個技巧之前,請大家看下面 Ver.1 & Ver.2 有什麼差異?大家喜歡哪一個版本?(稍後會回應這兩個做法的不同)
說明:這兩張照片是「一模一樣」的(根本就是同一張,按右鍵看內容就知道),請不要搞錯重點了。我的重點在於「圖與文之間的關係」。
Ver. 1
![[記憶] 旅途中的法國城堡(解答了) [記憶] 旅途中的法國城堡(解答了)](http://static.flickr.com/66/211127432_6de9da55fc_o.jpg)
參觀古堡其實不會很貴,但非常值得慢慢品味。
我自己去年秋天,一個人,可憐兮兮地開著在台灣從沒開過的手排車,從交通恐怖至極的巴黎開出去到羅亞爾河城堡區,兩天只晃了三個城堡都覺得太趕了~
過幾天,我還要再去。
城堡區的悠閒氣氛讓我很迷戀!
不單是城堡的歷史讓我嚮往,更是優美的風景和有靈氣的河流。
即時我在車上,看著窗外美麗的風景,孤單得配著車中的法文歌曲,大聲地哭了出來,我還是很愛城堡區,還是很想念那段又孤單、又美麗的旅程… …
Ver. 2
![[記憶] 旅途中的法國城堡(解答了) [記憶] 旅途中的法國城堡(解答了)](http://static.flickr.com/66/211127432_6de9da55fc_o.jpg)
參觀古堡其實不會很貴,但非常值得慢慢品味。
我自己去年秋天,一個人,可憐兮兮地開著在台灣從沒開過的手排車,從交通恐怖至極的巴黎開出去到羅亞爾河城堡區,兩天只晃了三個城堡都覺得太趕了~
過幾天,我還要再去。
城堡區的悠閒氣氛讓我很迷戀!
不單是城堡的歷史讓我嚮往,更是優美的風景和有靈氣的河流。
即時我在車上,看著窗外美麗的風景,孤單得配著車中的法文歌曲,大聲地哭了出來,我還是很愛城堡區,還是很想念那段又孤單、又美麗的旅程… …
文字原作於 October 21, 2005
按讚加入粉絲團分享此篇文章2006/8/10 16:00 updated
現在來解答吧!
大家都答對了,這種「文繞圖」的效果就是重點所在。最簡單的語法就是
<img src="圖片網址" align=”left” hspace=”10″ vspace=”10″>
align=”left” 或者 “right” 都可以,看你想要照片排哪一邊。
h / v 代表著 horizontal(水平) / vertical(垂直),space 就是距離,因此橫向距離是 hspace,垂直的上下距離是 vspace。數字10則代表畫素 10px的意思,大家可依照需要任意調整。
Ver.1 的照片跟文字黏在一起,看起來非常不舒服。但是 Ver.2 就清爽多了,乾淨俐落,效果比起第一個黏在一起的,在視覺上絕對是好上許多。因此大家以後如果有使用到文繞圖的效果時,請要記得把圖跟文拉一點距離出來,免得太壓迫囉~
最後提醒,這也可以用CSS來使這一切一勞永逸,有誰知道要怎麼寫在CSS中?
延伸閱讀
- [巴黎] 白色巨塔與標緻1007
- [記憶] 旅途中的法國城堡(解答了)
- [旅] Travel France 2004 – Chambord
- [2004] France Travel – 廁所大不同
- [戰利品] 小獅子鑰匙圈
- [旅] France 2004-開車去喝香檳(1)
即時消息請加入LINE群組:點這裡加入我的LINE群組
【關於作者】艾瑪 | amarylliss
聯繫、合作或邀約請聯繫:amarylliss@gmail.com |
Ver2看起來比較清爽且清楚~
圖文的間距<br />
一個是文章直接插圖<br />
一個讓文章和圖有空格<br />
<br />
這樣嗎
我比較喜歡第二種,文字跟圖片沒有貼得太過靠近,比較不會有壓迫到的感覺。<br />
<br />
小夕
是圖文間的差距吧!<br />
我比較喜歡第二個!
Ver.2<br />
<br />
剛開始一直在看照片,<br />
二張一樣的照片放一起,<br />
很自然就會想找有什麼不一樣 @@|<br />
<br />
後來才發現,<br />
是文字和照片間的間隔,呵 😛
嗯嗯<br />
是圖文間的距離<br />
所以ver.2比較清爽易閱讀<br />
<br />
還有<br />
巴黎的交通真的很可怕<br />
還有高速公路接到外環道的地方真是一團糟<br />
我們就在上頭來回了兩次
我喜歡第二個,<br />
文字間距較大,<br />
看起來比較不會有壓迫感~~<br />
當然是Ver. 2囉!
我還發現…Ver.2的照片比較亮耶!
圖2的顏色比較柔和一點,<br />
還有圖片與字的間隔.<br />
~~大眼妹
sollorena, lowinnie0917<br />
<br />
鬼月啦!卡到陰!<br />
明明是同一張照片咧~ :P<br />
<br />
凡妮莎,<br />
我還請巴黎當地的MEB幫我開<br />
還是來回ORLY機場兩次 哈哈!<br />
根本一團亂啊,亂到想哭!
怎麼大家一面倒都喜歡Ver. 2, I prefer Ver. 1. 呵<br />
Ver. 2太亮, 顯現不出城堡的古樸, 純屬個人看法啦<br />
哈哈,我一開始也在玩大家來找碴,可是我都找不出來,還好原來是一樣的,不是我眼睛<br />
有問題!<br />
V2當然清爽多了呢。
Ver.1每一行的第一個字好像要被圖片吃掉一樣,<br />
乍看之下會覺得圖片後面好像還壓有文字。<br />
Ver.2每行的第一個字在哪裡就很清楚,<br />
我個人比較喜歡第二個版本:P
呵 呵- – -<br />
我正在懷疑說兩個版本不是一模一樣的嗎?<br />
嗯 ver2 比較容易閱讀
外行人來猜一猜<br />
Ver.1是"文繞圖"嗎??<br />
well…這兩個版本嘛~~都喜歡<br />
最喜歡的是艾瑪本尊的照片啦!!!ccc
喜歡2<br />
比較沒壓迫感<br />
Irene<br />
>_< 哈!!我超努力在看照片差異咧…<br />
結果還是網友解惑了~~<br />
的確是 ver 2. 比較易讀, 我都沒有這樣設計過blog,<br />
就一直寫一直貼圖…可以來試看看!!
投Ver. 2 一票
呵呵,這就是有沒有設定 vspace 和 hspace 的差別囉…<br />
我個人也是喜歡ver.2 有設定的,<br />
看起來比較舒服^^
哎呀! 艾瑪! <br />
妳看起來好高啊<br />
身高到底有多少呢?
我比較喜歡第一個圖(圖二比較白)<br />
但整體來看.還是Ver.2比較好…..因為ver1的文字太貼近圖了,較有壓迫感.<br />
艾瑪姐,是不是這樣呀?!^0^
我也喜歡2<br />
視覺上較舒服
真的耶!~<br />
謝謝艾瑪的教授……<br />
<br />
蘇菲
要用CSS來規範,好像可以這麼寫吧?<br />
img {<br />
margin:10px;<br />
float:right;<br />
border:1px solid #ccc; <br />
padding:0px; }<br />
–<br />
(1) margin 即 vspace + hspace,<br />
當然也可以分別用 margin-left、margin-top…等<br />
單獨設定;<br />
(2) float 指的就是 align (用align直接下去試..沒反應);<br />
(3) 而border是指圖片的框線,視個人需要而定,<br />
有些朋友喜歡在編輯圖片時就加上框線,<br />
自然就不需要再另外設定;<br />
(4) padding 是指圖片到框線間的距離,<br />
一樣視個人喜好來設定, 可有可無啦….<br />
–<br />
應該還能加其它效果吧?<br />
有興趣的朋友自己玩玩囉… ^^
喔~苦惱已久的問題終於獲得解答<br />
艾瑪真是細心、貼心的主人<br />
處處用心耶<br />
Taro送你個大拇指<br />
^.^ b<br />
我太笨喏….竟然開兩個視窗來看有何不同<br />
還檢視了文字的數量….足足看了有十分鐘啊!!! <br />
<br />
結果,是版面的編排啊 (敲碗 ) Q口Q<br />
(謎之音:人家明明就有說是"我的重點在於「圖與文之間的關係」。"<br />
<br />
PS. 教學真是太棒啦!! 超實用!! <br />
<br />
BY 潛水超久首度浮出的津津(遮臉
謝謝 Standing 老師的說明<br />
不過那樣子也不是很正確說~<br />
還有人有正確答案嗎?<br />
<br />
給一個提示,照片要放的區塊在哪裡?
謝謝艾瑪的教學文,剛剛也隨意抓一篇修改了一下,讓文章清爽多了。<br />
<br />
不過,無名開的很慢,文章似乎無法更新…<br />
<br />
Thanks, anyway!
ver.2 雖然看起來比 ver.1 好一些,<br />
但是如果要使最末的一行字「麗的旅程……」不要單獨凸出,<br />
沒有什麼比較好的方式呢?還是只能把字數調整呢?<br />
(我的意思比較像是左邊純粹的圖,右邊的文字份量和左圖差不多,如Ver.1)<br />
let my have a try<br />
<br />
I thing Standinghere right nearly right, however, Amarylliss doesn't use b<br />
oder (well, correct way to say is she hid the boder)<br />
<br />
If I'm correct, the CSS should be like<br />
<br />
img {<br />
margin:10px;<br />
float:right;<br />
border-style: hidden; <br />
padding:0px; }<br />
<br />
If you wanna use padding and margin in CSS, your border-style should b<br />
e hidden rather than "none", otherwise your margin and padding won't w<br />
ork<br />
<br />
I hope this is correct
@@我真的是語法白痴<br />
要看很久才知道怎麼弄
nobodyaround,<br />
<br />
還是不對。我的提示你沒有注意喔,<br />
「照片要放在哪一個區塊呢?」<br />
你這樣做整個網址的OVERALL設定都會跟著你的CSS跑,<br />
所以是不對的。<br />
<br />
BORDER 也是OPTIONAL的 要設為 0 /1 有框無框,<br />
框是什麼顏色,那都是簡單的事情。<br />
問題在於,「這個圖片設定要放在哪裡?」這才是重點喔!!
艾瑪要強調的難不成是<br />
#content img {…略}???
ㄟ… 我可不可以推說窮留學生很少開車出去, 所以迷路也是應該的 XD<br />
巴黎的路是不好開啦, 市區的話單行道一堆, 出城的話因為路太多, 標示<br />
就顯的亂…. 上次如果乖乖開市區一條路, 不去貪開環城道路省時間,<br />
就不會迷路了
★ standinghere<br />
可以,不過範圍還是有點大。<br />
如果是我寫,我會更侷限一些!<br />
不過意思差不多了,請大家自己動腦吧!<br />
謝謝您的細心解答喔~<br />
<br />
<br />
★ MEB<br />
多謝您當初的搭救,否則我一個人不知道要繞幾圈才能出來。<br />
哈哈!<br />
巴黎的環城道路真是開過一次,沒齒難忘啊!<br />
謝謝艾瑪<br />
<br />
真的太實用了~<br />
你真好!
又多學了一招阿<br />
感謝