返回论坛首页联系我们论坛帮助
>>  
搜一搜更多此类问题 
湖南知青各地知青衡阳知青 → html贴图 HTML简易教程.透明Flash背景

您是本帖的第 2672 个阅读者
树形 打印
标题:
html贴图 HTML简易教程.透明Flash背景
夜深人静
帅哥哟,离线,有人找我吗?
头衔:夜深人静
等级:版主
文章:6424
积分:36824
注册:2007年7月24日
楼主
 点击这里发送电子邮件给夜深人静

发贴心情
html贴图 HTML简易教程.透明Flash背景

   根据衡阳坛子朋友要求,对html贴图有着浓厚的兴趣,只是自己只有半碗水,毫无保留向大家汇报,苦于无从下手,找不到要领,说到哪里算哪里吧,我收集整理了这个HTML简易教程,希望能给大家带来一点帮助。很简单的,多弄几次就会了,也可以参考《都是菜鸟》和《网页特效》论坛,8月以前,我什么都不会,我也是从那里启蒙的。

1、一:背景

一个完整的HTML代码贴  

                      


美贴=背景+文章+插图+收尾

以上原代码如下:
<TABLE align=center background="背景图片网址http://www.hnzqw.com/UploadFile/2007-11/200711131193717019.jpg" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>

注,1、发贴删除“背景图片网址”,这里是文字示意。

    2、在图内可以任意填写文字和复制图片。

ip地址已设置保密
2008/3/9 15:21:15
引用回复这个贴子 回复这个贴子
夜深人静
帅哥哟,离线,有人找我吗?
头衔:夜深人静
等级:版主
文章:6424
积分:36824
注册:2007年7月24日
2
 点击这里发送电子邮件给夜深人静

发贴心情

文字+图片

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

<table 是帖子的开头

<tobdy>是表元,理解为开头必须的就是。

<tr><td>是表格的行与列,默认都是1,即一个格子。

<br>为换行。

<P>和</P>:段落的开始和结束。

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

不要急于求成,多多试验,一步一步来,我会陆续上传制作html贴图要领的。

ip地址已设置保密
2008/3/9 15:23:31
引用回复这个贴子 回复这个贴子
夜深人静
帅哥哟,离线,有人找我吗?
头衔:夜深人静
等级:版主
文章:6424
积分:36824
注册:2007年7月24日
3
 点击这里发送电子邮件给夜深人静

发贴心情

二:贴图


1.基本代码:

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

注意:设定图片大小,此宽度及高度一般采用 pixels (也就是像素)作单位。通常只设为图片的真实大小,以免失真,若需要改图片大小最好使用图像编辑工具(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真)。

2.给图片加边框


基本代码:

<table border=10 cellSpacing=2 cellPadding=1 borderColor=#626DFA><tbody><tr><td><img src=图片地址 width=348 height=315></td></tr></tbody></table>

说明:
border="10" 表格边框的厚度,若不想显示边框,可将参数设置为“0”。
cellspacing="2" 表格格线的厚度
cellPadding=1 表格格线内厚度
borderColor=#626DFA 边框色彩

    现在我们做一点调整,改变一下边框色彩参数的设置,看看会发生什么变化。



   看出来了吗?边框呈现出了立体效果。这是因为,我们将边框颜色代码进行了替换,替换代码如下:。 borderColorlight=#06D5E7 表格边框“向光”部分的颜色

borderColordark=#1B77F4 表格边框“背光”部分的颜色

注:borderColorlight=#06D5E7(向光) 与borderColordark=#1B77F4(背光) 感光代码使用后,borderColor=#626DFA 边框色彩代码即失效。

基本代码:

<table border=10 cellSpacing=2 cellPadding=1 borderColorlight=#06D5E7 borderColordark=#1B77F4><tbody><tr><td><img src=图片地址 width=348 height=315></td></tr></tbody></table>

