主旨： 圖片套用 各式照片框 (65%) 
超級感謝
牛角村村長 國良先生
為本篇製作 ☺照片框產生器
親愛的村長，太帥了....
產生器網址已改為小綠人版本..噗～ [點我]
- 照片框產生之後可以用[複製起點→●] 和 [●←複製終點] 複製貼到你的網誌
- 多多使用 Ctrl+A (全選) Ctrl+C (複製) Ctrl+V (貼上) Ctrl+X (剪下) Ctrl+Z (復原) 組合鍵.....
- 想要對本篇進行研究，請務必熟析HTML語法。
內容總覽 (☺:產生器已加入國良先生的msn Spaces小幫手^o^)
- 拍立得樣式精緻照片框 ~ ☺
- 圖片加上照片框 ~ ☺
- 圖片加上照片框(+PNG陰影) ~ ☺
- 圖片加上照片框(+濾鏡陰影) ~ ☺
- 圖片加上照片框(+陰影照片框) ~ ☺
- 圖片加上照片框(+立體陰影) ~ ☺
- 圖片加上自訂照片框(圖片重疊法)
- 圖片加上自訂照片框(兩次框線法)
- 使用線上工具加上照片框
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和一些陰影圖片來模擬
引用網站其中一張原理圖
就是把一張陰影圖放在圖片的下面去做重疊....
但也是很可惜，這裡面所介紹的語法也不適用在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.....
Edit
도구 
還沒用過這些產生器嗎? 很好用喔~ 小綠人特別設計的喔~!
