注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 
关于我

本博为百科宝库(珍藏精文2万余篇)。温馨提示: (一)有博友2万8千多位,敬请朋友在理睬头像下加理睬为博友。 (二)百度一下理睬博客可进入本博。 (三)首页中部有理睬其它空间入点,朋友们可点相应的空间、博客进入。

网易考拉推荐

音画制作入门  

2008-11-18 18:18:42|  分类: 【图片制作】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、做边框:

一、将边框代码复制粘贴第一次,在图片地址处粘贴纯色图片地址,将整个边框的宽度(width)设为700,看看效果怎样;

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=700>

看看效果:


二、依然将开始那段边框代码复制粘贴第二次,在图片地址处粘贴纯色图片地址,将整个边框的宽度(width)设为680,将cellSpacing的值设为10,看看效果怎样;

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=680 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=680>

第二次看效果:

三、依然将开始那段边框代码复制粘贴第三次,在图片地址处粘贴纯色图片地址,将整个边框的宽度(width)设为660,将cellSpacing的值设为10,看看效果怎样;

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=680 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=680>

<TABLE cellSpacing=10 cellPadding=0 width=660 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=660>

第三次看看效果:


四、依然将开始那段边框代码复制粘贴第四次,在图片地址处粘贴纯色图片地址,将整个边框的宽度(width)设为640,将cellSpacing的值设为10,看看效果怎样;

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=680 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=680>

<TABLE cellSpacing=10 cellPadding=0 width=660 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=660>

<TABLE cellSpacing=10 cellPadding=0 width=640 background=底层边框图片地址(纯色图片) border=0>
<TBODY>
<TR>
<TD width=640>

第四次看看效果:


小结:

    1、说白了,做音画的边框,实际上就是做表格框.由不同颜色的表格框层叠起来,四周没有被遮盖的部分就形成了边框;

    2、做几层边框你就把开始的那段边框代码复制粘贴几次,修改一下宽度,粘贴不同颜色的图片地址就行了;

    3、现在看来这个四层的边框很小,但只要一把内容放进去,它就会扩大了。内容放得越多,边框就会自动撑得越大。

 

    那么,又怎样在做好的边框内添加内容呢?

二、怎样在边框内添加内容

下面是第一步做边框的四层边框代码:

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=680 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=680>

<TABLE cellSpacing=10 cellPadding=0 width=660 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=660>

<TABLE cellSpacing=10 cellPadding=0 width=640 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD>

音画的第二步就是添加内容:(图片、动画和文字等)

下面这段蓝色代码就是添加内容的代码,将它添加在上面红色代码后面。

<P align=center><IMG src="动态小图网址(gif或jpg格式)"></P>

<TABLE borderColor=#d2b48c height=230 cellSpacing=1 width=360 align=center background=主体图片地址 border=8>

<TBODY>

<TR>

<TD align=middle width="93%"><EMBED src=透明flash小动画网址 width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high">

加入这段蓝色代码后的效果:

音画制作入门 - 理睬 - 理 睬

按要求粘贴图片地址、动态小图地址和动画地址,(在代码编辑窗口编辑),然后点击一下<>按钮,回到日志编辑状态,在图下输入文字.

最后将音乐播放器代码添加在所有代码的后面,粘贴一个网络传输效果好的、又合主题的音乐地址就行了。隐形播放器代码如下:<EMBED src=http://mp3.baidu.com/u?u=音乐文件网址 width=0 height=0 type=audio/mpeg Loop="true" AutoStart="true">

做好后本来最后还有一段结束标记代码,这个可以不管,系统会自动生成。

三、怎样在音画的一幅图片上做出文字的移动效果

怎样在音画的一幅图片上做出文字的移动效果呢?其实就是和在一般背景图片上做移动效果一样.这些文字移动效果都是在导入背景图片的那段代码后面加上一段文字移动效果的代码,我们就可以根据这个特点去做音画的文字移动效果。

