[09/05][教程]音画贴制作从入门到精通教程

happy-yan 发表于 2007-9-5 10:41:59

<table borderColor=B3E0FF width="98%" border="0" align="center" cellpadding="4" cellspacing="0"><tr><td>

手工制作音画贴简易教程（一）
 
音画贴，顾名思义就是有图片和音乐的BBS帖子。当然有些音画贴里还可以显示Falsh动画和动态样式文字。因为Falsh动画种往往已经包含了画面配音（音乐或歌曲），所以，如果在帖子里引用显示falsh动画，则无需在帖子里另外包含音乐或歌曲文件了。
 
音画贴的基本要素是图片、音乐和文字，其中，除了文字，图片和音乐这两个要素一般都是以文件的形式存在的。所以在制作音画贴的时候，只需要在特定的显示位置引用图片或音乐文件的地址（URL）及文件名就行了。文字可以在利用图像文件编辑器加工处理图片时叠加到图片上，使图片变成有文字的图片；而不需要放到图片里的文字，则可以直接写在帖子里。
 
在BBS上发表自己手工制作的音画贴，必须要用HTML源代码的编辑状态和提交方式来实现，如果BBS没有提供使用HTML源代码编辑和提交帖子的功能，则无法发表手工制作的音画贴。
 
西陆网站的所有论坛都支持HTML源代码编辑和提交帖子，还有现在流行的大多数动网论坛也支持HTML源代码编辑帖子，所以，学会手工制作音画贴，一般情况下可以在网络上绝大多数的论坛里发表自己的音画贴作品。当然，也可以制作出样式各异的图文网页。
 
『每一课程两题』
 
第一题、如何让帖子内容在网页里居中显示？ <DIV align=center><CENTER>要显示的图片或文字</CENTER></DIV>
 
<DIV>名叫“定位标识符”，它有一个属性叫align，将这个属性设置成center或者middle，被标识的网页就会显示在浏览器的中间（即左右居中显示）位置。</DIV>表示被控制居中显示的效果到此结束。也就是说<DIV align=center>表示开始居中显示，而</DIV>表示结束居中显示。 语法实例：<DIV align=center>要居中显示的图片或文字</DIV>
 
<CENTER>名叫“居中控制标识符”，它没有属性，默认将被标识的网页要素显示在页面的中间（即左右居中显示）位置。</CENTER>表示被控制居中显示的效果到此结束。也就是说<CENTER>表示开始居中显示，而</CENTER>表示结束居中显示。 语法实例：<CENTER>要居中显示的图片或文字</CENTER>
 
备注： <DIV>和<CENTER>都是HTML标识语言（用来制作网页的一种明文语言代码）的基本标识符，使用的基本原则如下： 1、不区分大小写，大写与小写是等价的。<DIV>等同于<div>。 2、必须成对使用，既要标识显示效果开始，也要标识显示效果结束。被标识的要素，放在开始和结束之间。<DIV align=center>要居中显示的图片或文字</DIV> 3、不同的标识符可以嵌套使用，但不能相互骑跨。<div><center></center></div>是正确的，而<div><center></div></center>是错误的。错误的标识，会加倍消耗内存资源，影响网页显示或刷新的速度。
 
第二题、如何在帖子里显示图片？ <IMG src=URL>
 
<IMG>名叫“图片标识符”，是专门用来在网页里显示图片的标识符。它最重要的一个属性是src，应该给这个属性设置图片的位置，“URL”表示一个有效的包含文件名的网络地址，也就是图片文件在网络上所在的位置。 例如：http://image2.sina.com.cn/sms/sinapic/27124406-index.gif，这是新浪网首页上的一张图片的URL，这个图片的文件名是“27124406-index.gif”。如果你想在帖子里显示这个图片。 语法实例：<IMG src=http://image2.sina.com.cn/sms/sinapic/27124406-index.gif>
 
<IMG>这个标识符还有若干个属性，不同的属性用来修饰和控制图片显示的效果，最常用的典型属性是： border=n（n代表任意一个数值） 该属性用来给图片设置显示边框，border=0表示图片无边框显示。n的数值大小决定图片显示时边框的宽度。 如：<IMG border=2 src=http://image2.sina.com.cn/sms/sinapic/27124406-index.gif> width=n（n代表任意一个数值，最大值不应超过显示器当前分辨率的最大象素） 该属性用来给图片设置控制显示的宽度，width=500表示图片显示的宽度为500象素。 如：<IMG width=100 src=http://image2.sina.com.cn/sms/sinapic/27124406-index.gif>
 
 备注： 1、一个有效的URL应该包括正确的网络地址（位置）和图片文件名。如果用正确的标识个语法，在网页上显示出来的却是一个小叉叉（俗称胶布），说明src属性的URL不是有效的。 2、标识的属性应该写在开始标识符的尖括弧，若有多个属性，可以连续写入，但属性与属性之间，应该用空格来间隔。如：<IMG src=URL border=0 width=300> 3、URL指向的图片位置必须是网络上的，所以加工之后的图片必须首先上传到网上才能引用。“src=d:/myimage/123456.gif”这个地址肯定是错误的，因为你的电脑的D盘，在网上是无法共享的，如果图片还在你的电脑硬盘里，指向你电脑磁盘的URL就是无效的。
 
 总结： 在帖子里发一张图片，并且让图片显示在网页居中的位置。 源代码如下： <DIV align=center><CENTER> <IMG src=http://image2.sina.com.cn/sms/sinapic/27124406-index.gif> </CENTER> </DIV>
 

 

