学习代码首先只要了解几个最常见的代码含义就可以了.
甚至你不需要去刻意记他,只要看到知道大概什
么意思就行了,完全不会影响你去使用它,用多了自然就记住了.
我的课程全部不用你们去死记硬背,放松一些吧,下面进入正题.
在第一节已经说过
一个完整HTML代码的帖子包含了最基本的几个要素
1.表格(容纳内容的一个容器)
2,图片:包括FLASH
3.内容:连接地址,文字说明介绍等
4. 播放器
由此可以看出,这里关键的问题就是表格,因为其它的如文字,图片等大家都不同程度的知道或者了解
初学者往往就是被表格给卡住了,有了表格就好像有了房子,文字,图片等往里面搬就是了(最简单的复制粘贴)
其实一个最基本的表格是非常简单的
,千万别被那些成堆的代码给吓唬住了,因为大多数帖子都是采用多
层表格来实现风格各异的效果,掌握了简单的就可以慢慢的去套2层3层....直至多层
我下面给出一个最基本的表格 .
<TABLE borderColor=#716699
width="50%" heihgt=50 bgColor=#1AE6BD border=5>
<TBODY>
<TR>
<TD>
这里面就是表格的内部可以装图片等内容
</TD>
</TR>
</TBODY>
</TABLE>
我用不同的颜色来标注它们的对应关系
很明显这些代码都是成对出现的,这是一个必须牢牢掌握的基本原则!!!记住:有多少<TABLE>或者<TR>等等开头就一定要有多少</TABLE>等等收尾,并注意他们的相对位置
上面的表格代码显示后就是如下
这里面就是表格的内部可以装图片等内容
注意:将上面代码复制到论坛编辑器后一定要构选左侧的启用HTML代码
下面再说说这些代码的含义
<TABLE> 就是定义这是一个表格,是表格的开头.
<TBODY>
表体的起始符,实际使用中也可以省略不用.
<tr>：tr的作用是规定表格里面相关内容的行，其中，t是table，r是row（行）。有多少组tr，这张表格内就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。
补充说明:
所谓行,我们不能简单的把它理解为一条线,因为在<tr>
</tr>之间是可以容纳我们所需要安排的任何内容的.
<td>：td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格内就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成表格内的单元格。(我们可以这样去理解,<TABLE></TABLE>是一间房子,房子里面有纵横分布不同的
房间.
为了加深你们对这些代码的理解,下面我用实际例子来作说明
例子1代码:
<TABLE width="50%" borderColor=#716699
width="50%" heihgt=50 bgColor=#1AE6BD
border=5>
<TBODY>
<TR>
<TD>第一列第一栏</TD>
<TD>第一列第二栏</TD></TR></TBODY></TABLE>
显示为:
第一列第一栏
第一列第二栏
例子2代码:
<table width="60%" border="1"
cellspacing="5">
<tr
bordercolor="#0000FF">
<td>第一列第一栏
</td>
<td>第一列第二栏
</td>
</tr>
<tr bordercolorlight="#FF00FF"
bordercolordark="#00FF00">
<td>第二列第一栏
</td>
<td>第二列第二栏
</td>
</tr>
</table>
显示为:
第一列第一栏
第一列第二栏
第二列第一栏
第二列第二栏
上面的代码中应用了表格的一些属性,后面再讲解
首先就是要你们明白TR和TD在表格中能够起什么作用
以上内容你们可以自己试试,并且可以改变其中的颜色代码,或者50%这样的数字
色彩代码可以在IE中复制下面的一个FLASH地址,点击颜色区内不同地方就会给出不同的颜色代码
http://bbs.cnhubei.com/UploadFile/2006-6/200662410505520205.swf
记住要在色号前面加上#,颜色号都是6位数
50%是我们发表后IE中可以显示的帖子最大宽度的50%
可以使用百分比,也可以是具体数字,一般最大显示宽度是800,你们只要在800内选择就行了,超过800,帖子会有一部分被遮盖而看不到,你们不妨试试超过800
的宽度效果.
注:也不是完全不能超过800显示,这要使用全屏显示的方法,这是后话,暂且不深究.
还有做HTML代码帖子要从开始养成发表前使用预览看看效果的习惯,一旦发现预览显示不正常(例如帖子高度超出了编辑区,完全不显示内容等等,就要及时检查,修正错误,否则一旦点击发表,很可能你连编辑按钮都找不到了)
有了表格,其他的就非常容易了,往里面搬吧,注意搬东西可是需要将编辑器转换到即见即所得模式下的(也就是点击编辑器作上面的即见即所得按钮)这种模式下一切都是可见的,可以利用编辑器上方的各种功能键来改变字体颜色,字体大小,居中等等(改变对象需要先选中对象,也就是使用左键去选)
下面再介绍表格的7个属性
这些属性不是在任何表格中都会运用,要看需要
1. bgcolor=某种颜色
表格的底色 注:如果选用图片作为背景就不能同时用表格底色bgcolor.用背景图片的代码是:(background=图片地址
表格的背景图片)
2. bordercolor=某种颜色 表格边框的颜色
3. bordercolorlight=某种颜色
向光部分的颜色(注意不能和上面的边框颜色bordercolor同时使用)[同时注意只有在border边框厚度大于1时该属性才会有效果]
4. bordercolordark=某种颜色
背光部分的颜色(注意不能和上面的边框颜色bordercolor同时使用)[同时注意只有在border边框厚度大于1时该属性才会有效果]
5.
border=数字 表格边框的厚度
6. cellspacing=数字
表格格子之间的间隙大小(可根据自己需要设定,不选用该属性则系统按默认自动设置)
7. cellpadding=数字
表格边框和表格内部内容之间的间隙(可根据自己需要设定,不选用该属性则系统按默认自动设置)
下面就几个属性问题用实例说明
bgcolor属性
前面说了这个属性决定表格的底色
代码:
<TABLE borderColor=#78596D
width="50%" heihgt=50 bgColor= #07737D
border=5>
<TBODY>
<TR>
<TD>
表格底色变了
</TD></TR></TBODY></TABLE>
表格底色变了
我不使用底色而选用背景图片
代码:
<TABLE borderColor=#78596D width="50%"
heihgt=500 background=
http://image.17173.com/bbs/upload/2005/12/14/1134531115.gif
border=5>
<TBODY>
<TR>
<TD>
看看,有背景了
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</TD></TR></TBODY></TABLE>
注:1个<BR>就相当于一个回车
看看,有背景了
这里还必须提醒大家注意表格代码和各种属性之间都必须有一个空格否则,这些属性是不能显示的.
再就是使用HTML代码编辑帖子后不能够再去使用Discuz!代码,两者不可混用
至于这里没有提到的播放器当然也必须使用HTML代码播放器,大家可以到HTML代码学习教程中去选择自己喜欢的类型,只要将代码复制到表格中就OK
了(将编辑器转到Discuz!模式下复制)
地址:http://www.e077.com/viewthread.php?tid=7686&page=9&extra=page%3D1#pid24596
说到这里,大家是否感觉很简单呢,一点都不难.
有了这个基础后面就更不难了
