奔流文化网清乐美图图片音乐 → [分享]让我们一起来学习HTML贴图


  共有5896人关注过本帖树形打印

主题:[分享]让我们一起来学习HTML贴图

美女呀,离线,留言给我吧!
粮食
  1楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
[分享]让我们一起来学习HTML贴图  发帖心情 Post By:2010-08-16 20:12:53

制作HTML方法1

基本代码:<img src=图片网址>

如:<img src=http://lstx.5xnet.com/bbs/UploadFile/2005-11/200511322275950449.gif>

另:想让图片居中在代码前加上<CENTER>就行~

居中后的代码:

<CENTER><IMGsrc="http://lstx.5xnet.com/bbs/UploadFile/2005-11/200511322275950449.gif"></CENTER>

 通过HTML可以表现出丰富多彩的设计风格

     图片调用:<IMG SRC="文件名">
     文字格式:<FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>

  通过HTML可以实现页面之间的跳转

     页面跳转:〈A HREF="文件路径/文件名"></A>

  通过HTML可以展现多媒体的效果

     声频:<EMBED SRC="音乐文件名" AUTOSTART=true>
     视频:<EMBED SRC="视频文件名" AUTOSTART=true>

我们来个更简单的!朋友们只要把下面这代码复制保存到自己的文件夹里,用的时候把它粘贴上来(一定要在HTML状态下)更换你需要的数字和图片网址就行.(红色部分可根据需要进行更换,其它不动) 

<P align=center>
<TABLE height=494 width=550>
<TBODY>
<TR>
<TD background=http://bbs.mtxsnow.net/bbs/UploadFile/200562810104898038.jpg></TD></TR></TBODY></TABLE></P>

<!--EndFragment-->



<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  2楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-16 20:19:08

 

一. 

代码:

<TABLE height=339 cellSpacing=20 width=500 align=center background=http://lstx.hikers.cn/jj/18/11/牵挂3.gif border=1>
<TBODY>
<TR>
<TD>
<CENTER><IMG src="http://lstx.5xnet.com/bbs/UploadFile/2005-11/200511322275950449.gif" border=0> </CENTER></TD></TR></TBODY></TABLE>

红色是背景图片网址,蓝色的是主图片网址

注解:

width="500"  图片宽度,height="339"  图片高度. 

border="1" 
表格边框的厚度

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

align="center" 
表格的摆放位置(水平),可选值为: leftright

<!--EndFragment-->


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  3楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-16 20:21:12

在Design状态下,点(插入表格)在跳出的对话框

中设置好"表格颜色"和"背景颜色"后点确定,再按照以上说的贴图方法在框内粘贴上代码,根据需要设置好宽度及框的厚度就行~

<!--EndFragment-->


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  4楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-16 20:23:56

层以 

图示(三层)

代码如下:

<CENTER>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width=400 borderColorLight=#000000 background=http://www.pcbbbs.com/UploadFile/2004-8/20048118535837.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=18 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924195048890.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://www.pcbbbs.com/UploadFile/2004-8/20048118535837.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924194831836.jpg border=1>
<TBODY>
<TR>
<TD>
<P align=center><IMG src="http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924195146326.gif"> </P>

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER>


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

其实说的是三层,我上面的边框用了四张图片

红的是最外层;黄的是其次;蓝的是最里面的框;而绿的则是底色(黑色的);粉红的则是主图片了.

这里要注意的是,在主图片之前我用了4组的单位签<TABLE><TBODY><TR><TD>;那么在结尾的时候也应该有相对应的4个来收尾.即</TABLE></TBODY></TR></TD>.这就是HTML标签中的一一对应关系.(少了一个或多一个,你的贴将是乱码)朋友在发贴是时候会出现乱码,大多问题出在这里

<!--EndFragment-->


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  5楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-16 20:28:05

第一部分(开始 即:边框内容)

<CENTER>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width=400 borderColorLight=#000000 background=http://www.pcbbbs.com/UploadFile/2004-8/20048118535837.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=18 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924195048890.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://www.pcbbbs.com/UploadFile/2004-8/20048118535837.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924194831836.jpg border=1>
<TBODY>
<TR>
<TD>
------------------------------

<!--EndFragment-->


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  6楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-16 20:31:59

第二部分(主图,即要贴的图片)

<P align=center><IMG src="http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924195146326.gif"> </P>

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

第三部分(收尾)

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER>
------------------------------------

所以贴一张图我们可以把它理解为:

背景框+主图(包括文字)+收尾

还有些需要认识的:

bgcolor="#000000" 
表格的底色,与 background 不要同用

bordercolor="#000000" 
表格边框颜色

bordercolorlight="#000000" 
表格边框向光部分的颜色

bordercolordark="#000000" 
表格边框背光部分的颜色



当然,你不记这些也可以.最简单的就是把上面的代码保存,根据需要更换图片网址就得到你想要的图了

提醒朋友第一个width=400 400一定要根据你的图片大小设定.它接受绝对值(如 500)及相对值(如 80%)。

再加一个外框:

代码:

