房匠網 FUN JIANG

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

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

◎完成圖：

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

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

 

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

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

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

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

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

 

 

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