</td></tr></table>

[ 本帖最后由 happy-yan 于 2007-9-5 11:03 编辑 ]

happy-yan 发表于 2007-9-5 10:42:55

<table borderColor=B3E0FF width="98%" border="0" align="center" cellpadding="4" cellspacing="0"><tr><td>

手工制作音画贴简易教程（二）
网络上90％的页面都是使用HTML标识语言编写的，因为HTML是一种明文标识语言，所以，一个网页文件往往也就是一个纯文本文件。 我们只要学会一些HTML标识符（全部不超过130个标识符），就可以用Windows的记事本编写网页程序。用“记事本”制作网页是最简单、最原始的网页制作技术，同时也是最高水平的网页制作技术（因为能够用记事本写HTML程序，意味着你对标识语言已经烂熟于心）
用记事本制作网页的技术，不妨从如下几个步骤开始： 1、在你的C、D、E、F任意个一个磁盘分区上创建一个工作目录（文件夹），例如：MybbsWord 2、打开Windows记事本，写好一个制作帖子的源代码。将代码以文件形式保存到MybbsWord文件夹里 3、保存文件时，将代码文件保存为HTM格式，比如，欲将文件命名为a07408001，则保存的文件名为a07408001.htm 4、如果你不慎将文件保存为text格式，只需要将文件的扩展名（后缀），修改为“.htm”就可以了。 5、htm格式的文件，俗称超文本，可以用记事本打开阅读源代码，当然也可以继续编辑。 6、用鼠标双击你已经保存的a07408001.htm，浏览器会自动打开显示，这使得你能够在发表帖子之前，就能在你的电脑上看到帖子的效果。
『每一课程两题』
第一题、如何在网页里画表格，并利用表格组织显示图片和文字？ 用HTML标识语言代码制作的表格是网页上划分栏目区域，分类文字内容、拼嵌异形图片最基本的要素。画表格是制作网页必不可少的技巧，几乎所有结构复杂、图文并茂，栏目众多，内容庞杂的网页都少不了用表格来实现。音画贴里华丽的边框正是用表格来实现的。
表格一般有若干行和若干列构成的方格组成，所以表格也称“网格”。和我们在实际生活中用到的表格（例如：课程表）一样，文字是应该写在方格子里的，表格的“方格子”，叫做单元格，每个单元格都是一个容器，其它所有的网页元素都可以放在这些容器中，也就是说，你可以把图片、文字、音乐、动画全都安排显示在指定的单元格里。你甚至可以在一个表格的某个单元格里，再装入另一个表格，这就叫“嵌套表格”，表格是可以层层嵌套的，很多音画贴的外围边框，正是一层套一层的表格做出来的。 画表格的语法实例： <TABLE> <TR><TD>第一行第一列</TD><TD>第一行第二列</TD></TR> <TR><TD>第二行第一列</TD><TD>第二行第二列</TD></TR> </TABLE> 这是简单的一个两行两列的表格。 最常见的音画贴所使用的表格，一般都是只有一行一列的矩形框，或是只有一列的多行表格。
<TABLE>这个标识符用来定义表格，要特别注意：这个标识符一定要成对，而且嵌套表格时不能骑跨，否则将得不到预想的显示的效果。<TABLE>标识定义表格的开始，</TABLE>标识定义表格的结束。表格的行和列，必须包含在<TABLE>和</TABLE>之间。 <TABLE>这个标识符有很多属性，利用其不同属性可以设置表格的样式，比如：表格是否有边框，边框线的粗细，背景颜色、背景图案、表格的宽度（象素），表格内元素与表格边框的距离，表格与外层容器之间的距离等等。
border=n（n代表任意一个数值） 该属性用来定义表格的边框线粗细，n为零表示该表格没有边框（或不显示边框） 例如：<TABLE border=1>
width=n（n代表任意一个数值，最大值不应超过网页宽度的最大象素） 该属性用来定义表格的宽度。定义表格的高度可以使用height=n，原理一样。如果想定义一个宽度600象素的表格如下 例如：<TABLE border=1 width=600>
bgcolor="X" 该属性用来定义表格的背景颜色。“X”表示一个16进制的数字（0－9的数字和a-e的字母），例如：feb034。fe代表红色值，b0代表黄色值，34代表蓝色值，三种不同的单元色，最后混合成一个复合色。 使用16进制颜色代码，一般要在颜色代码前加上一个“#”号，例如：bgcolor=#ff00de。 有些单色可以用英文单词定义，red（红色），blue（蓝色），yellow（黄色），green（绿色），例如：bgcolor=yellow 颜色的定义，还能使用VB脚本语言的函数，例如：bgcolor=RGB(255,128,32),RGB()是一个调色函数，括弧内的三个参数分别代表红绿蓝三种颜色的色度值。 定义表格背景颜色最常用的语法是bgcolor=#000dea 例如：<TABLE border=1 width=600 bgcolor=#00ffff>
cellSpacing=n （n代表任意一个数值） 该属性用来设置表格单元格中内容与表格边框的距离，n为零表示允许单元格里的元素靠近边框。 cellPadding=n（n代表任意一个数值） 该属性用来设置表格与外层容器的边距，n为零表示表格没有边框距离。 cellSpacing和cellPadding是制作音画贴最重要的两个属性。也就是说音画贴里的表格必须有这两个属性。 例如：<TABLE cellSpacing＝3 cellPadding＝12 border=1 width=600 bgcolor=#00ffff>
<TR>和</TR>定义表格的行，一对定义一行，可用多次重复定义任意数量的行。画表格的时候，一定要先分“行”，再分“列”。 <TR>这个标识符，也有属性，但没有必要使用。因为对表格单元格的样式修饰，可以通过<TD>的属性设置来实现。
<TD>和</TD>定义表格的列，一对定义一列，可用多次重复定义任意数量的列。表格分列的原则是，必须要在“行”里分列，通俗地理解就是表格外框包含行，行里包含列，最后画成表格。 前面说过，表格的单元格是用来装入网页元素的容器，而容器装东西的位置就是<TD>与</TD>之间的位置。 实例一：在一个表格（矩形框）里显示一张图片。 <TABLE border=5 width=600 bgcolor=#00ffff> <TR><TD><img src=http://pic.tiexue.net/pics/2007_4_7_80196_5180196.jpg border=0></TD></TR> </TABLE> 实例二：在一个表格（矩形框）里显示一句文字。 <TABLE border=5 width=600 bgcolor=#00ffff> <TR><TD>在这里写上要显示的文字</TD></TR> </TABLE>
 备注： 1、如果是一个多行多列的表格，第一行定义了多少列，以下的各行，一定要有相同数量的列，否则表格显示出来就不规则。 2、在<TD>里设置align和valign两个属性，可以控制单元格里内容的相对位置，align=center（左右居中），valign=middle（上下居中）。 3、可以单独设置一个单元格的背景颜色，例如：<TD bgcolor=blue>或<TD bgcolor=#cccccc> 4、可以设置一个单元格的尺寸（会影响别的单元格的尺寸），例如：<TD width=100 height=40>（宽度100象素，高度40象素） 5、在表格中嵌套表格，就是在单元格里再定义一个表格。实例如下： <TABLE cellSpacing＝3 cellPadding＝12 border=1 width=600 bgcolor=#00ffff> <TR><TD valign=middle align=center> <table cellSpacing＝3 cellPadding＝2 width=90% bgcolor=#000adc border=1> <tr><td> ......在这里还可以嵌套表格 </td></tr> </table> </TD></TR> </TABLE>
