我們常常在網頁或是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的內容圖片,要如何製作拍立得的效果喔,希望自己的部落格文章圖片更漂亮的人千萬不要錯過喔!

 

 

 

    全站熱搜

    房匠網 發表在 痞客邦 留言(8) 人氣()