2011-05-14 15:04:04| 分類(lèi)：
學(xué)做博客 | 標簽：
圖片 width 代碼 height 25px |字號大中小
上圖是音畫(huà)日志中常見(jiàn)的圖片與透明FLASH的組合畫(huà)面，它的代碼是：
<TABLE style="POSITION: relative; WIDTH: 597px; TOP: 20px; LEFT: 160px" border=0 cellSpacing=0 cellPadding=10 width="100%" background=http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_1.jpg height=733>
<TBODY>
<TR>
<TD><EMBED style="Z-INDEX: 3; POSITION: absolute; WIDTH: 535px; HEIGHT: 400px; TOP: 25px; LEFT: 25px" type=application/octet-stream src=http://www.shuyunxin.com/cc/flash/125.swf allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent"></TD></TR></TBODY></TABLE>
<TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 200px; HEIGHT: 83px">
<TBODY>
<TR></TR></TBODY></TABLE>
上半段紅色字符的部分是圖片的代碼；下半段藍色字符部分是透明FLASH的代碼。對初學(xué)者，不必要弄清楚每一個(gè)代碼的含義，只要明確那些關(guān)鍵的代碼和如何調整就就可以了。
對于圖片來(lái)說(shuō)，主要參數是這三項：1、什么圖片；2、圖片的大??；3、圖片在窗口中的位置。覆蓋在圖片上的FLASH透明動(dòng)畫(huà)也是這三項。一般動(dòng)畫(huà)的大小總是比圖片小一點(diǎn)，否則動(dòng)畫(huà)就跑到圖片的畫(huà)面外去了，有時(shí)動(dòng)畫(huà)的畫(huà)面要設置得比圖片的畫(huà)面小得多，才不會(huì )出現蜜蜂比花大。動(dòng)畫(huà)在圖片上的位置調整也很重要，也很麻煩，否則會(huì )出現鳥(niǎo)在地上飛，鴨在天上游的情況。
下面我們來(lái)看一下圖片代碼中的一些參數的意義和調整方法，還是把上面把的圖片代碼復制到下面：
<TABLE style="POSITION: relative; WIDTH: 597px; TOP: 10px; LEFT: 160px" border=0 cellSpacing=0 cellPadding=10 width="100%" background=http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_1.jpg height=733>
<TBODY>
<TR>
其中：
LEFT: 160px 是圖片的左邊距，也就是圖片與日志窗口左邊的距離，現在是160，這個(gè)數值越大，圖片離開(kāi)窗口左邊的距離越大，這個(gè)數值有時(shí)可能是負的。
WIDTH: 597px 是圖片顯示的寬度，現在是597，如果原圖的實(shí)際尺寸大于597，則會(huì )縮小到597顯示，如果原圖的尺寸小于597，則會(huì )重復顯示同樣圖片的一部分來(lái)填補。所以選擇圖片的實(shí)際尺寸應稍大于要顯示的尺寸。
TOP: 10px 是圖片的頂邊距，現在是20，改變這個(gè)數值就可以改變圖片與日志窗口頂邊的距離，或者與上一張圖片的距離。這個(gè)數值有時(shí)也可能是負的。
height=733是圖片的顯示高度，現在是733，如果原圖的實(shí)際尺寸大于733，則會(huì )縮小到733顯示，如果原圖的尺寸小于733，則會(huì )重復顯示同樣圖片的一部分來(lái)填補。所以圖片的實(shí)際尺寸應稍大于要顯示的尺寸。
http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_1.jpg 這就是圖片的網(wǎng)絡(luò )地址，現在是圖片《江南》，如果要換成其它圖片，只要把其它圖片的地址替換這個(gè)地址就可以了。特別要注意，地址的結尾“jpg”與后面的“border=0>”之間一定要留有空格，否則圖片就不能顯示。
下面是flash動(dòng)畫(huà)部分的代碼：
<TD><EMBED style="Z-INDEX: 3; POSITION: absolute; WIDTH: 535px; HEIGHT: 400px; TOP: 25px; LEFT: 25px" type=application/octet-stream src=http://www.shuyunxin.com/cc/flash/125.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></TD></TR></TBODY></TABLE>
<TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 200px; HEIGHT: 83px">
<TBODY>
<TR></TR></TBODY></TABLE>
和圖片代碼基本相同：
LEFT: 25px 動(dòng)畫(huà)的左邊距；
WIDTH: 535px 動(dòng)畫(huà)的寬度；
TOP: 25px動(dòng)畫(huà)的頂邊距；
HEIGHT: 400px 動(dòng)畫(huà)的高度；
http://www.shuyunxin.com/cc/flash/125.swf 動(dòng)畫(huà)的地址。
其它的一些代碼含義，以后逐步加以說(shuō)明。
下面做個(gè)練習，熟悉代碼的使用和參數的調整：
1、把開(kāi)頭的圖片與透明FLASH的組合畫(huà)面的代碼，復制到“寫(xiě)日志”的代碼編輯窗口中，用“預覽”看一下顯示效果；
2、回到代碼編輯窗口，改變圖片的寬度、高度、左邊距、頂邊距等的其中某一個(gè)參數（要記住原來(lái)的參數，不行就可以改還去），“預覽”一下修改后的顯示效果，如些反復調調整、預覽，一直到滿(mǎn)意為止。
3、把原來(lái)的圖片地址，改成其它圖片的地址，預覽顯示結果，，如果圖片不能顯示，很可能是地址結尾“jpg”后面沒(méi)有留下空格：
4、在動(dòng)畫(huà)代碼中，用同樣方法改變flash透明動(dòng)畫(huà)的地址和各項參數，特別注意修改完的顯示效果，往往要對動(dòng)畫(huà)的大小和位置反復調整，才能得到比較好的顯示效果。
5、當日志有數張圖片組成，只要在第一張圖片的代碼下，復制相同的代碼，然后把代碼中的圖片和動(dòng)畫(huà)地址改成新的地址。一般圖片的各項參數和第一張一樣，就是頂邊距“TOP: 25px”這一參數要調整，以改變二張圖片之間的距離。
二張畫(huà)面的代碼如下：
<TABLE style="POSITION: relative; WIDTH: 597px; TOP: 20px; LEFT: 160px" border=0 cellSpacing=0 cellPadding=10 width="100%" background=http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_1.jpg height=733>
<TBODY>
<TR>
<TD><EMBED style="Z-INDEX: 3; POSITION: absolute; WIDTH: 535px; HEIGHT: 400px; TOP: 25px; LEFT: 25px" type=application/octet-stream src=http://www.shuyunxin.com/cc/flash/125.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></TD></TR></TBODY></TABLE>
<TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 200px; HEIGHT: 83px">
<TBODY>
<TR></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; WIDTH: 597px; TOP: 20px; LEFT: 160px" border=0 cellSpacing=0 cellPadding=10 width="100%" background=http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_2.jpg height=733>
<TBODY>
<TR>
<TD><EMBED style="Z-INDEX: 3; POSITION: absolute; WIDTH: 535px; HEIGHT: 500px; TOP: 40px; LEFT: 25px" type=application/octet-stream src=http://imgfree.21cn.com/free/flash/49.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></TD></TR></TBODY></TABLE>
<TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 200px; HEIGHT: 83px">
<TBODY>
<TR></TR></TBODY></TABLE>
紅色的是第一幅畫(huà)面的代碼，藍色的是第二幅畫(huà)面的代碼。比較二幅畫(huà)面中的黑色字體，就可以看出替代部分的內容內容差別。
把這二幅畫(huà)面的代碼復制到日志編輯器代碼編輯窗口中，預覽的結果如下圖
同樣方法可以插入第三幅、第四幅……
最后對日志的全部畫(huà)面顯示情況作用次檢查和調整，一直到滿(mǎn)意為止。
