[记忆] 旅途中的法国城堡(解答了)

按赞加入粉丝团

许愿池教学第二篇来了!!

这一篇是关于“图”、“文”的技巧,曾经在三月影像部落格的分享会中说过,我心目中最好的部落格呈现方式是“图+文”。但是图与文的结合有很多种方式,像是弯弯他就直接将话语加入图片中,既清楚又明了。我大部分的做法是“看图说故事”解释图片中的故事,原本以为这样的方式太浅显、没深度,但似乎这样的方式是最简单了解的。有时候加一张图片,是为了“装饰单调的文章”,总之,一篇文章中,适宜地放一张图片是非常必要的。

所以,我们来学一个小技巧,在学这个技巧之前,请大家看下面 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



38 thoughts on “[记忆] 旅途中的法国城堡(解答了)”

  1. 图文的间距<br />
    一个是文章直接插图<br />
    一个让文章和图有空格<br />
    <br />
    这样吗

  2. 我比较喜欢第二种,文字跟图片没有贴得太过靠近,比较不会有压迫到的感觉。<br />
    <br />
    小夕

  3. Ver.2<br />
    <br />
    刚开始一直在看照片,<br />
    二张一样的照片放一起,<br />
    很自然就会想找有什么不一样 @@|<br />
    <br />
    后来才发现,<br />
    是文字和照片间的间隔,呵 😛

  4. 嗯嗯<br />
    是图文间的距离<br />
    所以ver.2比较清爽易阅读<br />
    <br />
    还有<br />
    巴黎的交通真的很可怕<br />
    还有高速公路接到外环道的地方真是一团糟<br />
    我们就在上头来回了两次

  5. 我喜欢第二个,<br />
    文字间距较大,<br />
    看起来比较不会有压迫感~~<br />

  6. sollorena, lowinnie0917<br />
    <br />
    鬼月啦!卡到阴!<br />
    明明是同一张照片咧~ :P<br />
    <br />
    凡妮莎,<br />
    我还请巴黎当地的MEB帮我开<br />
    还是来回ORLY机场两次 哈哈!<br />
    根本一团乱啊,乱到想哭!

  7. 怎么大家一面倒都喜欢Ver. 2, I prefer Ver. 1. 呵<br />
    Ver. 2太亮, 显现不出城堡的古朴, 纯属个人看法啦<br />

  8. 哈哈,我一开始也在玩大家来找碴,可是我都找不出来,还好原来是一样的,不是我眼睛<br />
    有问题!<br />
    V2当然清爽多了呢。

  9. Ver.1每一行的第一个字好像要被图片吃掉一样,<br />
    乍看之下会觉得图片后面好像还压有文字。<br />
    Ver.2每行的第一个字在哪里就很清楚,<br />
    我个人比较喜欢第二个版本:P

  10. 外行人来猜一猜<br />
    Ver.1是"文绕图"吗??<br />
    well…这两个版本嘛~~都喜欢<br />
    最喜欢的是艾玛本尊的照片啦!!!ccc

  11. >_< 哈!!我超努力在看照片差异咧…<br />
    结果还是网友解惑了~~<br />
    的确是 ver 2. 比较易读, 我都没有这样设计过blog,<br />
    就一直写一直贴图…可以来试看看!!

  12. 呵呵,这就是有没有设定 vspace 和 hspace 的差别囉…<br />
    我个人也是喜欢ver.2 有设定的,<br />
    看起来比较舒服^^

  13. 我比较喜欢第一个图(图二比较白)<br />
    但整体来看.还是Ver.2比较好…..因为ver1的文字太贴近图了,较有压迫感.<br />
    艾玛姐,是不是这样呀?!^0^

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

  15. 喔~苦恼已久的问题终于获得解答<br />
    艾玛真是细心、贴心的主人<br />
    处处用心耶<br />
    Taro送你个大拇指<br />
    ^.^ b<br />

  16. 我太笨喏….竟然开两个视窗来看有何不同<br />
    还检视了文字的数量….足足看了有十分钟啊!!! <br />
    <br />
    结果,是版面的编排啊 (敲碗 ) Q口Q<br />
    (谜之音:人家明明就有说是"我的重点在于“图与文之间的关系”。"<br />
    <br />
    PS. 教学真是太棒啦!! 超实用!! <br />
    <br />
    BY 潜水超久首度浮出的津津(遮脸

  17. 谢谢 Standing 老师的说明<br />
    不过那样子也不是很正确说~<br />
    还有人有正确答案吗?<br />
    <br />
    给一个提示,照片要放的区块在哪里?

  18. 谢谢艾玛的教学文,刚刚也随意抓一篇修改了一下,让文章清爽多了。<br />
    <br />
    不过,无名开的很慢,文章似乎无法更新…<br />
    <br />
    Thanks, anyway!

  19. ver.2 虽然看起来比 ver.1 好一些,<br />
    但是如果要使最末的一行字“丽的旅程……”不要单独凸出,<br />
    没有什么比较好的方式呢?还是只能把字数调整呢?<br />
    (我的意思比较像是左边纯粹的图,右边的文字份量和左图差不多,如Ver.1)<br />

  20. 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

  21. nobodyaround,<br />
    <br />
    还是不对。我的提示你没有注意喔,<br />
    “照片要放在哪一个区块呢?”<br />
    你这样做整个网址的OVERALL设定都会跟着你的CSS跑,<br />
    所以是不对的。<br />
    <br />
    BORDER 也是OPTIONAL的 要设为 0 /1 有框无框,<br />
    框是什么颜色,那都是简单的事情。<br />
    问题在于,“这个图片设定要放在哪里?”这才是重点喔!!

  22. ㄟ… 我可不可以推说穷留学生很少开车出去, 所以迷路也是应该的 XD<br />
    巴黎的路是不好开啦, 市区的话单行道一堆, 出城的话因为路太多, 标示<br />
    就显的乱…. 上次如果乖乖开市区一条路, 不去贪开环城道路省时间,<br />
    就不会迷路了

  23. ★ standinghere<br />
    可以,不过范围还是有点大。<br />
    如果是我写,我会更侷限一些!<br />
    不过意思差不多了,请大家自己动脑吧!<br />
    谢谢您的细心解答喔~<br />
    <br />
    <br />
    ★ MEB<br />
    多谢您当初的搭救,否则我一个人不知道要绕几圈才能出来。<br />
    哈哈!<br />
    巴黎的环城道路真是开过一次,没齿难忘啊!<br />

发布留言

发布留言必须填写的电子邮件地址不会公开。 必填字段标示为 *