html 代码贴图通俗教程 -- 文学乐园

论坛首页论坛统计 Flash游戏风格选择会员注册会员登录论坛设施

文学乐园

学习交流

主题：html 代码贴图通俗教程

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

2006-6-10 23:02:05

07-9-15 12:50:49

html 代码贴图通俗教程

很多朋友对html贴图有着浓厚的兴趣，只是苦于无从下手，找不到要领，所以再给大家提供一个专题讲座，有部分内容以及贴图素材在此就不赘诉了，请参考固顶中的“贴图指导基础教程”，另外本帖是教学帖，谢绝回复，有疑问或试帖请到固顶帖中的“试帖练习”，在那里我尽力为你解惑答疑，让我们共同学习。

一：背景

一个完整的HTML帖子应该是：

美贴＝背景＋文章＋插图＋收尾

原代码如下：
<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>

帖子的文章加图片</TD></TR></TBODY></TABLE>

注意：前边用了多少<table......><tr><td>后面就要有多少</td></tr></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）及相对值（如 80%）。

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 将会失效。

顶楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 12:51:30

Re:

二.贴图

1.基本代码：

<img src=图片网址 width=图片宽度 height=图片高度>

注意：设定图片大小，此宽度及高度一般采用 pixels （也就是像素）作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）。图片的居中，居左，居右上面已经介绍了，这里不再重复。。。。。

2.给图片加边框

基本代码：

<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><tbody><tr><td><img src=图片地址 width=500 height=375></td></tr></tbody></table>

说明：

border="6" 表格边框的厚度，如果你不想显示边框的边，你就把参数设置为“0”。

cellspacing="2" 表格格线的厚度

cellPadding=1　表格格线内厚度

borderColor=#841A00　边框色彩
比较一下，下图与上一个图有什么地方不同？

看出来了吗？这个边框设置成了光感效果，用了这样的代码：

borderColorlight=#CD5C5C 表格边框向光部分的颜色

borderColordark=#841A00 表格边框背光部分的颜色

如果你的边框用了感光效果，bordercolor 就失效了，所以不能同时使用。

上图的代码如下：

1楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 12:52:10

Re:

3 多层边框的制作

　

上图共有4层边框，也就是有4个背景图

第一层

第二层
<TABLE cellSpacing=0 cellPadding=10 width="100%" background=背景图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">

第三层
<TABLE cellSpacing=0 cellPadding=10 width="100%" background=背景图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">

第四层
<TABLE cellSpacing=0 cellPadding=8 width="100%" background=背景图片地址 border=3>
<TBODY>
<TR>
<TD width="100%">

结束语
<P></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

2楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 12:52:50

Re:

图片插入的位置 







例1 普通插入 
<IMG border=0 height=200 src="http://bbs.sm618.com/UploadFile/2005-6/200563021431116601.jpg" width=350>　 
   
border=0  图片的边框    height=200 图片的高度    width=350 图片的宽度 
例2   设定上下左右空白位置 
<img src="http://bbs.sm618.com/UploadFile/2005-6/200563021431116601.jpg" width=350 height=200 border=0 hspace=10 vspace=20>

  设定上下左右空白位置 
hspace=10  是设定图片左右的空间         vspace=20    是设定图片上下的空间 
例3   设定图片中间对齐，边框厚度为 4 
<img src="http://bbs.sm618.com/UploadFile/2005-6/200563021431116601.jpg" width=350 height=200 border=4  align=middle> 
  设定图片中间对齐，边框厚度为 4 
