html代码做贴讲解

发表日期：2006年2月2日  出处：网络  本页面已被访问 3176 次
html代码做贴讲解
 
第一讲：基本知识
 
贴图的朋友总是想把自己的图片做的更漂亮些。那么，怎样才能使贴图更漂亮呢？使用HTML代码就是较好的方法之一。粗看HTML代码，是一堆枯操的字母，好象有些头疼，其实，认真学起来并不难。下面结合具体例子，一起来学习利用HTML代码制作图片。
用HTML代码制图，实际就是利用制作表格的方法来美化图片。（这里单讲制图，不讨论网页制作）我们先来看下面的代码：
 
<*TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=##1E90FF width=500><*TBODY><*TR><*TD>加入内容<*/TD><*/TR><*/TBODY><*/TABLE>
 
（注：实际使用时要去掉*号，以下同此说明）
这是一个简单的一层表格，我们可以在“加入内容”这里放入我们想要的文章或图片。
 
一、常用的参数设定及注解：
 
<*table width=400 border=10 cellspacing=2 cellpadding=2 align=CENTER valign=TOP background="图片网址" bgcolor=#0000FF bordercolor=#CF0000 bordercolorlight=#00FF00 bordercolordark=#00FFFF>
width=400
表格宽度，接受绝对值（如 500）及相对值（如“100%”）。
border=10
表格边框的厚度。
cellspacing=2
表格格线的厚度
cellPadding=5
表格格线内厚度
align=CENTER
表格的摆放位置（水平），可选值为：左： left,　右： right,　居中： center
valign=TOP.
表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。
background="背景图片网址"
表格的背景图片，与 bgcolor 不要同用。
bgcolor="#0000FF"
表格的底色，与 background 不要同用
bordercolor="#CF0000"
表格边框颜色
bordercolorlight="#00FF00"
表格边框向光部分的颜色
bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
二.文字应用
 
1.文字基本设制
 
基本代码如下：
<*P align=center><*FONT color=#CFCF88 face=华文行楷 size=5>插入文字
 
<*P align=center>表示居中，<*P align=left>表示居左，<*P align=right>表示居右。
face=字体　常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等
size=字体大小，这里的最大值为7　取值越大文字就越大
另一种贴法：
<*font style=font:40pt face=新宋体 color=#ff0000>插入文字
font:40pt　数值越大文字就越大。
color=颜色代码。
下面是颜色代码表，大家可以自己选择：
 
2.移动文字
 
效果：
移动文字
可根据下面基本代码
自行调节效果
基本代码：
<*marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1><*font color=red size=3 face=华文新魏>插入文字
说明：
direction=移动方向　可选值为向上(up)　向下(down)　向左(left)　向右(right)
behavior=移动方式，　scroll 一圈一圈绕着走，　slide 只走一次，　behavior=alternate 来回走
width=宽度　　height=高度　　scrolldelay=速度　　scrollamount=位移
上面的参数大家可以根据不同的情况自行调节。
3。文字特效
 
效果1
蝶舞天涯欢迎你
代码如下：
 
<*table align=center background=http://ccd.zjonline.com.cn/images/txtp/txtp002.jpg border=3 bordercolor=#00FA9A width=500 height=380><*tbody><*tr><*td><*marquee behavior=alternate scrollamount=3 direction=down height=350><*marquee behavior=alternate scrollamount=3 width=500><*img src=http://love.xaonline.com/upload/2004612/UF488696.gif><*font face=华文行楷 color=#800080 size=6><*b>蝶舞小站欢迎您<*img src=http://love.xaonline.com/upload/2004612/UF488696.gif><*/td><*/tr><*/tbody><*/table>
效果2
欢 迎 您 的 光 临
代码如下：
<*center><*table width=500><*tbody><*tr><*td><*font color=#991144><*marquee behavior=alternate><*MARQUEE behavior=alternate><*FONT face=隶书 color=red size=7><*MARQUEE direction=up behavior=alternate width=60 height=120>欢<*/MARQUEE><*FONT color=orange><*MARQUEE direction=up behavior=alternate width=60 height=80>迎<*/MARQUEE><*FONT color=#FF8CA9><*MARQUEE direction=up behavior=alternate width=60 height=120>您<*/MARQUEE><*FONT color=green><*MARQUEE direction=up behavior=alternate width=60 height=80>的<*/MARQUEE><*FONT color=blue><*MARQUEE direction=up behavior=alternate width=60 height=120>光<*/MARQUEE><*FONT color=lime><*MARQUEE direction=up behavior=alternate width=60 height=80>临<*/MARQUEE><*/FONT><*/FONT><*/FONT><*/FONT><*/FONT><*/FONT><*/marquee><*/font><*/td><*/tr><*/tbody><*/table><*/center><*/p>
文字特效有很多种，以后我会把文字特效代码贴出来的
三.贴图
 
