发新帖  新投票  回帖 
7040个阅读者,23条回复 | 打印 | 订阅 | 收藏
teliute

发表时间:2008-2-2 21:50

[原创]Html音画帖基础教程



teliute 发表在 教程交流 华声论坛 http://bbs.voc.com.cn/forum-163-1.html

音画帖基础课程(1)-颜色、字体、字号


音画帖一般发帖的时候使用HTML代码,普通发帖是使用UBB代码,首先我们来学习文字效果:


1、文字的颜色效果:使用<font color="...">文字</font>,其中的省略号可以输入各种颜色的英语单词


2、使用一个字体:使用<font face="...">文字</font>标签,其中的省略号输入各种字体;


3、设定文字的大小:使用<font style="font-size:12px">文字</font>标签,其中的12可以换成其他数值;



练习:


1、点“发新帖”或“回复本帖”按钮,进入发帖框,检查左边的“启用HTML代码”;


<font color="red">红色</font>


<font face="黑体">黑体</font>


<font style="font-size:36px">36磅</font>


3、点“提交”看一下效果;


4、效果应该是:


红色 黑体 36磅



来自:基础教程网



[本帖最后由 暗夜孤行也 于 2011-4-26 19:17 编辑]




----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-2 22:04

音画帖基础课程(2)-段落、换行


1、点“发新帖”或“回复本帖”按钮,进入发帖框,检查左边的“启用HTML代码”;


2、在发帖框中输入下列内容:


按此在新窗口浏览图片


这儿的<p>...</p>标签,就是段落标记;



3、接着输入下列内容:


按此在新窗口浏览图片


这儿的<br />是换行标记,也就是相当于按一个回车;


4、点下面的“发表回复”按钮,效果应该是:


远看山有色,

近听水无声。

春去花还在,
人来鸟不惊。




----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-2 22:14

音画帖基础课程(3)-对齐


这一课,我们来学习设置文字对齐,发帖的时候记着勾选“启用HTML代码”


1、点“发新帖”或“回复本帖”按钮,进入发帖框,检查左边的“启用HTML代码”;


2、在发帖框中输入下列内容,这是左对齐:


按此在新窗口浏览图片


3、接着输入下列内容,这是局中对齐:


按此在新窗口浏览图片


4、接着输入下边内容,这是右对齐:


按此在新窗口浏览图片


点下面的“发表回复”按钮,效果应该是:


古诗二首



远看山有色,


近听水无声。


春去花还在,


人来鸟不惊。


作者:王维





----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-2 22:24

音画帖基础课程(4)-放置图片


前面我们学习的是文字效果,这一课我们来学习放置图片,发帖的时候记着勾选“启用HTML代码”


1、点“发新帖”或“回复本帖”按钮,进入发帖框,检查左边的“启用HTML代码”;


2、在发帖框中输入下列内容,:


按此在新窗口浏览图片


这儿的img就是图片标识,后面的src是图片地址,border是边框


3、接着输入下列内容,这次把边框加上


按此在新窗口浏览图片


复制图片地址的方法是,在图片上敲右键选“属性”命令,复制中间最长的一段;


按此在新窗口浏览图片


点下面的“回复帖子”按钮,效果应该是:


按此在新窗口浏览图片





----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-2 22:42

音画帖基础课程(5)-播放音乐


前面我们学习的是文字效果,这一课我们来学习播放音乐,发帖的时候记着勾选“启用HTML代码”


1、点“发新帖”或“回复本帖”按钮,进入发帖框,检查左边的“启用HTML代码”;


2、音乐一般用embed标签,在发帖框中输入下列内容,也可以复制代码:


按此在新窗口浏览图片


<embed src="http://www.runplay.net/1.wma";

width="300" height="45" type="audio/x-pn-realaudio-plugin"

controls="ControlPanel" autostart="0" loop="-1"></embed>


其中的width和height是宽度和高度,autostart是自动播放(0是点一下,1是自动),loop是循环播放;


复制音乐地址的方法是,在播放器上敲右键选择“属性”命令,复制中间最长的一段;


按此在新窗口浏览图片


点“发表回复”按钮,最后的效果应该是:




