您好!欢迎您光临HTML代码贴图通俗教程_碧海云天! 聊天室 I 论坛 I 免费电影 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习园地>>>制帖学习>>>HTML代码贴图通俗教程
HTML代码贴图通俗教程
发表日期:2005/11/16 17:04:00 出处:诗梦论坛 作者:未知 发布人:ymnxy 已被访问 771
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 将会失效。

二.贴图


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 就失效了,所以不能同时使用。

上图的代码如下:

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

颜色代码,你可以选择你喜欢的颜色,输入相应的英文名称或代码

推荐:Colorful取色器,采集鼠标所在位置的颜色并马上输出RGB值和十六进制数值,
能同时保存五种颜色,特别针对网页制作人员做了优化,希望能成为大家的好助手。

点击下载

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>

文字应用



 

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

1.文字基本设制

基本代码如下:

<P align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字</FONT></P>

说明:

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

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

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

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

另一种贴法:

<font style=font:40pt 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>
<TBODY>
<TR>
<TD>
<P align=left><FONT face=华文行楷 color=red size=6><B>鹰击长空</B></FOND></P></TD></TR></TBODY></TABLE>

文字的移动

效果:


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



基本代码:

<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=位移

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

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


鹰击长空

代码如下:



 

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

添加透明flash

代码如下:

<TABLE cellSpacing=35 cellPadding=0 width=460 background=边框图片地址1 border=3>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=20 cellPadding=0 width=100% background=边框图片地址2 border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width=100% background=边框图片地址3 border=1>
<TBODY>
<TR>
<TD>
<TABLE height=550 cellSpacing=0 cellPadding=0 width=450 background=背景图片地址4 border=0>
<TBODY>
<TR>
<TD><EMBED align=center src=flash地址 width=400 type=application/x-shockwave-flash wmode="transparent" quality="high"><EMBED align=left src=flash地址 width=550 height=350 type=application/x-shockwave-flash wmode="transparent" quality="high"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

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

插入音乐

我们通常在在帖子结束前插入音乐,其代码是<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 只显示音量调节按钮

例一:

<EMBED SRC="音乐地址" autostart=true hidden=true loop=true>

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

例二:

<EMBED SRC="音乐地址" loop=true width=145 height=60>

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

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

一:

<embed src=音乐网址 type=audio/x-pn-realaudio-plugin (或者用 type=audio/mpeg)controls=ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=40></embed>
说明:一般用来插入mp3 rm ra ram asf mid 等音乐文件,如果要隐藏播放器,把width和height的数值改成0或者1就可以了。

二:

<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"></EMBED>

相关链接:

透明flash:

以下是200多种透明http://bbs.sm618.com/dispbbs.asp?boardID=37&ID=15114&page=1

烟云收藏的:

我收藏的套装素材   诗雨     http://bbs.sm618.com/dispbbs.asp?boardID=37&ID=14648&page=1

动态透明flash集锦--我的收藏展示厅     诗雨    http://bbs.sm618.com/dispbbs.asp?boardID=37&ID=15114&page=1

各种制贴代码集锦   飘飘柳絮    http://bbs.sm618.com/dispbbs.asp?boardID=37&ID=5964&page=1

用代码做的一种很漂亮的特效字     飘飘柳絮    http://bbs.sm618.com/dispbbs.asp?boardID=37&ID=4086&page=1

可以做背景和框框的素材    微云淡月       http://bbs.sm618.com/dispbbs.asp?boardID=37&ID=16863&page=1

美丽分割线     诗雨     http://bbs.sm618.com/dispbbs.asp?boardID=37&ID=3349&page=1



 

 

双击自动滚屏 【打印本页】 【关闭窗口

上篇文章:金秋草原

下篇文章:推荐一款很不错的录音软件 K8

 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

碧海云天(二站) | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ 312763060 联系人:碧海云天

琼icp备09005167