分享

日志编辑初学者代码应用方法

 岚韵 2012-06-28
日志编辑
初学者代码应用方法
        前言: 

        网易日志编辑器与新浪、搜狐比较,还是有很多特点,可以编辑出象音画一样的日志,针对初学者编辑日志的困难,本人作如下介绍,如有高手阅读本文,望加以指点,能使大家的日志变得更加漂亮,谢谢。

一、代码介绍

1、边框与底图代码

一般的日志目前比较简单的作法是:底图+边框+雾化图片,中间插入文字、视频、音画、音乐,再在版面上加上飘花、动感云雾等等FLASH,最后是博客签名,所以底图和边框至关重要,就像是一座大楼的骨架。我建议初学者还是选用如下的底图边框代码,仔细看代码,其实就是一张底图,设置不同的参数就会有不同的边框效果。如果选用高手制作的边框,往往在插入文字、图片等内容后,没有调整好,边框就会变形(原因不在此文介绍了),相信大家都碰到过。

A、底图边框代码:

<DIV align=center>
<TABLE style="WIDTH: 98%" border=0 cellSpacing=8 cellPadding=3

background=http://image52.360doc.com/DownloadImg/2012/06/2810/25154847_18.jpg

align=center><TBODY><TR>
<TD><P> </P>

代码说明、设置与应用:

第一行:<DIV align=center> 将下述文字、图片等设置在中间,如果不需要,可以将此代码去掉。

第二行:底图尺寸大小与边框设置,其中98%是大小,如果改小参数自然尺寸变小,最大为100%(宽度为910)。

修改border=0 表示边框线条的粗细,设置1就是一根线,当大于8时,明显会有立体的感觉,可根据自己的喜欢设置粗细,如图:

日志编辑初学者代码应用方法 - 悠悠岁月悠悠情 - 悠悠岁月悠悠情
 
修改cellSpacing=8 表示内框线离外框的距离,可以自己尝试的设置。出现效果如本日志边框。
无需边框将上述参数全部设置为零。
 
修改cellPadding=3 这个可以不作设置,指表格内的单元格之间的距离,现在只有一格。因为上述的代码其实就是一个表格代码,只是它只有一行一列。
温馨提示,当将上述代码贴入日志代码编辑状态下的代码处后,回到文字编辑状态下,出现一条色带图,点击左上角,出现光标后,按键盘回车键,色带图会往下拉伸,可以下拉多一些,再回到代码编辑状态,会看见很多<P> </P>
表示空行的意思,目的是为了以后编辑其它代码方便,往下的介绍中会提及。
 
第三行background=http://img.blog.163.com、、、、、表示图片的链接地址。这张底图图片是一个方块的颜色图,你可以将方块图收集到你的相册中,例如我的收藏是:http://gjw8000.blog.163.com/album/#m=1&aid=237211760&p=1
使用方法:点开色块图,点击“复制图片链接”,如图:
日志编辑初学者代码应用方法 - 悠悠岁月悠悠情 - 悠悠岁月悠悠情
将复制的图片链接地址粘贴于=号后面,整个底图和边框设置完成。
 
重点提示:如果你喜欢将一张大图作为底版,先要在电脑中看底图的尺寸是否是910(宽度),1350(高度),高度可以不限,宽度必须是910,不然使用边框会出现图片重叠。上传此大图到相册里的时候别忘了点“保留原图”。使用连接时,点开图片,再点“查看原图”,显示图片后,看右上方显示的尺寸是不是910、、、,然后右键点击,出现下拉菜单,点最后的属性,出现链接地址,拉篮复制,再粘贴到=号后面,其它设置方法不变,这是做音画常用的方法,大图你可在电脑中先做好,比如加上文字等等,当然你会PS就不在话下了。这个代码也可以使用到日志编辑的中间,图片上写文字加视频等等,举一反三的应用。
 
2、插入雾化图片
B、雾化图片代码:
<P align=center><img style="FILTER: Alpha(opacity=200,style=3); WIDTH: 690px; HEIGHT: 520px" title=中) alt=中 src="http://img6.ph.126.net/gR4-y58FsnpNWBV8x3H7oA==/569986827856450066.jpg" width=560 height=160></P>

代码说明:将自己选择的图片地址(一般用自己相册里的图片,不易丢失)黏贴于代码中的src="图片地址",大小尺寸可以在文字编辑状态下,点击雾化图后,拉大、拉小修改。
 