ip地址已设置保密
2008/3/9 15:25:25
引用回复这个贴子 回复这个贴子
夜深人静
帅哥哟,离线,有人找我吗?
头衔:夜深人静
等级:版主
文章:6424
积分:36824
注册:2007年7月24日
4
 点击这里发送电子邮件给夜深人静

发贴心情

3、制着简单的透明Flash背景图,代码如下。

<TABLE cellSpacing=0 cellPadding=8 width=700 background=插入图片地址 border=1>
<TBODY>
<TR>
<TD>
<TABLE height=450 cellSpacing=0 cellPadding=0 width=600 align=center background=插入图片地址 border=0>
<TBODY>
<TR>
<TD><EMBED src=插入透明FLASH地址 width=600 height=450 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high"><EMBED src=插入音乐地址 width=0 height=0 type=application/x-mplayer2 volume="0" autostart="1" loop="-1"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

如下图就是以上的代码组成一副动态带有音乐的图片






ip地址已设置保密
2008/3/9 15:26:35
引用回复这个贴子 回复这个贴子
夜深人静
帅哥哟,离线,有人找我吗?
头衔:夜深人静
等级:版主
文章:6424
积分:36824
注册:2007年7月24日
5
 点击这里发送电子邮件给夜深人静

发贴心情

4、制着简单边框的透明动感Flash背景图,代码如下:

<TABLE cellSpacing=0 cellPadding=40 width=680 background=http://www.hnzqw.com/UploadFile/2007-10/200710411342537193.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE height=910 cellSpacing=0 cellPadding=0 width=650 align=center background=http://www.hnzqw.com/UploadFile/2007-11/2007111515105698839.jpg border=0>
<TBODY>
<TR>
<TD><EMBED src=http://myhome.naver.net/brown444/swish/s11-m.sf width=650 height=100 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high"><BR><BR><EMBED src=http://myhome.naver.net/brown444/swish/s11-m.swf width=310 height=710 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high"><EMBED src=http://myhome.naver.net/brown444/swish/s11-m.swf width=340 height=710 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></TD></TR></TBODY></TABLE></TD></TR< TR></TR></TBODY></TABLE>



你的名字 被祝福人的名字
ip地址已设置保密
2008/3/9 15:27:56
引用回复这个贴子 回复这个贴子
夜深人静
帅哥哟,离线,有人找我吗?
头衔:夜深人静
等级:版主
文章:6424
积分:36824
注册:2007年7月24日
6
 点击这里发送电子邮件给夜深人静

发贴心情

代码:<TABLE height=468 cellSpacing=0 cellPadding=0 width=700 align=center background=http://www.hnzqw.com/UploadFile/2007-11/200711171613395507.jpg border=0>
<TBODY>
<TR>
<TD><EMBED src=http://yiwusuoyou.cn:3101/f/hongcha_input/home/hcyy/yh/images/030.swf width=700 height=468 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></TD></TR></TBODY></TABLE>

ip地址已设置保密
2008/3/9 15:28:49
引用回复这个贴子 回复这个贴子
寻境
美女呀,离线,留言给我吧!
等级:知青(VIP)
文章:410
积分:3256
注册:2007年4月14日
7
 点击这里发送电子邮件给寻境

发贴心情
早就想学,总找不到门。只说了一次,没想到夜深版版这么快就把教材帖上来了,真是太好了。只是看上去蛮复杂蛮深奥滴,待慢慢学来。
ip地址已设置保密
2008/3/11 12:52:49
引用回复这个贴子 回复这个贴子
夜深人静
帅哥哟,离线,有人找我吗?
头衔:夜深人静
等级:版主
文章:6424
积分:36824
注册:2007年7月24日
8
 点击这里发送电子邮件给夜深人静

发贴心情
以下是引用寻境在2008-3-11 12:52:49的发言:
早就想学,总找不到门。只说了一次,没想到夜深版版这么快就把教材帖上来了,真是太好了。只是看上去蛮复杂蛮深奥滴,待慢慢学来。

开始,我以为难以学会,入门后,其实很简单。