[本帖最后由 teliute 于 2008-2-3 01:30 编辑]




----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-2 22:54

音画帖基础课程(6)-播放视频


前面我们学习的是播放音乐,这一课我们来学习播放视频,发帖的时候记着勾选“使用HTML代码”


1、点“发新帖”或“回复本帖”按钮,进入发帖框,检查左边的“启用HTML代码”;


2、视频使用object和embed标签,在发帖框中输入下列内容:


按此在新窗口浏览图片


如果不好输入可以直接复制下面的代码,每行一个标签,url那儿是视频地址


<object id="w1" width="320" height="300" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6">
<param name="autostart" value="0">
<param name="enabled" value="-1">
<param name="url" value="http://www.laxjyj.com/teliute/wmv/australia.wmv";>
<embed src="http://www.laxjyj.com/teliute/wmv/australia.wmv"; width="320" height="300"
type="audio/mpeg" autostart="0" autosize="0"> </embed></object>


点“发表回复”按钮,最后的效果应该是:










----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-2 23:01

音画帖基础课程(7)-播放Flash动画


前面我们学习的是播放视频,这一课我们来学习播放Flash,发帖的时候记着勾选“使用HTML代码”


1、点“发新帖”或“回复本帖”按钮,进入发帖框,检查左边的“启用HTML代码”;


2、Flash也使用object和embed标签,在发帖框中输入下列内容:


可以直接复制下面的代码,每行一个标签,注意两个地址是相同的,以swf结尾;


<object name="f1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0" width="550" height="400">

<param name="movie" value="http://imgfree.21cn.com/free/flash/158.swf"; />

<param name="menu" value="false" />

<param name="quality" value="high" />

<param name="scale" value="noscale" /></p>

<p><embed src="http://imgfree.21cn.com/free/flash/158.swf";

menu="false" quality="high" scale="noscale" width="550" height="400" type="application/x-shockwave-flash" name="f1" pluginspage="http://www.macromedia.com/go/getflashplayer";/> </object>



点“发表回复”按钮,最后的效果应该是:







menu="false" quality="high" scale="noscale" width="550" height="400" type="application/x-shockwave-flash" name="f1" pluginspage="http://www.macromedia.com/go/getflashplayer" />



[本帖最后由 teliute 于 2008-2-3 01:37 编辑]




----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-2 23:14

音画帖基础课程(8)-文字移动特效


这一课,我们来学习文字移动效果,发帖的时候记着勾选“使用HTML代码”


1、点“发新帖”或“回复本帖”按钮,进入发帖框,检查左边的“启用HTML代码”;


2、在发帖框中输入下列内容,可以复制了自己修改里面的汉字部分:


<marquee width="400" height="50"> <font color="royalblue">轻轻地我走了,正如我轻轻地来</font> </marquee>


这儿的marquee标签,就是移动标记,默认方向是向左;


3、接着输入下列内容:


<marquee width="400" height="50" direction="right"> <font color="royalblue">我挥一挥衣袖,不带走一丝云彩</font> </marquee>


marquee后面的direction是移动方向,这儿是右;


4、接着输入下列内容:


<marquee width="400" height="50" direction="up" scrollamount="2"> <font color="royalblue"><p>世界上最遥远的距离,不是生与死的距离</p><p>而是我站在你面前你却不知道我爱你</p></font> </marquee>


direction后面的scroollamount是移动速度,这儿是较慢的;


效果应该是下面这样:


轻轻地我走了,正如我轻轻地来


我挥一挥衣袖,不带走一丝云彩



世界上最遥远的距离,不是生与死的距离

而是我站在你面前你却不知道我爱你


世界上最远的距离,

不是我站在你面前你不知道我爱你

而是——

爱你到痴迷却不能说我爱你





----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-2 23:36

音画帖基础课程(9)-表格使用


这一课,我们来学习表格,发帖的时候记着勾选“使用HTML代码”


1、点“发新帖”或“回复本帖”按钮,进入发帖框,检查左边的“启用HTML代码”;


2、在发帖框中输入下列内容,可以复制了自己修改里面的汉字部分:


<table id="t1" style="width: 200px; height:50px" border="1">
<tr>
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
<tr>
<td>第三行</td>
</tr>
</table>



这是一个三行的表格,里面的tr就是行标记,table是表格,id是编号,border是边框;


效果应该是:


第一行
第二行
第三行

3、接着输入下列内容:(把HTTP改成普通英文)


<table id="t2" border="0" style="width: 450px; height:220px; position: relative; left: 0px; top: 0px" background="HTTP://blog.hnol.net/uploads/2008-2/22671903.jpg">
<tr>
<td>我</td>
</tr>
<tr>
<td>爱</td>
</tr>
<tr>
<td>你</td>
</tr>
</table>


里面的position是表格位置,这儿是相对于发帖框,


left是左边距,top是顶边距,这儿都是贴着发帖框;


效果应该是:








[本帖最后由 teliute 于 2008-2-2 23:37 编辑]




----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-2 23:58

音画帖基础课程(10)-音画帖a


这一课,我们来学习制作音画帖,可以新开一个帖,发帖的时候记着勾选"启用HTML代码"


1、先准备用到的素材:背景图、小图片、音乐、文字。


 (1)一个大的背景图(Jpeg图片),记下宽度和高度,后面表格修改一致;(http换成普通英文http)
http://blog.hnol.net/uploads/2008-2/22237367.jpg


 (2)一个动态小图片(gif图片),几个装饰图片;
http://blog.hnol.net/uploads/2008-2/22778526.gif
http://blog.hnol.net/uploads/2008-2/22701319.gif


 (3)一首音乐(mp3或wma格式),跟主题、心情相符,欢快的或者悠长;
http://dnd0756.16789.net/domName/dnd0756/200611302184769806.wma


 (4)一段文字,自己写的或者摘抄的,做移动用;
网事如风
文/清秋飘絮
你来了, 又走了
...


 (5)设计好表格的布局,风格主题,


2、然后开始做帖;





----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-3 00:34
复制下面的代码,可以修改相应的图片、文字和音乐http替换成http:
<p><font color="royalblue"><!--整个的表格,宽度设为"500",这一行是[注释]--></font><table id="t1" bordercolor=pink cellspacing=2 width=500 align=center position: relative; background="http://blog.hnol.net/uploads/2008-2/22237367.jpg" border="6" bgcolor="#4169E1">
<tbody>
<tr>
<td></p>
<p><font color="royalblue"><!--修饰小图片,和标题文字,[注释]-->
</font><img src="http://blog.hnol.net/uploads/2008-2/22778526.gif" width="80" height="50" />
<p> <font style="font-size: 24px;"color="#ff6600" face="楷体_gb2312">往事如风</font></p></p>
<p><font color="royalblue"><!--头像图片居中,[注释]--></font>
<center><img src="http://blog.hnol.net/uploads/2008-2/22701319.gif" border=0 /></center></p>
<p><font color="royalblue"><!--移动文字,速度为1,[注释]-->
</font><table id="t2" border="0" borderColor="#4169E1" style="width:300px" align="center"><tbody><tr><td> </p>
<p><marquee scrollamount="1" direction="up" height="200"><p align="left" ><font color="ffffff" face="楷体_gb2312" style="font-size:20px">原来真的:网事如风
文/清秋飘絮


你来了, 又走了;
我笑了, 又哭了;
你来得如风,也去得匆匆..
我笑得陶醉,却也哭得心碎!...
明明认认真真,小心翼翼;
明明全心全力,呵护倍至;
原以为会有个童话般的结果,
却为何偏偏只留下伤口?


闭上双眼,泪如汩汩泉涌,
除了可惜,眼泪没有声音,
而仿佛仅仅只是种温热的液体,
它再也唤不回已失去的一切 !
所有一切的一切,
再也回不去从前,
也到不了以后了.....
路人,依然行色匆匆,
汽车,依然呼啸而过...
谁会在意 这擦肩而过的心碎?...


默默的街灯 问我为何流泪?
我无语凝噎,多想诉尽一切!..
但, 我又怎能说得清,
多少的梦幻成泡影;
多少的诺言成谎言;
多少的甜蜜成苦楚;
多少的期待成追忆;
多少的思念成心痛!