3、视频播放器
C、视频播放器自动播放代码:
1、、雾化SWF
<P align=left><FONT color=#ccffff size=2></FONT> </P>
<DIV align=center><EMBED style="FILTER: alpha(opacity=100,style=3); WIDTH: 680px; HEIGHT: 502px" height=502 type=application/x-shockwave-flash width=680 src=http://qimg.yesky.com//uploads/attachments/2011-01/09/7052388g.swf wmode="transparent" invokeurls="false" allowScriptAccess="never" allowNetworking="internal"></DIV>
<DIV align=center> </DIV><WBR>
2、、优酷自动播放雾化
<P align=center><FONT color=#ccffff size=2></FONT> </P>
<DIV align=center><EMBED style="FILTER: alpha(opacity=100,style=3); WIDTH: 680px; HEIGHT: 502px" height=502 type=application/x-shockwave-flash width=680 src=http://player.youku.com/player.php/sid/XMzgyNTA5MjYw/v.swf wmode="opaque" flashvars="isAutoPlay=true" allowscriptaccess="sameDomain" quality="high"></EMBED></DIV>
<DIV align=center> </DIV><WBR>
3、、优酷自动播放代码
<EMBED align=middle src=http://player.youku.com/player.php/sid/XMjY2NzE2ODQ4/v.swf width=580 height=500 type=application/x-shockwave-flash wmode="opaque" flashvars="isAutoPlay=true" allowscriptaccess="sameDomain" quality="high"></EMBED>
 
代码说明:上述代码是运用于自动播放的FLASH(后缀是SWF),将地址替换成你自己选择的地址即可。
 
4、图片移动
D、雾化等图片移动
1、、雾化图片左右来回移动
<MARQUEE behavior=alternate width="100%" scrollAmount=3><IMG style="FILTER: Alpha(opacity=200,style=3); WIDTH: 212px; HEIGHT: 258px" title="中)<img" src="
http://img1.ph.126.net/tiv1eNDvXv1DyAEFGCUWfw==/2687241602673687761.gif" width=290 height=430><BR></MARQUEE>
2、、图片移动
来回移动
<marquee width=100% behavior=alternate scrollamount=10>
<img src="
http://img9.ph.126.net/WrN_jzH8-YATuVvHvicFqA==/1320962065720381599.jpg"
width=290 height=430><br><font color=0000ff size=5 face=华文行楷><b></b></font></marquee>
3、、左右移动
<marquee><img src="
http://img9.ph.126.net/WrN_jzH8-YATuVvHvicFqA==/1320962065720381599.jpg"
<br></marquee>
4、、向上移动
<MARQUEE scrollAmount=2 direction=up>
<CENTER><FONT face=华文行楷 color=#0000ff size=5><B></B></FONT><BR><IMG style="WIDTH: 162px; HEIGHT: 180px" height=30 src="
http://img9.ph.126.net/WrN_jzH8-YATuVvHvicFqA==/1320962065720381599.jpg"
width=90></CENTER></MARQUEE>
5、、向下移动
<marquee direction=down scrollamount=5><center><font color=0000ff size=5 face=.><b></b></font><br><img src="
http://img9.ph.126.net/WrN_jzH8-YATuVvHvicFqA==/1320962065720381599.jpg"
width=290 height=430></marquee>
代码说明:上述代码中将自己所选图片地址替换即可。
 
