美丽伊甸园

maizi欢迎您

日志

关于我

麦子-雪晨

微 maixuechen

文章分类

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

边框的制作

一、制作边框（把以下代码先复制到源代码状态）

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<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>

效果如下：

伊甸园麦子欢迎您！

二、边框的基本格式及说明

<tr>

<td>

<tr>

<td>

<tr>

<td>

<tr>

<td>

<p>

唯美音画欢迎您！

</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语言音画制作 - 麦子 - 美丽伊甸园

1、制作表格：

2、转化为HTML模式，查看代码：

<tr>

</tr>

</table>

3、修改边框颜色代码：点击以下网页，选择颜色代码： http://www.ymy00.com/Article/ShowArticle.asp?ArticleID=563

代码如下：

<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）、第三层边框：

效果如下：

（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、输入文字效果如下：

音画教材

二、在表格中插入图片

1、直接插入法：
把鼠标放在网页上选中的图片上，右键点击，复制后直接粘贴到表格中。

音画教材

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

2、用编辑器插入法：把鼠标放在网页上选中的图片上，右键点击，点属性，复制图片的地址，在编辑器里点开“插入图片”图标，将复制过的地址粘贴到信息栏里，按确定。

3、源代码状态下插入法：插图的代码是：

具体方法：

（1）、用记事本准备好插图代码：

（2）、在表格准备插入的位置输入“图片”：

音画教材

图片

（3）、切换到源代码状态：

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

唯美音画教材

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" 自动播放。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">

代码如下:

四、总结：

学完以上内容，

已经可以制作一个漂亮的音画作品了。

制作步骤如下：

1、制作边框

2、制作文字内容

3、插入美图

4、添加音乐或flash

感兴趣的朋友试试吧!

评论这张

转发至微博

阅读(248)| 评论(2)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_080067084085086068085082083095085087086064085087080064',
              blogTitle:'HTML语言音画制作秘籍',
              blogAbstract:'<P style=\"TEXT-INDENT: 2em;\"  \><FONT size=\"4\" \></FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT size=\"4\" \>  HTML语言音画制作秘籍    </FONT\><FONT color=\"#ff0000\" size=\"5\" \>来源<A rel=\"nofollow\" href=\"http://www.lananclub.com/main.php\"  \>蓝岸社区</A\> </FONT\><FONT size=\"4\" \> 匆匆  <A rel=\"nofollow\" href=\"http://www.lananclub.com/home/space.php?uid=13723\"  \>http://www.lananclub.com/home/space.php?uid=13723</A\></FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT size=\"4\" \>  HTML的英语全称为Hyper Text Markup Language，中文意思是超文本标识语言（简称为：超文本语言）。</FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT size=\"4\" \>  它是计算机语言的最基础、最简单的部分。初学者一打开HTML制式，看到的往往是一堆代码，即便不晕也是丈二和尚，往往会在这个时期放弃学习，实际上你只要摸上规律，找到窍门，它是很简单的，因为它的组成是有定律的、是固定的。</FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT size=\"4\" \> </FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT size=\"4\" \>准备工作：（了解最起码的html语法）</FONT\></P\>',
              blogTag:'',
              blogUrl:'blog/static/11731163201011994741844',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317262455670,
              publishTime:1266544061844,
              permalink:'blog/static/11731163201011994741844',
              commentCount:2,
              mainCommentCount:2,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'微   maixuechen',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/11731163201011994741844">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

美丽伊甸园

导航

日志

HTML语言音画制作秘籍

历史上的今天

最近读者

热度

评论

页脚