请看下面这段音画代码就知道在哪里做文字特效了:

   这红色代码是音画的边框代码,蓝色代码是在边框内添加内容的代码,桔黄色代码是音乐播放器.

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=665 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=665>

<TABLE cellSpacing=10 cellPadding=0 width=645 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=645>

<TABLE cellSpacing=10 cellPadding=0 width=625 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD>

<P align=center><IMG src="动态小图网址(gif或jpg格式)"></P>

<TABLE borderColor=#d2b48c height=230 cellSpacing=1 width=360 align=center background=主体图片地址 border=8>

<TBODY>

<TR>

<TD align=middle width="93%">

后面如果没有动画就在这里做移动文字特效

<EMBED src=透明flash动画网址 width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high">

如果有动画就在这里做移动文字特效

<EMBED src=音乐网址 hidden=true type=audio/mpeg loop="-1" AUTOSTART="1" > 

四、怎样在音画边框内添加更多的内容

这是一段四层边框、一幅主体图片的代码:

    红色的是边框代码,蓝色的是在边框内添加内容的代码,桔黄色的是蓝色代码部分的结束标记。

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=680 background=第2层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=680>

<TABLE cellSpacing=10 cellPadding=0 width=660 background=第3层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=660>

<TABLE cellSpacing=10 cellPadding=0 width=640 background=第4层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD>

<P align=center><IMG src="动态小图网址(gif或jpg格式)"></P>

<TABLE borderColor=#d2b48c height=230 cellSpacing=1 width=360 align=center background=主体图片地址 border=8>

<TBODY>

<TR>

<TD align=middle width="93%"><EMBED src=透明flash小动画网址 width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high">

</TD></TR></TBODY></TABLE></P> 

如何在这个边框中增添更多的内容?(即图片、动画、动态小图和文字)

   1、如果你还需要添加几幅图片,那就将蓝色代码和桔黄色代码复制粘贴几次续接在被复制的那段代码之后,按要求粘贴网址,代码中图片的宽度和高度要调到与原图片在属性中查得的宽度、高度一样;

   2、一幅图片上也可添加几个透明flash动画,同样是将动画代码复制粘贴在动画代码之后,将动画的宽度和高度调到比图片的宽度和高度小一点;就是下面这段代码:

<EMBED src=透明flash小动画网址 width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high">

   3、动态小图也可随意添加,需要添加几个动态小图,就将那段代码在原位置下面复制粘贴几次,当然也可复制粘贴在没有动态小图的位置,然后粘贴网址。就是下面的代码:

<P align=center><IMG src="动态小图网址(gif或jpg格式)"></P>

   4、呈日志编辑状态,可以在图片中输入文字,也可在图片与图片之间输入文字;点击<>这个按钮进入代码编辑状态,就可以编辑文字特效。

全部做好后,就在最后加上音乐播放器,粘贴上音乐网址。就是下面这段代码:<EMBED src=音乐网址 hidden=true type=audio/mpeg AUTOSTART="1" loop="-1" >

五、怎样在音画中做梦幻效果

做梦幻效果的方法:

就是在添加内容的代码中(蓝色代码 TABLE这个元素后面)添加一个CSS滤镜的梦幻效果代码---style="FILTER: Alpha(opacity=100,style=2)" 很简单,识破不值半文钱!

音画代码:红色代码是边框代码,蓝色代码是添加内容的代码,桔黄色代码是添加内容代码部分的结束标记.

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层图片地址 border=0>

<TBODY>

<TR>

<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=680 background=第2层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=680>

<TABLE cellSpacing=10 cellPadding=0 width=660 background=第3层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=660>

<TABLE cellSpacing=10 cellPadding=0 width=640 background=第4层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD>

<P align=center><IMG src="动态小图网址(gif或jpg格式)"></P>