第二题、如何实现动态文字之一（走马灯效果演示） 语法：<MARQUEE>需要演示的走马灯文字和图片</MARQUEE>
<MARQUEE>这个标识符，用来定义网页元素走马灯演示的动态效果，该标识必须成对使用，如果没有</MARQUEE>结束定义，<MARQUEE>之后的所有网页内容会全都到处乱跑。 <MARQUEE>的主要属性及其使用方法如下： direction=M 该属性用来定义走马灯的方向，“M”是一个代表方向的关键字。 direction=up（从下向上），direction=left（从右向左），direction=right（从左向右） scrollDelay=n（n代表任意一个数值） 该属性用来设置走马灯的演示速度，即一次移动和下一次移动之间的时间间隔，数值越大，移动速度越慢。 scrollAmount=n（n代表任意一个数值） 该属性用来设置走马灯的演示步长，即一次移动多少距离，例如：scrollAmount=3表示一次移动3象素的距离。 width=n 该属性用来设置走马灯演示区域的宽度，该宽度如果超过了网页的宽度，则无效。 height=n 该属性用来设置走马灯演示区域的高度，如果是从下网上演示字幕，设置适当的区域高度很重要。 完整的语法实例： <MARQUEE scrollAmount=1 scrollDelay=150 direction=left width=520 height=28> 在这里写上你要演示的所有的文字....... </MARQUEE>
总结： 在帖子里发一张图片，使用嵌套表格给图片加上边框，并且给图片配上走马灯注释文字。 <DIV align=center><CENTER> <TABLE cellSpacing＝3 cellPadding＝12 border=1 width=600 bgcolor=#00ffff> <TR><TD valign=middle align=center> <table cellSpacing＝3 cellPadding＝2 width=90% bgcolor=#000adc border=1> <tr><td> <IMG src=http://image2.sina.com.cn/sms/sinapic/27124406-index.gif> </td></tr> <tr><td height=28> <MARQUEE scrollAmount=2 scrollDelay=30 direction=left width=520 height=28>颐和深锁亡国恨，玉兰出墙春眠惊</MARQUEE> </td></tr> </table> </TD></TR> </TABLE> </CENTER></DIV> 
</td></tr></table>

