應(yīng)朋友之約,英雄現(xiàn)簡(jiǎn)要介紹,在一張背景圖片(包括flash圖片)上定位加入flash的方法。
一、邊框(表格)的概念及作用:
邊框?qū)嵸|(zhì)上說(shuō)就是我們常用的表格,目前邊框(表格)已廣泛運(yùn)用于網(wǎng)絡(luò)網(wǎng)頁(yè)的制作及各種文檔、辦公等領(lǐng)域。由于Microsoft office2003辦公軟件的推廣,更使邊框(表格)的應(yīng)用上升到一個(gè)新水平。
邊框(表格)形象的說(shuō),就像我們盛東西的容器,我們?cè)趯?xiě)日志時(shí),需要用邊框(表格)這個(gè)容器把文字、圖片、flash等內(nèi)容裝起來(lái),固定在一個(gè)位置里。也像我們?nèi)祟?lèi)居住的房子,用墻把空間分割成一個(gè)個(gè)小空間,便于我們居住、使用。比如:臥室、廚房、書(shū)房、倉(cāng)儲(chǔ)等。邊框(表格)就像房子的墻,它能使我們的日志內(nèi)容,按照我們的意愿整齊、有序的排列,而不是亂得不聽(tīng)使喚。說(shuō)的這么多,旨在強(qiáng)調(diào)邊框(表格)的重要作用。
二、一張背景圖片上定位加入flash的完整代碼:
<P align=center>
<TABLE style="LEFT: 0px; WIDTH: 800px; TOP: 0px" height=728 borderColor=#ff0000 cellSpacing=0 borderColorLight=#ffff00 cellPadding=0 width=900 background=圖片地址 border=0>
<TBODY>
<TR>
<TD width="33%"><EMBED align=right src=flash地址 width=200 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 上左 > </TD>
<TD width="33%"><EMBED align=right src=flash地址 width=200 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 上中 > </TD>
<TD width="34%"><EMBED align=right src=flash地址 width=280 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 上右 > </TD>
<TR>
<TD width="33%"><EMBED align=right src=flash地址 width=200 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 中左 > </TD>
<TD width="33%"><EMBED align=right src=flash地址 width=200 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 中中 ><EMBED align=right src=flash地址 width=200 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 中中 > </TD>這里添加了兩層。
<TD width="33%"><EMBED align=right src=flash地址 width=280 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 中右 > </TD>
<TR>
<TD width="33%"><EMBED align=right src=flash地址 width=260 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 下左 ><EMBED align=right src=flash地址 width=260 height=160 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 下左 > </TD>這里添加了兩層。
<TD width="33%"><EMBED align=right src=flash地址 width=280 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 下中 ><EMBED align=right src=flash地址 width=260 height=80 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 下中 > </TD>這里添加了兩層。
<TD width="34%"><EMBED align=right src=flash地址 width=280 height=200 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" 下右 > </TD></TR></TR></TR></TBODY></TABLE>
三、有關(guān)說(shuō)明:
1、有關(guān)代碼說(shuō)明:
英雄用紅色標(biāo)明的“圖片地址”是背景圖片的地址,你把你喜歡的圖片地址輸入到“圖片地址”里。圖片的尺寸不能太小,可選寬度700到800的圖片,高是隨寬的比例而增減的。用作背景的圖片可以是靜態(tài)的,亦可是動(dòng)態(tài)的(動(dòng)畫(huà)),可以是jpg格式的,也可以是gif格式的。當(dāng)然也可以用flash作背景,其方法下面還要介紹。
英雄用紅色標(biāo)明的“flash地址”就是我們要定位的flash地址,把你選擇的flash輸入到“flash地址”里。
2、邊框(表格)代碼說(shuō)明:
1)、大邊框(表格)。
<TABLE style="LEFT: 0px; WIDTH: 800px; TOP: 0px" height=728 borderColor=#ff0000 cellSpacing=0 borderColorLight=#ffff00 cellPadding=0 width=900 background=圖片地址 border=0>
<TBODY>
<TR>
<TD>
這是一篇日志內(nèi)容的大邊框(表格),它把一篇日志的所有內(nèi)容都框在了里面。
2)、小邊框(表格)。
<TD width="34%">這是小邊框(表格),就是用它給每一個(gè)flash定位。
3)、邊框(表格)顏色代碼。
borderColor=#ff0000這是邊框(表格)右邊的顏色代碼。borderColorLight=#ffff00這是邊框(表格)左邊的顏色代碼。也可不用顏色代碼,系統(tǒng)默認(rèn)的是透明色
4)、控制邊框(表格)之間、文字與邊框(表格)之間距離的代碼:
cellSpacing=0這是控制邊框之間、文字與邊框之間距離的代碼。注意:它在邊框(以下省略表格二字)的最外層可以調(diào)整最外一層邊框的寬度,我們可以在1以上的數(shù)字進(jìn)行調(diào)整,0為無(wú)效數(shù)字。它在邊框的中間層,可以調(diào)整邊框之間的間距。它在最下層(日志內(nèi)容的背景層),可以調(diào)整文字與邊框的間距。(英雄在此只介紹了有關(guān)代碼的作用,具體到實(shí)際中的運(yùn)用,還要靠自己的摸索、研究、實(shí)踐)。
5)、邊框線隱藏、顯示的代碼:
border=0這是讓邊框線隱藏、顯示的代碼。想要邊框線就把它設(shè)為有效數(shù)字(1以上的數(shù)字),不想要邊框線,就把它設(shè)為0。
6)、小邊框百分比寬的代碼:
<width="34%">這是控制每一個(gè)小邊框百分比寬的代碼。
四、給flash定位的具體位置:
1)、位置。
我把背景圖片(包括flash背景圖片)從橫向、縱向按上、中、下都平均分成三等份,既是三個(gè)區(qū)域,每個(gè)等份(區(qū)域)又分成三個(gè)小方形邊框(表格),共9個(gè)小方形邊框(表格)。這9個(gè)小方形邊框(表格)就是固定flash的邊框(表格)("容器")。大家看到了我用粉紅色標(biāo)注的上左、上中、上右;中左、中中、中右;下左、下中、下右。是以橫向排列說(shuō)明的,也是方便我們輸入flash地址,便于我們記憶。
2)、每個(gè)小方形邊框(表格)的大?。?div style="height:15px;">
每個(gè)小方形邊框(表格)的大小也既是每一個(gè)flash的大小,就是它們的寬、高。大家需要注意的是:一定要根據(jù)背景圖片的寬、高進(jìn)行設(shè)置。其方法就是:把背景圖片的寬,平均分成三等份,就是每一個(gè)flash的寬,把背景圖片的高,同樣平均分成三等份,就是每一個(gè)flash的高了。比如:我下面演示效果的背景圖片的寬是780,那么每一個(gè)flash的寬就是260;背景圖片的高是720,那么每一個(gè)flash的高就是240。這樣設(shè)置,每一個(gè)flash就不會(huì)變形。
五、被定位的flash的層數(shù):
9個(gè)小方形邊框(表格)里面的flash需要幾層flash?這可根據(jù)你要表現(xiàn)的日志內(nèi)容和你的喜好而自己定奪,想添幾層你就添幾層,但一定不要忘了在每層flash里添加align=right居右這個(gè)代碼,否則flash就變形。
六、兩款演示效果如下:
一)、不顯示表格的效果:
二)、顯示表格的效果:
要想讓邊框(表格)顯示,你只要把<P align=center>
<TABLE style="LEFT: 0px; WIDTH: 800px; TOP: 0px" height=728 borderColor=#ff0000 cellSpacing=0 borderColorLight=#ffff00 cellPadding=0 width=900 background=圖片地址 border=0>邊框最后面這個(gè)border=0代碼的0設(shè)為1就可以了。
七、用flash做背景:
用flash做背景的完整代碼:
<P align=center>
<TABLE borderColor=#ff0000 cellSpacing=0 borderColorDark=#ff0000 cellPadding=0 borderColorLight=#ffff00 border=0>
<TBODY>
<TR>
<TD>用flash做背景,要用兩層邊框。這是最上面的一層邊框,把背景flash代碼添加在它的下面。
<EMBED align=right src=http://www.hawh.cn/admin/upload_file/file/2008-11/1226763980093.swf width=790 height=728 type=application/x-shockwave-flash 背景 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never">
<TABLE cellSpacing=0 borderColorDark=#ff0000 width="100%" cellPadding=0 borderColorLight=#ffff00 border=0>
<TBODY>
<TR>
<TD width="33%">這是第二層邊框,它的下面是被定位了的flash。
<EMBED align=right src=http://www.hawh.cn/admin/upload_file/file/2008-09/1222715208203.swf width=260 height=240 type=application/x-shockwave-flash 上左 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </TD>
<TD width="33%"><EMBED align=right src=http://www.zxtx.org/user/yiyi/html/flash/059.swf width=260 height=240 type=application/x-shockwave-flash 上中 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </TD>
<TD width="34%"><EMBED align=right src=http://img5.3lian.com/flash/f12/1/021.swf width=260 height=240 type=application/x-shockwave-flash 上右 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </TD>
<TR>
<TD width="33%"><EMBED align=right src=http://tianyatianya.313414.cn/flash/meigui/1.swf width=260 height=240 type=application/x-shockwave-flash 中左 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </TD>
<TD width="33%"><EMBED align=right src=http://tianyatianya.313414.cn/flash/meigui/12.swf width=260 height=240 type=application/x-shockwave-flash 中中 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"><EMBED align=right src=http://bfq2/flash/88.swf width=260 height=240 type=application/x-shockwave-flash 中中 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </TD>
<TD width="33%"><EMBED align=right src=http://tianyatianya.313414.cn/flash/LANHUA/26.swf width=260 height=240 type=application/x-shockwave-flash 中右 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </TD>
<TR>
<TD width="33%"><EMBED align=right src=http://tianyatianya.313414.cn/flash/meigui/5.swf width=260 height=240 type=application/x-shockwave-flash 下左 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"><EMBED align=right src=http://tianyatianya.313414.cn/flash/meigui/11.swf width=260 height=160 type=application/x-shockwave-flash 下左 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </TD>
<TD width="33%"><EMBED align=right src=http://sk007.313414.cn/flashsc/hua/flower_016.swf width=260 height=240 type=application/x-shockwave-flash 下中 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"><EMBED align=right src=http://imgfree.21cn.com/free/flash/58.swf width=260 height=80 type=application/x-shockwave-flash 下中 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </TD>
<TD width="34%"><EMBED align=right src=http://www.zxtx.org/user/yiyi/html/flash/357.swf width=260 height=240 type=application/x-shockwave-flash 下右 quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"></TD></TR></TR></TR></TBODY></TABLE>
八、結(jié)束語(yǔ):
英雄斷續(xù)寫(xiě)了三天,才完成這篇朋友所托之教程,實(shí)在對(duì)不起,也是因英雄這段太忙了,連夜加班的趕著申報(bào)項(xiàng)目,是為了搶抓這次國(guó)家加大投入,擴(kuò)大內(nèi)需的機(jī)遇啊,請(qǐng)朋友們見(jiàn)諒。這篇文章趕得比較急,難免有不少漏洞,敬請(qǐng)大家多提寶貴意見(jiàn)和建議。最后提醒大家要認(rèn)真研究英雄用不同顏色標(biāo)注的代碼。
九、用flash做背景的演示效果(1):
用flash做背景的演示效果(2):