追踪

Friday, September 25, 2009

小品72 衔接图教学篇

www.fanqh.blogspot.com

今天就来班门弄斧,谈谈怎么弄上面这东西
【步骤一】
首先就就要先有自行设计的图画
图画用任何绘图软件设计皆可
(我本身只会用PAINT来画)
记得这图代表着你的部落格
所以当然是越特别
越能带出你部落格风格的图越棒
---------
图画的大小可以随意
因为衔接图弄出来后的大小可以任意调整
以下就是我自绘的图











图1










图2

为什么要有两张呢?
因为要让图动起来 了解吧? XD

【步骤二】
接着就要借助网上一些免费软件的帮忙了
推荐这个网站:http://picasion.com/
在这里你可以将自行绘制的图画制作成GIF的动画档
也就是让图动起来的关键...呵
提示一点 这网站最多可以将十张图转换成一动画档
所以勤劳的朋友们不妨努力些 多制作几张图
甚至可以将简单的故事剧情融入图中
这样一来你的衔接图就会更精彩
(为什么我只画两张呢? 懒惰咯...不用我说得那么明显吧)
---------
【步骤三】
经过了上述的步骤
衔接图基本上已经成型了
接着就是弄出该图的HTML原始码
好让大家可以拷贝在自己的部落格上



这是我的衔接图原始码
将a href后的网址改成你的部落格网址
接着是alt后的“范の涂鴉空間”
是指将滑鼠移到图上会出现什么字眼
改为你自己喜欢的句子就可以了
width以及height分别就是你想要的衔接图大小
(这就是我前面说的可以任意调整的意思)
至于src后面的衔接 就换成你所制作的图的衔接网址
举个例子 在PICASA网页制作好动画档之后
该网页会提供该图的衔接网址
你可以直接拷贝那网址
也可以将图下载后 上载到你自己的photobucket等相簿
然后再将其衔接网址拷贝过来
---------
完成之后的原始码就是你的专属衔接图原始码
只要在部落格里贴出这几行的原始码
就会显现出你所设计的图
然后点击它进入你自己的部落格
---------
【步骤四】
但还有一件很重要的事必须完成
也就是 该怎么让别人看见你的原始码
(而不是只看见图)
在你的原始码最前端加上

cols指的是这一格子的横向宽度 rows指的是格子的纵向长度 可自行更改
以及在最后加上

(注:拷贝时请删了那*字形)
就不会显示衔接图
www.fanqh.blogspot.com
而是显示我在步骤三所展示的原始码

至此 衔接图已经完成了
可以昭告天下 让所有亲戚好友们在他们的部落格上转贴你的原始码
让你精心制作的衔接图在他们的部落格上尽情闪动!^^
---------
按:其实【步骤二】是可以省略的
如果你只是想画一张图
但出来的结果就是一张不会动的衔接图
多无趣啊
---------
后记:我知道我写得很乱
毕竟那些步骤都是自己摸出来的
造成许多部分的解释欠佳
所以写得不好还请多多包涵
有任何疑问欢迎向我提问
或有任何不小心路过的高高手 欢迎指点一二!
至于那些看懂了的朋友
我花了那么多时间来解释
如果没有转贴我的衔接图
就太欠扁咯 XD