<TABLE 在此处加一个CSS滤镜代码就有梦幻效果了 borderColor=#d2b48c height=230 cellSpacing=1 width=360 align=center background=主体图片地址 border=8>

<TBODY>

<TR>

<TD align=middle width="93%"><EMBED src=透明flash小动画网址 width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high">

</TD></TR></TBODY></TABLE></P> 

六、怎样用代码做外边框和内边框

做外边框的代码:

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge; BACKGROUND-COLOR: #ff0000" cellSpacing=0>

<TBODY>

<TR>

<TD>

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

</TD></TR></TBODY></TABLE>

       说明:红色代码是右边框;绿色代码是上边框;深蓝色代码是左边框;桃红色代码是下边框;天蓝色代码是边框内面背景颜色;黄色代码cellSpacing=0是限制内边框与外边框距离的,“0”表示没有距离,是可以改变的。(这段代码里没有内边框代码)#号后面的00ff00是颜色代码,可以变换,要改变边框颜色就要将四边#号后的代码变为同一个代码,否则,四边的颜色就会不同。颜色代码可以在颜色代码表里找;10PX是表示外边框的宽度,数值可以改变;

怎样加进内边框?

         1、代码:

                <TABLE border=1>

                      <TBODY>

                      <TR>

                      <TD>

          2、说明:

                A、“=”号后的“1”可以变为“2”或“3”,不可改得太大,因为这是限制内边框宽度的,太宽了就不好看了;

              B、做几个内边框,就将这段代码放开头那段代码的<TD>后,(即“文字”前)并复制粘贴几次;

          3、以做三个内边框为例:也就是将内边框代码复制粘贴三次放于开头那段代码的<TD>后,(即“文字”前)边框的宽设为“1”,代码变化如下:

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge;

BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge;

BACKGROUND-COLOR: #ff0000" cellSpacing=0>

<TBODY>

<TR>

<TD>

<TABLE border=1>

<TBODY>

 <TR>

 <TD>

<TABLE border=1>

<TBODY>

<TR>

<TD>

 <TABLE border=1>

 <TBODY>

 <TR>

 <TD>

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

</TD></TR></TBODY></TABLE>

看看将限制内边框与外边框距离的代码cellSpacing=0改为等于“5”后的效果

七、 打造水晶博客感觉的边框代码

代码:

<TABLE borderColor=#ff9999 height=211 cellSpacing=0 cellPadding=0 width=720 align=center border=1>
<TBODY>
<TR>
<TD style="FILTER: Blur(Add=true, Direction=180, Strength=20)" bgColor=#ff9999 height=27>标题</TD></TR>
<TR>
<TD vAlign=top height=184>

这里是输入文字的地方,还可以放图片代码、Flash动画代码和gif动态小图代码。

</TD></TR></TBODY></TABLE>

说明:红色的是边框的颜色值,可以改变(见颜色代码表),绿色的是标题背景的颜色值,也可以改变(见颜色代码表),蓝色的“27”是标题栏的宽度值,也是可以改变的。

看看效果:

标题
输入文字的地方

 

 

 

 

 


                                   更多精彩内容,点击理睬日志链接浏览! 

                     ●初学入门● ●博客技巧● ●图片制作● ●文字制作● ●文字素材●

                     ●图画素材● 精美时钟● ●边框分割● ●综合素材● ●综合图库●

                     ●日历天气● ●音画作品● ●视频教程● ●电脑技巧● ●制作教程●

                     ●酷播放器● 综合精品● ●八卦精品● ●名人博客● ●百科奇闻●

                     ●趣味制作● ●趣味图片● ●免费电影● ●游戏天地● ●在线服务●

                     ●搜索引擎● 好网站一● ●好网站二● ●全国报纸● ●软件下载●

           博友想提高人气吗?请点击右图进入:2008年12月8日 - 理睬 - 理 睬


               日志后面导航样本 - 理睬 - 理 睬

  评论这张
 
阅读(3834)| 评论(11)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017