如何用動、靜態圖片組合製作漂亮的邊框?
將向博客新手詳細解講製作過程http://hdly006502.blog.163.com.撰文：寒冬臘月
製作這類邊框的方法和靜態邊框的制方法是完全相同的.但要想製作好這種邊框,關鍵是素材的選用.以及怎樣將動、靜態圖片組合?怎樣搭配它們之間的顏色?等等...相對來說,其操作過程稍有難度.
下面本人僅以一張動態和五張靜態圖片構成的邊框,來作簡單講解:先看下面的這六張圖片:
以上六張圖片地址分別為:<1>:http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_7.jpg<2>:http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_8.jpg<3>:http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_9.jpg<4>:http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_10.jpg<5>:http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_11.jpg<6>:http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_12.jpg原始代碼:<TABLE cellSpacing=6 cellPadding=0 width_=700 align=center background=動態圖片地址 border=0><TBODY><TR><TD><TABLE cellSpacing=5 width_=700 background=靜態圖片地址 border=0><TBODY><TR><TD><TABLE cellSpacing=5 width_=700 background=靜態圖片地址 border=0>填寫內容</TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE>
現將動態圖片(第五張)來分別與另外五張靜態圖片做幾種不同效果的搭配.第一種效果,先用5、1張搭配,看它的效果圖如下:(二層圖片邊框)填寫內容第二種效果,先用5、3、2、張搭配,看它的效果圖如下:(三層圖片邊框)填寫內容第三種效果,先用5、6、1張搭配,看它的效果圖如下:(三層圖片邊框)填寫內容第四種效果,先用5、3、1、4張搭配,看它的效果圖如下:(四層圖片邊框)填寫內容
使用方法:1):將選好的動、靜態圖片地址放在原始代碼相應處即可;2):如需製作多層邊框,方法和靜態圖片多邊框的製作方法相同;3):內外邊框的距離、各邊框線的粗細、邊框的寬度等.請叄見靜態圖片邊框的製作方法一文.下面是五層邊框的複製代碼:(可直接複製使用)<TABLE cellSpacing=15 cellPadding=0 width_=600 align=center background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_11.jpg border=0><TBODY><TR><TD><TABLE cellSpacing=6 width_=600 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_9.jpg border=0><TBODY><TR><TD><TABLE cellSpacing=6 width_=600 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_7.jpg border=0><TBODY><TR><TD><TABLE cellSpacing=6 width_=600 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_8.jpg border=0><TBODY><TR><TD><TABLE cellSpacing=15 cellPadding=0 width_=600 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_10.jpg border=0><TBODY><TR><TD>填寫內容</TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE>看它的效果圖如下:填寫內容二、加框有一層FLASH的圖片代碼複製區:<P><BR><TABLE height=300 cellSpacing=0 cellPadding=0 width_=500 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_20.jpg border=0><TBODY><TR><TD><EMBED align=right src=http://myhome.naver.net/brown444/swish/s80-m.swf width_=500 height=210 type=application/x-shockwave-flash ; quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"><EMBED align=right src=http://imgfree.21cn.com/free/flash/7.swf width_=500 height=300 type=application/x-shockwave-flash ;; quality="high" wmode="transparent" ctet-stream allowNetworking="internal" allowScriptAccess="never"> </TD></TR></TBODY></TABLE></P><BLOCKQUOTE><P></P><EMBED src=http://www.shenxianggallery.com/media/yinyue.mp3 width_=0 height=0 type=audio/mpeg autostart="true" loop="false" allowNetworking="internal" allowScriptAccess="never"><DIV></DIV></BLOCKQUOTE>看效果圖如下:請點擊查看影音文件...請點擊查看影音文件...三：圖片倒影效果：
使用代碼如下:<P align=center ><IMG height=180 src="https://www.getit01.com/getimg_360.php?url=http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_15.jpg" width_=240><BR><IMG id=reflection style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" height=180 src="https://www.getit01.com/getimg_360.php?url=http://image35.360doc.com/DownloadImg/2011/09/0218/16921214_15.jpg" width_=240></P>四、加入背景音樂代碼：效果圖如下:
→ 代碼複製區 :<EMBED src=http://player.56.com/v_42784990.swf width_=200 height=200 type=audio/x-pn-realaudio-plugin controls="ImageWindow,ControlPanel,StatusBar" border="0" autostart="0" loop="0" invokeURLs="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never">具體操作方法,請參見我寫的 →〖如何做視頻及動畫的超鏈接〗一文;點擊進入→如何做視頻及動畫的超鏈接?說明:1、視頻播放器尺寸的大小,應根據你網頁頁面的(即模塊的大小)來決定;2、上面代碼中的藍色處,即是視頻播放器尺寸大小的數據,在實際操作中只要適當修改寬和高的數值即可;3、有關這方的操作方法,請參見上面的"相關文章"鏈接;
推薦閱讀：