|
将向博客新手详细解讲制作过程
制作这类边框的方法和静态边框的制方法是完全相同的.但要想制作好这种边框,关键是素材的选用.以及怎样将动、静态图片组合?怎样搭配它们之间的颜色?等等...相对来说,其操作过程稍有难度.
下面本人仅以一张动态和五张静态图片构成的边框,来作简单讲解:先看下面的这六张图片:
    
以上六张图片地址分别为:
<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./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./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="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="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、有关这方的操作方法,请参见上面的"相关文章"链接;
|
