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

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

Delivered by FeedBurner

      我們常常在網頁或是Blog中放置內容圖片,只是純粹放入圖片,有時候會覺得在視覺效果上略顯單調,但是如果想要針對圖片加點設計效果,往往又需要使用美工軟體進行編輯才可以做到,所以今天設計嵐來分享一個簡單的手法,利用CSS語法在圖片上製作具有拍立得效果的外框,瞬間就可以讓沒有特色的圖片擁有吸引眾人目光的魔力喔!

      這項設計手法的教學會有兩篇,本文針對網頁設計者如何在Dreamweaver網頁編輯軟體中進行CSS規則設定與建立,製作出圖片拍立得效果;下一篇文章設計嵐則會針對Blog使用者,分享如何在Blog內容圖片製作拍立得效果,讓大家以後寫文章放圖片的時候,圖片不再單雕乏味喔!

◎完成圖:

19.jpg 

在原本圖片的外圍多出了底色和邊框,還可加上圖片的說明文字喔!

1.使用DW開啟編輯的網頁,插入圖片並調整所需大小,完成後選取圖片並從屬性面板確認圖片的寬度大小。

01.jpg 

2.在圖片上按右鍵→剪下,暫時先將圖片拿掉稍後再貼上。

1.jpg 

3.在版面適當處插入一個Div標籤物件(版面→插入Div標籤)。

2.jpg 

4.在『類別』欄位輸入自訂名稱→新增CSS規則。

3.jpg 

5.在新增CSS規則畫面直接按下『確定』。

4.jpg 

6.設定畫面一:字型(可依需求設定,此設定決定了相片說明文字格式)。

5.jpg 

7.設定畫面二:背景(在此決定拍立得外框的底色)。

6.jpg 

8.設定畫面三:區塊(在此設定Div內的圖文內容對齊方式,可依需求設定)。

7.jpg 

9.設定畫面四:方框(在此拍立得外框的尺寸、位置以及邊界間距)。

8.jpg 

A.Width:拍立得外框的總寬度(請依照圖片寬度來設定,ex.圖片寬度為312px,為了左右各空10px,所以在此我設定為332px)。

B.Float:設定Div物件在網頁上的位置(可依需求設定)。

C.Padding:Div物件的内距,即內文距離Div邊緣的間隔,尺寸可自行設定,通常為了更像拍立得相片的外框,會將Bottom(下內距)設定較大間隔。

10.設定畫面五:邊框(在此設定Div外框的樣式)。

9.jpg 

A.Style:設定外框線的樣式(在此請選Solid實線樣式)。

B.Width:設定外框線粗細(建議1px即可)。

C.Color:設定外框線的顏色。

D.上下左右全都設定一樣的樣式即可。

全部設定完畢後按下『確定』離開設定畫面。

11.回到Div插入畫面直接按下確定。

10.jpg 

12.版面中會置入一個Div物件,將註解文字選取→按右鍵→貼上,將之前步驟剪下之圖片貼回來。

11.jpg 

13.圖片置入後可以用瀏覽器預覽目前的畫面:

12.jpg 

      由於圖片底色與拍立得外框底色都是白色,所以圖片與外框沒有明顯區隔,且立體感不佳,所以我們接著針對圖片設定外框。

14.利用『CSS樣式』面板→新增CSS規則。

13.jpg 

15.以『類別』方式新增規則並且幫規則取一個名稱,然後按下『確定』。

14.jpg 

16.切換至『邊框』分類,進行圖片邊框設定。

15.jpg 

設定完成按下『確定』離開。

17.將建立好的規則套用在圖片上。

16.jpg 

18.再使用瀏覽器進行預覽,就會發現除了拍立得白色邊框之外,圖片編員也多了黑色邊框,就可以產生明顯區隔,立體感也出來嚕!

17.jpg 

19.如果需要加上拍立得說明文字,只要在圖片的下方按Enter新增段落輸入文字即可。

18.jpg 

 

        以上就是利用Dreamweaver的CSS設定Div和圖片,利用Div物件本身的格式做出拍立得的邊框感覺,在下一篇文章設計嵐將會教大家如果是在Blog的內容圖片,要如何製作拍立得的效果喔,希望自己的部落格文章圖片更漂亮的人千萬不要錯過喔!

 

 

 

創作者介紹

『嵐設』-設計教學部落

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


留言列表 (8)

發表留言
  • mozaiyang
  • 黑默:留念留念
    拍立得一定要簽名
    才有趣>///<哈
  • 偷A一張茉茉的照片來作成拍立得~~~可愛!!!...XD..

    設計嵐 於 2010/06/30 19:07 回覆

  • 依依
  • 原來CSS也可以做邊框壓!!
    如果是依依一定開photoshop~快點學起來XD
    嵐老師~ 可以交換貼貼嗎 ˙  ˇ  ˙
  • 當然歡迎交換貼貼嚕.^^...我也會去撕你的貼紙的~^^~把貼紙準備好喔..XD

    設計嵐 於 2010/07/01 01:31 回覆

  • PennyFan
  • 哇,好厲害,用DW做邊框。
    真是讓我大開眼界。
    (相片里面有我~有我耶~)
  • 您過獎啦~~您畫得圖才是令我大開眼界..^^...

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

  • bewith
  • 雖然還不太會
    但還是先學起來照著試看看
  • 您一定行的^^....有問題歡迎一起討論喔!!

    設計嵐 於 2010/07/01 12:56 回覆

  • janet1
  • 實用耶!!!


    樓上留言怎麼都是打廣告@@
  • 感謝您的提醒..^^..廣告留言一律殺無赦!!!砍掉了!!漏網之魚沒有發現而已~~~

    設計嵐 於 2010/07/02 21:59 回覆

  • 訪客
  • 請教大大 什麼是交換貼紙??? 又要怎麼交換呢?? 煩請解惑 謝謝您~~~~
  • 所謂的『交換貼紙』...您可以看我部落格頁面右上角的地方,就會看到!!!主要是用在部落格之間大家互相交換方便連結之用!!!您可以利用繪圖軟體製作(一般規格是180*60像素)...內容可以自訂!!然後上傳到相簿後加上語法讓大家複製~~貼到自己的部落格中完成交換~~^^

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

  • 十八兒
  • 我把您的css教學都看過~發現其實沒有我想得那麼難耶!而且您的解說和示範很親切易懂,不知道您還會繼續寫有關css教學的文章嗎?非常期待^^
  • 感謝您的鼓勵!!就算只看到您的這篇留言~~我也一定會繼續寫下去的ㄚ.^^..只是最近比較忙,所以更新文章就慢,真的抱歉!但請您稍等~~~我一定會持續寫作的!!還請繼續支持喔~~謝謝!!

    設計嵐 於 2011/05/27 21:17 回覆

找更多相關文章與討論