切换到宽版
  • 13651阅读
  • 56回复

简易教程一 送给想学HTML制帖的朋友!!! [复制链接]

上一主题 下一主题
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗
 

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看楼主 倒序阅读 使用道具 楼主  发表于: 2008-05-18
— 本帖被 色影 执行加亮操作(2010-07-15) —

一点体会:
第一:写"回"字.用HTML制帖,打一个比方,就像我们写一个"回"字.是一种单一的边框结构,起初接触代码好像很难,但是等你熟悉每个代码标签的含义,也就不难了!呵呵,但是这个熟悉的过程是要很大的勇气的.想当初,我可是硬着头皮试试才上"贼船"的.没想到上船容易下船难,从此就爱上了这破东东!!!言归正传,我们写"回"字,按照笔划顺序来讲,该是先里边后外边吧!无论这个"口"字里有多个个"口"字,最里边的"口"先结束,最外边的最后啦!!!用HTML制帖,就是这个道理,当然,这是最基础的一种制作方法,等大家熟悉掌握运用这些代码后,更加复杂的布局,比如像制作一张简易的工作人员花名册,这里就涉及到行<TR>.列<TD>,好像是更难一点的了,等大家熟悉运用这些代码后,自然不难了!!!
  第二:有始有终.用HTML制作,最重要的一点就是做到有始有终.也就是有开始必须有结束.用<P>这个标签说明,它是表示段落的标签代码,当一段编辑后,必需用</P>表示结束.
  第三:拿来主义.掌握并熟悉地运用HTML后.接触的帖子也多了,你会发现,每一个人有每一个人的制作方法及特点.那么,我们在欣赏别人精典制作的同时,不仿拿回家看看.该收藏的收藏,该掌握的掌握.比如素材好我们就收藏,自己做帖时可以运用,比如制作特点,方法,我们拿为己用.呵呵,网络可是个大宝库,多吸收营养,这样有利于进步哟!


想学的朋友,加油,希望大家在这里玩得有收获,我们一起交流一起学习,让我们的贴子漂亮起来~~
[ 此贴被飞雪思函在2008-06-23 18:00重新编辑 ]
2条评分
By 明天. 原创 +1 | 理由: 原创内容 2008-05-18
By 腾龙在天 金币 +10 | 理由: 优秀文章 2008-05-18
山庄提示: 道行不够,道券不够?---☆点此充值☆
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 沙发  发表于: 2008-05-18
     
准备工作,认识代码

1.<p>.....</p>
  <p>标志对是用来创建一个段落,在此标志对之间加入的文本 将按照段落的格式显示在浏览器上。另外,<p>标志还可以使用align属性,它用来说明对齐方式,语法是:<p align=center></p> align可以是Left(左对齐)、 Center(居中)和Right(右对齐)三个值中的任何一个。</p>表示标志对中的文本使用居中的对齐方式。align 表示位置
2.<br>是一个很简单的标志,它没有结束标志,因为它用来创建一个回车换行.
3.<table>:表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>。

4. <tbody>:表体的起始符。紧跟在<table>之后,表示表体开始。必须有结尾符,放在</table>之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,否则,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。

5.<tr>:tr的作用是规定表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。

6.<td>:td的作用是规定表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

  </td>、</tr>、</tbody>、</table>:这些都是相应元素的终止符,表示相应元素所规范的内容结束。必须注意它们的排列顺序,不能有错。

  从表格的代码框架分析得出:表格标签里,所有元素都成对出现,而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大,它占在起始和终结的位置,tbody是老二,tr是老三,td最小,它在最里层。

7.border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。

8. cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

9.cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元格里的内容与表格周边边框的距离。

10. width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。

11.height:表格的高度,取值方法同width。提示:如果不是特别需要,建议不用设置表格的高度,系统会根据表格的内容自动设置高度。所谓特别的需要,是指一些特殊的情形下,需要表格的高度精确,比如,当我们通过表格的背景来发一张图片时,如果表格的高度不精确定义,图片就不可能完整或完美地显示。