1.基本代码：
 
<*img src=图片网址 width=图片宽度 height=图片长度>
注意：设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）。图片的居中，居左，居右上面已经介绍了，这里不再重复。。。。。
 
2.给图片加边框
 
效果：

基本代码：
<*table border=6 cellSpacing=2 cellPadding=1 borderColor=#00FA9A><*tbody><*tr><*td><*img src=http://ccd.zjonline.com.cn/images/txtp/txtp010.jpg width=500 height=380><*/td><*/tr><*/tbody><*/table>
透明ＦＬＳＨ代码：

说明：
 
border="6" 表格边框的厚度，不同浏览器有不同的内定值。
cellspacing="2" 表格格线的厚度
cellPadding=1　表格格线内厚度
borderColor=#841A00　边框色彩
3.图片朦胧
 
A.圆形效果
 

代码：　<*IMG src="图片" width=500 height=380 style="filter:Alpha(opacity=100,style=2);">
B.方形效果

代码：　<*IMG src="图片" style="FILTER: Alpha(opacity=200,style=3)" width=500 height=380 ALGIN="MIDDLE">
四.透明FLAH的应用
 
1.常用效果
 
',1)">
代码如下：
<*center><*TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#00FA9A background=图片><*TBODY><*tr><*TD><*EMBED src=透明网址 width=500 height=380 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"><*/embed><*/td><*/tr><*/tbody><*/table><*/center>
注意：长和宽的设定要根据图片的实际大小来设定
 
2.定位透明FLASH效果
 
注意：这种方法由于是通过坐标的方式把透明FLASH固定到了某一点，所以在不同的环境和不同的论坛要相应调整不同的位置。定位较为麻烦，而且最大的弊病就是屏幕分辨率设置不一样，观看的效果也不一样（比如你是用分辨率1024×768做的帖子，你感觉固定的位置很好。但别人用分辨率800×600观看却偏得很远。本人建议一般不要用这种方法。
 
定位效果图

',2)">
代码如下：
<*TABLE align=center background=http://bbs.hnol.net/theimg/2004-6-22/19/200462219571581105.jpg border=10 cellPadding=5 cellSpacing=2 borderColor=#00FA9A width=500><*TBODY><*TR><*TD><*center><*table border=6 cellSpacing=2 cellPadding=1 borderColor=#7FFFD4><*tbody><*tr><*td><*img src=http://ccd.zjonline.com.cn/images/txtp/txtp002.jpg width=400 height=300><*/td><*/tr><*/tbody><*/table><*EMBED style="LEFT: 200px; WIDTH: 400px; POSITION: absolute; TOP: 8000px; HEIGHT: 300px" align=right src=http://www.nygyfs.com/tmswf/03.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;><*/EMBED>
<*/TD><*/TR><*/TBODY><*/TABLE>
说明：
TOP: 8000px 指FLASH与帖子上边之间的距离。
LEFT: 200px 是指FLASH与帖子左边的距离
WIDTH: 500px　HEIGHT: 300px　是指FLASH定位的范围宽度和高度
后面的width=400 height=300 就是指FLASH的宽和高了。
 
五.贴歌代码
 
1.背景音乐（适合　mid wma等格式）
 
<*bgsound src=音乐网址 Loop=-1>
2.音频（适合MP3 WMA RM等很多格式）
 
代码如下：
<*embed src=音乐网址 type=audio/x-pn-realaudio-plugin controls=ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=40>
3.视频
 
<*embed src=视频网址 type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400>
4.FLASH
 
<*embed src=网址 width=400 height=400>
说明：AutoStart=true　表示是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为true
Loop=true　表示设定播放重复次数，LOOP=3表示重复3次，true表示无限次播放，FALSE播放一次即停止。
width=宽度 height=高度　可以设定控制播放器面板的大小，如果都设置为0就可以把播放器隐藏了。
 