align=middle   格内内容的对齐方式（垂直），可选值为： top (顶部） middle （中部） bottom （底部） 
例4：设定图片靠右 
<img src="http://bbs.sm618.com/UploadFile/2005-6/200563021431116601.jpg" width=350 height=200 border=0 align=right> 
 









align=right   表格的摆放位置（水平），可选值为： left (左） right（右） center（中）

3楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 12:53:30

Re:

下面在四楼的多层边框内插入一图片，图片为居中：

代码如下：

4楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 12:54:19

Re:

文字应用

注意：文字只能在背景图片上显示，所以如果你想在某一图片上写字，就须把图片设置为背景

1.文字基本设制

基本代码如下：

说明：

<font></font>这是一对输入文字的代码

<P align=center>表示居中，<P align=left>表示居左，<P align=right>表示居右。

face=字体　常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等

size=字体大小，这里的最大值为7　取值越大文字就越大

另一种贴法：

font:40pt　数值越大文字就越大。

color=颜色代码

鹰击长空

代码如下：

文字的移动

效果：

移动文字
可根据下面基本代码
自行调节效果

基本代码：

<marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1><font color=red size=+2 face=华文新魏>插入文字</font></marquee>

说明：
direction=移动方向　可选值为向上(up)　向下(down)　向左(left)　向右(right)

behavior=移动方式，　scroll 一圈一圈绕着走，　slide 只走一次，　behavior=alternate 来回走

width=宽度　　height=高度　　scrolldelay=速度　　scrollamount=位移

上面的参数大家可以根据不同的情况自行调节。

5楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 12:55:40

Re:

把上图改为文字移动的效果图：

鹰击长空

代码如下：

6楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 12:56:50

Re:

添加透明flash

代码如下：

说明：粉红字就是插入透明flash的代码，在这里我连续插入了两种flash特效。把FLASH放在图片里面，这样图片就必需作为背景才行，不足之处就在于图片往往较大，而论坛显示范围有限，作为背景的图片常常无法显示全图。所以建议大家在用这种格式的时候最好是选取一些较小的图，也或者自己用PS将图改小了再用。

7楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 12:59:10

Re:

插入音乐

我们通常在在帖子结束前插入音乐，其代码是<EMBED SRC=“音乐地址”>

常用的代码：

AutoStart=true　表示是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为true

Loop=true　表示设定播放重复次数，LOOP=3表示重复3次，true表示无限次播放，FALSE播放一次即停止。

width=宽度 height=高度　可以设定控制播放器面板的大小，如果都设置为0就可以把播放器隐藏了。

VOLUME=0-100 设定音量的大小。如果没设定的话，就用系统的音量。

HIDDEN=TRUE 隐藏控制面板

STARTTIME="分:秒"
设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。

ALIGN="center"
设定控制面板和旁边文字或图片的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom

CONTROLS=CONSOLE/SMALLCONSOLE 设定控制面板的样子

CONTROLS="smallconsole"
设定控制面板的外观。预设值是 console。
console 一般正常面板　　
smallconsole 较小的面板　　
playbutton 只显示播放按钮　　
pausecutton 只显示暂停按钮　　
stopbutton 只显示停止按钮　　
volumelever 只显示音量调节按钮

例一：

作为背景音乐来播放，隐藏了播放器。

例二：

出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。

在论坛做帖常用格试如下：

一：

二：

<bgsound src="音乐文件地址" loop=3>
说明：一般用来插入wav wma mid mp3等格试的音乐文件。

三.视频
<embed src=视频网址 type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400>

四.FLASH动画的方法与添加透明flash 相同。
<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer align=center src=flash地址 width=400 type=application/x-shockwave-flash wmode="transparent" quality="high">

8楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 13:00:00

Re:

html 特技帖

1 如何做满屏帖

在做帖子的第一个边框时，输入下列的代码

2 有的帖子不适合做满屏，可是按传统贴出又觉得宽度窄了一些，那么你可以贴满发帖栏，称为满框帖吧，代码如下：

3 如何使flash特效占满帖子的大部分区域呢？你可以使用下面的代码：

style="LEFT: 80px; 是指动画离屏幕左侧距离

WIDTH: 650px 显示动画的宽度范围

POSITION: absolute 位置固定

TOP: 1000px; 动画离屏幕顶端的距离

HEIGHT: 500px 动画的高度范围

width=700 height=500 动画本身的宽和高

wmode="transparent" 动画透明

这里的参数可以根据你的意向加以变化，让动画出现在你需要的位置。

9楼(TOP)

大漠

等级：

力天使

头衔：

身份：

贵宾

发帖：

1627

精华：

积分：

20261

金钱：

(13819)

在线：

3天18小时18分

来自：

06-6-10 23:02:05

07-9-15 13:00:40

Re:

3 如何使用flash特效浮在帖子上呢？你可以使用下面的代码：

<EMBED style="LEFT: 80px; WIDTH: 650px; POSITION: absolute; TOP: 1000px; HEIGHT: 500px" align=right src=动画地址 width=700 height=500 type=application/octet-stream wmode="transparent" quality="high" >

style="LEFT: 80px; 是指动画离屏幕左侧距离

WIDTH: 650px 显示动画的宽度范围

POSITION: absolute 位置固定

TOP: 1000px; 动画离屏幕顶端的距离

HEIGHT: 500px 动画的高度范围

width=700 height=500 动画本身的宽和高

wmode="transparent" 动画透明

这里的参数可以根据你的意向加以变化，让动画出现在你需要的位置，如果要扩大覆盖的区域，你可以重复这些代码，主要变化top的参数即可。

10楼(TOP)

文学乐园

学习交流