[ 本帖最后由 happy-yan 于 2007-9-5 10:58 编辑 ]

happy-yan 发表于 2007-9-5 10:50:44

<table borderColor=B3E0FF width="98%" border="0" align="center" cellpadding="4" cellspacing="0"><tr><td>

问：bgcolor=#00ffff 定义的是背景颜色吧？ 答：是的。可用此方法定义整个网页的背景颜色；也可定义整个表格的背景颜色；也可定义表格中任意单元格的背景颜色。 举例如下： <BODY bgcolor=#00ffff> <TABLE bgcolor=#00ffff> <TD bgcolor=#00ffff>
问：边框的颜色是如何定义的呢？什么情况下是自动添加的？ 用bordercolor=#ee00cc设置表格边框的颜色。如果没有自定义边框颜色，浏览器会默认表格的边框颜色为灰色（#cccccc）。 如果设置了表格的边框颜色，而没有设置边框的宽度（边框线粗细），则边框颜色不可见。 例如：<TABLE border=0 border=#ff0000>。该定义中，表格的边框颜色不可见。
问：你制作的帖子的多层外框的颜色是如何定义的呢？ 答：肯定不是使用定义表格边框颜色来实现的。事实上几乎很少使用定义表格边框的方法实现特效。
我定义音画贴装饰框的原理是这样的： 1、用平铺的图片作表格的背景，或者给表格设置背景颜色。 2、在表格中嵌套表格（矩形框里套矩形框）。因为里面的表格比外面的小，居中后，四周会露出外层表格的背景图案或背景颜色。 3、层层嵌套。多层表格，只有最里层的表格是用来显示帖子内容的，外层的表格都是装饰。
问：怎样设置表格和表格中图片宽度的像素值？ 答：表格的宽度要在<TABLE>标识中设置，而图片的宽度要在<IMG>标识中设置。当图片的宽度像素值大于表格的宽度像素值时，图片会撑大表格的单元格，表格的宽度会被自动调整到大于或等于图片宽度；如果图片的宽度像素值小于表格，并且小于表格单元格的宽度像素值，图片周围就会有空白区，或者露出表格或表格单元格的背景。 设置表格的宽度：<table border=0 width=600> 设置图片的宽度：<img src="图片地址" width=580>
 问：如果我要显示背景颜色，如何设定这个值？ 答：设定背景的颜色，参见第一个问题的答案。如果要显示出背景的颜色，不要在背景前放太大的图片即可，文字时不会遮盖掉背景的。
