素材應用02-在圖片上+透空gif圖或swf透明圖語法

 

貼版語法

單一文字框應用語法

圖片加入透空gif圖語法:

<div align=center>
<table style="WIDTH: 367px; BACKGROUND-REPEAT: no-repeat; BORDER-COLLAPSE: collapse; HEIGHT: 348px" cellSpacing=0 cellPadding=0 background=http://i318.photobucket.com/albums/mm426/2008ok/8cf5ebcb.gif border=0>
<tbody>
<tr>
<td>

<div style="width: 135; height: 153; padding-left: 40px; padding-top: 20px"><img src="http://i318.photobucket.com/albums/mm426/2008ok/story/0730/1b658701.gif" width=300 height=300></div>
</td></tr></tbody></table></div>

實例展示:

 

 


圖片+gif透空底圖+小圖語法

<div align=center>
<table style="WIDTH: 367px; BACKGROUND-REPEAT: no-repeat; BORDER-COLLAPSE: collapse; HEIGHT: 348px" cellSpacing=0 cellPadding=0 background=http://i318.photobucket.com/albums/mm426/2008ok/8cf5ebcb.gif border=0>
<tbody>
<tr>
<td background=http://i318.photobucket.com/albums/mm426/2008ok/story/0730/1b658701.gif>
<div style="width: 120; height: 100; padding-left: 30px; padding-top: 70px">
<img  src="http://i318.photobucket.com/albums/mm426/2008ok/4e441b23.gif" width=120 height=83></div>
</td></tr></tbody></table></div>

實例展示:

 

 


圖片+gif透空底圖+swf

<div align=center>
<table style="WIDTH: 367px; BACKGROUND-REPEAT: no-repeat; BORDER-COLLAPSE: collapse; HEIGHT: 348px" cellSpacing=0 cellPadding=0 background=http://i318.photobucket.com/albums/mm426/2008ok/8cf5ebcb.gif border=0>
<tbody>
<tr>
<td background=http://i318.photobucket.com/albums/mm426/2008ok/story/0730/1b658701.gif>
<div style="width: 128; height: 200; padding-left: 20px; padding-top: 50px"><embed src="http://img48.imageshack.us/img48/8716/a04hi1.swf" width="135" height="206" wmode="transparent" quality="high"></embed>
</div>
</td></tr></tbody></table></div>

實例展示:

 

 

 


多個文字框應用語法

圖片+gif透空底圖+文字+swf


<div align=center>
<table style="WIDTH: 367px; BACKGROUND-REPEAT: no-repeat; BORDER-COLLAPSE: collapse; HEIGHT: 348px" cellSpacing=0 cellPadding=0 background=http://i318.photobucket.com/albums/mm426/2008ok/8cf5ebcb.gif border=0>
<tbody>
<tr>
<td background=http://i318.photobucket.com/albums/mm426/2008ok/story/0730/1b658701.gif>
<div style="PADDING-LEFT: 23px; WIDTH: 140px; PADDING-TOP: 20px; HEIGHT: 153px" align=center>
<p style="LINE-HEIGHT: 150%" align=left><font color=#008000 size=3>
祝福就像小花,開滿了整片的心田,那是喜悅的果實。<br>玄音敬祝好友們 平安快樂<br>開心天天</font></p>
</div>
<div style="LEFT: 100px; POSITION: absolute; TOP: 200px"><embed src=http://blog.roodo.com/kisc0919/7ebc87b9.swf width=450 height=200 type=application/octet-stream wmode="transparent" allowscriptaccess="never"></embed>

<EMBED src=http://vlog.xuite.net/vlog/swf/lite.swf?media=MTA3MzU0Ng&amp;ar=1&amp;as=1 width=1 height=1 type=application/x-shockwave-flash allowScriptAccess="none"></embed>

</div></td></tr></tbody></table></div>

實例展示:

 

祝福就像小花,開滿了整片的心田,那是喜悅的果實。
玄音敬祝好友們 平安快樂
開心天天

 

 


語法說明:

<div align=center>(圖片置中;left=; right=)


<table style="WIDTH: 367px(
圖寬); BACKGROUND-REPEAT: no-repeat; BORDER-COLLAPSE: collapse; HEIGHT: 348px(圖高)" cellSpacing=0 cellPadding=0 background=http://i318.photobucket.com/albums/mm426/2008ok/8cf5ebcb.gif(圖網址) border=0>


<td background=http://i318.photobucket.com/albums/mm426/2008ok/story/0730/1b658701.gif(
底圖網址)>

ps:若不想套用底圖可直接將背景底圖網址刪除剩下 <td> 這樣的指令


<div style="PADDING-LEFT: 23px(文字離文字框向右多少px); WIDTH: 140px(文字框寬度); PADDING-TOP: 20px(文字離文字框頂多少px); HEIGHT: 153px(文字框高度)" align=center>

ps:文字框大小位置是以輸入的文字為主,所以要有耐心測試喔^^


<p style="LINE-HEIGHT: 150%(
文字行距)" align=left(文字靠右)><font color=#008000(字色) size=3(字大小)>祝福就像小花,開滿了整片的心田,那是喜悅的果實。<br>玄音敬祝好友們 平安快樂<br>開心天天(內文)


<div style="LEFT: 100px(
文字離文字框向右多少px); POSITION: absolute; TOP: 200px(文字離文字框頂多少px)"><embed src=http://blog.roodo.com/kisc0919/7ebc87b9.swf(swf網址) width=450(swf< /font>圖寬) height=200(swf< /font>圖高) type=application/octet-stream wmode="transparent" allowscriptaccess="never"></embed>

 

<EMBED src=http://vlog.xuite.net/vlog/swf/lite.swf?media=貼入xuite音樂代碼&amp;ar=1&amp;as=1 width=1 height=1 type=application/x-shockwave-flash allowScriptAccess="none"></embed>

 

ps:文字的設定還有許多,若您知道指令,就將語法加入,都是可以的,若有不想設定的語法,可以直接刪除,若內文字多要分段,就加入 <br>  這個指令,一個是段行,兩個是空一行,以此類推。


作法:

複製上列各應用語法貼入文章發表語法區(將文章發表下方的觀看HTML原始碼打勾,顯示的視窗就是文章語法區)

更改成您想要的圖或文字,還可以在語法最後面套入音樂語法喔^^

<EMBED src=http://vlog.xuite.net/vlog/swf/lite.swf?media=貼入xuite音樂代碼&amp;ar=1&amp;as=1 width=1 height=1 type=application/x-shockwave-flash allowScriptAccess="none"></embed>

都好之後,點一下預覽鍵,看看文字是否有在圖片的適當位置,若是沒有就調一下文字框的位置及寬高尺寸,一直到文字出現在圖片適當位置了,就可以發表了。

ps:有時候預覽時,文字位置很適當,但按了立即發表後,文字位置又跑掉了,所以測試時,請按立即發表,可以先把文章設成隱藏,再來測試,等完成後,再將文章隱藏改成公開文章,或者重新再發篇新文。

    文章標籤

    教學

    全站熱搜

    鳳鳳幸福滿滿部落 發表在 痞客邦 留言(0) 人氣()