ip地址已设置保密
2008/3/17 1:22:59
引用回复这个贴子 回复这个贴子
夜深人静
帅哥哟,离线,有人找我吗?
头衔:夜深人静
等级:版主
文章:6424
积分:36824
注册:2007年7月24日
9
 点击这里发送电子邮件给夜深人静

发贴心情

<*t:MEDIA 为开头> <*/t:MEDIA>为结尾> <*WIDTH: 550px;为图片的宽度> <*HEIGHT: 500px"为图片的高度> <*LEFT: 20px;可以调整框的左右位置> <*TOP: 245px;可以调整框的上下位置> <*src = "http:// 。图片地址可以自由更换>
----------------------------------------------------
(这是总的开始部分)

<*?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace />
<*t:SEQ repeatCount = "indefinite">

----------------------------------------------------------------------

<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318563798.jpg dur = "3" fill = "transition" timeContainer = "par">,BR> <*t:TRANSITIONFILTER from = "0" to = "1" type = "barWipe" dur = "2">

(1)<*type="barwipe" 是从左到右拉开的效果>
<*/t:TRANSITIONFILTER><*/t:MEDIA>
----------------------------------------------------------------
<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318118151.jpg dur = "3" fill = "transition" timeContainer = "par">
<*t:TRANSITIONFILTER from = "0" to = "1" type = "fade" dur = "2">

(2)<*type="fade" 是渐显渐隐效果>
<*/t:TRANSITIONFILTER>
-------------------------------------------------------------------------------
<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318604845.jpg dur = "3" fill = "transition" timeContainer = "par"> <*t:TRANSITIONFILTER from = "0" to = "1" type = "ClockWipe" dur = "2">

(3)<*type="clockwipe" 是像钟表一样旋转出现的效果>
<*/t:TRANSITIONFILTER>
-------------------------------------------------------------------------------
<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318101782.jpg dur = "3" fill = "transition" timeContainer = "par"> <*t:TRANSITIONFILTER from = "0" to = "1" type = "barnDoorWipe" dur = "2">

(4)<*type="barndoorwipe" 是从中间向两边拉开的效果>
<*/t:TRANSITIONFILTER>
-------------------------------------------------------------------------------
<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318687751.jpg dur = "3" fill = "transition" timeContainer = "par"> <*t:TRANSITIONFILTER from = "0" to = "1" type = "slideWipe" dur = "2">

(5)<*type="slideWipe" 是右往左边拉开的效果>
<*/t:TRANSITIONFILTER>
------------------------------------------------------------------------------
<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318944721.jpg dur = "3" fill = "transition" timeContainer = "par"> <*t:TRANSITIONFILTER from = "0" to = "1" type = "irisWipe" dur = "2">

(6)<*type="iriswipe" 是正中间矩形窗口逐渐扩大的效果>
<*/t:TRANSITIONFILTER>
-------------------------------------------------------------------------------
<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318290115.jpg dur = "3" fill = "transition" timeContainer = "par"> <*t:TRANSITIONFILTER from = "0" to = "1" type = "snakeWipe" dur = "2">

(7)<*type="snakewipe" 是蛇形效果>
<*/t:TRANSITIONFILTER>
-------------------------------------------------------------------------------
<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318730941.jpg dur = "3" fill = "transition" timeContainer = "par"> <*t:TRANSITIONFILTER from = "0" to = "1" type = "ellipseWipe" dur = "2">

(8)<*type="ellipsewipe" 是正中小圆向外扩散的效果>
<*/t:TRANSITIONFILTER>
----------------------------------------------------------------------------------
<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318668923.jpg dur = "3" fill = "transition" timeContainer = "par"> <*t:TRANSITIONFILTER from = "0" to = "1" type = "spiralWipe" dur = "2">

