HTML代码贴图做帖通俗教程

舌尖的冥想

 

很多朋友对html贴图有着浓厚的兴趣，只是苦于无从下手，找不到要领，所以再给大家提供一个专题讲座让我们共同学习。

 

 

一：背景 原代码如下：

 

<TABLE borderColor=#841a00 cellSpacing=2 width=500 align=center background=背景图片网址 border=10>
<TBODY>
<TR>
<TD>帖子的文章加图片</TD></TR></TBODY></TABLE>

注意：前边用了多少<TABLE......><TBODY>
<TR>
<TD>

后面就要有多少</TD></TR></TBODY></TABLE>收尾。多收和少收都会使帖子出错哦

 

常用的参数设定及注解：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 将会失效

舌尖的冥想

二.贴图

贴图 1.基本代码：

 

 

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

<TABLE borderColor=#841a00 cellSpacing=2 cellPadding=1 border=6>
<TBODY>
<TR>
<TD><IMG height=375 src="图片地址" width=500></TD></TR></TBODY></TABLE>

 

说明：

 

border="6" 表格边框的厚度，如果你不想显示边框的边，你就把参数设置为“0”。 cellspacing="2" 表格格线的厚度 cellPadding=1　表格格线内厚度 borderColor=#841A00　边框色彩 为边框设置成了光感效果，用这样的代码： borderColorlight=#CD5C5C 表格边框向光部分的颜色 borderColordark=#841A00 表格边框背光部分的颜色 如果你的边框用了感光效果，bordercolor 就失效了，所以不能同时使用.

舌尖的冥想

三、 多层边框的制作

 

3 多层边框的制作 有4层边框，也就是有4个背景图

 

第一层

 

<TABLE cellSpacing=0 cellPadding=15 width=600 background=背景图片地址 border=3>
<TBODY>
<TR>
<TD width="100%">第二层
<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>

舌尖的冥想

添加透明flash

 

添加透明flash 代码如下：

 

<TD><EMBED align=center src=flash地址 width=400 type=application/x-shockwave-flash quality="high" wmode="transparent"><EMBED align=left src=flash地址 width=550 height=350 type=application/x-shockwave-flash quality="high" wmode="transparent"></TD>

 

 

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

舌尖的冥想

舌尖的冥想

五、文字应用

 

文字应用

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

 

1.文字基本设制

 

基本代码如下：<p align=center><FONT face=华文行楷 color=#cfcf88 size=5>插入文字</FONT></P>

 

说明： <FONT size=+0></FONT>这是一对输入文字的代码。<p align=center>表示居中，
<p align=left>表示居左，
<p align=right>表示居右。 face=字体　常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等 size=字体大小，这里的最大值为7　取值越大文字就越大 另一种贴法： <FONT face=新宋体 color=#ff0000>插入文字</FONT> font:40pt　数值越大文字就越大。 color=颜色代码

 

舌尖的冥想

教程延伸：

 

滚动文字示例代码：

<TABLE> borderColor=#8b008b height=375 cellSpacing=5 cellPadding=5 width=500 background=http://bbs.sm618.com/UploadFile/2005-8/20058162241790408.jpg border=10> </P></DIV></DIV></TR>
<TBODY>
<TR>
<TD>
<p align=left>
<MARQUEE scrollAmount=2 scrollDelay=80 direction=up height=140><FONT face=华文行楷 color=red size=6><B>鹰击长空</B></FOND></FONT></MARQUEE></P></TD></TR></TBODY></TABLE>

 

 

 

附文字滚动代码使用说明：

 

说明： direction=移动方向　可选值为向上(up)　向下(down)　向左(left)　向右(right) behavior=移动方式，　scroll 一圈一圈绕着走，　slide 只走一次，　behavior=alternate 来回走 width=宽度　　height=高度　　scrolldelay=速度　　scrollamount=位移 上面的参数大家可以根据不同的情况自行调节。

夜雨千回

不错的教材，很详细！冥想辛苦了。建议把里面捂嘴笑的小表情换成小写的p ，我的电脑慢，没法儿帮你修改了

朗州秋雨

这些东东我看过N遍了，就是缺乏实际经验。

夜雨千回