清净莲海六合敬修学网祈愿：世界和平正法久住

标题: HTML 第三课：大图音画的图片拼合及动画拼合 [打印本页]

作者: 画儿 时间: 2009-4-21 00:17 标题: HTML 第三课：大图音画的图片拼合及动画拼合

大图音画的图片拼合及动画拼合

编写：画儿

　　此教材于清净莲海独家发布，仅限浏览，谢绝转载。因初次编写音画代码教材，肯定会有很多不当之处，敬请朋友们指正。

　　我们简略认识一下HTML代码。HTML是一种用来制作超文本文档的简单标记语言，与普通文档不同，它可以加入文字、图片、声音、动画、影视等内容，可以从一个文件跳转到另一个文件，与世界各地主机的文件连接，通过WWW浏览器显示出效果。它的特点是用一对小尖括弧（“< 和 >"）作为标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。而且大部份是成对的双标签，即首标签和尾标签。

　　一、音画图片的拼合

　　裁切图片的拼合（以四张图片为例）

　　代码格式如下：
<TABLE style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px" cellSpacing=0 cellPadding=0 width=1000 align=center border=0>
<TBODY>
<TR>
<TD><IMG height=图片高度 src="第一张图片网址" width=图片宽度></TD></TR>
<TR>
<TD><IMG height=图片高度 src="第二张图片网址" width=图片宽度></TD></TR>
<TR>
<TD><IMG height=图片高度 src="第三张图片网址" width=图片宽度></TD></TR>
<TR>
<TD><IMG height=图片高度 src="第四张图片网址" width=图片宽度></TD></TR></TBODY></TABLE>

<EMBED src=此处加音乐网址 hidden=true type=audio/mpeg loop="true" autostart="true"></EMBED>

作者: 画儿 时间: 2009-4-21 00:19

二、FLASH音画的拼合

　　裁切图片的拼合和动画的拼合道理相同。只要将插入图片的标识符换成插入FLASH的标识符就可以了，下面，我们来看看相关代码：

　　动画SWF拼合代码如下:

　　大图音画边框语言

<TABLE style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px" cellSpacing=0 cellPadding=0 width=1000 align=center border=0>
<TBODY>
<TR>

　　大图音画图片展示语言

<TD><IMG height=图片高度 src="第一张图片网址" width=图片宽度></TD></TR>
<TR>

<TD><IMG height=图片高度 src="第二张图片网址" width=图片宽度></TD></TR>
<TR>

<TD><IMG height=图片高度 src="第三张图片网址" width=图片宽度></TD></TR>
（插入flash语言）<TR>

　　最后的休止符

</TBODY></TABLE>

<EMBED style="LEFT: 200px; WIDTH: 700px; POSITION: absolute; TOP: 175px; HEIGHT: 300px" align=right src=第一个flash地址 width=700 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high">

<EMBED style="LEFT: 200px; WIDTH: 700px; POSITION: absolute; TOP: 175px; HEIGHT: 300px" align=right src=第二个flash地址 width=700 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high">

　　音乐展示语言

<EMBED src=此处加音乐网址 hidden=true type=audio/mpeg loop="true" autostart="true"></EMBED>

作者: 画儿 时间: 2009-4-21 00:20

　　在起始代码的部分，有这样一组代码：style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px",这点对大图音画贴的发贴是个关键，其属性是：
LEFT: -120px;定位网页整体的左右位置，数值越小越向左偏移，反之向右移动
WIDTH: 1000px 整体网页的展示宽度，用像素值来定义
POSITION: relative设定网页以相对本文档面显示
TOP: 0px 边框距顶部的距离

作者: 画儿 时间: 2009-4-21 00:23

　　总结：如果您还弄不明白上面的原理，就将下面大图音画语言，直接套入相关素材就ok。

<TABLE style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px" cellSpacing=0 cellPadding=0 width=1000 align=center border=0>
<TBODY>
<TR>
<TD><IMG height=图片高度 src="第一张图片网址" width=图片宽度></TD></TR>
<TR>
<TD><IMG height=图片高度 src="第二张图片网址" width=图片宽度></TD></TR>
<TR>
<TD><IMG height=图片高度 src="第三张图片网址" width=图片宽度></TD></TR>
<EMBED style="LEFT: 200px; WIDTH: 700px; POSITION: absolute; TOP: 175px; HEIGHT: 300px" align=right src=第一个flash地址 width=700 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high">
<EMBED style="LEFT: 200px; WIDTH: 700px; POSITION: absolute; TOP: 175px; HEIGHT: 300px" align=right src=第二个flash地址 width=700 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high">
<TR>
</TBODY></TABLE>
<EMBED src=此处加音乐网址 hidden=true type=audio/mpeg loop="true" autostart="true"></EMBED>

作者: 画儿 时间: 2009-4-21 00:25

图片素材

第一张图片http://blog.heshang.net/attachments/2009/04/18/4812_200904181308381.jpg 宽1000 高800

第二张图片http://blog.heshang.net/attachments/2009/04/18/4812_200904180852531.jpg 宽1000 高834

第三张图片http://blog.heshang.net/attachments/2009/04/18/4812_200904181312551.jpg 宽1000 高1270

flash素材

http://www.chuanxi.com.cn/images3/ypzx-2.swf

http://www.chuanxi.com.cn/images3/ypzx.swf

http://toumingfalsh.jimdo.com/swf/283460608.swf

http://www.xcwhw.cn/fla/jrxq/124.swf

http://toumingfalsh.jimdo.com/swf/283461108.swf

http://toumingfalsh.jimdo.com/swf/283456008.swf?2008-07-25