12.bgcolor:表格的背景色。取值方法举例:bgcolor=#ff0000或bgcolor=red。单元格<td>也可有此属性,如果设置了表格的背景色,又设置表格单元格的背景色,得出的效果将是值得试试的,这种情况主要用于多单元格的表格。

13.background:表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。

14. bordercolor:表格的边框颜色,当border值不为0时设置此值有效。取值同bgcolor。

15.bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

16.bordercolordark:暗边框颜色,当border值不为0时设置有效。暗边框指表格的右边和下边的边框。

17. align:表格的对齐方式,值有left(左对齐,默认)、center(居中)以及right(右对齐)。align定义的是表格自身的位置,这是一个很有用的属性,强烈建议使用它来规定表格的对齐方式,尽量不要使用<p align=?>表格</p>、<div align=?>表格</div>和<center>表格</center>之类的标签来规定表格的位置,因为这么做将导致论坛添加许多废码!此外,当表格的宽度设置为100%,或者,表格的宽度设置成了占满它所在的容器的宽度,没有必要定义align属性。

18. <font></font>它可以对输出文本的字体大小、其语法通常由 size=字体大小号码) color =颜色常量名,face=选用的字体
19. <img>标志对的src属性赋值在图片中应用

红色部分可要记住.在制帖,他们的位置可不是能换动的.
1条评分
By 凉风友情 金币 +20 | 理由: 鼓励一下 2008-05-18
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 板凳  发表于: 2008-05-18
下面给出一个表格式样,表格中有一些简单的说明。
本表格的属性设置:
边框大小:border=1
边框颜色:bordercolor=#ff0000
背景色:bgcolor=#cc9968
表格宽度:width=400
单元格间距:cellspcing=16
单元格衬距:cellpadding=8
表格的对齐方式(居中):align=center
注:其他属性未设置。
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 地板  发表于: 2008-05-18
上层图参考代码:
<table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center>
<tbody>
<tr>
<td>表格里的内容写在这里
</td>
</tr>
</tbody>
</table>
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 4楼 发表于: 2008-05-18
建边框以及填充里面的文字内容

  一、贴子重要部分是建立一个边框,下面我会提供几个成品边框,有一层的,二层的等等,看你想要哪个了。注意,红色部分是内容。应保持边框代码的完整性~~
  二、边框里加入的内容,有文字,图片,音乐。文字有多种供你选择,选到你喜欢的文字之后,改变其颜色,大小到你想满意为止。图片花样最多,选中你想要的图片格式代码,只需更改其图片地址即可。音乐最简单,改成你想要的音乐地址.

  下例是一个一层的边框.现在教大家怎样在这个边框里填充文字内容.

<table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center>
<tbody>
  <tr>
    <td>文字内容</td>
  </tr>
</tbody>
</table>

  1.填充字体.字号以及字体颜色.

<P align=cente><FONT face=宋体 color=#9709f7 size=5>武当休闲山庄</FONT></P>

#9709f7 是字体颜色. 5代表字号 face=宋体(都可以根据自己的喜好改变)

  2.填充图片.

<P align=center><IMG src= "链接网址"></P>

如果是两张并列的图片.代码如下.

<P align=center><IMG src= "链接网址"><IMG src= "链接网址"></P>

如果是三张,以此类推.把</P>放在结尾处就行了.

  3.填充背景音乐