受本论坛的限制，我只有在每个代码表格前加上*号才能出现目前的效果，实际应用时要去掉<>里的*号，切记切记。
html常用字体代码：（在实际应用时要去掉<>里面的*号，切记切记）
雨中情缘欢迎你的到来
代码：
<*center><*FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><*B>蝶舞天涯欢迎你的到来<*/B><*/FONT><*/center>
雨中情缘欢迎你的到来
代码：
<*CENTER><*FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=#DA70D6); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体"><*B>蝶舞天涯欢迎你的到来<*/B><*/FONT><*/CENTER>
雨中情缘欢迎你
代码：
<*CENTER><*FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 100%" face=汉鼎繁随意 size=6>蝶舞天涯欢迎你<*/FONT><*FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=apar); WIDTH: 100%; COLOR: #ff00ff; LINE-HEIGHT: 100%; FONT-FAMILY: 汉鼎繁中变" size=6><*/FONT><*FONT color=#ff00ff><*/FONT><*/center>
蝶 舞 天 涯 欢 迎 您
代码：
<*FONT face=隶书 color=red size=15><*MARQUEE direction=up behavior=alternate width=60 height=120>蝶<*/MARQUEE><*FONT color=yellow><*MARQUEE direction=up behavior=alternate width=60 height=80>舞<*/MARQUEE><*FONT color=brown><*MARQUEE direction=up behavior=alternate width=60 height=120>天<*/MARQUEE><*FONT color=green><*MARQUEE direction=up behavior=alternate width=60 height=80>涯<*/MARQUEE><*FONT color=orange><*MARQUEE direction=up behavior=alternate width=60 height=120>欢<*/MARQUEE><*FONT color=yellow><*MARQUEE direction=up behavior=alternate width=60 height=80>迎<*/MARQUEE><*FONT color=orange><*MARQUEE direction=up behavior=alternate width=60 height=120>您<*/MARQUEE><*/FONT><*/MARQUEE><*/FONT><*/CENTER><*/FONT><*/FONT><*/FONT><*/FONT><*/FONT><*/FONT>
欢 迎 光 临 蝶 舞 小 站
代码：
<*MARQUEE scrollAmount=8 direction=right behavior=alternate><*B><*FONT color=#7700bb size=5><*FONT color=lime><*MARQUEE direction=up behavior=alternate width=40 height=200 align="middle">欢<*/MARQUEE><*FONT color=red><*MARQUEE direction=up behavior=alternate width=40 height=150>迎<*/MARQUEE><*FONT color=orange><*MARQUEE direction=up behavior=alternate width=40 height=200>光<*/MARQUEE><*FONT color=fuchsia><*MARQUEE direction=up behavior=alternate width=40 height=150>临<*/MARQUEE><*FONT color=olive><*MARQUEE direction=up behavior=alternate width=40 height=200>蝶<*/MARQUEE><*FONT color=green><*MARQUEE direction=up behavior=alternate width=40 height=150>舞<*/MARQUEE><*FONT color=red><*MARQUEE direction=up behavior=alternate width=40 height=200>小<*/MARQUEE><*FONT color=orange><*MARQUEE direction=up behavior=alternate width=40 height=150>站<*/MARQUEE><*FONT color=orange><*/FONT><*/B><*/MARQUEE>
欢迎光临蝶舞小站
代码：
<*center><*MARQUEE direction=down width=480 height=50><*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_1.gif"><*FONT face=隶书 color=#ff0000 size=7>蝶舞天涯欢迎你<*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_1.gif"><*/FONT><*/MARQUEE>
蝶舞天涯欢迎你
代码：
<*DIV style="FILTER: shadow(color=#6495ED, strength=60); WIDTH: 480px"><*FONT face=华文彩云 color=#BA55D3 size=7><*B><*CENTER>
蝶舞天涯欢迎您<*/B><*/CENTER><*/FONT><*P><*/P><*/DIV>
雨中情缘涯欢迎您
代码：
<*CENTER><*FONT style="FONT-WEIGHT: normal; FONT-SIZE: 60pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=red><*B>蝶舞天涯<*/B><*/FONT><*/CENTER>
蝶舞天涯
代码：
<*MARQUEE direction=right width=240 height=50><*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_2.gif"><*FONT face=隶书 color=#ff0000 size=7>区社怀情里风<*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_2.gif"><*/FONT><*/MARQUEE><*/FONT>
<*MARQUEE width=240 height=50><*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_3.gif"><*FONT face=隶书 color=#ff0000 size=7>蝶舞天涯<*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_3.gif"><*/FONT><*/MARQUEE>
蝶舞天涯
蝶舞天涯
代码：
<*MARQUEE width=220 height=50><*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_3.gif"><*FONT face=隶书 color=#ff0000 size=7> 蝶舞天涯<*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_3.gif"><*/FONT><*/MARQUEE><*/FONT>
<*MARQUEE direction=right width=220 height=50><*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_2.gif"><*FONT face=隶书 color=#ff0000 size=7>蝶舞天涯<*IMG src="http://image14.360doc.com/DownloadImg/2010/08/3017/4947951_2.gif"><*/FONT><*/MARQUEE><*/FONT>
蝶舞天涯
代码：
<*P align=center><*FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 70px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px; POSITION: relative" color=#3333cc>蝶舞天涯<*/FONT><*/CAPTION><*BR><*/CAPTION><*/P>
 
