用(靜態)圖片製作邊框的方法

07-18

2008-05-15 08:11:30|分類：邊框的製作 |標籤： |字型大小大中小

將向博客新手詳細解講製作過程http://hdly006502.blog.163.com.撰文：寒冬臘月

邊框的製作方法,一般分為二種:1):用代碼(不用圖片)直接製作音畫、日誌的邊框;2):用代碼加圖片地址的方法,來製作更加漂亮的日誌及音畫邊框.

通常情況下,大多數博友均採用第二種方法.特點是美觀、漂亮.但製作過程相對複雜一些.今天,本人特地抽出時間趕寫了這方面的資料供大家叄考.並藉此回復各位博友的留言......靜態圖片邊框的製作方法(純色靜態圖片)為了更簡單、直觀地講解其操作過程.我特以棕、蘭、紅、綠、黑、黃和粉紅色,七種顏色純色靜態圖片為素材進行演示.(可以先點擊下面七個圖片地址查看一下)

七種顏色的圖片地址如下:<1>棕色http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_32.jpg<2>蘭色http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_29.jpg<3>紅色http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_30.jpg<4>綠色http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_31.jpg <5>黑色http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_33.jpg<6>黃色http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_34.jpg<7>粉紅http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_35.jpg兩組Flash動畫圖片地址查閱:<1>http://myhome.naver.net/brown444/swish/s80-m.swf <2>http://imgfree.21cn.com/free/flash/7.swf 一、單層圖片邊框代碼:<TABLE cellSpacing=4 width_=700 align=center background=http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_29.jpg border=2><TBODY><TR><TD>填寫內容 </TD></TR></TBODY></TABLE>效果圖如下:填寫內容說明:1）：面代碼中的cellSpacing=4 表示最內層白色邊框與蘭色圖片邊緣間的距離;width_=700 表示該邊框的寬度,最大寬度不超過700;align=center 表示該邊框在日誌中居中的位置,只有在邊框寬度小於700時才能見到效果;background=圖片地址;border=2表示最外層白色邊框的粗細度.2）：如將上述cellSpacing=4 、width_=700 、border=2中的數據值修改為:cellSpacing=14 、width_=400 、border=6後,則該邊框顯示為如下圖:填寫內容3）：如果將上面代碼中的border=6的數值改為0;在邊框寬度width_=400 或更小數值時,改變邊框靠日誌頁面左側或右側時,只需將align=center （居中）變為align=left(左)或align=right(右)即可.改變上述數值後,該邊框顯示為如下圖: 填寫內容用同樣的方法來製作:二、多層圖片邊框代碼:(一)、先講兩層圖片邊框。該效果圖,是紅和蘭色純圖片組成的。最基本代碼為:<TABLE cellSpacing=16 width_=600 align=center background=http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_30.jpg ><TBODY><TR><TD><TABLE width_=700 align=center background=http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_29.jpg ><TBODY><TR><TD>填寫內容 </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>看效果圖如下: 填寫內容說明:如果將上述代碼中添加進cellSpacing=6、border=4代碼後,該二層邊框則顯示為如下圖:<TABLE cellSpacing=16 cellPadding=20 width_=700 align=center background=http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_30.jpg border=4><TBODY><TR><TD><TABLE cellSpacing=6 cellPadding=20 width_=700 align=center background=http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_29.jpg border=4><TBODY><TR><TD>填寫內容 </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>填寫內容(二)、三層圖片邊框.該效果圖,是紅、蘭和綠色純圖片組成的。代碼複製區:<TABLE cellSpacing=10 cellPadding=20 width_=600 align=center background=http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_30.jpg border=2><TBODY><TR><TD><TABLE borderColor=#00000 cellSpacing=10 cellPadding=20 width_=600 align=center background=http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_29.jpg border=2><TBODY><TR><TD><TABLE borderColor=#0000ff cellSpacing=10 cellPadding=20 width_=600 align=center background=http://image35.360doc.com/DownloadImg/2011/09/0421/17037529_31.jpg border=2><TBODY><TR><TD>填寫內容 </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>看效果圖如下:填寫內容用同樣的方法:你可以做四、五甚至更多層邊框了.這裡關鍵是撐握代碼靈活運用,知道如何修改代碼中的部分數值,從而改變邊框的構成.講道這兒,你也已經對用圖片來做邊框的方法有所了解.下面再附四、五及七層圖片邊框的效果圖供叄考...四層圖片邊框效果圖:填寫內容五層圖片邊框效果圖:填寫內容七層圖片邊框效果圖:填寫內容下一講中,將講解: 怎樣用動、靜態圖片組合製作邊框的方法

點擊進入→用動、靜態圖片組合製作邊框

◇簡單"邊框"的製作方法◇ ◇"邊框"的代碼分析◇ ◇如何不用圖片做"邊框"的方法◇ ◇用動、靜態圖片組合製作"邊框"◇ ◇用"靜態"圖片做"邊框"的方法◇ ◇怎樣給"圖片"添加漂亮的"邊框"◇ ◇多層"邊框"的添加方法◇ ◇如何改變"邊框"中各邊框線的粗細值◇ ◇如何調整"邊框"的寬度及高度◇ ◇怎樣改變邊框顏色及邊框線數值◇ ◇邊框內層背景顏色的替換方法◇ ◇為你提供精美的"邊框"及"邊框"素材◇