用顏色製作邊框與貼圖方法

我們常用網路上的圖片地址做成的多層圖框叫套裝，非常精彩漂亮，但有時會因網路失去鏈接，無法顯示。但用顏色做成的圖框，不受條件所限，隱定性較好，顯示也快。下面主要介紹用顏色製作邊框。一. 用顏色做成的一層圖框代碼<P align=center><TABLE borderColor=#ffd700 cellSpacing=10 cellPadding=8 width_=470 align=centerbgColor=#0000ff border=12><TBODY><TR><TD ><BR><BR><BR><BR><BR><BR></TD></TR></TBODY></TABLE>顯示結果：說明：<TABLE borderColor=660000<br...>--邊框顏色<TD bgcolor=#AAAAFF>--圖框內單元格背景顏色二. 用顏色做成的二層圖框代碼<P align=center><TABLE borderColor=#ffd700 cellSpacing=5 cellPadding=8 width_=470 align=centerbgColor=#f70968 border=12><TBODY><TR><TD ><TABLE borderColor=#ffd700 cellSpacing=5 cellPadding=8 width_=465 align=centerbgColor=#bb4444 border=1><TBODY><TR><TD><BR><BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>顯示結果：三. 給圖片加用顏色做成的邊框代碼<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>顯示結果：四. 用顏色做成的二層圖框代碼<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 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="https://www.getit01.com/getimg_360.php?url=http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg" ></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>顯示結果：五. 用顏色做成的立體圖框代碼<P align=center><table style="border:19px #ccffcc ridge" align="center" border="0" cellpadding="0"cellspacing="0" width_="460" background="http://bbs.e-yu.cn/attachments/ext_jpg/029_mS674YcNXDnk.jpg"><tr><td><br><br><br><br></td></tr></table>顯示結果：六. 用金黃色圖片作邊框的代碼<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>顯示結果：DyaJV0ArRAATyMffQ==/4296715519489378797.jpg border=10>我們要注意的是:引用套裝代碼時，必須在代碼的第一行前面加設全屏代碼，才能完整顯示。全屏代碼：<DIV style="LEFT: -210px; WIDTH: 800px; POSITION: relative; TOP: 40px">用HTML代碼貼圖，圖片必須是網路上的圖片絕對地址（URL）。如果是本機硬碟的圖片，應先上傳到較隱定的空間（免費相冊或可上傳圖片的論壇），取得圖片的地址和圖片的尺寸大小。新學習者最好選擇一些較簡單的圖框來貼圖。由於各論壇系統對貼子寬度有不同的限制，因此圖框的寬最好不要超過500，圖片寬度則在400左右.七、幾種常用貼圖代碼第一種：<img src="圖片地址">第二種：<img src=「圖片地址」 width_="80"height="280" border="10">第三種：圖片可調大小<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>第一種最簡易使用的貼圖代碼:<img src="圖片地址">用網路上的圖片絕對地址（URL）粘貼上去就可以了。但這種方法貼的圖片，各論壇對圖片寬度顯示有不同的限制，有時不是原圖片的尺寸，更不是你想要多大就多大。這裡有一張圖片地址:http://image15.360doc.com/DownloadImg/2010/10/0519/5759245_1.jpg把它粘貼在上面代碼中的「圖片地址」如下:<P align=center><img src="https://www.getit01.com/getimg_360.php?url=http://img.bimg.126.net/photo/MDIY7A1jaZ1PN8Iqgh67qA==/4235916924519834607.jpg">顯示結果：