----------------------------- 关于笔记的批注 ----------------------------- 第一课：居中显示图片 1、<DIV align=center><CENTER>：<IMG width=100 border=n src=要显示的图片地址> </CENTER></DIV> 其中 width=100为表格的象素宽度；border=n为边框的宽度，为0则无边框
批注： 1、<CENTER>：。这里的“:”是多于的，也是错误的。页面上会显示出一个“：” 2、width=100 border=n 你这是定义图片宽度和图片边框的，不是定义表格的。 ----------------------------   第二课：设置边框、滚动文字显示 1、<TABLE> </TABLE>定义表格（几乎所有标识都要成对使用）。 2、在<TABLE>中，用border=n定义表格边框宽度、width=n定义表格宽度、height=40定义表格高度、bgcolor="X"定义背景颜色
批注：完全正确 ---------------------------- cellSpacing=n定义图片与边框的距离，cellPadding=n定义表格与外容器的边距。不懂
批注： 在表格的单元格里放置图片或文字，如果不希望图片或文字靠边（与表格线保持一定距离） cellSpacing=n 在表格中嵌套表格（方框里面套方框），如果不希望两个方框重叠，或希望里面的方框与外面的方框之间留有空白（明显的看出大框里面有小框） cellPadding=n ----------------------------- 3、<TR>和</TR>，定义表格的行。如你制作的《颐和园春色》就是定义了三行是吧？第一行是颐和园春色的标题行、第二行是诗、第三行是图片。
批注： 不是三行，是一行。在一行里使用了分了三个段落，每个段落里又用了一个透明的表格 <table><tr><td></td></tr></table> ----------------------------- 4、<TD>和</TD>定义表格的列，你的《颐和园春色》就是一列对吧？
批注：完全正确 一般的音画贴都是只有一列的表格。除非你想要左边图片，右边文字的排版效果，这就需要两列。 ------------------------------
5、小节：在居中显示一张图片、边框粗细为5、象素为600、边框颜色为灰色的代码： <TABLE border=5 width=600 bgcolor=#00ffff> <TR><TD><img src=图片地址 border=0></TD></TR> </TABLE> 问题：border=5 是边框的粗细吗？border=0是什么意思？
批注： border=5 是表格边框线的粗细 border=0 是设置表里显示的图片不带边框 ------------------------------
6、在<TD>中可以设置表格内容的相对位置：align=center（左右居中），valign=middle（上下居中）。 问题：你的代码 <TABLE cellSpacing＝3 cellPadding＝12 border=1 width=600 bgcolor=#00ffff> <TR><TD valign=middle align=center> <table cellSpacing＝3 cellPadding＝2 width=90% bgcolor=#000adc border=1> <tr><td> ......在这里还可以嵌套表格 </td></tr> </table> </TD></TR> </TABLE> 意思是：在一个图片与边框的距离为3、与外容器的边距为12、边框宽度为1、象素宽度为600、背景颜色为#000adc的表格内嵌套一个左右上下居中的、图片与边框的距离为3、与外容器的边距为2、象素宽度为90％、背景颜色为#000adc、边框粗细为1的表格。同时在<tr><td> ......在这里还可以嵌套表格 </td></tr>之间可以任意嵌套其他各种各样的表格内容 我理解的对吗？
批注：非常正确（如果你的表达是正确的）。
问题：width=90%中90％是什么意思？我理解是图片的大小占表格的实际的大小的90％。
批注： 代码中没有<IMG>这个标识，就说明没有图片。 <table cellSpacing＝3 cellPadding＝2 width=90%> width=90%是定义套在表格里面的表格的宽度，只能占外层表格单元格（容器）宽度的90% 用百分比设置宽度和高度的像素值，这叫“相对定义”，外面必须有参照容器。 ----------------------------
7、动态显示文字： <MARQUEE>需要演示的走马灯文字和图片</MARQUEE>； <MARQUEE scrollAmount=1 scrollDelay=150 direction=left width=520 height=28> 添加一段、一次移动和下一次移动之间的时间间隔为150、从左向右移动、宽度为520、高度为25的表格。        批注： 不是一段文字，应该是一串文字。 方向应该是从右向左。 宽度和高度是“指走马灯的显示区域”，不是指表格（代码中没有<table>就说明没有表格） -----------------------------
问题：1、scrollAmount=n  一次移动多少距离, 没懂 回答：你走路的时候，一步可以跨一尺，也可以跨二尺，也可以碎碎步踩蚂蚁，所以叫“移动步长”
问题：2、如果要从下往上滚动显示一首四行的诗如何设置？ 回答： 设置显示区域时，留出足够的高度，height=n（n值要大一点哟） 设置走马灯的运动方向为从下向上，direction=UP 先将你的诗歌写成一行（其实是一串），然后在每一句的后面加上 （因为 叫做换行标识符） 备注： 是不成对使用的，只需要写在换行的位置，一个 还一行，有几个就换几行。 
</td></tr></table>

happy-yan 发表于 2007-9-5 10:56:27

<table borderColor=B3E0FF width="98%" border="0" align="center" cellpadding="4" cellspacing="0"><tr><td>