(9)<*type="spiralwipe" 是螺旋显示效果>
<*/t:TRANSITIONFILTER>
-------------------------------------------------------------------------------
<*t:MEDIA style="FILTER: alpha; LEFT: 20px; WIDTH: 550px; POSITION: absolute; TOP: 245px; HEIGHT: 500px" src = http://www.peakle.net/UploadFiles/2006-3/318730941.jpg dur = "3" fill = "transition" timeContainer = "par"> <*t:TRANSITIONFILTER from = "0" to = "1" type = "pushWipe" dur = "2">

(10)<*type="pushWipe" 是右往左边拖动的效果>
<*/t:TRANSITIONFILTER>

http://bbs.muwen.com/fileuploaddir/4B398613217.gif 蝴蝶


http://bbs.hyxzx.net/hyxzxnet/2008-9/20089913315652490.jpg

http://bbs.hyxzx.net/hyxzxnet/2008-9/20089913313890349.jpg

http://bbs.hyxzx.net/hyxzxnet/2008-9/20089913312637477.jpg

http://bbs.hyxzx.net/hyxzxnet/2008-9/2008991331885894.jpg

ip地址已设置保密
2008/5/13 10:40:30
引用回复这个贴子 回复这个贴子
夜深人静
帅哥哟,离线,有人找我吗?
头衔:夜深人静
等级:版主
文章:6424
积分:36824
注册:2007年7月24日
10
 点击这里发送电子邮件给夜深人静

发贴心情

常用网页颜色代码

ffff00ffff33ffff66ffff99ffffccffffff
ffcc00ffcc33ffcc66ffcc99ffccccffccff
ff9900ff9933ff9966ff9999ff99ccff99ff
ff6600ff6633ff6666ff6699ff66ccff66ff
ff3300ff3333ff3366ff3399ff33ccff33ff
ff0000ff0033ff0066ff0099ff00ccff00ff
ccff00ccff33ccff66ccff99ccffccccffff
cccc00cccc33cccc66cccc99ccccccccccff
cc9900cc9933cc9966cc9999cc99cccc99ff
cc6600cc6633cc6666cc6699cc66cccc66ff
cc3300cc3333cc3366cc3399cc33cccc33ff
cc0000cc0033cc0066cc0099cc00cccc00ff
99ff0099ff3399ff6699ff9999ffcc99ffff
99cc0099cc3399cc6699cc9999cccc99ccff
9999009999339999669999999999cc9999ff
9966009966339966669966999966cc9966ff
9933009933339933669933999933cc9933ff
9900009900339900669900999900cc9900ff
66ff0066ff3366ff6666ff9966ffcc66ffff
66cc0066cc3366cc6666cc9966cccc66ccff
6699006699336699666699996699cc6699ff
6666006666336666666666996666cc6666ff
6633006633336633666633996633cc6633ff
6600006600336600666600996600cc6600ff
33ff0033ff3333ff6633ff9933ffcc33ffff
33cc0033cc3333cc6633cc9933cccc33ccff
3399003399333399663399993399cc3399ff
3366003366333366663366993366cc3366ff
3333003333333333663333993333cc3333ff
3300003300333300663300993300cc3300ff
00ff0000ff3300ff6600ff9900ffcc00ffff
00cc0000cc3300cc6600cc9900cccc00ccff
0099000099330099660099990099cc0099ff
0066000066330066660066990066cc0066ff
0033000033330033660033990033cc0033ff
0000000000330000660000990000cc0000ff






ip地址已设置保密
2008/12/19 11:12:37
引用回复这个贴子 回复这个贴子

 11   10   1/2页      1   2   尾页 
  快速回复:
html贴图 HTML简易教程.透明Flash背景
发贴表情
字体颜色 字体背景颜色 粗体 斜体 下划线 超级连接 插入图片 Flash图片 realplay视频文件 Media Player视频文件 引用 清理代码
内容限制: 字节.
★发贴时内容将被复制到剪贴板,如果发贴失败,请重新在编辑框中用鼠标右键粘贴或用"CTRL+V"即可找回帖子内容!★
湘ICP备05003987号

湖南知青网