網(wǎng)凝解析 2010-11-08 06:39:48 閱讀102 評(píng)論0 字號(hào):大中小
相片加相框的方法
一張普通的相片(風(fēng)景、人物、鮮花等圖片),加上漂亮的相框就更美麗了。相片加像框有各種方法:用軟件處理加工,也可用代碼貼圖合成。
用軟件處理加工,相片加相框合成后仍然是一張jpg或GIF格式的圖片,可以廣為上傳,取得的圖片地址可直接用于編輯網(wǎng)頁(yè)或音畫(huà)代碼貼了.
如果手頭沒(méi)有軟件加工,也可選一些相框素材用代碼貼圖加疊,效果也不錯(cuò),但它是一組代碼貼,不是一張圖片,只能用于音畫(huà)貼和空間貼.另外由于使用了一些特效代碼,因此不是到處可直接運(yùn)行,引用者請(qǐng)先試貼.
用hyml代碼編輯相片加相框有很多模式。
㈠相片加邊框的方法.
㈡用特效代碼給圖片加透明邊框的方法.
㈢用特效代碼為相片加疊相框方法 .
㈣套用代碼模式快速做相片加相框.
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
㈠相片加邊框的模式:
<table border="25" width="500" bordercolor="#003399" id="table1" cellspacing="3" cellpadding="1"> <tr> <td align=center valign=top> <INPUT type=image width=500 src="相片地址"> </td></tr></table>
說(shuō)明:
㈠表格(圖框)和相片的寬度可以自定但要一致,不用設(shè)高度.
㈡圖框的厚度border="25" ,可修改自定.
㈢圖框的顏色dercolor="#003399",可修改自定.
㈣<td align=center valign=top>這是相片居中靠頂?shù)拇a.
實(shí)例:
一張風(fēng)景畫(huà):
圖片加邊框的效果:
圖片加邊框的代碼:
<table border="25" width="500" bordercolor="#0000ff" id="table1" cellspacing="3" cellpadding="1"> <tr> <td align=center valign=top> <INPUT type=image width=500 src="http://image24.360doc.com/DownloadImg/2011/03/0415/9681829_1.jpg"> </td></tr></table>
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
(二)用特效代碼給圖片加透明邊框.
這種方法須要學(xué)會(huì)較多代碼語(yǔ)句,難度較大,先用現(xiàn)成的模式來(lái)套用吧!用特效代碼給圖片加透明邊框的實(shí)例:
郵票框
代碼:
<table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56"> <tr><td bgcolor="#aeffae" width=500 height=300 align=center valign=middle> <INPUT src="http://bbs.allfast.cn/upload_file/2007917143129990.jpg" type=image width=480 height=320> </td></tr></table>
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
立體陰影框
代碼:
<table width=500 height=300 border=1 cellpadding="25" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:25)"> <tr><td bgcolor="#ffffff" align=center valign=middle> <INPUT src="http://bbs.allfast.cn/upload_file/2007917143129990.jpg" type=image width=480 height=280> </td></tr></table>
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
代碼:
<TABLE cellSpacing=0 borderColorDark=#4c8328 cellPadding=0 width=10 height=10 borderColorLight=#98d470 border=8> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#98d470 cellPadding=0 width="100%" bgColor=#ffffff borderColorLight=#4c8328 border=6> <TR> <TD> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#4c8328 cellPadding=0 width="100%" borderColorLight=#98d470 border=2> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#98d470 cellPadding=0 width="100%" bgColor=#ffffff borderColorLight=#4c8328 border=3> <TR> <TD> <TABLE cellSpacing=0 cellPadding=0 width=500 height=300 border=0> <TR> <TD align=center> <INPUT src="http://bbs.allfast.cn/upload_file/2007917143129990.jpg" type=image width=500 height=300> </TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE> </TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE>
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
代碼:
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:silver,direction:145,strength:15)" cellSpacing=3 cellPadding=15 border=1> <TBODY> <TR> <TD> <INPUT src="http://bbs.allfast.cn/upload_file/2007917143129990.jpg" type=image width=480 height=280> </TD></TR></TBODY></TABLE>
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
(三)用特效代碼為相片加疊相框的方法 .
這部份資料供略懂代碼貼圖的網(wǎng)友參考,目前尚不懂者,暫且跳過(guò),請(qǐng)參閱第四部份"套用代碼模式快速做相片加相框."
先認(rèn)識(shí)一下用軟件做相片加相框過(guò)程,大概是:①打開(kāi)一個(gè)相框文件.② 用魔棒工具選中相框中心空白部分點(diǎn)擊刪除. ③打開(kāi)要嵌入的相片,拖動(dòng)到相框圖片上。④對(duì)調(diào)相框和相片圖層.⑤調(diào)整一下照片合并就OK了。
用一搬的代碼貼圖方法是不能實(shí)現(xiàn)這種效果的.我試選擇內(nèi)徑空白無(wú)背景的相框,設(shè)置一張有控制位置無(wú)背景的空白表格(作為容器),用絕對(duì)定位和圖片大小可調(diào)整的代碼,先貼相片后加疊相框也可獲得不錯(cuò)的效果.
選擇相框素材:
網(wǎng)絡(luò)上有多種類(lèi)形的相框素材,例如:
①相相框的內(nèi)徑?jīng)]有背景空洞的,可以看見(jiàn)網(wǎng)頁(yè)的背景.
②相框的內(nèi)徑有背景非空洞的,看不見(jiàn)網(wǎng)頁(yè)的背景.
這里學(xué)習(xí)用的是內(nèi)徑?jīng)]有背景的相框.
內(nèi)徑?jīng)]有背景的相框:
注:相框內(nèi)徑可看見(jiàn)網(wǎng)頁(yè)背景色.
內(nèi)徑有背景的相框:
注:相框內(nèi)徑看不見(jiàn)網(wǎng)頁(yè)背景色.
相片加疊相框代碼模式:
<TABLE id=table style="LEFT: 0px; WIDTH: 寬度px; POSITION: relative; TOP: 0px; HEIGHT: 高度px; ridge: " background=border=0>
<TR>
<TD>
<INPUT style="LEFT: 40px; WIDTH: 寬度px; POSITION: absolute; TOP: 30px; HEIGHT: 高度px" type=image width=寬度 src="相片地址">
<INPUT style="LEFT: -20px; WIDTH: 寬度px; POSITION: absolute; TOP: -20px; HEIGHT: 高度px" type=image height=1 width=寬度 src="相框地址">
</TD></TR></TABLE>
◆說(shuō)明◆
㈠綠色字體的代碼是設(shè)置一張有定位的空表格(無(wú)背景的圖框),控制相片和相框位置的范圍.
㈡白色字體的代碼是用位置控制指令和圖片大小可變的方法,先在圖框上加疊相片.
㈢黃色字體的代碼是用位置控制指令和圖片大小可變的方法,再在相片上加疊相框.
㈣相片與相框的選取其形狀寬度和高度,最好基本相仿.
㈤表格,相片和相框的寬高度參數(shù)設(shè)置原則:
◆相片大小按原尺寸,如果要改變,寬高度必須約束比例。
◆相框的寬高參照相片的寬高,再加相框花邊的大約厚度.
◆表格的寬高等于相框的寬高.
㈥調(diào)整位置控制的參數(shù),使相片和相框加疊吻合.
位置控制代碼指令與參數(shù):
◆LEFT:40px;WIDTH.位置屬性,寬度起始點(diǎn)離左邊的距離數(shù)值.?dāng)?shù)值大在右,數(shù)值小在左.負(fù)數(shù)則溢出表格定位范圍的左邊.
◆TOP: 418px; HEIGHT位置屬性,高度起始點(diǎn)離上邊的距離數(shù)值.?dāng)?shù)值大在下,數(shù)值小在上.負(fù)數(shù)則溢出表格定位范圍的上邊.
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
用特效代碼為相片加疊相框?qū)嵗?
一張美女相片:
一張無(wú)背景相框:
相片加疊相框效果:
代碼:
<TABLE id=table style="LEFT: 0px; WIDTH: 460px; POSITION: relative; TOP: 0px; HEIGHT: 560px; ridge: " background=border=0> <TBODY> <TR> <TD><INPUT style="LEFT: 50px; WIDTH: 450px; POSITION: absolute; TOP: 20px; HEIGHT: 552px" type=image width=450 src="http://image24.360doc.com/DownloadImg/2011/03/0415/9681829_2.jpg"> <INPUT style="LEFT: -20px; WIDTH: 550px; POSITION: absolute; TOP: -20px; HEIGHT: 660px" type=image height=1 width=550 src="http://bbs.gw.com.cn/UploadFile/2008-1/2008124533585577.gif"></TD></TR></TBODY></TABLE>
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
套用代碼模式快速做相片加相框.
現(xiàn)在還不懂代碼貼圖的朋友,下面有各種實(shí)例模式,只要會(huì)進(jìn)行"刪除,復(fù)制和粘貼"的操作,照樣套用,即學(xué)即會(huì),具體方法:
1,把模式的代碼完整的復(fù)制在記事本上.
2,在網(wǎng)上選一張相片,鼠標(biāo)對(duì)看圖片擊右鍵,在彈出的窗口最下行擊屬性,把其中地址(URL)"http:......jpg"復(fù)制下來(lái),這就是圖片的絕對(duì)地址.
3,將從網(wǎng)絡(luò)上取到的相片地址(URL),粘貼在代碼中"相片地址"四個(gè)字上.
4,復(fù)制修改后的代碼,就可發(fā)貼了.
5,發(fā)代碼貼時(shí)注意:要先選擇[htnl]標(biāo)簽,鉤去自動(dòng)修正的鉤,后才粘貼代碼.
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
相片加相框的簡(jiǎn)易方法實(shí)例一:
一張小美女相片:
內(nèi)徑?jīng)]有背景的相框:
先貼相片后加疊相框的效果:
代碼模式:
<TABLE id=table style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 600px; ridge: " background=border=0><TR><TD><INPUT style="LEFT: 40px; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT: 560px" type=image width=400 src="相片地址"><INPUT><INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 600px" type=image width=500 src="http://bbs.crlm.cn/UploadFile/2008-1/200811752756921.gif"><INPUT></TD></TR></TABLE>
相片加相框的簡(jiǎn)易方法實(shí)例二:
代碼模式:
<TABLE id=table style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 600px; ridge: " background=border=0><TBODY><TR><TD><INPUT style="LEFT: 40px; WIDTH: 368px; POSITION: absolute; TOP: 30px; HEIGHT: 552px" type=image width=368 src="相片地址"><INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 660px" type=image height=1 width=500 src="http://bbs.gw.com.cn/UploadFile/2008-1/2008124533585577.gif"></TD></TR></TBODY></TABLE><BR>
相片加相框的簡(jiǎn)易方法實(shí)例三:
代碼模式:
<TABLE id=table style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 600px; ridge: " background=border=0><br><TBODY><br><TR><br><TD><br><INPUT style="LEFT: 80px; WIDTH: 300px; POSITION: absolute; TOP: 110px; HEIGHT: 320px" type=image width=300 src="相片地址" input=""><br></INPUT><br><INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 550px" type=image height=1 width=500 src="http://bbs.gw.com.cn/UploadFile/2008-2/200821614421933537.gif" input=""><br></INPUT></TD></TR></TBODY></TABLE><br>
相片加相框的簡(jiǎn)易方法實(shí)例四:
代碼模式:
<TABLE id=table style="LEFT: 0px; WIDTH: 600px; POSITION: relative; TOP: 0px; HEIGHT: 660px; ridge: " background= border=0> <TR><TD> <INPUT style="LEFT: 30px; WIDTH: 520px; POSITION: absolute; TOP: 20px; HEIGHT: 580px"INPUT src="相片地址" type=image width=600> </INPUT> <INPUT style="LEFT: -10px; WIDTH: 600px; POSITION: absolute; TOP: -20px; HEIGHT: 640px"INPUT src="http://bbs.gw.com.cn/UploadFile/2008-1/2008124532217198.gif" type=image width=600></INPUT> </TD></TR></TABLE><br> <BR><BR> <H2>相片加相框的簡(jiǎn)易方法實(shí)例五:</H2><BR><BR> <TABLE id=table style="LEFT: 0px; WIDTH: 460px; POSITION: relative; TOP: 0px; HEIGHT: 560px; ridge: " background=border=0> <TBODY> <TR> <TD><INPUT style="LEFT: 50px; WIDTH: 450px; POSITION: absolute; TOP: 20px; HEIGHT: 552px" type=image width=450 src="http://image24.360doc.com/DownloadImg/2011/03/0415/9681829_2.jpg"> <INPUT style="LEFT: -20px; WIDTH: 550px; POSITION: absolute; TOP: -20px; HEIGHT: 660px" type=image height=1 width=550 src="http://bbs.gw.com.cn/UploadFile/2008-1/2008124533585577.gif"></TD></TR></TBODY></TABLE>< <BR><BR><BR><BR> <BR>代碼模式:<BR><BR> <TEXTAREA id=asdf name=textfield rows=13 cols=52> <TABLE id=table style="LEFT: 0px; WIDTH: 460px; POSITION: relative; TOP: 0px; HEIGHT: 560px; ridge: " background=border=0> <TBODY> <TR> <TD><INPUT style="LEFT: 50px; WIDTH: 450px; POSITION: absolute; TOP: 20px; HEIGHT: 552px" type=image width=450 src="相片地址"> <INPUT style="LEFT: -20px; WIDTH: 550px; POSITION: absolute; TOP: -20px; HEIGHT: 660px" type=image height=1 width=550 src="http://bbs.gw.com.cn/UploadFile/2008-1/2008124533585577.gif"></TD></TR></TBODY></TABLE><
相片加相框的簡(jiǎn)易方法實(shí)例六:
代碼模式:
<TABLE id=table style="LEFT: 0px; WIDTH: 580px; POSITION: relative; TOP: 0px; HEIGHT: 650px; ridge: " background=border=0> <TR><TD> <INPUT style="LEFT: 35px; WIDTH: 500px; POSITION: absolute; TOP: 35px; HEIGHT: 562px" type=image width=500 src="相片地址"> <INPUT style="LEFT: -20px; WIDTH: 580px; POSITION: absolute; TOP: -20px; HEIGHT: 630px" type=image height=1 width=600 src="http://bbs.gw.com.cn/UploadFile/2008-1/200812513772768.gif"> </TD></TR></TABLE>
(待續(xù))