铭瑶学习社区

首页 » 网站建设(编程语言) » HTML/CSS » html 代码贴图通俗教程
yplkj - 2008-9-30 11:28:00
很多朋友对html贴图有着浓厚的兴趣,只是苦于无从下手,找不到要领,所以再给大家提供一个专题讲座,有部分内容以及贴图素材在此就不赘诉了,请参考固顶中的“贴图指导基础教程”,另外本帖是教学帖,谢绝回复,有疑问或试帖请到固顶帖中的“试帖练习”,在那里我尽力为你解惑答疑,让我们共BBS帖子精灵快速回复!同学习。

一:背景
一个完整的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 将会失效。
yplkj - 2008-9-30 11:28:00
二.贴图

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>
yplkj - 2008-9-30 11:29:00
3 多层边框的制作
第一层

<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>
yplkj - 2008-9-30 11:29:00
图片插入的位置
例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(中)
yplkj - 2008-9-30 11:30:00
下面在四楼的多层边框内插入一图片,图片为居中:
代码如下:

<TABLE cellSpacing=0 cellPadding=15 width=600 background=背景图片地址 border=3>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=10 width="100%" background=background=背景图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=10 width="100%" background=background=背景图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=8 width="100%" background=background=背景图片地址 border=3>
<TBODY>
<TR>
<TD width="100%"><P align=center><IMG src="插入图片地址"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
yplkj - 2008-9-30 11:30:00
文字应用

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

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=颜色代码
yplkj - 2008-9-30 11:31:00
代码如下:

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

上面的参数大家可以根据不同的情况自行调节
yplkj - 2008-9-30 11:32:00
把上图改为文字移动的效果图:
代码如下:

<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>
yplkj - 2008-9-30 11:33:00
添加透明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将图改小了再用
yplkj - 2008-9-30 11:34:00
插入音乐 我们通常在在帖子结束前插入音乐,其代码是<EMBED  SRC=“音乐地址”> 常用的代码: AutoStart=true 表示是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为trueLoop=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  设定控制面板的样子 C 设定控制面板的外观。预设值是 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">
yplkj - 2008-9-30 11:35:00
html 特技帖 1 如何做满屏帖 在做帖子的第一个边框时,输入下列的代码 <TABLE id=table1 style="LEFT: -200px; WIDTH: 970px; POSITION: relative; TOP: 80px" cellSpacing=35 align=center background=图片地址 border=0> 2 有的帖子不适合做满屏,可是按传统贴出又觉得宽度窄了一些,那么你可以贴满发帖栏,称为满框帖吧,代码如下: <TABLE id=table1 style="RIGHT: 30px; WIDTH: 780px; POSITION: relative; TOP: 80px" cellSpacing=35 align=center background=图片地址 border=0> 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" ></EMBED> style="LEFT: 80px;      是指动画离屏幕左侧距离 WIDTH: 650px            显示动画的宽度范围 POSITION: absolute    位置固定 TOP: 1000px;                动画离屏幕顶端的距离 HEIGHT: 500px                      动画的高度范围 width=700 height=500          动画本身的宽和高 wmode="transparent"          动画透明 这里的参数可以根据你的意向加以变化,让动画出现在你需要的位置。
yplkj - 2008-9-30 11:36:00
[fly] 版本不同,代码会不大相同,此教材由其他空间转载,仅供参考.
[/fly]
alex - 2008-9-30 13:14:00
:Z1
lukou - 2008-10-4 16:16:00
:Z1 忒牛啦!!!!!!!!
liuxj - 2008-10-10 14:56:00
不错的基本教程,支持一下.:Z1
leidyer - 2008-10-11 17:59:00
支持一下
yaliujiang - 2008-10-16 16:03:00
支持下~!:Z1
sowworld - 2008-10-21 23:27:00
用工具编辑是最方便省事的了,比如Dreamwaver,Frontpage
haiou - 2008-10-27 22:48:00
:Z1 讲的很全面!
qxmg - 2008-10-29 0:46:00
楼主真强,学习收下。
cillarfly - 2008-10-29 10:31:00
:@1 :@1 :@1 :@1
xkmls - 2008-11-1 12:08:00
不错  学会了 :Z1
nanyiwu - 2008-11-1 15:46:00
:O1 :O1
proteus - 2008-11-10 20:08:00
:Z1 :Z1 :Z1 :Z1 :Z1
desqq111 - 2008-11-11 12:23:00
支持!!!!!:-|1
desqq111 - 2008-11-13 18:11:00
:Z1 :Z1
zy088 - 2008-11-22 18:48:00
:Z1 :Z1
yuanzhilong - 2008-11-25 21:50:00
我一见语言就晕!:metting:1
1
查看完整版本: html 代码贴图通俗教程