第二種;用表格的貼圖代碼<P align=center><TABLE borderColor=#fbd44c cellSpacing=3 cellpadding=0 background=http://img.blog.163.com/photo/UJFr5s_krmFIlrvuqqN6Hg==/2888214736029298110.jpgwidth_=540 height=770 border=10><TBODY><TR><TD><br></TD></TR></TBODY></TABLE>顯示結果：說明： 用圖片作表格背景必須注意圖片素材原尺寸和圖框寬度設置要一致。如果圖片小而圖框大，會顯示部份重影，多出一部份圖像。相反如果圖片大而圖框小則 只顯示圖像的一部份。八、語法介紹BORDER-RIGHT: #9b0000 6px ridge;右邊框顏色 寬度 樣式 BORDER-TOP: #9b0000 6px ridge;上邊框顏色 寬度 樣式 BORDER-LEFT: #9b0000 6px ridge;左邊框顏色 寬度 樣式 BORDER-BOTTOM: #9b0000 6px ridge;下邊框顏色 寬度 樣式 ; 外邊框定位(相對定位) ;內部小表格的定位(絕對定位) LEFT: 0px; 離左邊的距離 TOP: 0px;離頂部的距離 RIGHT: 0px;離右邊的距離 BOTTOMM: 0px;離下邊的距離 HEIGHT: 512px 表格高度 WIDTH: 512px; 表格寬度 表格邊框的樣式還有以下幾種(換不同的值就會有不同的邊框樣式):九、圖片霧化的貼圖方法圖片霧化或叫羽化效果，就是一張圖片只突出顯示中心的主要圖像，周邊朦朧淡化。方法有通常使用的代碼和簡化的代碼．二種霧化代碼模式1、通常使用的代碼：<TABLE border=0><TR><TD style="FILTER:Alpha(opacity=100,style=2)" width_=450 height=600 background=圖片地址></TD></TR></TABLE>2、簡化的代碼：<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image width_=450 src="圖片地址"INPUT>顯示結果:說明:圓形霧化效果和矩形霧化效果代碼是一樣的，不同之處是：把圓形霧化效果　style=2 改為:矩形霧化效果　style=3通常使用的是圓形霧化效果　style=2 . :如何在圖框內插入圖片或文字。十、在一張圖框或圖片內如何插入文字和圖片？要在表格的單元格 <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>顯示效果:插入文字或圖片插入文字或圖片插入文字或圖片說明：●width_=480＝圖框寬度；●height=350＝圖框高度；●bordercolor=oliv＝邊框顏色；●border=8＝邊框線粗度．●background=背景圖片地址．變化代碼實例：<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="https://www.getit01.com/getimg_360.php?url=http://image15.360doc.com/DownloadImg/2010/10/0519/5759245_2.jpg"width_=100 border=1> </P><p align=CENTER><img src="https://www.getit01.com/getimg_360.php?url=http://image15.360doc.com/DownloadImg/2010/10/0519/5759245_3.jpg"width_=200 border=1> </P><p align=CENTER><img src="https://www.getit01.com/getimg_360.php?url=http://image15.360doc.com/DownloadImg/2010/10/0519/5759245_4.jpg" width_=200 border=1> </P><p align=CENTER><FONT color=red>圖文：網路／原創製作者:老君</P></B> </FONT></TD></TR>;</TABLE></CENTER>顯示效果:蝶戀花

圖文：網路／ 原創製作者:老君像這樣的寬幅代碼貼,就必須加設全屏代碼: 在代碼的第一行前面加以下代碼： <DIV style="LEFT: -220px; WIDTH: 800px; POSITION: relative; TOP: 40px"> 在代碼最後一行加以下代碼：</DIV><br><br><br><br>不設置全屏代碼時，貼子右邊有一部份不能顯示。 學習和掌握了HTML代碼兩大基本功即文字設置和表格設置之後，就可以製作一些多姿多彩的代碼貼了。我們可以在一張用圖片或顏色作背景的表格單元格內（單層或多層圖框內），插入多段文字的和圖片。根據插入的圖片寬度和色彩選好圖框。有些論壇對代碼貼圖的寬度限制在５００之內，所以圖框包括邊線寬度不能超過５００，插入的圖片寬度在４００以內，否則其超過部份就無法顯示。如果論壇對代碼貼寬度不限制，插入的圖片就可寬限些。由於插入的圖片加圖框的寬很大，所以必須設置全屏代碼才能完整顯示。網路上有很多漂亮的圖框（套裝）可以拿來套用。啟步學習時最好採用較簡單的圖框。
推薦閱讀：