[07/04][教程]HTML特效帖子编辑方法（高级教材）(持续更新中~08.11更新）

绯舞发表于 2006-7-4 23:38:07

<BODY style="cursor:url('http://xy.ningxianews.cn/huaseshubiaozhizhen/001.ani')";>
<table border=1 cellspacing=5 cellpadding=5 background=http://www.ran.co.jp/Sozai/H1611142/006091.jpg width=750><TR><TD width=100% colspan=2>
 
　　第一讲：html的简介 
html文件是一种可用任何文本编辑器创建的ASCII码文档。这些编辑器包括常见的写字板，记事本，word等。推荐大家用记事本方便一些！
 
　一：文件的基本结构： 
HTML文件由标记和被标记的内容组成，标记用来规定被标记的内容是什么信息 

1.1 
标记及其属性 
1：标记的格式用“<"表示一个标记的开始，”>“表示一个标记的结束这两个字符必须同时出现，表示这是HTML代码 

2：标记的属性 
标记的属性是用来控制受标记影响的内容的显示和输出格式。设置属性的格式如下： 
<标记属性1＝属性值属性2＝属性值。。。。>
 
1.2 
HTML文件的基本结构 
1：基本标记 
标记是构成HTML的基本单位，很体面拉的标记很多，与文件结构有关的基本标记包括 
[ htm]。[ head]。[ body]。在论坛里面发帖子，主要就是编辑这一部分的内容 

 </td></tr>

<TR><TD width=100% colspan=2>

　　第二讲：HTML的文档处理
 

一：文字标记 
文字标记是”“可以用”“标记的不同属性来分别设置文本中文字的大小，字体，字型，字色等，标记的格式是： 
被设置的字 
1.1 
文字的大小 
设置文字大小的属性是”size“ 他的取值范围是1到7。其中1为最小，7为最大，默认为3 

1.2 
文字的字体，颜色
字体属性是：face 颜色的属性是color 
用法与上同 

二：段落标记与文字布局
 
2.1文字换行 

换行标记是 

放在文字结尾处使得其后的文字在下一行显示 

2.2段控制 
标记是放在文字后，使得其后文字空一行后换行显示 

的属性align用来设置文字的对齐方式。属性值是center（居中对齐），left（向左对齐），right（向右对齐） 

2.3文字的分区显示 

属性是{div]属性值也有三个，与上同，他主要用在许多段落的布局 

2.4预格式化文本 

在有多个空格时，HTML只默认一个空格。要使用多个空格，需要加入。所以，这种方法对处理较为复杂的文档格式就很麻烦，用预格式化标记就很方便其格式是： 
预先排好的内容< 

2.5超级链接 
其标记为格式为：热点内容（文字图片） 

注意：因为“〈〉”会直接生成效果，所以我用“[]”来代替，实际使用中记得把"[]"改成"<>" 

 </td></tr>

<TR><TD width=100% colspan=2>

第三讲：表格的使用（重点） 表格是用来定义其开始用定义其结束的，必须与标记配合使用的还有和标记，构成表格的简单格式如下： 
 
 
 
 
 
 
一：表格的主要属性 
1.1标记的主要属性 
align定义表格的对齐方式，有三个属性值center，left，right 

background定义表格的背景图案，属性值为图片的地址 

bgcolor定义表格的背景颜色，属性值是各种颜色代码 

border定义表格的边框宽度，属性值是数字 

bordercolor定义表格边框的颜色，属性值是各种颜色代码 

cellpadding定义单元格内容与单元格边框之间的距离，属性值是数字 

cellspacing定义表格中单元格之间的距离 

height定义表格的高度，属性值是数字 

width定义表格的宽度，属性值是数字 

1.2标记，表格是由多行与多列组成的，标记用来定义表格的一行，他的属性极其属性值定义的是表格中的该行，其主要属性与属性值如下： 
align定义对齐方式，属性值与上同 

background定义背景图案 bgcolor定义背景色 

1.3标记。用标记概况起来的内容表示表格的单元。其主要属性与属性值和标记的一样，补充两个合并列和行的代码： 
colspan定义合并表格的列数，属性值是数字 

rowspan定义合并表格的行数，属性值是数字 
下面给出一个简单的例子： 

<TEXTAREA rows=10 cols=70>

<table border=1 width=400>
<tr>
<td width=30% align=center>萤火虫 </td>
<td width=41% align=center>萤火虫</td>
<td width=29% align=center>萤火虫 </td>
</tr> <tr>
<td width=30% align=center>音画学堂</td>
<td width=41% align=center>音画学堂</td>
<td width=29% align=center>音画学堂</td>
</tr>
<tr>
<td width=30% align=center>音画学堂</td>
<td width=41% align=center>音画学堂</td>
<td width=29% align=center>音画学堂</td>
</tr>
</table>
</TEXTAREA> 

<fieldset style="width:350" align="center">
<legend>效果如下</legend>
<table border=1 width=400>
<tr>
<td width=30% align=center>萤火虫 </td>
<td width=41% align=center>萤火虫</td>
<td width=29% align=center>萤火虫 </td>
</tr>
<td width=30% align=center>优质美图</td>
<td width=41% align=center>优质美图</td>
<td width=29% align=center>优质美图</td>
</tr>
<tr>
<td width=30% align=center>音画学堂</td>
<td width=41% align=center>音画学堂</td>
<td width=29% align=center>音画学堂</td>
</tr>
</table>
</fieldset>

 </td></tr>

<TR><TD width=100% colspan=2>

常用的代码格式（大家可以套用） 

<TEXTAREA rows=10 cols=70>

<CENTER>
<TABLE id=table1 height=300 cellSpacing=5 width=500background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/Horizon/fedd84b1.gif border=1>
<TBODY>
<TR>
<TD>
新萤火虫社区 </TD></TR></TBODY></TABLE></CENTER>

</TEXTAREA> 

<fieldset style="width:500" align="center">

<legend>效果如下(这个是最基本背景加标题的代码)</legend>

<CENTER>
<TABLE id=table1 height=300 cellSpacing=5 width=500 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/Horizon/fedd84b1.gif border=1>
<TBODY>
<TR>
<TD>
新萤火虫社区 </TD></TR></TBODY></TABLE></CENTER>

</fieldset>

 </td></tr>

<TR><TD width=100% colspan=2>
图片向上飞行的效果及代码
代码如下： 

<TEXTAREA rows=10 cols=70>
<MARQUEE scrollAmount=2 direction=up height=600>
<CENTER><IMG height=300 src="http://newphoto.1t1t.com/usr/57/60626/1134988947_5.gif" width=500>
<IMG height=300 src="http://newphoto.1t1t.com/usr/57/60626/1134988999_2.gif" width=500></CENTER>
</MARQUEE>
</TEXTAREA> 
<fieldset style="width:500" align="center">
<legend>效果如下</legend>
<MARQUEE scrollAmount=2 direction=up height=600>
<CENTER><IMG height=300 src="http://newphoto.1t1t.com/usr/57/60626/1134988947_5.gif" width=500>
<IMG height=300 src="http://newphoto.1t1t.com/usr/57/60626/1134988999_2.gif" width=500></CENTER>
</MARQUEE>

</fieldset>
 </td></tr>

<TR><TD width=100% colspan=2> 

文字向上移动的效果及代码

代码如下： 

<TEXTAREA rows=10 cols=70>

<MARQUEE scrollAmount=1 direction=up height=100>
<CENTER>风铃----绯舞 
<CENTER>你把一串风铃悬挂在窗前， 
你说你喜欢聆听她叮叮的铃声。 
牵动风铃的是风， 
那么牵动你心的又是什么？ 
是对某人的想念， 
并想象着， 
或许他也正在想念着你。 
如果没有风， 
风铃只是静止的存在。 
如果没有爱， 
心也是静止的存在。 
让你的风铃晃动的，是风。 
让你的生命灵动的，是爱。 
在这个有风的午后， 
让自己和风铃化为一体； 
让爱与风一起流动。 

</CENTER></CENTER>


</MARQUEE>
</TEXTAREA> 
<fieldset style="width:500" align="center">
<legend>效果如下</legend>

<MARQUEE scrollAmount=1 direction=up height=100>
<CENTER>风铃----绯舞 
<CENTER>你把一串风铃悬挂在窗前， 
你说你喜欢聆听她叮叮的铃声。 
牵动风铃的是风， 
那么牵动你心的又是什么？ 
是对某人的想念， 
并想象着， 
或许他也正在想念着你。 
如果没有风， 
风铃只是静止的存在。 
如果没有爱， 
心也是静止的存在。 
让你的风铃晃动的，是风。 
让你的生命灵动的，是爱。 
在这个有风的午后， 
让自己和风铃化为一体； 
让爱与风一起流动。 

</CENTER></CENTER>


</MARQUEE>

</fieldset>

 </td></tr>

<TR><TD width=100% colspan=2> 
图片向左飞行的效果及代码

代码如下： 

<TEXTAREA rows=10 cols=70>

<MARQUEE width=350><IMG src="http://bbs.xyhc.com/attachments/month_0604/650_GbI0PhdtTPGE.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/692_hhELkd3bAVQb.jpg"> <IMG src="http://bbs.xyhc.com/attachments/month_0604/900_A25cwtap5nf4.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/639_aRtA89Yp6NOx.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/563_5ICW4JZVSbgF.gif"></MARQUEE>
</TEXTAREA> 

<fieldset style="width:500" align="center">
<legend>效果如下</legend>

<MARQUEE width=350><IMG src="http://bbs.xyhc.com/attachments/month_0604/650_GbI0PhdtTPGE.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/692_hhELkd3bAVQb.jpg"> <IMG src="http://bbs.xyhc.com/attachments/month_0604/900_A25cwtap5nf4.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/639_aRtA89Yp6NOx.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/563_5ICW4JZVSbgF.gif"></MARQUEE>

</fieldset>
 </td></tr>

<TR><TD width=100% colspan=2> 

向右移动文字加图片效果及代码

代码如下： 

<TEXTAREA rows=10 cols=70>
<MARQUEE direction=right width=500>您迎欢虫火萤新<IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"></MARQUEE>


</TEXTAREA> 

<fieldset style="width:500" align="center">
<legend>效果如下</legend>

<MARQUEE direction=right width=500>您迎欢虫火萤新<IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"></MARQUEE>


</fieldset>

 </td></tr>
<TR><TD width=100% colspan=2> 
分段行走标题效果及代码
代码如下： 

<TEXTAREA rows=10 cols=70>

<CENTER>
<MARQUEE width=100>音</MARQUEE>
<MARQUEE width=100>画</MARQUEE>
<MARQUEE width=100>学</MARQUEE>
<MARQUEE width=100>堂</MARQUEE></CENTER>
</TEXTAREA> 

<fieldset style="width:500" align="center">
<legend>效果如下</legend>

<MARQUEE width=100>音</MARQUEE>
<MARQUEE width=100>画</MARQUEE>
<MARQUEE width=100>学</MARQUEE>
<MARQUEE width=100>堂</MARQUEE></CENTER>

</fieldset>

 </td></tr>
<TR><TD width=100% colspan=2> 
飞舞标题效果及代码
代码如下： 

<TEXTAREA rows=10 cols=70>

<MARQUEE behavior=alternate>

<MARQUEE style="WIDTH: 37px; HEIGHT: 100px" direction=up behavior=alternate width=37 height=100>我</MARQUEE>

<MARQUEE direction=up behavior=alternate width=50 height=60>爱</MARQUEE>

<MARQUEE direction=up behavior=alternate width=40 height=70>萤</MARQUEE>

<MARQUEE direction=up behavior=alternate width=40 height=85>火</MARQUEE></MARQUEE>

<MARQUEE direction=up behavior=alternate width=50 height=90>虫</MARQUEE></MARQUEE>

</TEXTAREA> 

<fieldset style="width:500" align="center">
<legend>效果如下</legend>

<MARQUEE behavior=alternate>

<MARQUEE style="WIDTH: 37px; HEIGHT: 100px" direction=up behavior=alternate width=37 height=100>我</MARQUEE>

<MARQUEE direction=up behavior=alternate width=50 height=60>爱</MARQUEE>

<MARQUEE direction=up behavior=alternate width=40 height=70>萤</MARQUEE>

<MARQUEE direction=up behavior=alternate width=40 height=85>火</MARQUEE>

<MARQUEE direction=up behavior=alternate width=50 height=90>虫</MARQUEE></MARQUEE>

</fieldset>

 </td></tr>
<TR><TD width=100% colspan=2> 

倒影效果及代码
代码如下： 

<TEXTAREA rows=10 cols=70>

<IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"> 
</TEXTAREA> 

<fieldset style="width:500" align="center">
<legend>效果如下</legend>

<IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"> 
</fieldset>
 </td></tr>
<TR><TD width=100% colspan=2> 

左右相反方向移动的图片及代码
代码如下： 
<TEXTAREA rows=10 cols=70>
<MARQUEE width=200 height=50><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"></MARQUEE><MARQUEE direction=right width=200 height=50><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"></MARQUEE>

</TEXTAREA> 

<fieldset style="width:500" align="center">
<legend>效果如下</legend>

<MARQUEE width=200 height=50><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"></MARQUEE><MARQUEE direction=right width=200 height=50><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"><IMG src="http://bbs.xyhc.com/attachments/month_0604/603_pFUmbjiRBdXj.gif"></MARQUEE>

</fieldset>

 </td></tr>

<TR><TD width=100% colspan=2> 
未完待续。。。。
 </td></tr>
<TR><TD width=100% colspan=2> 

 </td></tr>
<TR><TD width=100% colspan=2> 

 </td></tr>
<TR><TD width=100% colspan=2> 

 </td></tr>

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

[ 本帖最后由绯舞于 2006-8-23 17:48 编辑 ]

绯舞发表于 2006-7-4 23:41:01

今天有点累先编辑到这里明天来继续更新

[ 本帖最后由绯舞于 2006-7-5 10:10 编辑 ]

月儿发表于 2006-7-5 01:47:16

辛苦舞舞了,好好休息吧~

happy-yan 发表于 2006-7-5 09:10:48

嗯这个很好，符合我们的愿景^^ 
在讲到不同的类别时，建议分主题，便于分类索引^^ 

[ 本帖最后由 happy-yan 于 2006-7-5 12:35 编辑 ]

墓志铭 发表于 2006-7-7 20:51:28

<TABLE borderColor=red height=65 cellSpacing=28 cellPadding=0 width=349 background=http://lkm021.blogchina.com/inc/M07.gif border=1><TBODY><TR><TD><TABLE id=table8 WIDTH: 300px;HEIGHT: 46px" cellSpacing=0 cellPadding=0 border=0 BACKGROUND-COLOR: #e9e98e?><TBODY><TR><TD><EMBED style="FILTER: invert alpha(opacity=60) WIDTH: 295px; HEIGHT: 46px" src=http://hxzq05.d68.zgsj.com/fl/20050413203016.mp3type=video/x-ms-asf autostart="FALSE" loop="1" volume="0"><?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace /><t:animateColor id=color1 attributeName = "background-color" calcMode = "paced" targetElement = "table8" values = "fuchsia;red;blue;green;darkviolet" autoReverse = "true" begin = "0;b4.click" dur = "10" repeatCount = "111"></t:animateColor></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 听段朗郎的音乐，为楼主来加油吧＾＾． 不知道楼主可不可以把表格仔细的讲一下． 说真的很想好好的学学．

[ 本帖最后由墓志铭于 2006-7-7 21:01 编辑 ]

不弃发表于 2006-7-15 20:15:56

<table border=1 width=400>
<tr>
<td width=25% align=center>萤火虫 </td>
<td width=25% align=center>萤火虫</td>
<td width=25% align=center>萤火虫 </td>
<td width=25% align=center>萤火虫 </td>
</tr> <tr>
<td width=25% align=center>音画学堂</td>
<td width=25% align=center>音画学堂</td>
<td width=25% align=center>音画学堂</td>
<td width=25% align=center>音画学堂</td>
</tr>
<tr>
<td width=25% align=center>音画学堂</td>
<td width=25% align=center>音画学堂</td>
<td width=25% align=center>音画学堂</td>
<td width=25% align=center>音画学堂</td>
</tr>
</table>

[ 本帖最后由不弃于 2006-11-11 22:26 编辑 ]

WeDone 发表于 2006-8-4 20:16:35

tonn 发表于 2006-8-5 09:31:58

很好的帖子,舞舞辛苦了

音乐虫子 发表于 2006-8-23 17:18:46

期待更多的东东。版版辛苦了

雪上飞 发表于 2006-8-29 14:49:27

页: [1] 2 3

新萤火虫论坛's Archiver

[07/04][教程]HTML特效帖子编辑方法（高级教材）(持续更新中~08.11更新）