[記憶] 旅途中的法國城堡（解答了）

Posted onAuthor艾瑪38 Comments

按讚加入粉絲團

許願池教學第二篇來了！！

這一篇是關於「圖」、「文」的技巧，曾經在三月影像部落格的分享會中說過，我心目中最好的部落格呈現方式是「圖＋文」。但是圖與文的結合有很多種方式，像是彎彎他就直接將話語加入圖片中，既清楚又明瞭。我大部分的做法是「看圖說故事」解釋圖片中的故事，原本以為這樣的方式太淺顯、沒深度，但似乎這樣的方式是最簡單瞭解的。有時候加一張圖片，是為了「裝飾單調的文章」，總之，一篇文章中，適宜地放一張圖片是非常必要的。

所以，我們來學一個小技巧，在學這個技巧之前，請大家看下面 Ver.1 & Ver.2 有什麼差異？大家喜歡哪一個版本？（稍後會回應這兩個做法的不同）

說明：這兩張照片是「一模一樣」的（根本就是同一張，按右鍵看內容就知道），請不要搞錯重點了。我的重點在於「圖與文之間的關係」。

　

Ver. 1

[記憶] 旅途中的法國城堡（解答了）

參觀古堡其實不會很貴，但非常值得慢慢品味。

我自己去年秋天，一個人，可憐兮兮地開著在台灣從沒開過的手排車，從交通恐怖至極的巴黎開出去到羅亞爾河城堡區，兩天只晃了三個城堡都覺得太趕了～

過幾天，我還要再去。
城堡區的悠閒氣氛讓我很迷戀！
不單是城堡的歷史讓我嚮往，更是優美的風景和有靈氣的河流。

即時我在車上，看著窗外美麗的風景，孤單得配著車中的法文歌曲，大聲地哭了出來，我還是很愛城堡區，還是很想念那段又孤單、又美麗的旅程… …

Ver. 2



[記憶] 旅途中的法國城堡（解答了）

參觀古堡其實不會很貴，但非常值得慢慢品味。

我自己去年秋天，一個人，可憐兮兮地開著在台灣從沒開過的手排車，從交通恐怖至極的巴黎開出去到羅亞爾河城堡區，兩天只晃了三個城堡都覺得太趕了～

過幾天，我還要再去。
城堡區的悠閒氣氛讓我很迷戀！
不單是城堡的歷史讓我嚮往，更是優美的風景和有靈氣的河流。

即時我在車上，看著窗外美麗的風景，孤單得配著車中的法文歌曲，大聲地哭了出來，我還是很愛城堡區，還是很想念那段又孤單、又美麗的旅程… …

文字原作於 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中？

延伸閱讀



【關於作者】艾瑪 | amarylliss


台灣第一位全職旅遊部落客受邀出國旅遊超過百次 ，1996年起於台大椰林BBS自助旅行版(Tour Abroad)發表旅遊心得並擔任版主，2000年起於明日報/ANYWAY旅遊網分享旅遊心得，2003年起任艾瑪隨處走走部落格格主至今，從無名小站至痞客邦，目前回歸個人部落格持續經營；更詳細網路書寫歷史請參考關於我。

一年有1/2以上時間在全世界遊走，即時消息請追蹤臉書及Line@官方帳號。聯繫、合作或邀約請聯繫：amarylliss@gmail.com

 Email Facebook Googleplus Flickr YouTube Instagram



Post Views: 1,270