当心 痛得不能再痛;
当泪 流到不能再流;
当笑 再也掩不住伤悲;
当醉 再也藏不住脆弱;
当一切再也难以言说 ;
当一路迷惘到了尽头;....
蓦然回首......才发现
原来真的: 网事如风……</font></center></marquee></td></tr></tbody></table>
</p>
<p><font color="royalblue"><!--修饰图片,[注释]--></font>
<p align=left>   <img src="http://blog.hnol.net/uploads/2008-2/23497042.gif" width="218" height="218"></p></p>
<p><font color="royalblue"><!--音乐播放器,自动、循环播放,在一个背景图表格里,[注释]--></font><table id= "m1" style="width: 100%" align="center" position: absolute; bordercolor="#4f3256" background="http://blog.hnol.net/uploads/2008-2/23796241.gif" border="0">
<tbody>
<tr>
<td style="filter: alpha (opacity=50,style=3)">
<p align=center> <embed src="http://dnd0756.16789.net/domName/dnd0756/200611302184769806.wma" width="300" height="45" type="audio/x-pn-realaudio-plugin" loop="-1" autostart="-1" volume="60"></p></td></tr></tbody></table>
</td></tr></tbody></table></p>
<p><font color="royalblue"><!--版权,[注释]-->
</font>
<p>作者:TeliuTe</p>





----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
teliute

回复时间:2008-2-3 00:37
效果如下:

往事如风

原来真的:网事如风文/清秋飘絮

你来了, 又走了;
我笑了, 又哭了;
你来得如风,也去得匆匆..
我笑得陶醉,却也哭得心碎!...
明明认认真真,小心翼翼;
明明全心全力,呵护倍至;
原以为会有个童话般的结果,
却为何偏偏只留下伤口?

闭上双眼,泪如汩汩泉涌,
除了可惜,眼泪没有声音,
而仿佛仅仅只是种温热的液体,
它再也唤不回已失去的一切 !
所有一切的一切,
再也回不去从前,
也到不了以后了.....
路人,依然行色匆匆,
汽车,依然呼啸而过...
谁会在意 这擦肩而过的心碎?...

默默的街灯 问我为何流泪?
我无语凝噎,多想诉尽一切!..
但, 我又怎能说得清,
多少的梦幻成泡影;
多少的诺言成谎言;
多少的甜蜜成苦楚;
多少的期待成追忆;
多少的思念成心痛!

当心 痛得不能再痛;
当泪 流到不能再流;
当笑 再也掩不住伤悲;
当醉 再也藏不住脆弱;
当一切再也难以言说 ;
当一路迷惘到了尽头;....
蓦然回首......才发现
原来真的: 网事如风……

   

< /font>

作者:TeliuTe



[本帖最后由 teliute 于 2008-2-3 00:41 编辑]




----------------------------------------------
梅花香自苦寒来,宝剑锋从磨砺出。
 
白云岫水

回复时间:2008-2-3 12:12
谢谢朋友,问好~~~

来学习基础教程~~~~~

 
浩浩冉

回复时间:2008-2-3 14:28
好好学习了

 
天天不在线

回复时间:2008-2-10 16:31
强.正在学习中,,这贴无颖是好贴..楼主辛苦了




----------------------------------------------
人,活着,就是为了享受生活!而不是忙碌生活!
 
宠儿
原创音画组

回复时间:2008-2-10 22:45
辛苦楼主!新年快乐!

 
诗露花雨

回复时间:2008-2-15 16:37
谢谢 学习中

 
西厢狂客

回复时间:2011-4-24 19:10
哇,好复杂,但是凭着坚韧不拔的毅力要研究它

 
苏萱

回复时间:2011-4-24 21:26
是很复杂,不好记,但却很有用。

 
yg2011

回复时间:2011-4-26 08:26
很实用 精华帖

 
发新帖 新投票
 回帖
查看积分策略说明快速回复主题
你的用户名: 密码:   免费注册(只要30秒)


启用 Html 代码
使用个人签名
(请您文明上网理性发言!并遵守相关规定
   



Processed in 0.038003 s, 8 q - 无图精简版,sitemap,