提升认识:
如果需要雾化图片移动,可以先连接到B中的雾化图片地址中,然后再修改添加移动代码,例如原来的雾化代码是:
<P align=center><img style="FILTER: Alpha(opacity=200,style=3); WIDTH: 690px; HEIGHT: 520px" title=中) alt=中 src="http://img6.ph.126.net/gR4-y58FsnpNWBV8x3H7oA==/569986827856450066.jpg" width=560 height=160></P>
将上述代码中最前面的<P align=center>(这段前面<img style="FILTER、、、、)替换成上面移动代码中<img style="FILTER、、、、前面的即可。如来回移动的代码是:<marquee width=100% behavior=alternate scrollamount=10>      (=10 是移动速度,一般用3以内速度较为缓慢)
仔细观察即可找出替换代码的规律,无需认识那些英文字母是什么意思,照搬就是了。
 
5、文字移动
D、文字移动代码
1、、文字来回移动
<MARQUEE width=100% behavior=alternate style="WIDTH: 852px; HEIGHT: 25px" width=852 scrollAmount=5 scrollDelay=10 border="0"><FONT color=#ffff00 size=2>编辑你自己的文字</FONT></MARQUEE>
2、、文字上升
<MARQUEE style="FONT-SIZE: 12px; WIDTH: 132px; COLOR: rgb(34,34,221); LINE-HEIGHT: 17px; HEIGHT: 125px" scrollAmount=1 scrollDelay=1 direction=up height=125>编辑的自己的文字<BR></MARQUEE>
3、、文字左右移动
<marquee direction="left" scrollamount="1" scrolldelay="10" border="0" width=500 > border="0"><FONT color=#000066 size=3><FONT color=#ff0066>编辑你自己的文字。</FONT></FONT></MARQUEE></P>
 
6、flash效果应用
E、flash效果定位代码
<P><FONT color=#f79646><EMBED style="POSITION: absolute; TOP: 50px; LEFT: 80px" height=700 type=application/octet-stream width=700 src=http://www.xcwhw.cn/fla/bb/hc/37.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></FONT></P>
 
代码说明:此代码应用是一篇日志漂亮与否的关键,往往小小的点缀会带来意想不到的效果。
上下位置:TOP: 50px   调整数值
左右位置:LEFT: 80px  调整数值
flash地址:src=http://www.xcwhw.cn/fla/bb/hc/37.swf   替换你自己所选。
 
7、题目阴影文字代码
<DIV style="FILTER: shadow(color=red#0000FF); LINE-HEIGHT: 10%; WIDTH: 72.25%; FONT-FAMILY: 华文彩云; HEIGHT: 78px; COLOR: green; FONT-SIZE: 40pt"><DIV align=center><FONT color=#333399><STRONG>编辑你自己的文字</STRONG></FONT></DIV>
代码说明:在文字编辑状态下双击,编辑你自己的文字。
 
上述基本代码介绍完毕,你可以将A、B、C、D、E 五套基本代码复制到你的记事本备用,文件名:日志编辑基本代码,当然你也可以自己取文件名,以后看见好的应用代码就往里加,达到一定数量的代码信息,也会灵活运用,您就是高手了,呵呵。有些人看见这么多的英文字母代码就害怕,其实你不认识它没关系,不需要知道每个单词是什么意思,只要将整段代码搬家就是了。
 
二、日志编辑步骤
1、打开记事本“日志编辑基本代码”备用。
2、想好日志的版面布局,文字、图片、视频等等的位置,先不要考虑FLASH的位置和要加那些FLASH的点缀,等编辑好文字等,根据版面情况再去选择FLASH,是要加飘花呢?还是在图片的湖里加小船呢?还是要加小鸟呢?等等,慢慢想吧!
3、如果需要底图和边框,先将上述代码A(底图边框代码)复制到日志代码中,作为第一段。
4、如果要插入雾化图片,将代码放在第一段代码的最后<P> </P>的下面,如果是你想多放几张雾化图片可以每隔<P> </P>后粘贴一段雾化图片代码,再去修改每张图片的链接地址。
5、完成第一、二段代码,可以编辑文字了,回到文字编辑状态下,你看见雾化图片显示了,可能图片显示变形,可以点击拉大拉小修改到满意为止。在两张雾化图片上下的中间你可以插入文字(<P> </P>这个隔行代码就是起这个作用),文字编辑不作介绍了,自己发挥。
6、在上述内容编辑完毕后,再插入你想移动的图片、文字、视频、签名等等,放置的位置可以想好位置后,再在整篇日志代码里添加你想移动图片、视频等等代码,隔行代码<P> </P>就是你寻找的位置标记。
7、最后是添加点缀的FLASH,将FLASH定位代码,重复的粘贴在整篇代码的最后,多放10个8个没关系,多余的最后可以删掉。然后逐条修改地址和位置参数,边预览边修改,这可是最花时间的,想要做成音画,那你就得要有耐心。
8、如果是将网易日志播放器播放音乐,在文字编辑状态下,在版面最下方随便哪个位置插入,再修改成隐藏。
 
简要介绍,草草搁笔,这套代码只要能灵活运用,相信你的博客会变的更漂亮,有空想起来有好的代码再作补充,读者有何问题可以留言。
 
雁过留声、人过留名,祝你成功!
 
 
日志编辑初学者代码应用方法 - 悠悠岁月悠悠情 - 悠悠岁月悠悠情
 
日志编辑初学者代码应用方法 - 悠悠岁月悠悠情 - 悠悠岁月悠悠情
 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多