用顏色制作邊框與貼圖方法
我們常用網(wǎng)絡(luò)上的圖片地址做成的多層圖框叫套裝，非常精彩漂亮，
但有時(shí)會(huì)因網(wǎng)絡(luò)失去鏈接，無(wú)法顯示。但用顏色做成的圖框，不受條件所限，
隱定性較好，顯示也快。下面主要介紹用顏色制作邊框。
一. 用顏色做成的一層圖框代碼
<P align=center>
<TABLE borderColor=#ffd700 cellSpacing=10 cellPadding=8 width=470 align=center
bgColor=#0000ff border=12>
<TBODY>
<TR>
<TD >
<BR><BR><BR><BR><BR><BR>
</TD></TR></TBODY></TABLE>
顯示結(jié)果：
說(shuō)明：
<TABLE borderColor=660000<br...>--邊框顏色
<TD bgcolor=#AAAAFF>--圖框內(nèi)單元格背景顏色
二. 用顏色做成的二層圖框代碼
<P align=center>
<TABLE borderColor=#ffd700 cellSpacing=5 cellPadding=8 width=470 align=center
bgColor=#f70968 border=12>
<TBODY>
<TR>
<TD >
<TABLE borderColor=#ffd700 cellSpacing=5 cellPadding=8 width=465 align=center
bgColor=#bb4444 border=1>
<TBODY>
<TR>
<TD>
<BR><BR><BR>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
顯示結(jié)果：
三. 給圖片加用顏色做成的邊框代碼
<P align=center>
<table border=16 cellSpacing=8 cellPadding=5 borderColor=#841A00 bgcolor=#FFFF6F>
<td>
<TABLE border=1>
<TR>
<TD width=450 background=圖片地址 height=300 border=3>
</TD></TR></TABLE>
</td></table>
顯示結(jié)果：
四. 用顏色做成的二層圖框代碼
<P align=center>
<TABLE borderColor=#ffff00 cellSpacing=10 cellPadding=8 width=470 background=http://img.gw.com.cn/UploadFile/2004/9/3/3750984.jpg border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff00 cellSpacing=6 cellPadding=4 width="100%" background=http://img.gw.com.cn/UploadFile/2005/5/15/3419934.jpg border=1>
<TBODY>
<TR>
<TD>
<P align=center><INPUT type=image width=420 src="
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
顯示結(jié)果：
五. 用顏色做成的立體圖框代碼
<P align=center>
<table style="border:19px #ccffcc ridge" align="center" border="0" cellpadding="0"
cellspacing="0" width="460" background="
<tr><td>
<br><br><br><br>
</td></tr></table>
顯示結(jié)果：
六. 用金黃色圖片作邊框的代碼
<CENTER>
<TABLE borderColor=660000 cellSpacing=10 cellpadding=20 background=http://img.bimg.126.net/photo/Dv4onDyaJV0ArRAATyMffQ
==/4296715519489378797.jpg width=400 height=300 border=10>
<TBODY>
<TR>
<TD bgcolor=blue>
<br><br>
</CENTER></TD></TR></TBODY></TABLE>
顯示結(jié)果：
DyaJV0ArRAATyMffQ==/4296715519489378797.jpg border=10>
我們要注意的是:引用套裝代碼時(shí)，必須在代碼的第一行前面加設(shè)全屏代碼，
才能完整顯示。全屏代碼：
<DIV style="LEFT: -210px; WIDTH: 800px; POSITION: relative; TOP: 40px">
用HTML代碼貼圖，圖片必須是網(wǎng)絡(luò)上的圖片絕對(duì)地址（URL）。如果是
本機(jī)硬盤的圖片，應(yīng)先上傳到較隱定的空間（免費(fèi)相冊(cè)或可上傳圖片的論壇），
取得圖片的地址和圖片的尺寸大小。新學(xué)習(xí)者最好選擇一些較簡(jiǎn)單的圖框來(lái)貼圖
。由于各論壇系統(tǒng)對(duì)貼子寬度有不同的限制，因此圖框的寬最好不要超過(guò)500，
圖片寬度則在400左右.
七、 幾種常用貼圖代碼
第一種：
<img src="圖片地址">
第二種：
<img src=“圖片地址” width='80'height='280' border='10'>
第三種：圖片可調(diào)大小
<INPUT src="圖片地址" type=image width=500>
第四種：用圖片作表格背景的貼圖方法
<CENTER>
<TABLE borderColor=0000ff cellSpacing=10 cellpadding=20 background=“圖片地址”width=400 height=300 border=10>
<TR>
<TD>
<br>
<br>
</TD></TR></TABLE></CENTER>
第一種最簡(jiǎn)易使用的貼圖代碼:
<img src="圖片地址">
用網(wǎng)絡(luò)上的圖片絕對(duì)地址（URL）粘貼上去就可以了。但這種方法貼的圖片，各論壇對(duì)
圖片寬度顯示有不同的限制，有時(shí)不是原圖片的尺寸，更不是你想要多大就多大。
這里有一張圖片地址:
http://image15.360doc.com/DownloadImg/2010/10/0519/5759245_1.jpg把它粘貼在上面代碼中的“圖片地址”如下:
<P align=center>
<img src="
http://img.bimg.126.net/photo/MDIY7A1jaZ1PN8Iqgh67qA==/4235916924519834607.jpg
顯示結(jié)果：
第二種;用表格的貼圖代碼
<P align=center>
<TABLE borderColor=#fbd44c cellSpacing=3 cellpadding=0 background=http://img.blog.163.com/photo/UJFr5s_krmFIlrvuqqN6Hg==/2888214736029298110.jpg
width=540 height=770 border=10>
<TBODY>
<TR>
<TD>
<br>
</TD></TR></TBODY></TABLE>
顯示結(jié)果：
說(shuō)明： 用圖片作表格背景必須注意圖片素材原尺寸和圖框?qū)挾仍O(shè)置要一致。
如果圖片小而圖框大，會(huì)顯示部份重影，多出一部份圖像。相反如果圖片大而
圖框小則 只顯示圖像的一部份。
八、語(yǔ)法介紹
BORDER-RIGHT: #9b0000 6px ridge;
右邊框顏色 寬度 樣式 BORDER-TOP: #9b0000 6px ridge;
上邊框顏色 寬度 樣式 BORDER-LEFT: #9b0000 6px ridge;
左邊框顏色 寬度 樣式 BORDER-BOTTOM: #9b0000 6px ridge;
下邊框顏色 寬度 樣式 ; 外邊框定位(相對(duì)定位) ;
內(nèi)部小表格的定位(絕對(duì)定位) LEFT: 0px; 離左邊的距離 TOP: 0px;
離頂部的距離 RIGHT: 0px;
離右邊的距離 BOTTOMM: 0px;
離下邊的距離 HEIGHT: 512px 表格高度 WIDTH: 512px; 表格寬度 表格
邊框的樣式還有以下幾種(換不同的值就會(huì)有不同的邊框樣式):
九、圖片霧化的貼圖方法 圖片霧化或叫羽化效果，就是一張圖片只突出顯示中心的主要圖像，周邊朦朧淡化。方法有通常使用的代碼和簡(jiǎn)化的代碼． 二種霧化代碼模式 1、 通常使用的代碼：<TABLE border=0><TR><TD style="FILTER:Alpha(opacity=100,style=2)" width=450 height=600 background=圖片地址></TD></TR></TABLE> 2、簡(jiǎn)化的代碼：<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image width=450 src="圖片地址"INPUT> 顯示結(jié)果:
說(shuō)明:圓形霧化效果和矩形霧化效果代碼是一樣的，不同之處是：
把圓形霧化效果 style=2 改為:
矩形霧化效果 style=3
通常使用的是圓形霧化效果 style=2 . :
如何在圖框內(nèi)插入圖片或文字。
十、在一張圖框或圖片內(nèi)如何插入文字和圖片？ 要在表格的單元格 <TD> 與 </TD> 中間插入。 例如： <P align=center><TABLE width=500 height=380 bordercolor=olive background=圖片地址 border=18><TR><TD ><FONT style="FONT-SIZE: 25pt" face=華文行楷 color=red><B><p align=CENTER> 插入文字或圖片</P><P align=center>插入文字或圖片</P><p align=CENTER>插入文字或圖片</P></B> </FONT></TD> </TR></TABLE></CENTER> 顯示效果:
插入文字或圖片
插入文字或圖片
插入文字或圖片
說(shuō)明：●width=480＝圖框?qū)挾?；●height=350＝圖框高度；●bordercolor=oliv＝邊框顏色；●border=8＝邊框線粗度．●background=背景圖片地址． 變化代碼實(shí)例：<P align=center> <TABLE width=480 height=350 bordercolor=olive background=主要圖片地址 border=18><TR><TD ><FONT style="FONT-SIZE: 15pt" face=華文行楷><B><br> <p align=CENTER><FONT color=#0000ff>蝶戀花</P><p align=CENTER><img src="
http://image15.360doc.com/DownloadImg/2010/10/0519/5759245_2.jpg border=1> </P><p align=CENTER><img src="http://image15.360doc.com/DownloadImg/2010/10/0519/5759245_3.jpg border=1> </P><p align=CENTER><img src="http://image15.360doc.com/DownloadImg/2010/10/0519/5759245_4.jpg border=1> </P><p align=CENTER><FONT color=red>圖文：網(wǎng)絡(luò)／原創(chuàng)制作者:老君</P></B> </FONT></TD></TR>;</TABLE></CENTER>顯示效果:蝶戀花圖文：網(wǎng)絡(luò)／ 原創(chuàng)制作者:老君 像這樣的寬幅代碼貼,就必須加設(shè)全屏代碼: 在代碼的第一行前面加以下代碼： <DIV style="LEFT: -220px; WIDTH: 800px; POSITION: relative; TOP: 40px"> 在代碼最后一行加以下代碼：</DIV><br><br><br><br>不設(shè)置全屏代碼時(shí)，貼子右邊有一部份不能顯示。 學(xué)習(xí)和掌握了HTML代碼兩大基本功即文字設(shè)置和表格設(shè)置之后，就可以制作一些多姿多彩的代碼貼了。我們可以在一張用圖片或顏色作背景的表格單元格內(nèi)（單層或多層圖框內(nèi)），插入多段文字的和圖片。根據(jù)插入的圖片寬度和色彩選好圖框。有些論壇對(duì)代碼貼圖的寬度限制在５００之內(nèi)，所以圖框包括邊線寬度不能超過(guò)５００，插入的圖片寬度在４００以內(nèi)，否則其超過(guò)部份就無(wú)法顯示。如果論壇對(duì)代碼貼寬度不限制，插入的圖片就可寬限些。由于插入的圖片加圖框的寬很大，所以必須設(shè)置全屏代碼才能完整顯示。網(wǎng)絡(luò)上有很多漂亮的圖框（套裝）可以拿來(lái)套用。啟步學(xué)習(xí)時(shí)最好采用較簡(jiǎn)單的圖框。
