［论坛音画制作入门］第五讲：图片的上传和代码编辑

［论坛音画制作入门］第五讲：图片的上传和代码编辑

        音画是由底图、动画、音乐等三个主要组成部分然后由代码在网页中组成的。底图是音画最重要的主体，是艺术表现的根本。动画是音画中的活动图像，是音画画龙点睛的组成部分，能增强底图的艺术感染力。音乐好比电影中的配音音乐，它拓展了图片的艺术表现，进一步增强底图的艺术感染力。代码是把以上的艺术元素用网页代码的形势组合在网页中的工具。它控制了以上元素在网页上的布局位置和大小，使所有的元素成为有序的排列和组合。
        以上就是音画的基本组成，本教程仅讲讲音画的合成制作，底图和动画的具体制作技术那是另外的大课程，在此就不讲了。
一、切割图片：为什么要切割图片呢？因为在论坛上一般不允许上传过大的图片，而在音画中经常是宽1000px高数千像素的图片，它的容量是比较大的。切割图片还有一个好处，就是会更容易在短时间内部分显示图片，以免长时间的显示白画面，造成图片链接失效的错觉。
在PS中的操作见下列图：















二、图片的上传：这个过程就可以省略了吧，如果你这个也不会，该挨打。。。。！！
三、取得图片网址：右击你上传后帖子中的图片，选择“复制图片地址”，然后新建一个文本文档，打开文档，把网址粘贴上去备用。
四、组合图片的代码：
对于代码和网页编辑不是很熟习的人，做音画就是拿来主义，以下提供一个模板，因为是5张分割图，所以我们把这个模板复制5个，粘贴在后面。
<table style="LEFT: -220px; POSITION: relative; TOP: 100px" width="1000" height="表格高度" background="图片网络地址">
 <tr>
 <td></td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px" width="1000" height="表格高度" background="图片网络地址">
 <tr>
 <td></td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px" width="1000" height="表格高度" background="图片网络地址">
 <tr>
 <td></td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px" width="1000" height="表格高度" background="图片网络地址">
 <tr>
 <td></td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px" width="1000" height="表格高度" background="图片网络地址">
 <tr>
 <td></td>
 </tr>
</table>
其实，我们要关注的只有高度和图片网址这两个项目，宽度总是1000为好，左移参数最后调。暗殇这个图片总高是2200，所以每个分割图片为440，把这个参数和5个图片的地址分别填入上面模板。得到的代码如下：
<table style="LEFT: -220px; POSITION: relative; TOP: 100px"  width="1000" height="440" background="http://ai./uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg">
 <tr>
  <td>　</td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px"  width="1000" height="440" background="http://ai./uu_0912_4/xlfcd_15_2_a4fe79d47ed7ab9.jpg">
 <tr>
  <td >　</td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px"  width="1000" height="440" background="http://ai./uu_0912_4/xlfcd_15_2_16dd62c7e2e2c8a.jpg">
 <tr>
  <td >
</td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px"  width="1000" height="440" background="http://ai./uu_0912_4/xlfcd_15_2_798bec85931cc0f.jpg">
 <tr>
  <td >　</td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px"  width="1000" height="440" background="http://ai./uu_0912_4/xlfcd_15_2_1badd06ca63e071.jpg">
 <tr>
  <td >　</td>
 </tr>
</table>
</td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px" border="0" cellpadding="0" cellspacing="0" width="1000" height="440" background="http://ai./uu_0912_4/xlfcd_15_2_798bec85931cc0f.jpg">
 <tr>
  <td >　</td>
 </tr>
</table>
<table style="LEFT: -220px; POSITION: relative; TOP: 100px" border="0" cellpadding="0" cellspacing="0" width="1000" height="440" background="http://ai./uu_0912_4/xlfcd_15_2_1badd06ca63e071.jpg">
 <tr>
  <td >　</td>
 </tr>
</table>