蝶舞天涯
代码：
<*font size=7><*font><*font color="#FF0000">蝶<*/font><*font color="#D52A00">舞<*/font><*font color="#AB5400">天<*/font><*font color="#817E00">涯<*/font><*font color="#57A800">欢<*/font><*font color="#2DD200">迎<*/font><*/font>
用HTML代码制图，实际就是利用制作表格的方法来美化图片。（这里单讲制图，不讨论网页制作）请在粘贴代码之前先点击发言框下面的HTML
一，开头和结尾。

上面开头，下面结尾。

其中表格的属性：
cellSpacing=15是外表框与内表框的距离，
cellPadding=20是表框与内容的距离，
width=500表格宽度（论坛设置最宽为504，也可以用%来表示。表格高度会自动适应内容的）
border=10是表框宽度，bordercolor=#ff0000就是表框的颜色了。
align=center是居中对齐，center改成right,left,就是居右，居左对齐了。这里的距离和宽度单位都是像素，颜色是16进制代号。
也可以用英文表示。background=是背景代码，http://ex-c.com/FREE/free18.gif 背景图片地址。
是表元，理解为开头必须的就是。
是表格的行与列，默认都是1，即一个格子。
开头和结尾是双标签，必须成对使用。
2，插入图片，文字，音乐等内容，

热烈祝贺 人到中年开坛之喜 这里是你的家 这里是你心灵歇息的港湾 这里有爱的细语 这里有情的倾诉 这里是欢乐的空间 这里是友爱的世界 人到中年期待着每位朋友的挥洒吟唱 创作编制：午夜星辰

这样，一个简单的用html代码的帖子就做成了。
在代码里
是换行，

表示后面的内容居中对齐。
也可以用

内容的双标签。把“center”改成right,left,就是居右，居左对齐了。
热烈祝贺人到中年开坛之喜 表示插入文字。
文字加粗，
COLOR=FF0000，文字颜色。
face=华文新魏，字体
size=7，字号 1--7从小到大。
是双标签，要成对使用。
，是插入图片的代码。
文字或图片
表示移动的文字或图片。其中，scrollAmount=2 移动速度，数字大，移动快。
direction=up，移动方向，up,向上，right，向右，left，向左。height=60，移动的高度。

插入背景音乐。是插入代码。
属性：hidden=true是隐藏播放器，loop="true"设定重复播放为无限次，autostart="true"设定自动播放。
学到这里，你应该也想要试试了吧。
另外，你想把图做成全屏的，把开头的：

改成

但一定要点去发言框下面“自动修正”前面的“钩”
其中WIDTH: 140%是帖子的宽，TOP: 150px是帖子与主题之间的高度，WIDTH: 140%也可用WIDTH: 950px表示，但有的电脑的显示器会看不全边框。
如果还是觉得难的话，告诉你一个最简单的办法。把上面的帖子代码里的背景和图片，还有音乐及签名等，都换上你自己的内容总能做成了吧！
上面讲了利用HTML贴图的最基本的代码和方法。如有不明白的地方，请大家提出来。
雨中情缘 ~*
 
一杯热茶~*
一声问候.
一声问候...
这里是你我的家
这里是你我的家
淡淡的友情最诚
淡淡的友情最真

淡淡的问候最醇
淡淡的问候最醇

雨中

柳

查看论坛限制
查看论坛限制
查看论坛限制
查看论坛限制
朋友您辛苦了!

朋友您辛苦了!