<CENTER>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=18 width=450 borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924194820522.gif border=1>
<TBODY>
<TR>
<TD>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width=400 borderColorLight=#000000 background=http://www.pcbbbs.com/UploadFile/2004-8/20048118535837.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=18 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924195048890.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://www.pcbbbs.com/UploadFile/2004-8/20048118535837.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924194831836.jpg border=1>
<TBODY>
<TR>
<TD>
<P align=center><IMG src="http://bbs.nxnews.net/forum/UploadFile/2004-9/2004924195146326.gif"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></TD></TR></TBODY></TABLE></CENTER>

<!--EndFragment-->


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  7楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-16 22:43:35

 

基本语法:

<EMBED SRC="音乐文件地址">

<!--EndFragment-->


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  8楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-16 22:46:16

常用属性如下:

SRC="FILENAME"

设定音乐文件的路径

AUTOSTART=TRUE/FALSE

是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为FALSE

LOOP=TRUE/FALSE

设定播放重复次数,LOOP=6表示重复6次,TRUE表示无限次播放,FALSE播放一次即停止。

STARTIME=":"

设定乐曲的开始播放时间,如20秒后播放写为STARTIME=00:20

VOLUME=0-100

设定音量的大小。如果没设定的话,就用系统的音量。

WIDTH HEIGHT

设定控制面板的大小

HIDDEN=TRUE

隐藏控制面板

CONTROLS=CONSOLE/SMALLCONSOLE

设定控制面板的样子

<!--EndFragment-->


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  9楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-16 22:48:45

例一:

<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>

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

例二:

<EMBED SRC="midi.mid" loop=true width=145 height=60>

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

注明:mp3 rm ra ram asf mid等音乐都用这个播放器

IE中的的背景音乐

代码如下:

<bgsound src="音乐文件地址" loop=#> 

#=循环数 

注明:这种背景音乐格式,只有在IE浏览器中才可以听到。一般用来插入wav wma mid等格试的音乐 。

<!--EndFragment-->


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  10楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-16 22:54:16

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

一:

<EMBED height=200 src=音乐文件地址 type=audio/x-pn-realaudio-plugin width=200 autostart="true" c c></EMBED>

说明:一般用来插入mp3 rm ra ram asf mid等音乐文件,如果要隐藏播放器,把widthheight的数值改成0或者1就可以了。

二:

<bgsound src="音乐文件地址" loop=3>

说明:一般用来插入wav wma mid等格试的音乐文件。

 一,文字基本设制基本代码如下:<P align=center><FONT color=#0066ff face=隶书 size=5>插入文字</FONT></P> align=center 表示字体居中,可选值为居右(right)居左(left) color=颜色代码 

常用字体为:宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等 size=字体大小,这里的最大值为7 取值越大文字就越大二,大字体文字效果:

<!--EndFragment-->


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
帅哥哟,离线,有人找我吗?
蓝天升龙
  11楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:新手上路 帖子:97 积分:829 威望:0 精华:0 注册:2006-11-12 18:21:12
  发帖心情 Post By:2010-08-24 09:09:11

做沙发好好学习学习!


得意時不可有傲氣,失意時不可有餒氣。
支持(0中立(0反对(0回到顶部
帅哥哟,离线,有人找我吗?
蓝天升龙
  12楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:新手上路 帖子:97 积分:829 威望:0 精华:0 注册:2006-11-12 18:21:12
  发帖心情 Post By:2010-08-24 09:51:03



得意時不可有傲氣,失意時不可有餒氣。 支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  13楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-24 12:02:23

哈哈哈哈!,不错!加油啊!


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
帅哥哟,离线,有人找我吗?
青松
  14楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:122 积分:1203 威望:0 精华:2 注册:2006-11-17 06:23:22
  发帖心情 Post By:2010-08-24 20:45:53

以下是引用蓝天升龙在2010-08-24 09:51:03的发言:

图片点击可在新窗口打开查看

 

哈哈哈哈!升龙老弟真厉害!佩服!


支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  15楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2010-08-25 07:38:14

其实很好学的,就是把代码复制下来在把图片网址换下来就可以了,一会就完事了,发帖时记住把代码发到“代码模式”里,既这个地方图片点击可在新窗口打开查看然后再点“设计模式”在设计模式里立即就能看到你发的贴图了。不妨你也试试!


<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  16楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
  发帖心情 Post By:2011-12-25 13:33:36

 

给你的网站提供
在线图像处理**

   如果你有网站,可以把下边这行代码放在你网站里,你网站中的图片就有了可在线编辑的功能.

 

 

<script type="text/javascript" src="http://www.iephotoshop.com/ps.js"></script>



<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部
美女呀,离线,留言给我吧!
粮食
  17楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 天缘妈妈奔流老太君
等级:新手上路 帖子:5269 积分:38236 威望:0 精华:12 注册:2005-11-01 03:52:51
试试  发帖心情 Post By:2011-12-25 13:49:58

 

 

呵呵!不好使,没整明白。



<img src="http://hi.u9cn.com/rili.png"/>

<EMBED src=http://www.benliu9.com/UploadFile/2010-8/2010810828374485.swf width=400 height=100 type=application/x-shockwave-flash></EMBED>

支持(0中立(0反对(0回到顶部