!『嵐設』免費電子報訂閱募集中!

在下方輸入您的Email訂閱就可收到本部落最新文章資訊喔!

Delivered by FeedBurner

      之前設計嵐分享了如何在進行網頁設計時,利用CSS語法將圖片加上拍立得的外框效果,對於學習網頁設計的人來說是個好用的技巧,(相關文章請參閱:[教學]成為CSS高手之路(八)~製作拍立得相片效果);而今天設計嵐再更進一步針對Blog經營者,介紹如何在blog文章圖片也加上拍立得相片效果外框,讓各位格友們不需要透過美工軟體就可以讓圖片有不同效果喔!

◎效果完成圖:

痞客幫圖文小學堂同班同學3D版海報

2010/07/05

 1.先將文章圖片上傳至任一網路相簿,並且開啟該圖片頁面。

1.jpg 

2.在圖片上按右鍵→內容。

2.jpg 

3.反白圖片網址進行複製,並且記錄圖片的長寬尺寸數值。

3.jpg  

4.複製以下語法:

‧在框內點一下自動全選

‧按右鍵→複製或CTRL+C進行複製

5.在後台進行新文章發表,要插入圖片的時候,點選上方功能表列的『編輯HTML原始程式碼』圖示。

4.jpg 

6.在要插入圖片的地方將語法貼上。

5.jpg 

7.貼上後的畫面如下:

6.jpg 

8.進行語法的修改:

7.jpg 

p.s.至於float則代表Div在頁面中的位置,可依需求設定,常用設定有left(靠左)、center(置中)、right(靠右),在此我設定left(靠左)。

完成後按下『更新』離開原始程式碼編輯。

 9.完成的效果如下:

10.如果想要加入拍立得相片文字,就用滑鼠在圖片右邊緣連點兩下進入編輯模式,然後按Enter就可以在圖片下方輸入文字。(畫面如下)

 

痞客幫圖文小學堂同班同學3D版海報

2010/07/05

如需設定文字格式則反白文字,進行文字字型、大小、對齊、顏色等等格式進行設定即可。

 

創作者介紹

『嵐設』-設計教學部落

設計嵐 發表在 痞客邦 PIXNET 留言(13) 人氣()


留言列表 (13)

發表留言
  • 6D大力金剛館
  • 呵~很可愛呢~你好細心~
  • 如果可愛是指圖片..那不是我畫的,是我們痞客幫圖文小學堂班長~More的大作!他可厲害嚕.^^Y...

    設計嵐 於 2010/07/05 18:17 回覆

  • 小咪
  • 嵐最貼心了!!~ ^^
  • 小咪人才好呢..^^...每次都會來我這邊捧場...就甘心ㄟ~~^^Y

    設計嵐 於 2010/07/05 18:18 回覆

  • 小咪
  • 咦??~
    這張怎麼沒有
    亞希斯跟阿玻啊??~XD
  • 有挖~~亞希斯是最左上角那個留小鬍子的!!阿玻的話..不是最右下角那個嗎???

    設計嵐 於 2010/07/05 18:20 回覆

  • pacific1985
  • 老師真是佛心來的阿!~ 阿彌陀佛~
  • 施主您過獎了..^^..能夠為芸芸眾生盡一份微薄之力,是老衲畢生的願望.XD..阿門~~阿不是!!阿彌陀佛!!!善哉善哉!!

    設計嵐 於 2010/07/05 18:22 回覆

  • 亞希斯.雷
  • 小咪~有在注意我耶^^
    搖擺~)))))) 好開心~
    嵐大~真的是 佛心來的^^~
  • 你有欠小咪錢吼~~~ccc...

    設計嵐 於 2010/07/06 00:06 回覆

  • 七先生與艾小姐
  • 這個很實用說!
    請容我偷學起來囉!!!XXXXXD
  • 請學..XD..

    設計嵐 於 2010/07/06 00:07 回覆

  • bewith
  • 看起來不錯用耶!
    感恩耶!
  • 謝謝你的支持啦~~^^

    設計嵐 於 2010/07/07 00:37 回覆

  • Invisible
  • 我從前一直以為,要加外框效果只需Photoshop就可以,沒想到原來用這種方法會更方便呢:P
    那我就即管找時間嘗嘗看^^
  • 請慢嘗.^^..ccc..

    設計嵐 於 2010/07/07 00:37 回覆

  • 天天。天晴
  • 這對於懶得後製的人真是個好工具!
    值得一推!!...^^
  • 謝啦..^^..

    設計嵐 於 2010/07/10 01:28 回覆

  • 夢哩
  • 哇嗚~
    這還不錯耶
    會變得比較有fuXD
  • 哈哈~~Fu都出來了..XD

    設計嵐 於 2010/07/10 01:29 回覆

  • 網路開店
  • 教學文章寫的好認真又仔細~~真用心
  • 感謝您的誇獎..^^..要常常來逛逛給小弟支持喔!!

    設計嵐 於 2010/07/21 20:18 回覆

  • Tuffy兔妃
  • 這個好棒!
    感覺可以位部落格加很多分耶~^ ^
  • 只要文章夠優~~讓更多人知道是一定要的!!..^^..加油!!

    設計嵐 於 2010/08/18 21:36 回覆

  • 訪客
  • 好實用喔~ 另外請問 那張圖片是用什麼方式製作的呢? 可以分享一下嗎 好漂亮 好厲害喔 ! 謝謝版大!!
  • 是用PhotoShop畫的..^^..

    設計嵐 於 2011/03/19 12:10 回覆

找更多相關文章與討論