天下美图-如何制作完整HTML代码帖（实例讲解）[堕落街论坛]

以文本方式查看主题

-  堕落街论坛  (http://duoluojie.1314179.com.cn:443/index.asp)
--  天下美图  (http://duoluojie.1314179.com.cn:443/list.asp?boardid=55)
----  如何制作完整HTML代码帖（实例讲解）  (http://duoluojie.1314179.com.cn:443/dispbbs.asp?boardid=55&id=33407)

--  作者：数到三就不哭
--  发布时间：2004/7/7 4:36:00
--  如何制作完整HTML代码帖（实例讲解）

下面是一个完整的代码帖，一般做帖所用到的效果都用到了，还有一些大家只用按照格式套用，理解一些简单的HTML语言就可以做出漂亮的帖子来。讲不出再见〈〈点击查看

整个帖子的原代码如下：

<html> <head><bgsound src="http://www.6uc.com/ycb/jiaoshi/g-yyj/music/20.mp3" loop=3></head> <body background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203491561117.jpg" bgcolor="#3B471F" text="#C9B976" link="#E1D4A5" vlink="B4A46C" alink="#AAC165">

<table align="center" border="0" cellpadding="0" cellspacing="15" width="540" background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203491861117.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="3" width="100%" background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203492161117.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="20" width="100%" background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203492751117.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="2" width="100%" background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203492161117.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203493111117.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="1" width="100%" background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203492161117.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="0" width="100%" background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203493111117.jpg"><tr><td width="100%" align="center"> <img border="0" src="http://bbs.hnol.net/theimg/2004-7-20/3/20047203493411117.jpg" width="236" height="316" alt=""><img border="0" src="http://bbs.hnol.net/theimg/2004-7-20/3/20047203493841117.jpg" width="230" height="316">

<img border="0" src="http://free.efile.com.cn/cry/pic/V02.gif"> <img border="0" src="http://bbs.hnol.net/theimg/2004-7-20/3/20047203501361117.jpg" width="441" height="47">

<table align="center" border="1" cellpadding="0" cellspacing="2" width="90%" bordercolorlight="#637236" bordercolordark="#2E3517"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="0" width="92%" background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203492161117.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="2" cellspacing="0" width="99%" background="http://bbs.hnol.net/theimg/2004-7-20/3/20047203493111117.jpg"><tr><td width="100%" align="center"> <img border="0" src="http://bbs.hnol.net/theimg/2004-7-20/3/20047203494161117.jpg" width="117" height="151">

<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td><img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/2004614194720925.jpg" width="320" height="240"></td></tr></table>

<FONT face=幼圆 color=#AAC165 size=4>是对是错也好不必说了<BR><BR>是怨是爱也好不须揭晓<BR></FONT><BR>

<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td><img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/200462911451387.jpg" width="320" height="240"></td></tr></table>

<FONT face=幼圆 color=#AAC165 size=4>何事更重要比两心的需要<BR><BR>柔情密意怎么可缺少<BR></FONT><BR>

<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td><img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/20046291150692.jpg" width="320" height="240"></td></tr></table>

<FONT face=幼圆 color=#AAC165 size=4>是进是退也好有若狂潮<BR><BR>是痛是爱也好不须发表<BR></FONT><BR>

<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td><img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/20046291154593.gif" width="320" height="240"></td></tr></table>

<FONT face=幼圆 color=#AAC165 size=4>曾为你愿意我梦想都不要<BR><BR>流言自此心知不会少<BR></FONT><BR>

<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td><img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/20046291158443.jpg" width="320" height="240"></td></tr></table>

<FONT face=幼圆 color=#AAC165 size=4>这段情越是浪漫越美妙<BR><BR>离别最是吃不消<BR></FONT><BR>

<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td><img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/2004614194720685.jpg" width="320" height="240"></td></tr></table>

<FONT face=幼圆 color=#AAC165 size=4>我最不忍看你背向我转面<BR><BR>要走的一刻不必诸多眷恋<BR></FONT><BR>

<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td><img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/2004614194720465.jpg" width="320" height="240"></td></tr></table>

<FONT face=幼圆 color=#AAC165 size=4>浮沉浪似人潮那会没有思念<BR><BR>你我伤心到讲不出再见<BR></FONT><BR>

<img border="0" src="http://bbs.hnol.net/theimg/2004-7-20/3/20047203494441117.jpg">

<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td><img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/200462911516765.jpg" width="300" height="410"></td></tr></table>

<img border="0" src="http://bbs.hnol.net/theimg/2004-7-20/3/20047203494761117.jpg" width="166" height="139">

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

<FONT face=幼圆 color=#C9B976 size=3>编辑制作：雪夜寒星</FONT><BR> <img border="0" src="http://bbs.hnol.net/theimg/2004-7-20/3/20047203501361117.jpg" width="441" height="47">

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

<EMBED style="LEFT: 280px; WIDTH: 400px; POSITION: absolute; TOP: 450px; HEIGHT: 300px" align=right src=http://bg.cn898.net/fh/2/504.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED style="LEFT: 320px; WIDTH: 300px; POSITION: absolute; TOP: 460px; HEIGHT: 200px" align=right src=http://bg.cn898.net/3.swf width=300 height=200 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> </body> </html>

[此贴子已经被作者于2004-7-20 4:17:49编辑过]

--  作者：数到三就不哭
--  发布时间：2004/7/7 4:36:00
--

<html> 是开头标记，指明下面是HTML语言编写的。

<head><bgsound src="http://www.6uc.com/ycb/jiaoshi/g-yyj/music/20.mp3" loop=3></head>

是指HTML文件主题，一般音乐文件也可以插在此处。反正隐藏的音乐无论放在什么地方都可以的。

<BODY background=http://www.cn898.net/bbs/UploadFile/20044244513779948.jpg>

这个就是帖子的外背景。用的是下面这张图：

除去这个外背景，整个帖子我用了七层表格背景。下面是这七层表格的代码：

<table align="center" border="0" cellpadding="0" cellspacing="15" width="540" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553878.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="3" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="20" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553573.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="2" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="5" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553907.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="1" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="0" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553907.jpg"><tr><td width="100%" align="center">

说明：

第一层表格所用背景图为：

代码如下：<table align="center" border="0" cellpadding="0" cellspacing="15" width="540" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553878.jpg"><tr><td width="100%" align="center">

相关属性调整：

align="center" 表格的摆放位置（水平），可选值为： left, right, center

border="0" 表格边框的厚度，不同浏览器有不同的内定值，故请指明。

cellpadding="0" 文字内容与格线的距离。

cellspacing="15" 表格格线的厚度，数值越大，显示就越厚。

width="540" 表格宽度，接受绝对值（如 80）及相对值（如 80%）。

background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553878.jpg"表格的背景图片，（与 bgcolor 不要同用）。

在<td>里面的width="100%"是指表格里面内容占整个表格的100%，align="center"指表格里面的内容居中.

后面的我就不一一说明了，大家可以根据自己的需求分别调整每层表格的属性。

第二层背景图为：

第三层背景图为：

第四层背景图为：

第五层背景图为：

第六层背景图为：

第七层背景图为：

注明，最后一层表格，<table border="0" cellpadding="0" cellspacing="0" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553907.jpg"><tr><td width="100%" align="center"> 在<table .......>的属性中我并没有设制居中，而是把居中设制在<td width="100%" align="center">里面。在<td>里面的width="100%"是指表格里面内容占整个表格的100%，align="center"指表格里面的内容居中，这样在这个格里的所有内容我不用加居中符号它们也是居中的，省去了很多代码。

为了使整个代码帖发表后在论坛里居中所以只用在第一层表格的<table> 里加上居中就可以了，后面多层的居中就加在<td>里面。第一层表格中，<table .......>里面的align="center"是指表格在整个页面处于居中，width="540" 是指整个表格的宽度。

[此贴子已经被作者于2004-7-20 4:26:04编辑过]

--  作者：数到三就不哭
--  发布时间：2004/7/7 4:37:00
--

再是与背景相符的装饰图

<img border="0" src="http://www.xqwuyu.com/UploadFile/2004-6/200462902612635.jpg" width="236" height="316" alt=""><img border="0" src="http://www.xqwuyu.com/UploadFile/2004-6/20046290345120.jpg" width="230" height="316">

这是两张图拼成一张的。没有什么要特别说明的吧```

下面是主题文字，我是用UA5做的效果，借用了做图软件把文字做成了GIF图片。

<img border="0" src="http://free.efile.com.cn/cry/pic/V02.gif">

大家可以直接用特效文字代码来做喜欢的效果，在代码帖里有说明文字效果的代码，直接套用就可以了。

另外的一些用来点缀的图我就不一一的说明了，成套的组合素材中这些都是齐全的，以自己找一些图来做装饰。只要搭配好就可以了。

下面是帖子内容文字的代码，我没有用任何特效。

<FONT face=幼圆 color=#AAC165 size=4>是对是错也好不必说了<BR><BR>是怨是爱也好不须揭晓<BR></FONT>

face=幼圆指字体

color=#AAC165 指文字颜色

size=4 指文字大小，数值越大文字越大

文字中间<br>是换行符号

--  作者：数到三就不哭
--  发布时间：2004/7/7 4:37:00
--

中心内容在于帖子内容了。

我在帖子内容上又加了三层表格来美化。

代码如下：<table align="center" border="1" cellpadding="0" cellspacing="2" width="90%" bordercolorlight="#637236" bordercolordark="#2E3517"><tr><td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="0" width="92%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg"><tr><td width="100%" align="center"><table border="0" cellpadding="2" cellspacing="0" width="99%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553907.jpg"><tr><td width="100%" align="center">

想关属性我就不一一说明了，只简单的说些注意的地方，在这里的第一层宽度上最好是用百分比。

第一层我没有用到背景图和背景颜色，这层表格只是起到一个框架的作用，可以给里面的内容定位。

第二层背景图为：

第二层背景图为：

说明：像第二层背景只有两边看得到的效果，主要是在调整表格宽度上来实现的，重点是在调整表格的宽度（这个背景层的宽度和下一层背景表格的宽度）。先前的多层背景的美观是在cellpadding="" cellspacing=""这两个属性上来实现的，而表格宽均设为100%，这种情况就不同了，在第二层表格中，cellpadding="" cellspacing=""这两个属性在这里全设为0，宽的取值为width="92%"，而第三层背景中宽的取值则设为width="99%"，主要就是在这两个宽的取值上。大家可以跟据不同要求来设制。

下面是主题内容图片的代码，我只用了一层表格来加框。

<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td><img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/2004614194720925.jpg" width="320" height="240"></td></tr></table>

说明：

背景层的代码如下：<table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"><tr><td>

我没有用背景图片也没用用背景颜色，只用了边框的颜色的属性。

bordercolorlight="#C9B976" 表格边框向光部分的颜色

bordercolordark="#C9B976" 表格边框背光部分的颜色

由于在整个内容部分的表格层里的<td width="100%" align="center">中设制了居中，所以这个表格中的内容都会居中，在这里的图片边框表格和图片代码中我都不需要再设制居中了。图片也只用调整宽和高了。

图片的代码如下：<img border="0" src="http://bbs.mz99.com/UploadFile/2004-6/2004614194720925.jpg" width="320" height="240">

注明：在每张图片层的结尾处都不要忘了收尾</TD></TR></TABLE>，用了几个表格来加框这里就要有几个收尾。

在主题内容的图片和文字完了之后，由于前面把整个帖子的内容加了表格的，所以这里在肉容图片文字完结之后不要忘了收尾</td></tr></table></td></tr></table></td></tr></table>

这里我用了三个<table>就要有三个</table> 来结尾.

这样主题内容算是完成了。后面的就加一些装饰的图，签上名字等`````再来就是帖子结尾了。最前面的我用了七层表格做为帖子背景，这里收尾也要有七个层。

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

注明：由与在表格的属性里已经高整好了层与层之间的距离，所以每层的收尾不要断开，不能用换行键另起一行，（论坛里另起一行为默认值，而HTML语法中<br>为换行符号）。

虽然背景结尾了但是帖子并没有完。再来就是透明FLASH了````

我用了两个透明FLASH把它们调整到了重叠的位置上，FLASH的代码如下：

<EMBED style="LEFT: 300px; WIDTH: 400px; POSITION: absolute; TOP: 470px; HEIGHT: 300px" align=right src=http://www.cn898.net/bg/fh/2/504.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED style="LEFT: 350px; WIDTH: 300px; POSITION: absolute; TOP: 480px; HEIGHT: 200px" align=right src=http://www.cn898.net/bg/fh/2/600.swf width=300 height=200 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

透明FLSH的应用我在透明FLASH的应用的帖子里已经作了详细的说明，这里就不多说了，只是提一下，把调整位置的相关属性调节相同就可以重叠了。为了合其结合得更好要做稍微小的属性值的改变。只要大家注意看一下我这里FLASH代码的相关属性就很容易发现的。

最后才是整个帖子的结尾了

</body></html>

这样一个帖子才算完成。

符加一句，在7.0的论坛发HTML的帖子时，在发帖前最好是先把发帖栏下面的自动修正取消。

[此贴子已经被作者于2004-7-20 4:29:24编辑过]

--  作者：数到三就不哭
--  发布时间：2004/7/7 4:39:00
--

如何用HTML标签作帖：（HTML语法具体参数详解）
教大家用HTML标签做帖 ＜＜－点击查看

--  作者：sky
--  发布时间：2004/7/7 18:04:00
--

谢谢不哭的教程,我一定好好学习!

--  作者：娜拉：）
--  发布时间：2004/7/14 10:43:00
--

天啊，太复杂了。

我看到那些代码我就已经晕了，到底要怎么用啊？

--  作者：白衣
--  发布时间：2004/7/14 10:46:00
--

小儿科哦
做几个网页你就全明白了

--  作者：哭泣的鱼
--  发布时间：2004/7/17 20:29:00
--

做几个网页?
天啊,说得真轻松
头晕晕了

--  作者：PENGKING
--  发布时间：2004/7/18 9:24:00
--

好像看起来比C语言还复杂
看得我眼花...
在什么界面上使用?