手工制作音画贴简易教程（四）
虽然是简易教程，涉及的内容和技巧却一点都不能简化。过于简化的结果，就是让从头开始才认识HTML标识符的人消化不良。但若不简化，时间和效率就成很问题，既不能在预定的时间内完成“速成”的计划，想必也会吓住对HTML超文本制作未入门的人，使其看着那些乱七八糟的“洋代码”望而却步。
网络论坛里的音画贴，看上去很华丽，再配上优美的音乐和煽情的文字，令观众和读者耳目一新，甚至为之有所感触。其实，这不过是音画贴作为一种稍具艺术性的表现方式，充分利用了人的视觉、听觉感知的同时，激发其自我想象力，以达到魅惑人心的目的。师傅龙在田野曾告诉俺：“音画贴不过是网上的闲情男人用来泡妞的一种庸俗老套的把戏”，这句话虽然有点偏激，但还是有一定道理的。有五年以上网络经历的人，大概都记得上个世纪八九十年代，刚有了OICQ和EMaill的那些年，网络上到处充斥着各式各样的贺卡，逢年过节、网友生日，一张制作精美的虚拟卡片，被你发给他，又被他转发给她。最后因为过于泛滥，其中的情色内容和形式成为污染网络环境的公害，大量无效重复的信息成为消耗网络资源的垃圾。 曾有人说“第一个用花儿比喻女人的人是天才，第二个人是庸才，第三个人是蠢才”。音画贴大概就是第三代的图文卡片。
制作音画贴在很大程度上，犹如女人化妆。与其说会化妆的女人知道怎样用脂粉使自己变得更加漂亮，还不如说会化妆的女人其实知道不化妆的自己是啥样子。铅华褪尽，显露本相，若把音画贴华美的装饰去掉，剩下的信息有多少精髓呢？
构成音画贴内容的三大要素是图片、文字和音乐，这些也应该是真正体现音画贴创作者聪明才智的要素，而制作页面的技巧，作为实现三大要素可视、可听、可读的形式，倒是应该位居第四。如果从这个意义上来说，你只要学会了在网络上显示图片、排版文字，播放音乐，就意味着已经掌握了制作音画贴的实质性技术。
令人遗憾的是，让人不得不首先花费最多时间和精力的，偏偏就是音画贴这种表现形式。制作音画贴的技巧越来越成了一种可以在人前炫耀的“技术”，而音画贴里的内容反倒被忽略或视若无睹。
『每一课程两题』
（一）如何让文字样式各异，大小随意。 语法：被自定义字体样式、大小和特定颜色的文字 标识符用来定义文字的样式、文字的大小和颜色，该标识必须成对使用。如果只有定义而没有结束定义，将导致定义之后的所有文字继承被自定义的特性。
标识有三个基本属性：
face="字体"  该属性用来定义文字的字体样式，字体名称必须是服务器上的操作系统可识别的。一般操作系统可识别的字体名称是黑体、宋体，仿宋_GB_2312，楷体_GB2312和隶书，默认字体是汉字为“宋体”。英文字母为“Arial”。假如设置face="华文彩云"，必须要保证西陆论坛的Web服务器的系统里有这个字体，否则这个定义就是无效的，文字将被以系统默认的字体（宋体）显示出来。
size="字号"  该属性用来定义文字的字号大小，计算机上可显示的中文字大小有三种标准，一种是西方人的标准“磅”，一种是与操作系统和显示其分辨率无关的“像素”，还有一种就是中国人的标准“号”。习惯上采用中国标准，用0－9这十个数字代表字号，“0”号字最大，依次减缩，“9”号字最小。但是西陆论坛的文字编辑器并不采用这个标准，在西陆论坛里发贴，采用“增强模式”编辑文字，允许设置文字大小，但只提供了1－7这七个数字，而且是数字越大字号越大。
color="颜色"  该属性用来定义文字的显示颜色。颜色代码与设置网页背景和表格背景的代码一样。 color=Red,color=#ffff00,color=RGB(0,255,255)，这三种设置方法都是合法的。
现在的网页制作技术和规范日益国际标准化，几乎所有的网站都开始使用CSS样式标准，制作网页的人最深切的体验便是，在自己的电脑上设置
好的字体样式和大小，将网页上传到网络上浏览时居然面目全非，原来设置的字体样式和大小全都变了样子。这正是因为非标准化的设置被CSS样式脚本所覆盖的结果。
所以，学会用CSS样式标准定义字体样式和大小也很有必要 语法：style="font-family:方正琥珀;font-size:18px;font-color:#000000"> 设置网页字体的CSS样式标识也有三个基本属性，style=""这是基本语法。在""里面设置属性的语法是： font-family:方正琥珀;    font-size:18px; font-color:#000000; 每个属性不用“＝”赋值，而是用“:”赋值，属性之间不用空格间隔，而是用“;”间隔或结束。其中的“size:18px”表示文字的尺寸是18像素（利用像素控制文字的大小，可以在屏幕上显示非常大的文字，比如：size:180px）,如果写成“size:18p”,则表示文字的大小是18磅。 定义文字的CSS样式标识，只能写入<BODY>、<TD>、和等标识符，作为其属性使用，而不能单独使用定义文字样式： 例如： <BODY style="font-family:方正琥珀;font-size:18px;font-color:#000000;"> <TD style="font-family:方正琥珀;font-size:18px;font-color:#000000;"> 以上四个定义，都是合法的。 定义文字的CSS样式标识，还可以在文字定义标识中与其它属性混合使用。 例如：这个定义也是合法的。
附加：音画贴里的文字排版的问题。 音画贴里文字主要有两种排版形式，一种是诗歌，还有一种是短文。无论哪种排版形式，都需要划分段落、换行和低格缩进。
这一对标识符，用来划分文章或诗歌的段落。语法：一段文字。在分段标识符里可以设置段落文字的行距，是得整篇文字显得更美观，不拥挤。语法：，“150％”表示文字的行距相当于文字行高度的一倍半。
 这是一个单独使用的标识符，用来将文字换行。用法：只需要在一行文字的最后写一个 。 还能多次连续换行，写几个 就换几行，有时候可以用 代替划分文章的段落。
 这也是一个单独使用的特殊标识符，它代表一个字节的空格，因为一个汉字等于两个字节，文章段落中需要首行缩进两个汉字是，可使用连续的四个“ ”。
 （二）如何在网页中播放音乐 语法：<EMBED src="音乐文件的地址" type="audio/mpeg" autostart="1" showstatusbar="0" loop="true"></EMBED> <EMBED></EMBED>这一对标识符，用来在网页上播放音乐或Flash动画。但是播放那个音乐和播放动画使用的属性是不同的。 播放音乐的<EMBED>标识符无需先用<OBJECT>控制，就可在网页里使用。事实上可将该标识符看作是一个媒体播放器，它的基本属性如下：