45 comments:

  1. F@N 老師的教程,
    支持一下~
    順便拿掉SF~ (`▽´)

    ReplyDelete
  2. 原来有秘诀哩
    哈哈
    谢谢分享咯

    ReplyDelete
  3. 等我部落改版后,就把你的图放进去 :)
    你只用paint就能画到这么棒,蓝鱼真的是敬佩敬佩!

    ReplyDelete
  4. 谢谢分享!待我成功后,给你一个^^

    ReplyDelete
  5. 好努力哦,画连贯性的图来做.呵呵呵

    ReplyDelete
  6. 终于等到你的教学图喽!,
    还真的等好久哟!
    看了你的解说,
    蛮详细的,
    但是自己理解的,
    一头雾水。
    会在研究研究,
    来弄弄看。
    不是吧!
    要是你到访博客们的blog,
    看到没放你的衔接图,
    你不就要开扁他们喽!
    哈哈……!

    ReplyDelete
  7. 不会写得很乱啊~很详细~
    呵呵~那偶也要来做一个~>w<

    ReplyDelete
  8. 老師,學生暫時沒時間弄,不過謝謝你無私的分享。

    ReplyDelete
  9. 虽然我理解你讲什么.
    可是我觉得很麻烦.
    所以不想弄.

    可是也要谢谢你的教学. (:

    ReplyDelete
  10. XD 谢谢咯。。根据你的步骤,我完成了。。还帮我解疑。因为之前我问其他博友,他们都是用photoshop弄的。原来还有这招,还有怎样把html显示给网友看。这招。。也感谢你..XD

    ReplyDelete
  11. 错啦,
    alt是图片失效或未载入时显示的alternate text;
    图title才是鼠标hover所显示的字啦

    ReplyDelete
  12. 谢谢老师~~
    [原来你还记得啊??]

    ReplyDelete
  13. 好...好..好...复杂
    什么来的~
    虽然很想要弄
    但是
    看到一堆的代码
    天啊~什么来的~
    还是放弃算了~

    ReplyDelete
  14. 呵呵,第一次来你的blog~
    你的图画很可爱~
    对于这个图片的link,哈哈,
    对不起我真的是电脑白痴,
    失败了很多次~T.T

    ReplyDelete
  15. 原来你在新山一带教补习
    不错,不错
    祝你生意好好
    等阿猫从台湾回来再来拿你的图

    ReplyDelete
  16. Sorry....
    my computer spoit...
    later i will do one...
    thx...

    ReplyDelete
  17. 谢谢老嘟!
    心领了,很感激!

    老嘟怎么一直吐舌头?
    七月不是已经过去了吗?

    哈哈哈哈~~~~~

    ReplyDelete
  18. 哈哈
    原来是酱的
    每次看到人家做
    很羡慕的
    要亲自动手做做看
    嘻嘻
    谢谢哦 老师~~

    ReplyDelete
  19. 我也想试一试...谢谢你范老师!!!

    ReplyDelete
  20. 之前我是用ulead的
    但是那個不是free software
    沒想到用這個也可以=)

    ReplyDelete
  21. 老花眼
    看没有
    ⊙﹏⊙b汗

    ReplyDelete
  22. Hey thanks for the sharing~ xD
    I will try it later ^^

    ReplyDelete
  23. JinRaiXin
    恭喜获得沙发一张
    html这东西你肯定比我强多咯 ><

    ♥-wanyi-♥
    不客气~

    bluefiz
    谢谢!我期待噢!
    我相信只要用心,任何人用paint都可以画得很棒

    Yenhong
    好啊!等你的好消息!

    汉威
    你也会画
    所以你应该知道连贯性的图其实也不太难画 呵呵

    ReplyDelete
  24. yen@燕
    抱歉让你等那么久咯
    如果有什么问题 尽管让我知道吧

    神真夜
    好啊 做好了让我知道!
    期待噢!

    海角
    海角姐贵人事忙 呵呵

    小米 ♥
    不客气~

    珍琳
    嗯~你是第一个完成的呢!

    ReplyDelete
  25. 锁魂
    原来如此
    那为什么我现在把滑鼠移到图上
    也还会显示写在alt里的句子呢?

    ♥深海的思念♥
    哈哈...我守信用的
    (只是有点慢 ><)

    Nick尼克仔
    我以前也没兴趣
    后来慢慢的就学会看一些基本的
    但也还只是皮毛

    ah_man
    呵呵...谢谢你的来访
    贴不到没关系 谢谢你的用心咯

    Puddycat Mei Ai
    谢谢~不过我没教补习噢
    那是帮朋友打的广告 哈哈
    祝你旅途愉快!

    ReplyDelete
  26. 追梦者
    谢谢你的支持~^^

    守护神
    好的,谢谢咯!
    希望你的电脑早日修好

    嘿嘿
    那不是吐舌头啦 ><

    小炜司砾
    哈哈...这是我自己土法炼钢
    别人也许会有更方便的做法呢

    ah hun
    不客气!^^
    做好了让我知道噢!

    ReplyDelete
  27. 神秘加冰XD
    不客气!分享是很快乐的 哈哈

    IM MS. X.PEI-小沛™ ★
    ulead? 没听过噢...
    我这是土法炼钢...哈哈

    杰胜
    不客气!

    老大的妈
    哈哈...一开始我也看不懂这些蚯蚓字

    Boey
    不客气!
    做好了别忘记让我知道!^^

    ReplyDelete
  28. 我還真是很忙,差不多快變盲了。

    ReplyDelete
  29. 不過,儘管多忙,都會來你這邊當笑蛇,哈哈。。。

    ReplyDelete
  30. 刚刚又看到一个错误,target="_blank"才对(要有画线在blank前面)

    对于一些版本的IE,鼠标指着是可以显示alt的字的,用其它浏览器可能就不行了

    ReplyDelete
  31. Dayana
    谢谢~!^^

    海角
    哈哈!多谢赏脸!
    我很欢迎你常来啊

    锁魂
    噢!原来如此!
    我改了!多谢你的教导!
    学了不少呢~呵呵 ^^

    ReplyDelete
  32. 小范老師

    因爲我等著給你金屋藏嬌,哈哈。。。。

    ReplyDelete
  33. 海角姐
    哈哈~我很穷啊...盖不起金屋
    所以比较想当被藏的那个
    你介不介意金屋藏师?XD

    ReplyDelete
  34. 谢谢老师的分享~
    一直以来都想弄一个,没想到老师慷慨的教课啦~
    请问一下
    我参考这篇在我的部落格上也发了一篇教学
    需不需要特别授权呢?
    PS用Paint就能画出高水准的画。。。佩服佩服

    ReplyDelete
  35. 教得不错!!看得懂。。。谢谢你的分享!!我也把你的衔接图带回家了哦!!

    ReplyDelete
  36. 谢谢你的分享。^^ 我的blog终于有个link button了,有兴趣可以交换哦~ \(^o^)/

    ReplyDelete
  37. Hey there, You have done a fantastic job. I'll definitely digg it and personally suggest to my friends. I'm confident they'll be benefited from this site.

    My webpage: buying twitter followers

    ReplyDelete
  38. It's very straightforward to find out any matter on net as compared to books, as I found this post at this web page.

    Also visit my page ... http://porshastewart.com/blog/?p=220

    ReplyDelete

凡走过必留下痕迹,脚印不嫌多~

Related Posts Plugin for WordPress, Blogger...