HTML语言音画制作秘籍
HTML的英语全称为Hyper Text Markup Language,中文意思是超文本标识语言(简称为:超文本语言)。
它是计算机语言的最基础、最简单的部分。初学者一打开HTML制式,看到的往往是一堆代码,即便不晕也是丈二和尚,往往会在这个时期放弃学习,实际上你只要摸上规律,找到窍门,它是很简单的,因为它的组成是有定律的、是固定的。
准备工作:(了解最起码的html语法)
1.<p>.....</p>
<p>标志对是用来创建一个段落,在此标志对之间加入的文本 将按照段落的格式显示在浏览器上。另外,<p>标志还可以使用align属性,
它用来说明对齐方式,语法是<p align=center></p> align可以是Left(左对齐)、 Center(居中)和Right(右对齐)三个值中的任何一个。
</p>表示标志对中的文本使用居中的对齐方式。align 表示位置
2.<br>是一个很简单的标志,它没有结束标志,因为它用来创建一个回车换行.
3.<table>表格(我们可以把他理解为桌面或一个工作面)<table>开始,</table>结束
4. <tr>说明表格的一个行,表有多少行就有多少个<tr>(简单理解为横向)
5. <td>则填充(简单的理解为纵向)
6. cellpadding=文本与表框的距离用(使用数字)
7. <font></font>它可以对输出文本的字体大小、其语法通常由 size=字体大小号码) color =颜色常量名,face=选用的字体
8. <img>标志对的src属性赋值在图片中应用
9. <hr>标志是在Html文档中加入一条水平线,它可以直接使用
10. <body></body>是Html文档的主体部分
11. <bgcolor=...>背景颜色通常使用
<body bgcolor="....">就是主体背景颜色(通常我们说的大背景颜色)
12. <body text="....">设置主体文本颜色
<body link="...."> 设置链接颜色。
13. <border="边框大小">表示边框
14. <background=> 背景通常使用为背景图片的连接地址
15. <borderColorLight=#颜色>边框相临两边的颜色及内置相对两边的颜色(左相临及对应右相临)
16. <borderColorDark=#颜色>边框相临两边的颜色及内置相对两边的颜色
17. cellSpacing=边框与内置边框的宽度
18. width=宽度 height=高度
HTML语言音画最基本的构成是四个部分:
一、边框
二、图片(内容)
三、音乐
四、FLASH
边框的制作
一、制作边框(把以下代码先复制到源代码状态)
<TABLE cellSpacing=30 width="100%" background=http://www.ymy00.com/my/jc/yinhua/001.jpg>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=10 width="100%" borderColorLight=#000000 background=http://www.ymy00.com/my/jc/yinhua/002.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=10 width="100%" background=http://www.ymy00.com/my/jc/yinhua/001.jpg>
<TBODY>
<TR>
<TD>
<TABLE width="100%" background=http://www.ymy00.com/my/jc/yinhua/003.jpg border=0>
<TBODY>
<TR>
<TD>
<P><FONT color=#ffff00>伊甸园麦子欢迎您! </FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
效果如下:
|
二、边框的基本格式及说明
<table cellspacing=边框宽度 width="网页宽度" background=第一层边框图片地址>
<tr>
<td>
<table cellspacing=边框宽度 cellpadding=边框距离 bordercolordark=暗边框颜色 bordercolorlight=亮边框颜色 border=边框的厚度 width="网页宽度" background=第二层边框图片地址>
<tr>
<td>
<table cellpadding=边框距离 width="网页宽度" background=第三层边框图片地址>
<tr>
<td>
<table width="网页宽度" background=背景图片地址 border=边框厚度>
<tr>
<td>
<p>
<font color="#FFFF00">
唯美音画欢迎您!
</font>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
说明:
<table> :表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>。cellspacing :单元格间距,用来指定表格与各单元格之间的空隙。cellpadding :用来指定单元格内容与单元格边界之间的空白距离的大小。
width :表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。
background:表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。
<tbody> :表体的起始符。紧跟在<table>之后,表示表体开始。必须有结尾符</tbody> ,放在</table>之前。
<tr> :tr的作用是规定表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr> 。 <td> :td的作用是规定表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td> 。td与tr配合构成单元格。
border :此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。
三、 自己制作边框
选择好素材:
1、制作表格:
2、转化为HTML模式,查看代码:
<table borderColor= #cccccc cellSpacing=0 cellPadding=3 width="100%" bgColor= #ffffff border=2 heihgt="">
<tr>
<td> </td>
</tr>
</table>
3、修改边框颜色代码: 点击以下网页,选择颜色代码: http://www.ymy00.com/Article/ShowArticle.asp?ArticleID=563
代码如下:
<TABLE borderColor=#EE7600 cellSpacing=2 cellPadding=3 width="100%" bgColor=#FF82AB border=1>
<TR>
<TD>伊甸园麦子欢迎您
</TD>
</TR>
</TABLE>
4、添加背景图片:
(1)、第一层边框:
加上背景图片代码及地址,把border=1改为border=0,把cellSpacing=2的2修改得大一点,比如20,数越大,边框越宽
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" bgColor=#FF82AB border=0 background=http://www.ymy00.com/my/jc/yinhua/a001.jpg>
<TR>
<TD>唯美音画欢迎您!
</TD>
</TR>
</TABLE>
效果如下:
伊甸园麦子欢迎您! |
(2)、第二层边框:
把第一层的上半部分复制并修改:
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a002.jpg>
<TR>
<TD>
效果如下:
(3)、第三层边框:
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a003.jpg>
<TR>
<TD>
效果如下:
(4)、前三层边框:
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" bgColor=#FF82AB border=0 background=http://www.ymy00.com/my/jc/yinhua/a001.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a002.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a003.jpg>
<TR>
<TD>唯美音画欢迎您!
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
效果如下:
|
(5)多层边框:
第四层代码与第二层一样,第五层代码与第一层一样,第六层代码与第二层一样……(图片可以更换)
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" bgColor=#FF82AB border=0 background=http://www.ymy00.com/my/jc/yinhua/a001.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a002.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a003.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a004.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" bgColor=#FF82AB border=0 background=http://www.ymy00.com/my/jc/yinhua/a001.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a002.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a005.jpg>
<TR>
<TD>唯美音画欢迎您!
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
效果如下:
|
这是七层边框的制作。朋友们可以继续制作更多层边框,图片地址也可以自己更换。这样,各种漂亮的边框就制作成功了!
四、宽屏边框的的制作
为了网页的美观大方,制作边框时往往会选择宽屏,只要在第一层的<table>中,增加以下红色代码即可:
<table style="LEFT: 0px; WIDTH: 970px; POSITION: relative; TOP: 0px">
插入文字、图片、音乐
先制作一个边框:
|
一、在表格中添加文字
1、点击表格的中间处,可以看到光标在闪动,这时就能写入文字了,也可以直接复制粘贴文字。
2、选中文字
将鼠标放到表格中文字的最前面,点击,然后横拖鼠标选中文字,当字的背景颜色是蓝色时就可以操作了。
3、编辑文字
位置:可以点选居中、左齐、右齐图标。
字体:选择你喜欢的字体,有很多选项。
字号:数字越大字也就越大。
字体颜色:点开A自由选色,满意为止。
4、输入文字效果如下:
|
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" bgColor=#FF82AB border=0 background=http://www.ymy00.com/my/jc/yinhua/a001.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a002.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a003.jpg>
<TR>
<TD><p align="center"><font color="#FF0000">音画教材</font></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
二、在表格中插入图片
1、直接插入法:
把鼠标放在网页上选中的图片上,右键点击,复制后直接粘贴到表格中。
|
2、用编辑器插入法: 把鼠标放在网页上选中的图片上,右键点击,点属性,复制图片的地址,在编辑器里点开“插入图片”图标,将复制过的地址粘贴到信息栏里,按确定。
3、源代码状态下插入法: 插图的代码是:
<img border="0" src="图片地址">
具体方法:
(1)、用记事本准备好插图代码:
(2)、在表格准备插入的位置输入“图片”:
|
(3)、切换到源代码状态:
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" bgColor=#FF82AB border=0 background=http://www.ymy00.com/my/jc/yinhua/a001.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a002.jpg>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" border=0 background=http://www.ymy00.com/my/jc/yinhua/a003.jpg>
<TR>
<TD><p align="center"><font color="#FF0000">音画教材</font>
<p align="center"><font color="#FF0000">图片</font></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
把红色文字部分换为准备好的插图代码,再切换回编辑状态看效果。
|
小结:
从上两节课内容不难看出,在边框中,不管是文字还是图片,都是放在代码之间的。
三、在表格中插入音乐及flash
1、常用播放器:
<EMBED height=200 src=音乐文件地址 type=audio/x-pn-realaudio-plugin width=200 autostart="true" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1">
说明:
一般用来插入mp3、rm、ra、ram、asf、mid等音乐文件,如果要隐藏播放器,把width和height的数值改成0或者1就可以了。
autostart="true" 自动播放。true改false,则点击播放。
2、隐藏播放器:
<embed src=音乐地址 autostart=true loop=true hidden=true type=audio/mpeg>
说明:
loop=true 自动播放,改false则反之。
hidden=true 隐藏播放器,改false则反之。
3、插入背景音乐:
<bgsound src="音乐文件地址" loop=3>
说明:
一般用来插入wav、wma、mid、mp3等格式的音乐文件。
loop=3 播放三次
loop=infinite 网页隐藏时音乐暂停
4、插入flash:
<EMBED height=300 src=FLASH地址 type=audio/x-pn-realaudio-plugin width=550 autostart="true" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1">
|
代码如下:
<TABLE borderColor=#ee7600 cellSpacing=20 cellPadding=3 width="100%" bgColor=#ff82ab background=http://www.ymy00.com/my/jc/yinhua/a001.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ee7600 cellSpacing=1 cellPadding=3 width="100%" background=http://www.ymy00.com/my/jc/yinhua/a002.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ee7600 cellSpacing=20 cellPadding=3 width="100%" background=http://www.ymy00.com/my/jc/yinhua/a003.jpg border=0>
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://www.cn486.com/flashqq/zqqt/renwu/00006.swf width=550 height=300 type=audio/x-pn-realaudio-plugin autostart="true" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
四、总结:
学完以上内容,
已经可以制作一个漂亮的音画作品了。
制作步骤如下:
1、制作边框
2、制作文字内容
3、插入美图
4、添加音乐或flash
感兴趣的朋友试试吧!
评论