src="音乐文件的地址"  用src属性设定音乐文件在网络上所在的真实地址（URL），一般是“域名+目录文件夹名称＋文件名”，引用地址的原则和方法与显示图片的语法是一样的。例如：<A href="http://jiangwenjun.vicp.net/mymusic/qqlove.mp3">http://jiangwenjun.vicp.net/mymusic/qqlove.mp3</A>。其中“http://jiangwenjun.vicp.net”是域名地址，“mymusic”
是服务器域名下的文件夹名称，“qqlove.mp3”是音乐文件的名称，从该文件名的后缀看出，音乐文件的格式是mp3。 网络上的音乐文件有很多格式，常见的格式是：mp3、wav、wma、mid和rm，文件名的后缀就表示该文件的格式。Flash动画的格式是swf。
type="audio/mpeg" 该属性用来申明播放器的类型和播放模式，如果未申明播放器的类型，浏览器默认用“Microsoft Windows media player”播放音乐 其中的“audio/mpeg”表示，可支持播放的模式是“声音/视频流”。
autostart="1" 该属性用来设置播放器是否自动加载媒体文件，并自动开始播放。autostart="1" 表示自动开始，autostart="0"表示不自动开始（需要手动操
作才能播放，这需要用鼠标去点击媒体播放器面板上的播放按钮）autostart="1" 和autostart="true"是等价的。  
showstatusbar="0" 该属性用来设置是否显示播放器的操作工具栏或按钮面板。showstatusbar="0" 表示不显示，showstatusbar="1" 表示显示。
loop="true" 该属性用来设置是否自动循环播放，loop="true"表示允许自动循环播放，loop="false"表示不允许自动循环播放（只播放一遍就停止）。true
和false是浏览器支持的VB/VBS脚本语言的两个逻辑值“真”和“假”，逻辑值为“真”时，循环成立。
hidden="true" 该属性用来设置播放器在网页上（帖子里）是否可见，hidden="true"表示隐藏播放器，不使用该属性时，默认显示播放器。 有时候使用该属性无法隐藏掉播放器，是因为浏览器的安全设置限制了VB脚本的有效性。可以在<EMBED>标识符里使用设置播放器显示区域尺寸的方法隐藏掉播放器。如：width=0 height=0
隐藏播放器，播放背景音乐的实例： <EMBED src="音乐文件的地址" width=0 height=0 type="audio/mpeg" autostart="1" showstatusbar="0" loop="true"></EMBED>
<img border=0 alt="点击查看原图" style="CURSOR: hand" onclick="window.open(this.src);" onmousewheel="return bbimg(this)" onload="javascript:if(this.width>screen.width*0.7)this.style.width=screen.width*0.7;" src="http://www.xyhc.com/images/default/logo.gif">
</td></tr></table>

[ 本帖最后由 happy-yan 于 2007-9-5 11:00 编辑 ]

kittenmimi 发表于 2007-9-6 23:12:26

