武当休闲山庄 - 稳定,和谐,人性化的中文社区

查看完整版本: [-- 简易教程一送给想学HTML制帖的朋友!!! --]

武当休闲山庄 -> 音画教程 -> 简易教程一送给想学HTML制帖的朋友!!! [打印本页]

登录 -> 注册 -> 回复主题 -> 发表主题

<< 1 2 >> Pages: ( 2 total )

飞雪思函

2008-05-18 08:23

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

想学的朋友，加油，希望大家在这里玩得有收获，我们一起交流一起学习，让我们的贴子漂亮起来~~

飞雪思函

2008-05-18 08:24

准备工作,认识代码

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属性赋值在图片中应用

红色部分可要记住．在制帖，他们的位置可不是能换动的．

飞雪思函

2008-05-18 08:28

下面给出一个表格式样，表格中有一些简单的说明。

本表格的属性设置：
边框大小：border=1
边框颜色：bordercolor=#ff0000
背景色：bgcolor=#cc9968
表格宽度：width=400
单元格间距：cellspcing=16
单元格衬距：cellpadding=8
表格的对齐方式（居中）：align=center
注：其他属性未设置。

飞雪思函	2008-05-18 08:32
上层图参考代码： <table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center> <tbody> <tr> <td>表格里的内容写在这里 </td> </tr> </tbody> </table>

飞雪思函

2008-05-18 08:33

建边框以及填充里面的文字内容

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

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

<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-05-18 08:35

实例填充图片

飞雪思函	2008-05-18 08:39
实例代码如下： <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>

飞雪思函

2008-05-18 08:41

下面不用颜色用背景,改用链接址作背景.示例一层边框:

飞雪思函	2008-05-18 08:46
上例代码: <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 08:51

三层边框:

飞雪思函

2008-05-18 08:52

三层边框代码:
<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-05-18 08:56

五层边框代码:

武当休闲山庄欢迎您

飞雪思函

2008-05-18 09:03

五层边框代码:

<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-05-18 22:29
呵呵，谢谢老大了，太复杂了。

无敌加菲猫	2008-05-24 14:14
谢谢，不过好像只有说表格的也……我试着做做

郁闷的小龙

2008-05-27 22:54

红雪莲

2008-05-30 10:39

非常感谢!

无敌加菲猫	2008-05-31 13:18
引用第9楼飞雪思函于2008-05-18 08:51发表的 : 三层边框: ....... 请问怎么使边框的颜色改变啊？谢谢

飞雪思函	2008-06-04 22:52
引用第17楼无敌加菲猫于2008-05-31 13:18发表的 : 请问怎么使边框的颜色改变啊？谢谢到这里看看~ http://jvcxp.com/bbs/read.php?tid=405187 可选择你合适的颜色，将数值输入如bordercolor=#FF0000 为红色

wt811	2008-06-09 01:16
HTML 代码不可用

延陵居士	2008-06-10 15:08
跟飞雪MM学习，自己动手制作，就是代码复杂，呵呵！

凉风友情

2008-06-21 09:53

凉风友情

2008-06-21 10:05

音乐园区欢迎您

zhid	2008-06-23 07:24
谢谢飞雪MM，我一定好好学。

5588	2008-06-24 15:47
是在什么地方做啊!把图片放在什么地方做啊!

飞雪思函	2008-07-03 13:24
引用第24楼5588于2008-06-24 15:47发表的 : 是在什么地方做啊!把图片放在什么地方做啊! 象发普通贴子一样，在发贴的介面上编辑啊~~

forever2011	2008-07-06 16:44
感谢分享！一直想学，但又找不到学的地方。

fjas

2008-07-08 23:18

实例填充图片

fjas

2008-07-08 23:26

武当休闲山庄

这是哪儿出了问题?请赐教

飞雪思函	2008-07-12 23:47
28楼的朋友，您的在加图地址的前面应该用 "" ，可是您加的是“”，所以不能显示图片您再试试~~

bannyby	2008-07-18 16:38
老大你真有本事，我想学就是太烦了，谢谢！有空好好研究一下！

雪兰

2008-07-22 15:51

复制代码

lul	2008-08-05 10:09
感谢楼主一个学习的机会

老朽

2008-08-13 20:22

试试

武当休闲山庄欢迎您

葱葱

2008-08-30 22:37

天际余晖	2008-09-24 14:12
我怎么没有使用HTML的权限啊,郁闷啊!

eyes_001	2008-10-14 18:47
大概看了一遍，才开始看，真有点晕晕的感觉

色影

2008-10-15 16:53

飞雪思函	2008-10-19 16:59
引用第35楼天际余晖于2008-09-24 14:12发表的 : 我怎么没有使用HTML的权限啊,郁闷啊! 可能是你的级别不够，多发好贴子吧，努力就会有收获的~~加油！

凉风友情

2008-12-02 19:18

春天花会开

w0911091	2009-01-21 10:04
加菲猫注意：本答案是图中一个黑点也没有，全是白点。所看到的黑点，是视觉幻影，不能算数。请把1000金币拿来，嘎嘎！

山中人

2009-01-22 11:25

武当休闲山庄欢迎您

永恒的记忆	2009-03-24 19:37
学习学习。。还是没看懂，好复杂啊，还是我们太笨了呢？

qshc12500718	2009-03-25 13:08
受教了,很感谢

stone919	2009-04-13 06:46
楼主你这做的是什么?什么软件?或是什么东西?输入一大堆,往哪输入?

tj_giant	2009-05-10 11:12
怎么发代码贴啊

a1170506	2009-05-29 21:53
这个我不会做，不会用PS

红雪莲

2009-10-12 15:34

武当休闲山庄欢迎您

翠竹绿影	2009-12-12 15:17
先报到，再认真学习制作。

飘在北京	2009-12-22 23:02
学习了，谢谢

查看完整版本: [-- 简易教程一送给想学HTML制帖的朋友!!! --] [-- top --]

Powered by www.wdsz.net v8.7.1 Code ©2005-2018www.wdsz.net
Gzip enabled