<EMBED src="音乐链接址" hidden=true type=audio/x-ms-wma LOOP="TRUE" AUTOSTART="TRUE" ></EMBED>
(特别提示: LOOP="TRUE" AUTOSTART="TRUE" 这里的"TRUE"是自动播放的意思.如果改为<LOOP="FALSE" AUTOSTART="FALSE"则为手动播放.这里的"FALSE"是手动播放意思,同理,如果不想把些播放器材隐藏,那么我们只要界定出这个播放器的宽width=个人爱好自定值 高height=50,那么就能看到播放器了>
  
  4.填充FLASH.

<P align=center><EMBED align=center src=FLASH链接网址 width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ></P>

width=400 界定这个FLASH的宽,height=300是界定高.熟悉准备工作的朋友,应该已经熟悉这两个标签的意义了!
[ 此贴被飞雪思函在2008-06-10 11:23重新编辑 ]
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 5楼 发表于: 2008-05-18

实例填充图片

如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 6楼 发表于: 2008-05-18
实例代码如下:
<TABLE borderColor=#ff0000 cellSpacing=16 cellPadding=8 width=400 align=center bgColor=#cc9968 border=1>
<TBODY>
<TR>
<TD>
<P align=center><IMG src="图片链接址"></P>
<P align=center>
<P align=center>
<P align=center><FONT size=5>实例填充图片</FONT></P>
</TD>
</TR>
</TBODY>
</TABLE>
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 7楼 发表于: 2008-05-18
下面不用颜色用背景,改用链接址作背景.示例一层边框:




[ 此贴被飞雪思函在2008-05-18 09:45重新编辑 ]
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 8楼 发表于: 2008-05-18
上例代码:
<TABLE cellSpacing=0 cellPadding=0 width=500 background=0 align=center border=0 >
<TBODY>
<TR>
<TD>
<BR><BR>
<P align=center><IMG src="雨荷地址"></P>
<BR><BR>
</TD>
</TR>
</TBODY>
</TABLE>
[ 此贴被飞雪思函在2008-05-18 09:46重新编辑 ]
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 9楼 发表于: 2008-05-18
三层边框:


[ 此贴被飞雪思函在2008-06-10 11:30重新编辑 ]
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 10楼 发表于: 2008-05-18
三层边框代码:
<TABLE cellSpacing=25 borderColorDark=#344228 cellPadding=0 width="100%" align=center borderColorLight=#7ea063 background=http://www.fjsnow.com/bbs/UploadFile/2006-9/20069291252157566.gif  border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=15 borderColorDark=#344228 cellPadding=0 width="100%" align=center borderColorLight=#7ea063 background=http://bbs.muwen.com/fileuploaddir/4B314681902.jpg border=1>
<TBODY> 
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/01/2cc7fd4b.jpg border=0>
<TBODY>
<TR>
<TD>
<P align=center>
<P align=center>
<P align=center><IMG src="图片链接地址"></P>
<P align=center>
<P align=center>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
[ 此贴被飞雪思函在2008-06-10 11:37重新编辑 ]
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 11楼 发表于: 2008-05-18
五层边框代码:





武当休闲山庄欢迎您



[ 此贴被飞雪思函在2008-06-10 14:23重新编辑 ]
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 12楼 发表于: 2008-05-18
五层边框代码:

<TABLE id=table1 style="LEFT: -170px; WIDTH: 900px; POSITION: relative; TOP: 10px" cellSpacing=50 borderColorDark=#800000 cellPadding=0 align=center borderColorLight=#800000 background=http://www.fjsnow.com/bbs/UploadFile/2006-9/20069291252157566.gif border=1>
<TBODY>
<TR>
<TD>

<TABLE borderColorDark=#800000 cellPadding=15 width="100%" align=center cellSpacing=0 borderColorLight=#800000 bgcolor=#660000 background=http://bbs.muwen.com/fileuploaddir/4B314681902.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColorDark=#800000 cellPadding=10 width="100%" align=center cellSpacing=0 borderColorLight=#800000 bgcolor=#999999 background=http://www.fjsnow.com/bbs/UploadFile/2006-9/20069291252157566.gif  border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColorDark=#800000 cellPadding=6 width="100%" align=center cellSpacing=0 borderColorLight=#800000 bgcolor=#999999 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColorDark=#800000 cellPadding=0 width="100%" align=center cellSpacing=0 borderColorLight=#800000 bgcolor=#999999  background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/01/2cc7fd4b.jpg"  border=0>
<TBODY>
<TR>
<TD>
<P align=center>
<P align=center><BR><BR>
<P align=center><IMG src="图片地址链接"></P>
<P align=center>
<P align=center> <BR><BR>
<P align=center><FONT color=#f0ffff size=6><B>武当休闲山庄欢迎您</B></FONT></P>
<P align=center>
<P align=center><BR><BR>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
[ 此贴被飞雪思函在2008-06-10 14:09重新编辑 ]
如何不发帖就快速得到金币道行
 
离线孙扬

UID: 188

精华: 107
职务: 山庄上宾
级别: 得道成仙

发帖
92760
金币
508082
道行
1918
原创
409
奖券
4122
斑龄
45
道券
141
获奖
0
座驾
设备
摄影级
在线时间: 15761(小时)
注册时间: 2007-08-08
最后登录: 2023-11-01
只看该作者 13楼 发表于: 2008-05-18
呵呵,谢谢老大了,太复杂了。
如何不发帖就快速得到金币道行
 
四年之約☆傷亦堅強

UID: 15

精华: 33
级别: 得道成仙

发帖
17386
金币
2924
道行
1902
原创
31
奖券
289
斑龄
13
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 1241(小时)
注册时间: 2008-02-05
最后登录: 2016-01-01
只看该作者 14楼 发表于: 2008-05-24
谢谢,不过好像只有说表格的也……我试着做做
如何不发帖就快速得到金币道行
 
山庄老油条

UID: 727

精华: 98
级别: 得道成仙

发帖
11173
金币
139609
道行
1990
原创
42
奖券
223
斑龄
12
道券
9
获奖
0
座驾
设备
摄影级
在线时间: 3024(小时)
注册时间: 2006-02-05
最后登录: 2023-12-05
只看该作者 15楼 发表于: 2008-05-27

[ 此贴被美猴王在2008-05-28 06:13重新编辑 ]
如何不发帖就快速得到金币道行
 
曾经我们都以为自己可以为爱情死,其实爱情死不了人,它只会在最疼的地方扎上一针,然后我们欲哭无泪,我们辗转反侧,我们久病成医,我们百炼成钢。你不是风儿,我也不是沙,再缠绵也到不了天涯,擦干了泪,明天早上,我们都要上班。
离线红雪莲

UID: 325089

精华: 5
级别: 武当泰斗

发帖
1703
金币
15033
道行
201
原创
41
奖券
150
斑龄
15
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 1002(小时)
注册时间: 2007-11-22
最后登录: 2012-07-25
只看该作者 16楼 发表于: 2008-05-30


非常感谢!
[ 此贴被红雪莲在2008-05-31 16:43重新编辑 ]
如何不发帖就快速得到金币道行
 
四年之約☆傷亦堅強

UID: 15

精华: 33
级别: 得道成仙

发帖
17386
金币
2924
道行
1902
原创
31
奖券
289
斑龄
13
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 1241(小时)
注册时间: 2008-02-05
最后登录: 2016-01-01
只看该作者 17楼 发表于: 2008-05-31
引用第9楼飞雪思函于2008-05-18 08:51发表的  :
三层边框:
.......

请问怎么使边框的颜色改变啊?谢谢
如何不发帖就快速得到金币道行
 
离线飞雪思函

UID: 213627

精华: 54
职务: 山庄上宾
级别: 武当泰斗

发帖
4198
金币
15325
道行
261
原创
133
奖券
885
斑龄
18
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3097(小时)
注册时间: 2007-06-02
最后登录: 2012-10-04
只看该作者 18楼 发表于: 2008-06-04
引用第17楼无敌加菲猫于2008-05-31 13:18发表的  :
请问怎么使边框的颜色改变啊?谢谢


到这里看看~

http://jvcxp.com/bbs/read.php?tid=405187

可选择你合适的颜色,将数值输入 如bordercolor=#FF0000 为红色
如何不发帖就快速得到金币道行
 
离线wt811

UID: 153478

发帖
114
金币
54
道行
9
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 178(小时)
注册时间: 2007-02-03
最后登录: 2013-05-29
只看该作者 19楼 发表于: 2008-06-09
HTML 代码不可用
如何不发帖就快速得到金币道行
 
快速回复
限120 字节
认真回复加分,灌水扣分~
 
上一个 下一个