玩博客做大图音画的方法步骤详解

 大家都有体会：过的大图片上传时经常受阻，勉强上传了宽、高值却发生变化，同时在博客里打开也是较慢的，如果我们把它切割成多张小图，这样不仅容易上传，而且打开速度也很快！对此，我就如何将图片切割  成多张小图、无间隙拼合  、添加漂亮的透明flash  等技术作一简要介绍，希望对你学做音画有所帮助。

 （方法步骤并不复杂，看一遍你就会做了）

一、图片的切割：

1、启动ps软件，打开你做好的一张大图或从网上下载的漂亮大图。

2、选择“切片选取工具”。点击“划分切片”

3、右键图片后选取“划分切片”。

4、在话框中根据图片的具体情况进行设置，我这里是水平划分3等分。

4、点文件→存储为web所有格式（w）

5、在“存储为web所有格式”对话中设置如图，设置好后点存储。

双击打开存储的切片图片文件夹（我存储的路径在我的图片收藏）图片状况：

 如将切片图片上传到博客后，如直接复制到日发表则上下两张图片间会有间隙：

那么怎样解决图片的间隙问题 ？ 我们可借助代码来给它无间隙拼合！

二、基本代码的应用：

<P align=center>
<TABLE  border=0 cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR height=第1张图片高度>
<TD width=第1张图片宽度    background=第1张图片地址>

</TD></TR>

<TR height=第2张图片高度>
<TD width=第2张图片宽度    background=第2张图片地址>

</TD></TR>

<TR height=第3张图片高度>
<TD width=第3张图片宽度    background=第3张图片地址>

</TBODY></TABLE></P>

代码说明：

       本例是五张图片，所以代码中间是五段“<TR >.......</TD></TR>”一样的代码，根据你自己的需要，切割成多少份就用多少段这样的代码，代码中的“图片地址”“图片宽度”“图片高度”分别右键图片→属性从中获取地址、宽度、高度，然后分别替代到上面代码对应位置。

无间隙拼合的效果：

三、在图片加上透明flash的代码运用：

<P align="center" >  <TABLE cellSpacing="0" cellPadding="0" align="center" border="0" >  <TBODY>  <TR height="315" >  <TD width="630" background="http://image94.360doc.com/DownloadImg/2016/02/1522/66092299_10.gif" >  <P align="center" ><EMBED style="MARGIN: 5px" pluginspage=http://www.macromedia.com/go/getflashplayer src=flash地址 width=flash宽度 height=flash高度 type=application/x-shockwave-flash allowscriptaccess="never" quality="high" wmode="transparent"></EMBED></P>
</TD></TR> 

<TR height="315" >  <TD width="630" background="http://image94.360doc.com/DownloadImg/2016/02/1522/66092299_11.gif" > <P align="center" ><EMBED style="MARGIN: 5px" pluginspage=http://www.macromedia.com/go/getflashplayer src=flash地址 width=flash宽度 height=flash高度type=application/x-shockwave-flash allowscriptaccess="never" quality="high" wmode="transparent"></EMBED></P>
</TD></TR> 

<TR height="315" >  <TD width="630" background="http://image94.360doc.com/DownloadImg/2016/02/1522/66092299_12.jpg" ><P align="center" ><EMBED style="MARGIN: 5px" pluginspage=http://www.macromedia.com/go/getflashplayer src=flash地址 width=flash宽度 height=flash高度 type=application/x-shockwave-flash allowscriptaccess="never" quality="high" wmode="transparent"></EMBED></P>
</TD></TR> </TABLE> 

加上透明flash的效果：

四、在上面基础上再添加mp3音乐的方法:

很简单：在上面代码最后一段的</EMBED></P>...</TD></TR> </TABLE>  之间,添加<BGSOUND balance="0" src="><BGSOUND balance="0" src="mp3地址"  volume="0" loop="infinite" >代码。
代码运用：

<P align="center" >  <TABLE cellSpacing="0" cellPadding="0" align="center" border="0" >  <TBODY>  <TR height="315" >  <TD width="630" background="http://image94.360doc.com/DownloadImg/2016/02/1522/66092299_10.gif" >  <P align="center" ><EMBED style="MARGIN: 5px" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://tmflash./flashxuexi/QQ249181841-591.swf width=600 height=251 type=application/x-shockwave-flash allowscriptaccess="never" quality="high" wmode="transparent"></EMBED></P>
</TD></TR> 

<TR height="315" >  <TD width="630" background="http://image94.360doc.com/DownloadImg/2016/02/1522/66092299_11.gif" > <P align="center" ><EMBED style="MARGIN: 5px" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://tmflash./flashxuexi/QQ249181841-591.swf width=600 height=251 type=application/x-shockwave-flash allowscriptaccess="never" quality="high" wmode="transparent"></EMBED></P>
</TD></TR> 

<TR height="315" >  <TD width="630" background="http://image94.360doc.com/DownloadImg/2016/02/1522/66092299_12.jpg" ><P align="center" ><EMBED style="MARGIN: 5px" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://tmflash./flashxuexi/QQ249181841-591.swf width=600 height=251 type=application/x-shockwave-flash allowscriptaccess="never" quality="high" wmode="transparent"></EMBED></P>
</TD></TR> 

<BGSOUND balance="0" src="mp3地址"  volume="0" loop="infinite" >
</TD></TR> </TABLE> 

至此大图音画完工!
（下面是我加上“李玲玉 - 孝庄秘史 - 美人吟 电视剧 主题曲”音乐的效果）