圖片套用各式照片框


    超級感謝 牛角村村長 國良先生

                    為本篇製作 ☺照片框產生器 [點我

親愛的村長,太帥了....

  • 照片框產生之後可以用[複製起點→●] 和 [●←複製終點] 複製貼到你的網誌
  • 多多使用  Ctrl+A (全選)  Ctrl+C (複製)  Ctrl+V (貼上)  Ctrl+X (剪下)  Ctrl+Z (復原)  組合鍵.....
  • 想要對本篇進行研究,請務必熟析HTML語法。

內容總覽 (☺:產生器已加入國良先生的msn Spaces小幫手^o^)

  1. 拍立得樣式精緻照片框  ~ ☺
  2. 圖片加上照片框 ~ ☺
  3. 圖片加上照片框(+PNG陰影) ~ ☺
  4. 圖片加上照片框(+濾鏡陰影) ~ ☺
  5. 圖片加上照片框(+陰影照片框) ~ ☺
  6. 圖片加上照片框(+立體陰影) ~ ☺
  7. 圖片加上自訂照片框(圖片重疊法)
  8. 圖片加上自訂照片框(兩次框線法)
  9. 使用線上工具加上照片框

1.拍立得樣式精緻照片框:

之前,Timi 的網誌裡有介紹 拍立得樣式的精緻照片框!!,這個最先出現在 Royboy Weblog 的 [這一篇],但是很可惜的是,如果你直接套用裡面的語法將會發生空白的沒空白等不良效果,這是因為在MSN Spaces 裡不開放padding和margin的樣式(Style Sheet),還有一個小問題,Royboy的語法在Firefox瀏覽下會發生右邊多餘空白,所以似乎有改語法的必要,讓MSN Spaces和Firefox都能有最佳效果。

修改之後的HTML語法

<div style="width:Apx; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;">
<div style="border-width:10px 10px 20px 10px; border-style:solid; border-color:white; overflow:visible;"><div style="border:1px solid #999999;overflow:visible;">
<img src="圖片網址" width="Bpx"></div><div style="height:4px;overflow:hidden"></div><div style="font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">照片描述<br><b>照片日期<br>Photo by ???</b></div></div>
</div></div>

width:Apx; 是整個相片框的寬度
width="Bpx"
是你想設定的圖寬

根據原作著的語法設定:
width:Apx; width="Bpx"圖片的寬度加20即(A=B+20)
然後加入
圖片網址照片描述/日期/名稱後即可!

其他的(Style Sheet)CSS 參數設定的詳細情形,可以參考原著,或參考DIV表格語法教學....

修改原理

使用內層DIV框線白色實線框代替Padding(外框與內容的距離)

範例:

HTML:

<div style="width:232px; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;">
<div style="border-width:10px 10px 20px 10px; border-style:solid; border-color:white; overflow:visible;"><div style="border:1px solid #999999;overflow:visible;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_0?1114600880.jpg" width="212px"></div><div style="height:4px;overflow:hidden"></div><div style="font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">Taipei
101 大樓<br><b>2005/04/27<br>Photo by Gene</b></div></div>
</div></div>

在MSN Spaces上顯示的結果:(Firefox也行喔)

複製起點→●

Taipei 101
2005/01/01
Photo by Gene

●←複製終點

如果想要讓相框置右變成"文繞相框"的形式,

1.請在語法最前面加上<div style="float:right">

2.在語法最後面加上</div>

也就是多一個DIV把它們包起來,文字則要擺在</div>之後,才有"文繞相框"的效果出現。
置左就是把right改為left....應該了解...

2.圖片加上照片框:

HTML語法

<div style="border:1px solid #999; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;width=100px;height:10px ;background:white;FONT-SIZE: 12px;color=#333333;font-family:verdana;" >
<div style="border:4px solid #FFFFFF; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;">
<img src="
圖片網址" width="Cpx" height="Dpx"></div></div>

width="Cpx" 是你想設定的圖寬
height="Dpx" 是你想設定的圖高


然後加入圖片網址後即可!!

範例:

HTML:

<div style="border:1px solid #999; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;width=100px;height:10px ;background:white;FONT-SIZE: 12px;color=#333333;font-family:verdana;" >
<div style="border:4px solid #FFFFFF; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;">
<img src="
http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"></div></div>

在MSN Spaces上顯示的結果:(Firefox也行喔,但要設定絕對寬高)

複製起點→●

●←複製終點

3.圖片加上照片框(+PNG陰影):

一些人常常使用PhotoShop等軟體為相片製作陰影效果,現在當沒有其他繪圖工具輔助的時候也可以模擬此效果喔。

在國外網站有人為此想出辦法 [連結一] [連結二] [連結三]

簡單說就是使用CSS和一些陰影圖片來模擬

引用網站其中一張原理圖

Illustrated process

就是把一張陰影圖放在圖片的下面去做重疊....

但也是很可惜,這裡面所介紹的語法也不適用在MSN Spaces

所以只能修改語法,來得到最為相近的效果。

修改之後的HTML語法

<div style="width=Apx;height:Bpx ;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;;background:white;">
<div style="border:4px solid #FFFFFF;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;">
<img src="
圖片網址" width="Cpx" height="Dpx"></div></div>
<div style="float:left;overflow:hidden;width=6px;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_3?1114600520.png" width="6" height="6"><br><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_1?1114600520.png" width="6px"
height="Epx"></div>
</div>
<div style="
width=Apx;height:6px ;"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_2?1114600520.png" width="6" height="6"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_0?1114600520.png" width="Fpx" height="6"></div>
</div>

width:Apx; 是整個相片框的寬度(有2個) A=C+16
height:Bpx;
是整個相片框的高度            B=D+10

width="Cpx"
是你想設定的圖寬
height="Dpx" 是你想設定的圖高

height="Epx" 是右邊陰影的高度          E=C+10
width="Fpx" 是底部陰影的寬度          F=D+9

然後加入圖片網址後即可!!

會有那麼多的設定,主因是MSN Spaces不開放一些CSS所致。
所以把原網址

範例:

HTML:

<div style="width=416px;height:310px ;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;;background:white;">
<div style="border:4px solid #FFFFFF;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;">
<img src="
http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"></div></div>
<div style="float:left;overflow:hidden;width=6px;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_3?1114600520.png" width="6" height="6"><br><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_1?1114600520.png" width="6px"
height="304px"></div>
</div>
<div style="
width=416px;height:6px ;"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_2?1114600520.png" width="6" height="6"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_0?1114600520.png" width="409px" height="6"></div>
</div>

在MSN Spaces上顯示的結果:(Firefox也行喔)

複製起點→●


●←複製終點

原圖:

4.圖片加上照片框(+濾鏡陰影) :  稍微較差的陰影效果

HTML語法

<div style="overflow:visible;FILTER:Dropshadow(color=#cccccc,offX=4,offY=4);width=Apx;height:Bpx;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px ;background:white;">
<div style="border:4px solid #FFFFFF;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px; background:white;">
<img src="
圖片網址" width="Cpx" height="Dpx"></div>
</div></div>

width:Apx; 是整個相片框的寬度 A=C+15
height:Bpx;
是整個相片框的高度 B=D+15

width="Cpx"
是你想設定的圖寬
height="Dpx" 是你想設定的圖高


然後加入圖片網址後即可!!

當然使用濾鏡的話目前是不適用在Firefox的..

範例:

HTML:

<div style="overflow:visible;FILTER:Dropshadow(color=#cccccc,offX=4,offY=4);width=415px;height:315px;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px ;background:white;">
<div style="border:4px solid #FFFFFF;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px; background:white;">
<img src="
http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"></div></div>
</div>

在MSN Spaces上顯示的結果:

複製起點→●

●←複製終點

5.圖片加上照片框陰影(+陰影照片框) : 

逛逛 Royboy Weblog 又看到 [這一篇],有提到使用背景圖的方式來與模擬陰影 (原作著是cassidy)

本來是使用圖片套用背景圖的樣式(讓圖重疊)....如下....但是MSN Spaces就是不支援正統的背景圖

所以沒辦法直接使用此語法。

<img src="照片框圖片" style="background:url(主要照片) no-repeat">

當然要套用此法....就得使用 MSN Spaces 加上背景圖的特殊語法 去做模擬。

故.....Firefox 不支援.....

那把 照片框圖片(中間當然要透明的喔) 畫成這樣就能模擬陰影圖片哩(多虧Royboy想出來)

修改後HTML語法

<div style="width:Cpx;height:Dpx;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_0?1114691307.gif" width="2%" align=right><img src="
圖片網址" width=100% height=98% align=right>
<div style="float:left;overflow:visible;width=100%;height:100%;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_1?1114691307.gif" width="100%" height="100%"></div></div>
</div>

width="Cpx" 是你想設定的圖寬
height="Dpx" 是你想設定的圖高


然後加入圖片網址後即可!!

範例:

HTML:

<div style="width:400px;height:300px;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_0?1114691307.gif" width="2%" align=right><img src="
http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width=100% height=98% align=right>
<div style="float:left;overflow:visible;width=100%;height:100%;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_1?1114691307.gif" width="100%" height="100%"></div></div>
</div>

在MSN Spaces上顯示的結果:

複製起點→●

●←複製終點

6.圖片加上照片框(+立體陰影):

在Fotki網站看到很不錯的樣式(照片四周加上陰影),原語法也不適用在MSN Spaces

所以來修改修改語法。

修改之後的HTML語法

<div style="width=A;height:B ;">
<div style="
width=A;height:13 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_2?1114739383.gif" width="12" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_6?1114739383.gif"
width="C" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_7?1114739383.gif" width="15" height="13"></div>
<div style="
width=A;height:D ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_5?1114739383.gif" width="12"
height="D"><img src="圖片網址" width="C" height="D"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_0?1114739383.gif" width="15" height="D"></div>
<div style="
width=A;height:15 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_3?1114739383.gif" width="12" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_1?1114739383.gif"
width="C" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_4?1114739383.gif" width="15" height="15"></div>
</div>

width:A; 是整個相片框的寬度 A=C+27
height:B;
是整個相片框的高度 B=D+28

width="C"
是你想設定的圖寬
height="D" 是你想設定的圖高


然後加入圖片網址後即可!!

範例:

HTML:

<div style="width=427;height:328 ;">
<div style="
width=427;height:13 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_2?1114739383.gif" width="12" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_6?1114739383.gif"
width="400" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_7?1114739383.gif" width="15" height="13"></div>
<div style="
width=427;height:300 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_5?1114739383.gif" width="12"
height="300"><img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_0?1114739383.gif" width="15" height="300"></div>
<div style="
width=427;height:15 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_3?1114739383.gif" width="12" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_1?1114739383.gif"
width="400" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_4?1114739383.gif" width="15" height="15"></div>
</div>

在MSN Spaces上顯示的結果:(Firefox也行喔)

複製起點→●

●←複製終點

7.圖片加上自訂照片框(圖片重疊法) : 

To be continue.....