谢谢快乐 :(((( 

音画贴教程又开课了^_^ ers45:sw 

辛苦快乐53:)(

冷冰冰 发表于 2007-9-8 10:45:53

:)oo 好多看到头大了

南齐云 发表于 2007-9-9 03:24:07

好贴子，先收下慢慢学

happy-yan 发表于 2007-9-14 14:58:14

<table borderColor=B3E0FF width="98%" border="0" align="center" cellpadding="4" cellspacing="0"><tr><td>

手工制作音画贴简易教程-加入FLASH 
现在网络上的Flash动画空前盛行，随着动画制作工具软件的日

臻完善和制作技术的突飞猛进，现如今的Flash动画，已经

从最初的动态卡片逐渐演变成有形象、有剧情、有声音的卡通电影，大量的优秀

作品甚至被搬上了央视节目，其大受欢迎的程度一点都亚

于前几年风行一时的小品。因为flash一词有“闪电”的意

思，爱好或专业制作Flash动画的人，在网络上一直被称之为“闪客”。


我们见到的绝大多数Flash动画，都是使用著名的Macromedia公

司的Flash动画工具软件制作的（目前这个工具软件的最新

中文版本是Flash Max2004和Flash 8.0汉化版）。Flash动画文件是基于网络WEB

动画标准，并且能在浏览器中显示和运行的一种交互式矢

量图。“闪客”使用Flash，能够创建具有异常眩目的、可

任意改变显示尺寸的以及交互式导航界面、包含说明与其他奇特效果的动画文件

。  
因为Flash动画本身可以集成声音和画面，具有音画浑然一体的

特性，在论坛帖子里使用Flash动画，或直接借用此形式抒

发思想情感，或烘托气氛，或增强帖子华丽眩目的动态效果，有着独特的作用。


『每一课程两题

』
 （一）如何在帖子里

播放Flash动画电影。 简易

语法：<embed src="swfURL" quality="high" type="application/x-

shockwave-flash"></embed> <embed>和

</embed>这一对标识符，用来在网页上播放Flash动画片。这一对标识符也

是用来在网页里播放音乐文件的，所不同的只是标识符中

的属性及其设置不同。 基本属性设置： src="swfURL" 属性src用来引用flash动画文件在网络

上的地址。因为flash动画文件的格式特殊(文件名后缀一般都是swf)，这里的"swfURL"仅指flash动画文件的网络地址。 quality="high" 属性quality用来设置动画效果的分

辨率或清晰度，high表示高清晰度。 type="application/x-shockwave-flash" 属性type用

来设置播放器标识的类型，application/x-shockwave-flash表示当前播放类型是

flash动画。 如果需要设置动画演示画面的尺寸，可以增加设置width=n和

height=n这两个属性值。
事实上，在浏览器中显示flash动画文件需要另外

的专门程序来完成，浏览器本身无法解释flash的显示请求

。因此，这就需要访问网页的浏览者的电脑系统里（客户端），已预先安装并注

册过专门解释Flash的插件程序，如果客户端的系统中没有

播放flash的插件，可以在插入flash动画的网页上，强制浏览者自动

下载安装播放插件程序，以便达到让浏览者打开网页时，

flash动画就能显示出来的目的。
所以，在帖子里播放flash动画的源代码，还可以

扩展成下列实例： <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-

444553540000" codebase=<A href="http://download"><A

href="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c

ab#version=6,0,29,0">http://download</A>.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,

29,0</A> width=n height=n> <param name="movie"

value="swfURL"> <param name="quality"

value="high"> <embed src="swfURL" quality="high"

pluginspage="<A

href="http://www.macromedia.com/go/getflashplayer">http://www.macromedia.com/go/getflashplayer</A>" type="application/x-shockwave-flash" width=n

height=n"></embed></object>
在上述实例中，需要注意的事项：

 1、<object>和</object>标识符，包含

<embed>和</embed>这一对标识符 <object>标识中的

swfURL必须要与<embed>标识中的swfURL一致（即:使用同一个文件地址）

 3、<object>标识中的width=n和height=n的设置，必须要与

<embed>标识中的相同属性的值一致
 （二）如何利

用透明Flash给图片增加炫幻效果 目前的网络信息，主要通

过浏览器和HTTP协议显示或传递，其显示方式基本上都是平面的，只有个别的网

页采用了XML、DXML与CSS样式标准技术，利用<div>

标识符的定位功能，对网页上的信息元素实现了真正的分

称处理，使得网页变成了立体的信息容器。
在制作音画贴的网页设计，确实需要有分层显示的

效果，但是几乎所有的音画贴都不可能应用到XML之类前沿

技术，一是因为论坛不支持，二是因为音画贴这种形式已经非常落伍，很少再有

钻研这种淘汰技术的后备人力。
制作论坛音画贴的分层技术，主要是利用创建嵌套

表格的形式来实现的，但是这种分层只对于制作一个帖子

的精美边框才有用处。因为无论嵌套多少层表格，真正能够用来装入实质性内容

（文字、图片、音乐、动画）的只是最前面一层的表格的

单元格，在一种信息元素上面叠加另一种信息元素，几乎是不可能的。


但是，如果把图片作为表格

的背景，还是有限度地可以实现信息叠加。 例如： 1、在背景图片上叠加

文字 2、在背景图片上叠加图片 3、在背景图片上叠加动画 在

背景图片上叠加文字，不管文字是静态的，还是动态的，都没有问题。但是在背

景图片上叠加图片和动画就有了限制了。
可以在一个表格的单元格里，将一张图片设置为背

景，然后在该单元格中再插入一张图片，这就实现了在图

片上叠加图片，但是如果插入图片的背景不是透明的，就会出现图片遮盖掉背景

的现象，如一块膏药贴在背景上。所以要在图片背景上叠

加一个小图片，这个小图片的背景必须是透明的。在网页里可以显示的

具有背景透明特性的图片只有一种，就是GIF格式的。


在背景图片上叠加Flash动画的原理也是一样的。

但是，因为Flash动画也有背景透明和背景不透明的，在图

片上叠加的Flash动画，就必须是背景透明的，否则也会遮盖掉背景图片。 首

先在表格的单元格里设置图片为背景，然后在单元格中插入显示一个Flash动画文

件。 方法实例： <table

width=480> <tr><td width=480 background="图片地

址"> <embed src="swfURL" width=480 quality="high"

type="application/x-shockwave-

flash"></embed> </td></tr></table>


下面是插入透明Flash动画的源代码：

 <object classid="clsid:D27CDB6E-

AE6D-11cf-96B8-444553540000" codebase=<A

href="http://download"><A

href="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c

ab#version=6,0,29,0">http://download</A>.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi

on=6,0,29,0</A> width=n

height=0> <param name="movie" value="swfURL"> <param

name="quality" value="high"> <embed src="swfURL"

quality="high" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer" width="n" height="n"

wmode="transparent"></embed> </object></sp

an>
</td></tr></table>
 

[ 本帖最后由 happy-yan 于 2007-9-14 15:01 编辑 ]

空心菜 发表于 2008-2-8 11:30:18

收藏了,有空学一学

页: [1]

新萤火虫论坛's Archiver

[09/05][教程]音画贴制作从入门到精通教程