新哈飞

 找回密码
 立即注册
搜索
查看: 11388|回复: 61

教程--怎样发布使用HTML编写的帖子

[复制链接]
发表于 2006-12-6 13:45:31 | 显示全部楼层 |阅读模式
在学习使用HTML编写帖子前,请朋友们先看看是否有“使用HTML代码”的权限。
未命名.JPG
 楼主| 发表于 2006-12-6 13:57:28 | 显示全部楼层
谈点体会:

第一:写“回”字。
用HTML制帖,就像我们写一个“回”字,是一种单一的边框结构。我们写“回”字,按照笔划顺序来讲,该是先外边后里边吧,无论这个“口”字里有多少个“口”字,最外边的“口”先结束,最里边的最后结束。用HTML制帖,就是这个道理。等大家熟悉掌握运用这些代码后,更加复杂的布局,比如像制作一张工作人员花名册,就涉及到行<TR>.列<TD>,好像是更难一点的了,等大家熟悉运用这些代码后,自然不难了。

第二:有始有终。
用HTML制作,最重要的一点就是做到有始有终,也就是有开始必须有结束。比如<P>这个标签,它是意思是表示段落的标签代码(类似文章的换行),当一段编辑后,必需用</P>表示结束。

第三:拿来主义。
掌握并熟悉地运用HTML后,接触的帖子也多了,你会发现,每一个人有每一个人的制作方法及特点。那么,我们在欣赏别人精典制作的同时,不仿拿回家看看,该收藏的收藏,该掌握的掌握,比如素材好我们就收藏,自己做帖时可以运用,比如制作特点,方法,我们可以拿为己用,没有什么不好意思。

学习的朋友们,如果遇到疑点就跟帖,或者到菜鸟学堂相互交流,我会尽我所能为大家解答,谢谢。
发表于 2006-12-6 14:05:10 | 显示全部楼层
俺愚钝,听得一头雾水,可否请老师举例说明,俺跟着一步一步来
发表于 2006-12-6 14:09:30 | 显示全部楼层
掌握并熟悉地运用HTML不是一两天学得会的,从最简单的开始吧,搞一个会出声的图片,上面可以自己写点喜欢的字,应该从哪里入手呐?
 楼主| 发表于 2006-12-6 14:13:10 | 显示全部楼层
对于论坛里的特效帖子,主要元素一般是5个:表格、图片、文字、FLASH、音乐。在这5个元素中,表格一般通过使用HTML代码编写后实现,文字可以编辑,也可以做在图片上。而其他的元素,一般都是通过引用的方式而不是传递在本论坛。因此,一个特效贴,我们可以理解为:我们(图片、FLASH、音乐)来自五湖四海,为了一个共同的目标(被编辑着引用)走到一起来了(通过HTML语法组成了一个画面)。
 楼主| 发表于 2006-12-6 14:21:10 | 显示全部楼层
我们先从最基本的开始:认识代码。

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属性赋值在图片中引用。
发表于 2006-12-6 14:22:34 | 显示全部楼层
楼主辛苦了
 楼主| 发表于 2006-12-6 14:33:19 | 显示全部楼层
画一个表格。

表格是一个特效帖子的最基本元素,因此,通过HTML来画一个表格也就成了最基本的技能。

首先,在“使用HTML代码”框里打勾。

然后,在编辑栏里编辑

<table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center>
<tbody>
<tr>
<td>表格里的内容写在这里
</td>
</tr>
</tbody>
</table>

提交。
 楼主| 发表于 2006-12-6 14:35:27 | 显示全部楼层
我们可以看到,效果是这样的:
<TABLE borderColor=#ff0000 cellSpacing=16 cellPadding=8 width=400 align=center bgColor=#cc9968 border=1>
<TBODY>
<TR>
<TD>表格里的内容写在这里 </TD></TR></TBODY></TABLE>
 楼主| 发表于 2006-12-6 14:53:09 | 显示全部楼层
表格画好后,我们学习一下怎样填充表格里的内容。

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

&lt;P align=cente&gt;&lt;FONT face=宋体 color=#9709f7 size=5&gt;哈飞车友会&lt;/FONT&gt;&lt;/P&gt;

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

2.填充图片.

&lt;P align=center&gt;&lt;IMG src= "链接网址"&gt;&lt;/P&gt;

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

&lt;P align=center&gt;&lt;IMG src= "链接网址"&gt;&lt;IMG src= "链接网址"&gt;&lt;/P&gt;

如果是三张,以此类推.把&lt;/P&gt;放在结尾处就行了.

3.填充背景音乐

&lt;embed src=&quot;音乐链接址&quot; hidden=true type=audio/x-ms-wma loop=&quot;true&quot; autostart=&quot;true&quot; &gt;&lt;/embed&gt;

(特别提示:hidden表示隐藏播放器,loop表示循环,autostart表示自动开始,而它们的值&quot;true&quot;表示&quot;真&quot;,如果改为&lt;loop=&quot;false&quot; autostart=&quot;false&quot;则表示&quot;假&quot;,意思是不循环,手动播放。如果不想把播放器隐藏,那么我们只要界定出这个播放器的宽width=个人爱好自定值 高height=45,变成&lt;embed src=&quot;音乐链接址&quot; width=个人爱好自定值 height=45 type=audio/x-ms-wma loop=&quot;true&quot; autostart=&quot;true&quot; &gt;&lt;/embed&gt;,那么就能看到播放器了)。
  
4.填充FLASH.

&lt;P align=center&gt;&lt;EMBED align=center src=FLASH链接网址 width=400 height=300 type=application/octet-stream wmode=&quot;transparent&quot; quality=&quot;high&quot; &gt;&lt;/P&gt;

width=400 界定这个FLASH的宽,height=300是界定高。
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|小黑屋|哈飞车友会 ( 鲁ICP备15020090号-4 ) | 点击这里给我发消息 |

GMT+8, 2024-3-29 05:23 , Processed in 0.022823 second(s), 8 queries , MemCache On.

Powered by Discuz! X

© ys166.com

快速回复 返回顶部 返回列表