38 thoughts on “[記憶] 旅途中的法國城堡（解答了）”

  2. 圖文的間距<br />
    一個是文章直接插圖<br />
    一個讓文章和圖有空格<br />
    <br />
    這樣嗎

    回覆

  3. 我比較喜歡第二種，文字跟圖片沒有貼得太過靠近，比較不會有壓迫到的感覺。<br />
    <br />
    小夕

    回覆

  5. Ver.2<br />
    <br />
    剛開始一直在看照片，<br />
    二張一樣的照片放一起，<br />
    很自然就會想找有什麼不一樣 @@|<br />
    <br />
    後來才發現，<br />
    是文字和照片間的間隔，呵 😛

    回覆

  6. 嗯嗯<br />
    是圖文間的距離<br />
    所以ver.2比較清爽易閱讀<br />
    <br />
    還有<br />
    巴黎的交通真的很可怕<br />
    還有高速公路接到外環道的地方真是一團糟<br />
    我們就在上頭來回了兩次

    回覆

  7. 我喜歡第二個，<br />
    文字間距較大，<br />
    看起來比較不會有壓迫感～～<br />

    回覆

  11. sollorena, lowinnie0917<br />
    <br />
    鬼月啦！卡到陰！<br />
    明明是同一張照片咧～ :P<br />
    <br />
    凡妮莎，<br />
    我還請巴黎當地的MEB幫我開<br />
    還是來回ORLY機場兩次 哈哈！<br />
    根本一團亂啊，亂到想哭！

    回覆

  12. 怎麼大家一面倒都喜歡Ver. 2, I prefer Ver. 1. 呵<br />
    Ver. 2太亮, 顯現不出城堡的古樸, 純屬個人看法啦<br />

    回覆

  13. 哈哈，我一開始也在玩大家來找碴，可是我都找不出來，還好原來是一樣的，不是我眼睛<br />
    有問題！<br />
    V2當然清爽多了呢。

    回覆

  14. Ver.1每一行的第一個字好像要被圖片吃掉一樣，<br />
    乍看之下會覺得圖片後面好像還壓有文字。<br />
    Ver.2每行的第一個字在哪裡就很清楚，<br />
    我個人比較喜歡第二個版本：P

    回覆

  16. 外行人來猜一猜<br />
    Ver.1是"文繞圖"嗎??<br />
    well…這兩個版本嘛~~都喜歡<br />
    最喜歡的是艾瑪本尊的照片啦!!!ccc

    回覆

  18. >_< 哈!!我超努力在看照片差異咧…<br />
    結果還是網友解惑了~~<br />
    的確是 ver 2. 比較易讀, 我都沒有這樣設計過blog,<br />
    就一直寫一直貼圖…可以來試看看!!

    回覆

  20. 呵呵,這就是有沒有設定 vspace 和 hspace 的差別囉…<br />
    我個人也是喜歡ver.2 有設定的,<br />
    看起來比較舒服^^

    回覆

  22. 我比較喜歡第一個圖(圖二比較白)<br />
    但整體來看.還是Ver.2比較好…..因為ver1的文字太貼近圖了,較有壓迫感.<br />
    艾瑪姐,是不是這樣呀?!^0^

    回覆

  25. 要用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 />
    有興趣的朋友自己玩玩囉… ^^

    回覆

  26. 喔~苦惱已久的問題終於獲得解答<br />
    艾瑪真是細心、貼心的主人<br />
    處處用心耶<br />
    Taro送你個大拇指<br />
    ^.^ b<br />

    回覆

  27. 我太笨喏….竟然開兩個視窗來看有何不同<br />
    還檢視了文字的數量….足足看了有十分鐘啊!!! <br />
    <br />
    結果，是版面的編排啊 (敲碗 ) Q口Q<br />
    (謎之音：人家明明就有說是"我的重點在於「圖與文之間的關係」。"<br />
    <br />
    PS. 教學真是太棒啦!! 超實用!! <br />
    <br />
    BY 潛水超久首度浮出的津津(遮臉

    回覆

  28. 謝謝 Standing 老師的說明<br />
    不過那樣子也不是很正確說～<br />
    還有人有正確答案嗎？<br />
    <br />
    給一個提示，照片要放的區塊在哪裡？

    回覆

  29. 謝謝艾瑪的教學文，剛剛也隨意抓一篇修改了一下，讓文章清爽多了。<br />
    <br />
    不過，無名開的很慢，文章似乎無法更新…<br />
    <br />
    Thanks, anyway!

    回覆

  30. ver.2 雖然看起來比 ver.1 好一些，<br />
    但是如果要使最末的一行字「麗的旅程……」不要單獨凸出，<br />
    沒有什麼比較好的方式呢？還是只能把字數調整呢？<br />
    （我的意思比較像是左邊純粹的圖，右邊的文字份量和左圖差不多，如Ver.1）<br />

    回覆

  31. let my have a try<br />
    <br />
    I thing Standinghere right nearly right, however, Amarylliss doesn&#039;t use b<br />
    oder (well, correct way to say is she hid the boder)<br />
    <br />
    If I&#039;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&#039;t w<br />
    ork<br />
    <br />
    I hope this is correct

    回覆

  33. nobodyaround,<br />
    <br />
    還是不對。我的提示你沒有注意喔，<br />
    「照片要放在哪一個區塊呢？」<br />
    你這樣做整個網址的OVERALL設定都會跟著你的CSS跑，<br />
    所以是不對的。<br />
    <br />
    BORDER 也是OPTIONAL的 要設為 0 /1 有框無框，<br />
    框是什麼顏色，那都是簡單的事情。<br />
    問題在於，「這個圖片設定要放在哪裡？」這才是重點喔！！

    回覆

  35. ㄟ… 我可不可以推說窮留學生很少開車出去, 所以迷路也是應該的 XD<br />
    巴黎的路是不好開啦, 市區的話單行道一堆, 出城的話因為路太多, 標示<br />
    就顯的亂…. 上次如果乖乖開市區一條路, 不去貪開環城道路省時間,<br />
    就不會迷路了

    回覆

  36. ★ standinghere<br />
    可以，不過範圍還是有點大。<br />
    如果是我寫，我會更侷限一些！<br />
    不過意思差不多了，請大家自己動腦吧！<br />
    謝謝您的細心解答喔～<br />
    <br />
    <br />
    ★ MEB<br />
    多謝您當初的搭救，否則我一個人不知道要繞幾圈才能出來。<br />
    哈哈！<br />
    巴黎的環城道路真是開過一次，沒齒難忘啊！<br />

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *