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

美丽伊甸园

maizi欢迎您

 
 
 

日志

 
 

HTML语言音画制作秘籍  

2010-02-19 09:47:41|  分类: 怎样装扮博客 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  HTML语言音画制作秘籍    来源蓝岸社区  匆匆  http://www.lananclub.com/home/space.php?uid=13723

  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表示没有边框。

 

三、 自己制作边框

 

选择好素材:

 

HTML语言音画制作 - 麦子 - 美丽伊甸园  HTML语言音画制作 - 麦子 - 美丽伊甸园  HTML语言音画制作 - 麦子 - 美丽伊甸园  HTML语言音画制作 - 麦子 - 美丽伊甸园  HTML语言音画制作 - 麦子 - 美丽伊甸园

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、直接插入法:
把鼠标放在网页上选中的图片上,右键点击,复制后直接粘贴到表格中。

 

                                                                 音画教材

 

HTML语言音画制作 - 麦子 - 美丽伊甸园

 

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>

 

 把红色文字部分换为准备好的插图代码,再切换回编辑状态看效果。

 

 

唯美音画教材

HTML语言音画制作 - 麦子 - 美丽伊甸园

 

小结:

 

从上两节课内容不难看出,在边框中,不管是文字还是图片,都是放在代码之间的。

三、在表格中插入音乐及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" 自动播放。truefalse
,则点击播放。

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/00046.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

 

感兴趣的朋友试试吧!

  评论这张
 
阅读(107)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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