以文本方式查看主题

-  军人联盟论坛  (http://web.jrlm81.com/bbs/index.asp)
--  军盟教学  (http://web.jrlm81.com/bbs/list.asp?boardid=67)
----  学做音画贴子从基本代码开始(适合初学者)  (http://web.jrlm81.com/bbs/dispbbs.asp?boardid=67&id=44896)

--  作者:常洪
--  发布时间:2009/12/8 10:50:02
--  学做音画贴子从基本代码开始(适合初学者)
HTML语言说明(从最基本代码开始认识)

<TABLE>是表格的起始符,与</TABLE>
成对使用

borderColor=#7a1f56
边框的颜色

cellSpacing=10
表格格线的厚度

cellPadding=0
边框的距离

width="100%"
表格宽度,分绝对值(如 80)及相对值(如 80%)

border=10
表格边框的厚度,不同浏览器有不同的内定值,故请指明

<TR> 行,与</TR>
成对使用

<TD> 列,与</TD>成对使用

--  作者:常洪
--  发布时间:2009/12/8 10:50:18
--  
背景

<TABLE align=center background="帖子背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="100%"><TBODY><TR><TD>
帖子内容,文字或图片.....
</TD></TR></TBODY></TABLE>



<TABLE> 的参数设定(常用):


<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">


注解:

width="400"
表格宽度,接受绝对值(如 80)及相对值(如 80%)。

border="1"
表格边框的厚度,不同浏览器有不同的内定值,故请指明。


cellspacing="2"
表格格线的厚度

align="CENTER"
表格的摆放位置(水平),可选值为: left, right, center

valign="TOP".
表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。   

background="myweb.gif"
表格的背景图片,与 bgcolor 不要同用。


bgcolor="#0000FF"
表格的底色,与 background 不要同用

bordercolor="#CF0000"

表格边框颜色

bordercolorlight="#00FF00"
表格边框向光部分的颜色

bordercolordark="#00FFFF"
表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

cols="2"
表格栏位数目,只是让浏览器在下载表格时先画出整个表格而已。

--  作者:常洪
--  发布时间:2009/12/8 10:50:44
--  
帖图基本格式如下:

<IMG src="图片连接URL地址">

<IMG> 称图形标记,主要用来插入图形标记。

<IMG> 的一般参数设定:
  例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
src="logo.gif"
图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行已久,后者则由 96 年开始发展, 于未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称,否则 必须加上正确的路径,相对或绝对均可。
width=自然数 height=自然数
设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实 大小,以免失真,若需要改图片大小最好使用图像编辑工具。(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)
hspace=自然数 vspace=自然数
设定图片边沿空白,以免文字或其它图片贴近。hspace 是设定图片左右的空间, 是设定图片上下的空间,高度采用 pixels 作单位。
border=自然数
图片边框厚度
align="top"
调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底部、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom,
texttop 表示图片和文字依顶线对齐,
baseline 表示图片对齐到目前文字行底线值,
absmiddle 表示图片对齐到目前文字行绝对中央,
absbottom 表示图片对齐到目前文字行绝对底部,(绝对底部是指它考虑到比如 y 、g、q 等字的下边)。
alt="Logo of PenPal Garden"
这是用以描述该图形的文字,若使用文字浏览器,由于不支持图片,这些文字 将会代替图片被显示。若支持图片的浏览器,当鼠标移至图片上该文字也会显示。
lowsrc="pre_logo.gif"
设定先显示低解析度的图片,若加入的是一张很大的图片,下载要很长的时间,这张低 解析度的图片会先被显示以免浏览者失去兴趣,通常是原图的黑白版本

--  作者:常洪
--  发布时间:2009/12/8 10:51:00
--  
载入音乐

基本语法:
<EMBED SRC="音乐文件地址">
常用属性如下:
src="your.mid"
设定 midi 档案及路径,可以是相对或绝对。
autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。
loop="true"
是否自动反复播放。LOOP=2 表示重复两次,true 是, false 否。
HIDDEN="true"
是否完全隐藏控制画面,true 为是,no 为否 (内定)。
STARTTIME="分:秒"
设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。
VOLUME="0-100"
设定音量的大小,数值是0到100之间。内定则为使用系统本身的设定
WIDTH="整数" 和 HIGH="整数"
设定控制面板的高度和宽度。(若 HIDDEN="no")
ALIGN="center"
设定控制面板和旁边文字的对齐方式,其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom
CONTROLS="smallconsole"
设定控制面板的外观。预设值是 console。
console 一般正常面板   
smallconsole 较小的面板   
playbutton 只显示播放按钮   
pausecutton 只显示暂停按钮   
stopbutton 只显示停止按钮   
volumelever 只显示音量调节按钮
例一:
<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>
作为背景音乐来播放,隐藏了播放器。
在论坛做帖常用格试如下:
一:
<EMBED height=200 src=音乐文件地址 type=audio/x-pn-realaudio-plugin width=200 autostart="true" c c></EMBED>
说明:一般用来插入mp3 rm ra ram asf mid 等音乐文件,如果要隐藏播放器,把width和height的数值改成0或者1就可以了。
二:<bgsound src="音乐文件地址" loop=3>
说明:一般用来插入wav wma mid mp3等格试的音乐文件。

--  作者:常洪
--  发布时间:2009/12/8 10:51:16
--  
文字设制

<P align=center><FONT color=#0066ff face=隶书 size=5>插入文字</FONT></P>
align=center 表示字体居中,可选值为居右(right)居左(left)


color=颜色代码 具体颜色代码可参照:
颜色选取<<点击查看

face=字体 常用字体为:宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等
size=字体大小,这里的最大值为7 取值越大文字就越大

--  作者:常洪
--  发布时间:2009/12/8 10:51:38
--  

HTML的英语全称为Hyper Text Markup Language,中文意思是超文本标识语言(简称为:超文本语言)。

它是计算机语言的最基础、最简单的部分。我们知道计算机最基本的识别文字(也叫语言)就是26个英文字母+10个阿拉伯数字+部分标点符号。论坛上的HTML音画制做是不借助任何软件的,所以就必须使用HTML语言(部分网站及专业论坛是不开放HTML设置的)。

初学者(包括偶)一打开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=> 背景通常使用为背景图片的连接地址
17. <borderColorLight=#颜色>边框相临两边的颜色及内置相对两边的颜色(左相临及对应右相临)
18. <borderColorDark=#颜色>边框相临两边的颜色及内置相对两边的颜色
19. cellSpacing=边框与内置边框的宽度
20. width=宽度 height=高度


HTML语言音画最基本的构成就是四个部分:
边框
图片(内容)
音乐
FLASH



--  作者:常洪
--  发布时间:2009/12/8 10:52:25
--  
边框的制作


一、制作边框(把以下代码先复制到源代码状态)
<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


--  作者:常洪
--  发布时间:2009/12/8 10:52:49
--  
效果

音画教材

[此贴子已经被作者于2009-12-8 10:53:33编辑过]

--  作者:常洪
--  发布时间:2009/12/8 10:54:05
--  

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

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


--  作者:常洪
--  发布时间:2009/12/8 10:54:51
--  

三、 自己制作边框

选择好素材:

图片点击可在新窗口打开查看图片点击可在新窗口打开查看图片点击可在新窗口打开查看图片点击可在新窗口打开查看图片点击可在新窗口打开查看
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>

[此贴子已经被作者于2009-12-8 10:55:12编辑过]