|
|
|
HTML代码音画之五：
闪框闪字走动字
制作（紫雨文、编制）
|
|
|
|
被腾讯不久前一折腾，对代码音画不太看好。但见到每天仍有不少人前来转载紫雨教程和素材，看来朋友们热情不减。加之自己也挡不住代码音画流光溢彩的诱惑。况且在一般网站，如风云论坛，就可以发表代码音画帖子，效果很不错。
因此还是遵守以往承诺，把代码音画讲完。本篇介绍闪框闪字和闪框内闪字走动方法。
这是紫雨在网易博客见到的效果，但是腾讯空间限制好多，不识别这个代码。所以效果出不来。琢磨好久，想到了两步制作法。
第一步：先在：
HTML在线编辑器制作音画边框。
只须两层，具体参数如图：
1、把拟用作闪字彩图地址作为第一层，注意：
因为是闪图，所以边框粗细为0；
而因为是闪框，所以单元边距、间距不要太大。试验下来，填4，足够了。也可以根据个人喜好任意修改参数；
在表格宽度这里，把%改为像素，然后填上你希望的宽度。一般日志有音画边框的，比如紫雨这篇日志，我就把它设置为600，或者500也可。如果没有边框的，可以设置到700甚至到870。
 ‘
2、再做第二层，用作底色，要和你准备做闪字底图颜色一致。一般建议黑色为佳。
提示：因为是黑色，所以紫雨就用颜色代码制作第二层，参数如图，注意都设置黑色代码。单元间距和边距都为0，这样就看不出人为痕迹。
如果你的底图也是有花案的，那么就必须填写图片地址，颜色代码可以忽略不设，但是边框粗细、单元间距和边距也设为0。
3、最后一步提示一下，也是紫雨的重要补充：
是所有音画边框制作完以后都需要做的一步：就是在每一层的前面和后面，定好光标，用删除键“<—”和“Delete”,一层层分别朝上推和向后拉，一般每层分别推（拉）一下即可。
然后点“预览”，见上下左右边框匀称了，就OK，点“源代码”，全选--复制。
再把做好的闪框代码拿到空间，点日志编辑--点“高级”-点
"HTML",黏贴代码，出现闪图边框：
闪框代码：
<P>
<table style="BACKGROUND-IMAGE: url(http://www.dabaoku.com/gif/168/gif013.gif)"
borderColor=#cccccc cellSpacing=3 cellPadding=3 width=550 align=center bgColor=#000000
border=0>
<tr>
<td>
<table borderColor=#000000 cellSpacing=0 cellPadding=0 width="100%" align=
center bgColor=#000000 border=1>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</P>
第二步：再用代码和黑底图、同样闪图做成闪字：
1、黑底图：
http://www.jfbay.com/UploadFiles/2010825173129573.jpg
2、同样闪图：
http://www.dabaoku.com/gif/168/gif013.gif
3、运用闪字通用代码制作闪字：
闪字通用代码
</P><STRONG><FONT face=楷体_GB2312 color=#ffffff size=5>
<P>
<TABLE style="BACKGROUND-IMAGE: url( 彩字图)"
cellSpacing=0 cellPadding=0 align=center
tbody="tbody" table="table">
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE style="BACKGROUND-IMAGE: url( 底图)"
align=center tbody="tbody" table="table">
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-WEIGHT:
normal; FONT-SIZE: 字体大小值pt; LINE-HEIGHT:
normal; FONT-STYLE: normal; FONT-VARIANT:
normal" face=楷体_gb2312 color=#336699><B>
换上你要写的文字 </B></FONT></TD>
</TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE></STRONG></FONT> </P>
闪字实例：
闪字实例代码：
</P><STRONG><FONT face=楷体_GB2312 color=#ffffff size=5>
<P>
<TABLE style="BACKGROUND-IMAGE: url(
cellSpacing=0 cellPadding=0 align=center
tbody="tbody" table="table">
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE style="BACKGROUND-IMAGE: url(
align=center tbody="tbody" table="table">
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-WEIGHT:
normal; FONT-SIZE: 45pt; LINE-HEIGHT:
normal; FONT-STYLE: normal; FONT-VARIANT:
normal" face=楷体_gb2312 color=#336699><B>
先在编辑器上做边框
然后把同闪图字搬进框
</B></FONT></TD>
</TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE></STRONG></FONT> </P>
4、然后合成，点蓝闪字全部，复制--把闪字搬进闪框，黏贴：
闪字框
闪字：
闪框闪字：
6、还可以制作闪框内走动闪字，
也是先做好闪框闪字，然后把闪字搬进闪框内：
走动闪字通用代码：
<P>
<MARQUEE>
<P>
<TABLE style="BACKGROUND-IMAGE: url(彩图)" cellSpacing=0
cellPadding=0 align=center table="table" tbody="tbody">
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE style="BACKGROUND-IMAGE: url(底图)" align=center table="table" tbody="tbody">
<TBODY>
<TR>
<TD align=middle>
<P><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT:
normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_gb2312 color=#336699>
<B>紫雨祝朋友快乐</B></FONT></P>
<P><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal;
FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_gb2312 color=#336699>
<B></B></FONT> </P>
<P><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE:
normal; FONT-VARIANT: normal" face=楷体_gb2312 color=#336699><B>幸福安康永远</B>
</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P></MARQUEE></P>
走动闪字实例代码：
<P> </P>
<P>
<MARQUEE>
<P>
<TABLE style="BACKGROUND-IMAGE: url(</FONT><TBODY>
<TR>
<TD align=middle>
<P><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT:
normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_gb2312
color=#336699><B>紫雨祝朋友快乐</B></FONT></P>
<P><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT:
normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_gb2312
color=#336699><B></B></FONT> </P>
<P><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT:
normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_gb2312 colo
r=#336699><B>幸福安康永远！</B></FONT></P></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></P></MARQUEE></P>
8、怎么样？相信你一定做得比我好！赠送一组可以用作闪字闪框的闪图素材(图片收集于网络).
获取图片地址方法：对准图-鼠标点右键-点属性-复制地址（URL）：
|
