圖片套用各式照片框

Gene's profile≡ 能量魔法 ≡PhotosBlogListsMore

Tools

Help

< Previous Next >

圖片套用各式照片框

主旨： 圖片套用各式照片框 (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語法：

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

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

範例：

HTML:

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

複製起點→●

●←複製終點

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

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

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

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

引用網站其中一張原理圖

　

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

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

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

修改之後的HTML語法：

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:

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

複製起點→●

●←複製終點原圖:

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

HTML語法：

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

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

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

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

範例：

HTML:

在MSN Spaces上顯示的結果:

複製起點→●

●←複製終點

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

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

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

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

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

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

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

修改後HTML語法：

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

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

範例：

HTML:

在MSN Spaces上顯示的結果:

複製起點→●

●←複製終點

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

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

所以來修改修改語法。

修改之後的HTML語法：

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

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

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

範例：

HTML:

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

複製起點→●

●←複製終點

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

To be continue.....

Edit

還沒用過這些產生器嗎? 很好用喔~ 小綠人特別設計的喔~!

照片框產生器、材質文字效果產生器、年度代表文字產生器、圖片濾鏡產生器、
網誌背景圖產生器、訂閱按鈕貼紙產生器、iJigg音樂嵌入語法修正器

April 27 5:47 PM | View trackbacks (46) | Blog it | 【Spaces 部落格美化教學】

Comments (153)

To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in

Don't have a Windows Live ID? Sign up

	No namewrote: http://www.akkuliste.com/acer/as07b71.htm acer as07b71 akku http://www.akkuliste.com/hp/nx6120.htm hp nx6120 akku http://www.akkuliste.com/hp/nc6100.htm hp nc6100 akku http://www.akkuliste.com/hp/nc6120.htm hp nc6120 akku http://www.akkuliste.com/dell/inspiron-1100-series.htm dell inspiron 1100 series akku http://www.akkuliste.com/dell/inspiron-1150.htm dell inspiron 1150 akku http://www.akkuliste.com/dell/inspiron-5150.htm dell inspiron 5150 akku http://www.akkuliste.com/dell/inspiron-5160.htm dell inspiron 5160 akku http://www.akkuliste.com/dell/inspiron-5100.htm dell inspiron 5100 akku http://www.akkuliste.com/dell/latitude-131l.htm dell latitude 131l akku http://www.akkuliste.com/dell/vostro-1000.htm dell vostro 1000 akku http://www.akkuliste.com/dell/gd761.htm dell gd761 akku http://www.akkuliste.com/dell/nt379.htm dell nt379 akku http://www.akkuliste.com/dell/latitude-d531.htm dell latitude d531 akku http://www.akkuliste.com/dell/precision-m65.htm dell precision m65 akku http://www.akkuliste.com/dell/vostro-1700.htm dell vostro 1700 akku http://www.akkuliste.com/gateway/8msb.htm gateway 8msb akku http://www.akkuliste.com/hp/pb992a.htm hp pb992a akku http://www.akkuliste.com/hp/dv2100.htm hp dv2100 akku http://www.akkuliste.com/hp/dv2200.htm hp dv2200 akku http://www.akkuliste.com/hp/hstnn-c29c.htm hp hstnn-c29c akku http://www.akkuliste.com/hp/nc8000.htm hp nc8000 akku http://www.akkuliste.com/dell/inspiron-b120.htm dell inspiron b120 akku http://www.akkuliste.com/dell/inspiron-b130.htm dell inspiron b130 akku http://www.akkuliste.com/gateway/12msbg.htm gateway 12msbg akku http://www.akkuliste.com/hp/7400.htm hp 7400 akku http://www.akkuliste.com/dell/inspiron-b120.htm dell inspiron b120 akku http://www.akkuliste.com/toshiba/pa3356u.htm toshiba pa3356u akku http://www.akkuliste.com/hp/2510p.htm hp 2510p akku http://www.akkuliste.com/hp/f3172a.htm hp f3172a akku http://www.akkuliste.com/dell/inspiron-2200.htm dell inspiron 2200 akku http://www.akkuliste.com/gateway/squ-414.htm gateway squ-414 akku http://www.akkuliste.com/hp/hstnn-lb33.htm hp hstnn-lb33 akku http://www.akkuliste.com/mitac/bp-8089.htm mitac bp-8089 akku http://www.akkuliste.com/toshiba/satellite-m55.htm toshiba satellite m55 akku http://www.akkuliste.com/toshiba/satellite-m115.htm toshiba satellite m115 akku http://www.akkuliste.com/toshiba/qosmio-f25.htm toshiba qosmio f25 akku http://www.akkuliste.com/toshiba/satellite-m60.htm toshiba satellite m60 akku http://www.akkuliste.com/toshiba/satellite-p200.htm toshiba satellite p200 akku http://www.akkuliste.com/toshiba/pa3536u-1brs.htm toshiba pa3536u-1brs akku http://www.akkuliste.com/hp/hstnn-db17.htm hp hstnn-db17 akku http://www.batteryfast.com/mitac/8375.htm mitac 8375 battery Oct. 18
	No namewrote: http://www.batteryfast.com/hp/nc6120.htm hp nc6120 battery http://www.batteryfast.com/dell/inspiron-1100-series.htm dell inspiron 1100 series battery http://www.batteryfast.com/dell/inspiron-1150.htm dell inspiron 1150 battery http://www.batteryfast.com/dell/inspiron-5150.htm dell inspiron 5150 battery http://www.batteryfast.com/dell/inspiron-5160.htm dell inspiron 5160 battery http://www.batteryfast.com/dell/inspiron-5100.htm dell inspiron 5100 battery http://www.batteryfast.com/dell/latitude-131l.htm dell latitude 131l battery http://www.batteryfast.com/dell/vostro-1000.htm dell vostro 1000 battery http://www.batteryfast.com/dell/gd761.htm dell gd761 battery http://www.batteryfast.com/dell/nt379.htm dell nt379 battery http://www.batteryfast.com/dell/latitude-d531.htm dell latitude d531 battery http://www.batteryfast.com/dell/precision-m65.htm dell precision m65 battery http://www.batteryfast.com/dell/vostro-1700.htm dell vostro 1700 battery http://www.batteryfast.com/gateway/8msb.htm gateway 8msb battery http://www.batteryfast.com/hp/pb992a.htm hp pb992a battery http://www.batteryfast.com/hp/dv2100.htm hp dv2100 battery http://www.batteryfast.com/hp/dv2200.htm hp dv2200 battery http://www.batteryfast.com/hp/hstnn-c29c.htm hp hstnn-c29c battery http://www.batteryfast.com/hp/nc8000.htm hp nc8000 battery http://www.batteryfast.com/dell/inspiron-b120.htm dell inspiron b120 battery http://www.batteryfast.com/dell/inspiron-b130.htm dell inspiron b130 battery http://www.batteryfast.com/gateway/12msbg.htm gateway 12msbg battery http://www.batteryfast.com/hp/7400.htm hp 7400 battery http://www.batteryfast.com/dell/inspiron-b120.htm dell inspiron b120 battery http://www.batteryfast.com/toshiba/pa3356u.htm toshiba pa3356u battery http://www.batteryfast.com/hp/2510p.htm hp 2510p battery http://www.batteryfast.com/hp/f3172a.htm hp f3172a battery http://www.batteryfast.com/dell/inspiron-2200.htm dell inspiron 2200 battery http://www.batteryfast.com/gateway/squ-414.htm gateway squ-414 battery http://www.batteryfast.com/hp/hstnn-lb33.htm hp hstnn-lb33 battery http://www.batteryfast.com/mitac/bp-8089.htm mitac bp-8089 battery http://www.batteryfast.com/toshiba/satellite-m55.htm toshiba satellite m55 battery http://www.batteryfast.com/toshiba/satellite-m115.htm toshiba satellite m115 battery http://www.batteryfast.com/toshiba/qosmio-f25.htm toshiba qosmio f25 battery http://www.batteryfast.com/toshiba/satellite-m60.htm toshiba satellite m60 battery http://www.batteryfast.com/toshiba/satellite-p200.htm toshiba satellite p200 battery http://www.batteryfast.com/toshiba/pa3536u-1brs.htm toshiba pa3536u-1brs battery http://www.batteryfast.com/hp/hstnn-db17.htm hp hstnn-db17 battery Oct. 18
	No namewrote: http://www.batteryfast.co.uk/toshiba/pa3285u-1bas.htm toshiba pa3285u-1bas battery http://www.batteryfast.co.uk/toshiba/pa3285u-1brs.htm toshiba pa3285u-1brs battery http://www.batteryfast.co.uk/toshiba/pa3285u-2bas.htm toshiba pa3285u-2bas battery http://www.batteryfast.co.uk/toshiba/pa3285u-2brs.htm toshiba pa3285u-2brs battery http://www.batteryfast.co.uk/toshiba/pa3285u-3bas.htm toshiba pa3285u-3bas battery http://www.batteryfast.co.uk/hp/nc6000.htm hp nc6000 battery http://www.batteryfast.co.uk/hp/nx5000.htm hp nx5000 battery http://www.batteryfast.co.uk/hp/nw8000.htm hp nw8000 battery http://www.batteryfast.co.uk/hp/nc8000.htm hp nc8000 battery http://www.batteryfast.co.uk/hp/v1000.htm hp v1000 battery http://www.batteryfast.co.uk/hp/dv2100.htm hp dv2100 battery http://www.batteryfast.co.uk/hp/dv2200.htm hp dv2200 battery http://www.batteryfast.co.uk/hp/v3000.htm hp v3000 battery http://www.batteryfast.co.uk/hp/dv9200.htm hp dv9200 battery http://www.batteryfast.co.uk/hp/dv9100.htm hp dv9100 battery http://www.batteryfast.co.uk/hp/dv9700.htm hp dv9700 battery http://www.batteryfast.co.uk/dell/inspiron-b120.htm dell inspiron b120 battery http://www.batteryfast.co.uk/dell/inspiron-b130.htm dell inspiron b130 battery http://www.batteryfast.co.uk/dell/inspiron-1200.htm dell inspiron 1200 battery http://www.batteryfast.co.uk/toshiba/satellite-p200.htm toshiba satellite p200 battery http://www.batteryfast.co.uk/mitac/8375.htm mitac 8375 battery Oct. 18
	Hallelujah, Hallelujahwrote: 哇!~我會使用了^^ 引用此文章囉!謝謝..... Apr. 6
	No namewrote: 升降台集装袋地磅塑料托盘仓储笼北京货架超市货架北京货架广州货架仓储货架货架厂南京货架货架公司深圳货架服装货架托盘托盘塑料托盘塑料托盘木托盘仓储笼仓储笼仓储笼仓储笼托盘托盘手推车静音手推车静音手推车置物架置物架堆垛架堆垛架登高车登高车超市手推车物流手推车物流台车角钢货架角钢货架轻型货架轻型货架中型货架中型货架重型货架重型货架仓库货架服装货架上海货架精品货架苏州货架托盘货架青岛货架库房货架沈阳货架天津货架杭州货架山东货架文件柜工具柜工具柜零件柜工作台工作台工作桌工作桌超市货架超市货架护栏围栏围栏隔离网隔离网网片网片南京货架北京货架北京货架北京货架仓储货架仓储货架广州货架广州货架货架厂货架公司塑料托盘 Google左侧排名色带缎带 Mar. 26
	荳娘 chenwrote: 請問"圖片網址" 是什麼意思? 我應該如何處理要放上blog的照片呢? Mar. 29
	沉睡寂寞幻夢裡wrote: 蠻好的...雖然還是搞不清楚我到底會不會用..ccc Mar. 9
	sun Kenwrote: 不错的HTML代码,称赞一个 Mar. 8
	Sandy Chengwrote: 很赞很赞～～谢咯～！！ Jan. 24
	Tracy Yuwrote: 感謝能量魔法比哈利波特還要利害我玩的不亦樂乎本來剛開完刀醫生說不可以一直坐在電腦前面.......--> Nov. 28
	小花wrote: 很棒~~謝謝~ Nov. 27
	Dee Dee Yangwrote: 　　　　　 .★　*　★.. .★　.　..　　　　 ★　 ★　　　　　　　　　　 * ★　　　　　　　　　 ★’ ‘.　　　　　　　　　‘★　　　　★　　　　　‘*..★' 簽簽簽簽簽簽簽簽週末愉快唷~~~~~ Nov. 26
	中国陶瓷填料网 wrote: 早就早找这种软件，太好了。谢谢 Nov. 16
	Dee Dee Yangwrote: 再赞一个!!!!!!!!!!!!!!!!!!!!!!! Nov. 9
	Dee Dee Yangwrote: haha!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!thank u thank u thank u dear Love DD:) Nov. 9
	Yuki Leungwrote: Thanks a lot ^^ Aug. 30
	Lydia Changwrote: 呵呵我學到也運用了謝謝喔 July 20
	笛wrote: 超厉害的教程~我也看明白了~谢谢哦 July 17
	Ke Lawrote: 恩~很詳細的教學~學到也很多!但我還是有些疑問：第一：就是照片旁邊那空白的部分想要加文章是用什麼語法～我試了好久都用不出來！第二：就是說我拍立得樣式精緻照片框弄好了~發布在網誌時!怎麼要他放左或放右邊??? 我不想讓旁邊有白白的一塊空在那邊~我想要打一篇小文章在旁邊~可是都不行!按Enter 拍立得象框會著往下移動...懊惱勒! July 15
	Rebecca ~ wrote: 很棒的網頁~引用此文章囉 June 9

Next > Last >>

Trackbacks (46)

The trackback URL for this entry is:

http://gene7299.spaces.live.com/blog/cns!D2C6AE79F031F1AC!2755.trak

Weblogs that reference this entry