打印

[推荐] 『音画教程』HTML初中级教程 -更新 了很多播放器还有特效代码~!

『音画教程』HTML初中级教程 -更新 了很多播放器还有特效代码~!

<BR>
<DIV class=t_msgfont id=message589980>
<BLOCKQUOTE style="BORDER-RIGHT: #dde3ec 1px dashed; PADDING-RIGHT: 5px; BORDER-TOP: #dde3ec 1px dashed; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 20px; BORDER-LEFT: #dde3ec 1px dashed; MARGIN-RIGHT: 20px; PADDING-TOP: 5px; BORDER-BOTTOM: #dde3ec 1px dashed; BACKGROUND-COLOR: gray"><FONT face=黑体 color=#00ff00 size=7><STRONG>HTML初级教程</STRONG></FONT> <BR><BR><BR><FONT color=orange>html语言是一种标注语言,它是可以直接写出(不用软件)的,通过文字和标签的描述在论坛或网叶上显示的语言.所以学会了各种标签的用法,就是学会了html语言.</FONT> <BR><BR><BR><FONT face=黑体 color=#ff00ff size=6><B>第一章:文字的插入</B></FONT> <BR><BR><BR>下面是一段贴文字的代码: <BR>&lt;font color=#ff4500 face=隶书 size=7&gt;我们都是同学&lt;/font&gt; <BR><BR>显示效果为: <BR><FONT face=隶书 color=#ff4500 size=7>我们都是同学 </FONT><BR><BR>先看懂这个代码: <BR>font <BR>做文字标签的专用元素, <BR>color, face, size <BR>描述文字形态的三大属性(见以下详细说明) <BR>/font <BR>表示贴文字结束,俗称收尾. <BR><BR>写法说明: <BR>元素前后加上小于号<FONT color=yellow>&lt;</FONT>和大于号<FONT color=yellow>&gt;</FONT>就组成了标签,<BR>标签分开始和结束两种,元素前再加一条斜杠/就成了结束标签,<BR>由开始标签 (如上面的&lt;font ..............&gt;) 内容(如上面的"我们都是同学") 结束标签(如上面的&lt;/font&gt;) 就组成了代码的三大要素. <BR>属性就是专门用来描述内容元素的,他必须写在开始标签里(如上面的<IMG alt="" src="http://bbs.greendown.cn/images/smilies/c.gif" border=0 smilieid="81">olor=ff00ff face=黑体 size=7)<BR>写代码时,注意属性之间要有一个空格,不能多也不能少. <BR>代码字母的大小写效果是一样的. <BR><BR>文字的三大属性就是专门用来描述文字的颜色,字体,大小的,下面分别介绍他们: <BR><FONT color=yellow>color=</FONT> <BR>颜色属性,用来描述文字的颜色,他的值可用英文颜色名称或十六进制数表示.(见附表) <BR><FONT color=yellow>face=</FONT> <BR>字体属性,用来描述文字的字体,他的值很多,我们看到的宋体,楷书,隶书,华文新魏,华文彩云等等都是,关键是只有你电脑里装有的字体才会显示.(自己电脑里有那些字体到控制面板里找"字体"即可知道)如没有,浏览器默认为宋体. <BR><FONT color=yellow>size=</FONT> <BR>大小属性,用来描述文字的大小,他的值1到7,7最大.(再大就要用CSS的方法了) <BR><BR>几个常用的对文字修饰的标签: <BR>1.&lt;b&gt;粗体字&lt;/b&gt; 对指定的文字加粗.<BR>效果:.<B>粗体字</B><BR>2.&lt;i&gt;斜体字&lt;/i&gt; 对指定的文字变斜.<BR>效果:<I>斜体字</I><BR>3.&lt;u&gt;下划线&lt;/u&gt; 在指定的文字下面划线.<BR>效果:<U>下划线</U> <BR>说明:这些标签不支持任何属性,所以它自己也没属性.每对标签只起一个特定作用,使用时只要在指定的文字前后分别加进开始,结束标签,这段文字就会显示你的指定. <BR><BR>在文章中加一条水平线的方法,如绿线:<BR>代码:&lt;hr color=#00ff00 width=360&gt;<BR>效果::<BR>
<HR width=360 color=#00ff00>
<BR>width= <BR>横向宽度,他可以绝对值,如360,也可以相对值,如80%.<BR>color= <BR>线条颜色. <BR><BR>文字的简单编排:<BR>标准的论坛,必须用代码来控制文章的空行空格,<BR>常用的有:<BR>&lt;br&gt; <BR>换行标签 (换行后不空行) 换行没有结束标签.<BR>&lt;p&gt;...&lt;/p&gt; <BR>分段标签 (换行后再多空一行,段落结束后也再多空一行)<BR>&nbsp <BR>空格标签,多个空格用符号;隔开.<BR>而用标签&lt;pre&gt;和&lt;/pre&gt;包起来的文字可保持书写的效果.<BR><BR><BR>有时可简单用标题代码&lt;H1&gt;你好&lt;/H1&gt;来描述字体大小.值1~6,1最大. <BR>以下是H1的显示: <BR>
<H1>你好</H1><BR><BR><BR>附表: <BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/ysdm11_0GeLiQN3XMAp.gif');}" alt="" src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/ysdm11_0GeLiQN3XMAp.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0></FONT> <BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://aa.up.topzj.com/data/aa/76/94/5/a/07/02/03/ysdm12_GXLHbVJD8l1G.gif');}" alt="" src="http://aa.up.topzj.com/data/aa/76/94/5/a/07/02/03/ysdm12_GXLHbVJD8l1G.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0></FONT> <BR><BR><BR><BR><BR><BR><FONT face=黑体 color=#ff00ff size=6><B>第二章:图片的插入</B></FONT> <BR><BR><BR><FONT size=2>下面是一段贴图片的代码:<BR>&lt;img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=500&gt; <BR><BR>显示效果为:<BR><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg" width=500> <BR><BR>先看懂这个代码:<BR>img <BR>贴图片的专用元素,<BR>src= <BR>指定地址(url)的专用属性,在这个标签里他的内容只能写图片地址.<BR>width= <BR>宽度属性,用于设定图片的宽度. <BR><BR>还有几个常用的属性:<BR>border= <BR>边框厚度,给图像加个框,这个框的颜色默认值是黑色.<BR>height= <BR>图片高度,除特殊需要一般不写为好,只写宽度,高度会按比例显示.(当然,有时需定高度,那就不写宽度,也一样比例正常) 宽和高都不写,则显示图片的原始尺寸.<BR>align= <BR>位置属性,指定图片安放的位置,他的值有:<BR>top 靠上<BR>absbottom 靠下,<BR>left 靠左 <BR>right 靠右<BR>center 居中<BR>注:<BR>1.这个位置属性可以不写,浏览器默认为靠左.<BR>2.有的版本不识别align=center,那就将&*****ter&gt;和&lt;/center&gt;放在图片代码两边,图片就居中了. <BR><BR>加框:<BR>代码:<BR>&lt;img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=360 <FONT color=yellow>border=6</FONT>&gt; <BR><BR>显示效果为:<BR><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg" width=360 border=6> <BR><BR><BR>居中:<BR>代码:<BR><FONT color=yellow>&*****ter&gt;</FONT>&lt;img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=360&gt;<FONT color=yellow>&lt;/center&gt;</FONT> <BR><BR>显示效果为:<BR>
<CENTER><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg" width=360></CENTER><BR><BR><BR>取得图片地址的方法:<BR>对准图片点右键,出现对话框(如下图),左键点属性,再双击地址涂蓝,最后复制.<BR><BR><IMG style="BORDER-RIGHT: red 3px dashed; BORDER-TOP: red 3px dashed; BORDER-LEFT: red 3px dashed; BORDER-BOTTOM: red 3px dashed" src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/zrTDMP7_rYzv7cajZNV2.jpg" width=500> <BR><BR><IMG style="BORDER-RIGHT: red 3px dashed; BORDER-TOP: red 3px dashed; BORDER-LEFT: red 3px dashed; BORDER-BOTTOM: red 3px dashed" src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/126_fMb5wwoH68fU.gif" width=500> <BR><BR>现在很多取得的地址不能正常显示(发图者设置障碍)<BR>只能下载后,再上传到你贴图的论坛或不设反盗链的论坛,取得新的图片地址, <BR><BR>下载图片的方法:对准图片点右键,出现菜单(上上图),左键点"图片另存为",出现对话框(下图).保存格式一般为jpg或gif.填上名称再点保存即可. <BR><BR><IMG style="BORDER-RIGHT: red 3px dashed; BORDER-TOP: red 3px dashed; BORDER-LEFT: red 3px dashed; BORDER-BOTTOM: red 3px dashed" src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/127_VOvqhEoUpfuu.gif" width=500> <BR><BR>自己文档里的图片必须上传后取得地址才可用代码贴出.<BR>上传方法:在上传框里点浏览,左键对准要上传的图片双击,把帖子发出即可,图片会以附件的形式出现.就有新的地址了.<BR><BR>给几个可上传的地址:<BR><A href="http://picsplace.to/index.php" target=_blank><FONT color=#0000ff>http://picsplace.to/index.php</FONT></A> (可上传FLASH等,会直接给出地址)<BR><A href="http://adu.bbs.topzj.com/" target=_blank><FONT color=#0000ff>http://adu.bbs.topzj.com/</FONT></A> (老试贴区,开放2048 kb) <BR><BR></FONT><BR><BR><BR><BR><FONT face=黑体 color=#ff00ff size=6><B>第三章:移动的运用</B></FONT><FONT size=3> <BR><BR><BR></FONT><FONT size=2>下面是一段贴文字移动的代码: <BR>&lt;marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1&gt;<BR>&lt;font color=#00ff00 size=7 face=华文新魏&gt;同学们好 &lt;/font&gt; &lt;/marquee&gt; <BR><BR>显示效果为: <BR><BR>
<MARQUEE scrollAmount=1 scrollDelay=80 direction=up width=400 height=90><FONT face=华文新魏 color=#00ff00 size=7>同学们好</FONT></MARQUEE><BR><BR>先看懂这个代码:<BR>marquee <BR>这是移动的专用元素.<BR>他的属性如下:<BR>direction= <BR>移动方向,值有:<BR>   up 向上移动,<BR>   down 向下移动,<BR>   left 向左移动,<BR>   right 向右移动,<BR>      注: 这个移动方向属性可以不写,浏览器默认为向左.<BR>behavior= <BR>移动方式,值有: scroll 不停的走; slide 只走一次<BR>behavior=alternate <BR>左右来回走,与direction不能同用.<BR>width= <BR>移动宽度.<BR>height= <BR>移动高度.<BR>scrolldelay= <BR>延时,延时一般设在80,延时数值大了,显示效果会跳跃式.<BR>scrollamount= <BR>移动速度,值从1开始越大越快.<BR><BR>(移动放到背景图上,因不能看到全部,常碰到定尺寸问题.<BR>实际上你把移动看成一张图片,先定宽和高,再定放到背景图上的位置就容易些.) <BR><BR><BR>来回移动:<FONT color=white>behavior=alternate</FONT> <BR><BR>
<CENTER>
<MARQUEE scrollAmount=2 scrollDelay=5 behavior=alternate width=390 height=15><FONT face=华文新魏 color=#ff0000 size=5>请大家试试,试了才能印象深刻</FONT></MARQUEE></CENTER><BR>代码:<BR>&*****ter&gt;&lt;marquee <FONT color=white>behavior=alternate</FONT> width=390 height=15 scrolldelay=5 scrollamount=2&gt;&lt;font color=#ff0000 size=5 face=华文新魏&gt;请大家试试,试了才能印象深刻&lt;/font&gt;&lt;/marquee&gt;&lt;/center&gt; <BR><BR>移动还可以加入背景颜色或背景图,背景显示的范围就是移动设定的宽和高. bgcolor:背景颜色属性. background:背景图属性. <BR><BR><BR>加背景颜色:<FONT color=white>bgcolor=#aaeeaa</FONT> <BR><BR>
<CENTER>
<MARQUEE scrollAmount=2 scrollDelay=5 behavior=alternate width=390 bgColor=#aaeeaa height=15><FONT face=华文新魏 color=#ff0000 size=5>请大家试试,试了才能印象深刻</FONT></MARQUEE></CENTER><BR>代码:<BR>&*****ter&gt;&lt;marquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2 <FONT color=white>bgcolor=#aaeeaa</FONT>&gt;&lt;font color=#ff0000 size=5 face=华文新魏&gt;请大家试试,试了才能印象深刻&lt;/font&gt;&lt;/marquee&gt;&lt;/center&gt; <BR><BR><BR>加背景图:<FONT color=white>style="background-image:url(<IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/k1_RkKDtr7WLT6S.gif');}" alt="" src="http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/k1_RkKDtr7WLT6S.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>)"</FONT> <BR><BR>
<CENTER>
<MARQUEE onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/11/02/k1_YGP283FJ7QCK.gif');}" scrollAmount=2 scrollDelay=5 behavior=alternate width=390 height=15 http: bbs.up.topzj.com data bbs 10 96 1096 a 06 11 02 k1_YGP283FJ7QCK.gif? onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" alt="" border="0">)"&gt;<FONT face=华文新魏 color=#ffffff size=5>请大家试试,试了才能印象深刻</FONT></MARQUEE></CENTER><BR>代码:<BR>&*****ter&gt;&lt;marquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2 <FONT color=white>style="background-image:url(<IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/11/02/k1_YGP283FJ7QCK.gif');}" alt="" src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/11/02/k1_YGP283FJ7QCK.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>)"</FONT>&gt;&lt;font color=#FFFFFF size=5 face=华文新魏&gt;请大家试试,试了才能印象深刻&lt;/font&gt;&lt;/marquee&gt;&lt;/center&gt; <BR><FONT color=yellow>注:用这个加背景图代码发帖时,一定要在 禁用 URL 识别 前打勾.</FONT> <BR><BR><BR>图片的移动:只要将上面的文字换成图片就可以了.其实只要将移动的起始和结束标签放在任何的两头,都可以动起来.<BR><BR>
<MARQUEE scrollAmount=2 scrollDelay=10><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f13_tM7ngHBGVkP2.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f12_xeMYmkiKjb3V.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f5_4kVXhYaZuG28.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f7_91m41RF2o1aD.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f6_mnWqy8CgK05g.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f8_m4CmRBw4R4nr.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f1_A9qCflSzOV3l.gif"></MARQUEE><BR><BR>代码为:<BR>
<>&lt;MARQUEE scrollAmount=2 scrollDelay=10&gt;&lt;IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f13_tM7ngHBGVkP2.gif"&gt; &lt;IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f12_xeMYmkiKjb3V.gif"&gt; &lt;IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f5_4kVXhYaZuG28.gif"&gt; &lt;IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f7_91m41RF2o1aD.gif"&gt; &lt;IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f6_mnWqy8CgK05g.gif"&gt; &lt;IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f8_m4CmRBw4R4nr.gif"&gt; &lt;IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f1_A9qCflSzOV3l.gif"&gt;</P>
<>&lt;/MARQUEE&gt;</P></FONT><BR><BR><BR><BR><FONT face=黑体 color=#ff00ff size=6><B>第四章:音乐的插入</B></FONT><FONT size=3> <BR><BR><BR></FONT><FONT size=2>下面是一段贴音乐的代码: <BR>&lt;bgsound src="http://music.falook.com/falook/bandari-2001-heaven_blue/09.nights_of_barcelong.wma" loop="1"&gt; <BGSOUND src="http://music.falook.com/falook/bandari-2001-heaven_blue/09.nights_of_barcelong.wma"><BR><BR>效果就是我们听到的音乐(9NIGHTS OF BARCELONG 夜间巴塞罗那) <BR>bgsound <BR>内部媒体的专用元素,用他做的标签可以用来插入wav wma mid mp3等格式的音乐.<BR>src= <BR>指定地址(url)的专用属性,在这个标签里他的内容只能写音乐地址. <BR>loop= <BR>播放次数的属性,值用自然数,无数次用"-1"或"infinite"来表示. <BR><BR>用bgsound做的标签不产生任何视觉效果.只播放音乐.<BR>这个代码随便放哪里效果是一样的,建议单独放在表格外方便些. <BR><BR><BR>也可用显示播放器的方法播放音乐: <BR><BR><EMBED src=midi.mid width=390 height=43 loop="true"> <BR><BR>代码:<BR>&lt;EMBED SRC="音乐地址" loop=true width=390 height=43&gt; <BR><BR>EMBED <BR>多媒体的专用元素,<BR>true:也起播放无数次的作用.<BR>width=390 height=43 <BR>播放器的宽和高.<BR>用播放器可调节音量,暂停等.<BR>也可将播放器的宽和高都设为0而隐去播放器. <BR><BR>他们的区别:<BR>用bgsound一定要下载完了才能听到歌声,下载慢了开始会听不到声音.<BR>用EMBED时边下载边放,下载慢了第一遍声音会断断续续.<BR><BR><BR>有时需要深色的播放器: <BR><EMBED style="FILTER: xray" src=gaoss33.mp3 width=390 height=43 loop="true"> <BR><BR>代码:<BR>&lt;EMBED SRC="音乐地址" loop=true style="FILTER: xray" width=390 height=43&gt; <BR><BR><FONT color=red>警告:已有音乐的叶面就请不要再贴音乐了.</FONT><BR></FONT><BR><BR><BR><BR><FONT face=黑体 color=#ff00ff size=6><B>第五章:FLASH的插入</B></FONT><FONT size=3> <BR><BR><BR></FONT><FONT size=2>下面是一段贴FLASH的代码: <BR><BR>&lt;embed src="http://www.long21.net/card/main/0404/0404160f.swf" width=360 height=280&gt;&lt;/embed&gt; <BR><BR>显示效果为:<BR><EMBED src=http://www.long21.net/card/main/0404/0404160f.swf width=360 height=280 type=application/x-shockwave-flash></EMBED> <BR><BR>embed <BR>插入多媒体的专用元素,常用来贴FLASH和音乐.<BR>width= <BR>height= <BR>视频图像的宽和高. <BR><BR><BR>FLASH的功能有两种:<BR>一种直接贴出,显示动画片,有的还带有音乐.<BR>另一种要去掉背景来装饰图片,如下雨,闪电等,称作透明FLASH. <BR><BR>下面是一个透明FLASH.<BR><EMBED src=http://imgfree.21cn.com/free/flash/88.swf width=360 height=280 type=application/x-shockwave-flash></EMBED> <BR><BR>代码:<BR>&lt;embed src="http://imgfree.21cn.com/free/flash/88.swf" width=360 height=280&gt;&lt;/embed&gt; <BR><BR>透明处理后效果: <BR><BR><EMBED src=http://imgfree.21cn.com/free/flash/88.swf width=360 height=280 type=application/x-shockwave-flash wmode="transparent"></EMBED><BR>代码:<BR>&lt;embed src="http://imgfree.21cn.com/free/flash/88.swf" width=360 height=280 <FONT color=yellow>wmode="transparent"</FONT>&gt;&lt;/embed&gt; <BR><BR><FONT color=yellow>wmode="transparent"</FONT> <BR>透明属性. <BR><BR>加到图片上的效果: <BR><BR>
<TABLE borderColor=#84b98d height=450 cellSpacing=5 cellPadding=5 width=490 background=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/b0070090039_Uu3asI5AtP3e.jpg border=13>
<TBODY>
<TR>
<TD align=middle><EMBED src=http://imgfree.21cn.com/free/flash/88.swf width=490 height=360 type=application/x-shockwave-flash wmode="transparent"></EMBED></TD></TR></TBODY></TABLE><BR><BR>代码为:<BR>&lt;table cellSpacing=5 cellPadding=5 border=13 bordercolor=#84B98D background="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/b0070090039_Uu3asI5AtP3e.jpg" width=490 height=450&gt;&lt;tr&gt;&lt;td align=center&gt;<FONT color=red>&lt;embed src="http://imgfree.21cn.com/free/flash/92.swf" width=490 height=360 wmode="transparent"&gt;&lt;/embed&gt;</FONT>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR><BR>很明显,红色代码就是透明FLASH.<BR>透明FLASH加到图片上,关键是要将图片作背景图.<BR>要用做表格的方法才能将图片设为背景图(下一节讲表格制作) <BR><BR>一张背景图上可以重叠几个透明FLASH,<BR>只要将位置代码<FONT color=yellow>align=right</FONT>放到标签里:<BR>&lt;embed <FONT color=yellow>align=right</FONT> src="http://imgfree.21cn.com/free/flash/88.swf" width=360 height=280 wmode="transparent"&gt;&lt;/embed&gt; <BR><BR>下面放了四个透明FLASH: <BR><BR>
<TABLE borderColor=#84b98d height=450 cellSpacing=5 cellPadding=5 width=490 background=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/b0070090039_Uu3asI5AtP3e.jpg border=13>
<TBODY>
<TR>
<TD align=middle><EMBED align=right src=http://imgfree.21cn.com/free/flash/88.swf width=490 height=290 type=application/x-shockwave-flash wmode="transparent"></EMBED> <EMBED align=right src=http://imgfree.21cn.com/free/flash/62.swf width=160 height=130 type=application/x-shockwave-flash wmode="transparent"></EMBED> <EMBED align=right src=http://imgfree.21cn.com/free/flash/89.swf width=360 height=280 type=application/x-shockwave-flash wmode="transparent"></EMBED> <EMBED align=right src=http://imgfree.21cn.com/free/flash/16.swf width=490 height=290 type=application/x-shockwave-flash wmode="transparent"></EMBED> </TD></TR></TBODY></TABLE><BR><BR>代码:<BR>
<>&lt;table cellSpacing=5 cellPadding=5 border=13 bordercolor=#84B98D background="<A href="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/b0070090039_Uu3asI5AtP3e.jpg"><FONT color=#0000ff>http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/b0070090039_w1E680uFCJha.jpg</FONT></A>" width=490 height=450&gt;&lt;tr&gt;&lt;td align=center&gt;</P>
<>&lt;embed <FONT color=yellow>align=right</FONT> src="<A href="http://imgfree.21cn.com/free/flash/88.swf"><FONT color=#0000ff>http://imgfree.21cn.com/free/flash/88.swf</FONT></A>" width=490 height=290 wmode="transparent"&gt;&lt;/embed&gt;</P>
<>&lt;embed <FONT color=yellow>align=right</FONT> src="<A href="http://imgfree.21cn.com/free/flash/62.swf"><FONT color=#0000ff>http://imgfree.21cn.com/free/flash/62.swf</FONT></A>" width=160 height=130 wmode="transparent"&gt;&lt;/embed&gt;</P>
<P>&lt;embed <FONT color=yellow>align=right</FONT> src="<A href="http://imgfree.21cn.com/free/flash/89.swf"><FONT color=#0000ff>http://imgfree.21cn.com/free/flash/89.swf</FONT></A>" width=360 height=280 wmode="transparent"&gt;&lt;/embed&gt;</P>
<P>&lt;embed <FONT color=yellow>align=right</FONT> src="<A href="http://imgfree.21cn.com/free/flash/16.swf"><FONT color=#0000ff>http://imgfree.21cn.com/free/flash/16.swf</FONT></A>" width=490 height=290 wmode="transparent"&gt;&lt;/embed&gt;</P>
<P>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</P><BR>透明 FLASH放到背景图上,因不能看到全部,常碰到定尺寸问题.<BR>实际上你把FLASH看成一张图片,先定宽和高,再定放到背景图上的位置就容易些. <BR><BR><BR><BR><FONT face=黑体 color=#ff00ff size=6><B>第六章:框(表格)的制作</B></FONT> <BR><BR><BR>表格的主要功能是做各种列表,我在这章里只谈与做音画帖有关的内容.<BR>主要讲边框做法,背景图处理方法和内容的排列要点. <BR><BR><B><FONT color=orange>一.表格的基本语法</FONT>.</B> <BR><BR>先看一个最简单的表格:<BR><BR>
<TABLE borderColor=#6b8e23 height=350 cellSpacing=10 cellPadding=10 width=450 align=center bgColor=#55632f border=18 valign="middle">
<TBODY>
<TR>
<TD>文字和图片</TD></TR></TBODY></TABLE><BR><BR>代码为: <BR>&lt;table width="450" height="350" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#55632F" bordercolor=#6b8e23&gt;&lt;tr&gt;&lt;td&gt;文字和图片&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR><BR>代码里的:<BR>&lt;table.........&gt;&lt;tr&gt;&lt;td&gt;文字和图片&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR>就组成表格的基本语法:开始标签,内容,结束标签.<BR><BR>这三个标记&lt;table&gt;&lt;tr&gt;&lt;td&gt;是定义表格的最重要的标记,可以说只学这三个己足够了.<BR><BR>先看懂这个代码:<BR>table <BR>这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里,<BR>tr <BR>描述列的元素.<BR>td <BR>描述格的元素.<BR>列就是从上到下的行,格就是每行里的格(大概意思)这些知道就行了,不在学习范围内. <BR><BR>它的属性常用的有:<BR>width= <BR>表格宽度,接受绝对值(如180)及相对值(如 80%,相对可显示的宽度)<BR>height=<BR>表格高度,接受绝对值(如 180)<BR>border= <BR>表格框的厚度.<BR>cellspacing= <BR>表格格线离边框距离<BR>cellpadding=<BR>文字图片离格线的距离.<BR>align= <BR>表格的摆放位置(水平),可选值为: left, right,center(左,右,中心)<BR>valign= <BR>表格内字画等的摆放贴位置(垂直)可选值为: top, middle, bottom。(顶,中间,底部 ) <BR>background=<BR>表格的背景图,与 bgcolor 不要同用。<BR>bgcolor=<BR>表格背景颜色,与background 不要同用.<BR>bordercolor=<BR>表格边框颜色.<BR>bordercolorlight= <BR>表格边框向光部分的颜色.<BR>bordercolordark= <BR>表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效)<BR><BR><B><FONT color=orange>二.边框的制作</FONT>.</B> <BR><BR><FONT size=3>1.颜色框:</FONT> <BR><BR>简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height 就会显示一个你所指定的颜色框.据此写一个代码:<BR><BR>&lt;table bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0&gt;&lt;tr&gt;&lt;td&gt;文字和图片&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<BR><BR>显示效果为:<BR><BR>
<TABLE borderColor=#00ff00 height=250 cellSpacing=0 width=360 border=8>
<TBODY>
<TR>
<TD>文字和图片</TD></TR></TBODY></TABLE><BR><BR>这里多写了一个格线属性cellspacing=0,格线就是那根细线(打表格用的)不写格线属性浏览器就默认为1.我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的.<BR>下面是不写的效果:<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/FFF_eYkCLOHnLrmk.jpg');}" alt="" src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/FFF_eYkCLOHnLrmk.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0> <BR><BR>下面讲几个有关框的常识问题. <BR><BR><FONT color=yellow>居中:</FONT>将位置属性<FONT color=yellow>align=center</FONT>放到开始标签里,这个框就居中了: <BR><BR>&lt;table <FONT color=yellow>align=center</FONT> bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0&gt;&lt;tr&gt;&lt;td&gt;文字和图片&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<BR><BR>显示效果为:<BR><BR>
<TABLE borderColor=#00ff00 height=250 cellSpacing=0 width=360 align=center border=8>
<TBODY>
<TR>
<TD>文字和图片</TD></TR></TBODY></TABLE><BR><BR><FONT color=yellow>定好尺寸的框仍会被撑大:</FONT>框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.例如还是上面那个尺寸的框,放进一张大的图片: <BR><BR>&lt;table align=center bordercolor=#00FF00 border=8 <FONT color=yellow>width=360 height=250</FONT> cellspacing=0&gt;&lt;tr&gt;&lt;td&gt;<BR>&lt;img src=http://adu.bbs.topzj.com/attachments//10/96/1096/CX024_L_YmgblJL6TXgY.jpg <FONT color=yellow>width=460</FONT>&gt;<BR>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<BR><BR>显示效果为:<BR><BR>
<TABLE borderColor=#00ff00 height=250 cellSpacing=0 width=360 align=center border=8>
<TBODY>
<TR>
<TD><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg" width=460></TD></TR></TBODY></TABLE><BR><BR>这个原理要注意两点:<BR>a.有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大. <BR>b.因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.(所以,上面代码里不写<FONT color=yellow>width=360 height=250</FONT>效果是一样的) <BR><BR><FONT size=3>2.素材框:</FONT> <BR><BR>利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果.<BR>边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里.<BR>要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大,<BR>在 白羽 的套装素材里(<A href="http://bbs.e-yu.cn/viewthread.php?tid=7538&extra=page%3D1&page=2)" target=_blank><FONT color=#0000ff>http://bbs.e-yu.cn/viewthread.php?tid=7538&extra=page%3D1&page=2)</FONT></A>选了几款: <BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif');}" alt="" src="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif');}" alt="" src="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif');}" alt="" src="http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif');}" alt="" src="http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0> <BR><BR>用第一张做背景图:<BR>&lt;table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"&gt;&lt;tr&gt;&lt;td&gt;图与文字&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR><BR>
<TABLE cellSpacing=10 cellPadding=0 width="90%" align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>图与文字</TD></TR></TBODY></TABLE><BR><BR>说明:<BR>代码中设了格线cellspacing="10",这在下一张背景图放进去后才能看到,<BR>表格宽用了相对值90%,相对可显叶面的90%. <BR><BR>下面把第二张做背景图,将格线设为5,width="100%". <BR><FONT color=yellow>&lt;table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif"&gt;&lt;tr&gt;&lt;td&gt;图与文字&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</FONT> <BR><BR>将它放到前一张里: <BR><BR>&lt;table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"&gt;&lt;tr&gt;&lt;td&gt;<FONT color=yellow>&lt;table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif"&gt;&lt;tr&gt;&lt;td&gt;图与文字&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</FONT>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR><BR>
<TABLE cellSpacing=10 cellPadding=0 width="90%" align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif border=0>
<TBODY>
<TR>
<TD>图与文字</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>同理再将第三张放进去(格线为2): <BR><BR>
<TABLE cellSpacing=10 cellPadding=0 width="90%" align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=2 cellPadding=0 width="100%" align=center background=http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif border=0>
<TBODY>
<TR>
<TD>图与文字</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>再将第四张放进去(格线为6): <BR><BR>
<TABLE cellSpacing=10 cellPadding=0 width="90%" align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=2 cellPadding=0 width="100%" align=center background=http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=6 cellPadding=0 width="100%" align=center background=http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif border=0>
<TBODY>
<TR>
<TD>图与文字</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>放一张图片进去看看效果: <BR><BR>
<TABLE cellSpacing=10 cellPadding=0 align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=2 cellPadding=0 width="100%" align=center background=http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=6 cellPadding=0 width="100%" align=center background=http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif border=0>
<TBODY>
<TR>
<TD><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg" width=460></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>代码: <BR><BR>&lt;table align="center" border="0" cellpadding="0" cellspacing="10" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"&gt;&lt;tr&gt;&lt;td&gt;<FONT color=yellow>&lt;table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif"&gt;&lt;tr&gt;&lt;td&gt; <FONT color=#d65c5d>&lt;table align="center" border="0" cellpadding="0" cellspacing="2" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif"&gt;&lt;tr&gt;&lt;td&gt; <FONT color=#00ff00>&lt;table align="center" border="0" cellpadding="0" cellspacing="6" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif"&gt;&lt;tr&gt;&lt;td&gt; <FONT color=beige>&lt;img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=460&gt;</FONT> &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </FONT>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </FONT>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</FONT>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR><BR>注:对应的颜色就是表格对应的开始标签和收尾标签. <BR><BR><BR><B><FONT color=orange>三.背景图的特点及处理方法</FONT>.</B> <BR><BR>这里讲的背景图是指最后一层显示的,在它上面可以放文字,图片,FLASH等等. <BR><BR>用表格做的背景图,它的显示特点是:<BR>当表格尺寸大于背景图原始尺寸时,会复制背景图.<BR>当表格尺寸小于背景图原始尺寸时,只显示背景图左上一部分.<BR>为了看清楚效果,选一张人物图片做背景图:<BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://aa.up.topzj.com/data/aa/76/94/5/a//d25/bbs025/76/94/76945/forumid_11459/m2m3_25XyxpWsOApf.jpg');}" alt="" src="http://aa.up.topzj.com/data/aa/76/94/5/a//d25/bbs025/76/94/76945/forumid_11459/m2m3_25XyxpWsOApf.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0> (原始尺寸为<FONT color=yellow>140X140</FONT>) <BR>注:找图片原始尺寸的方法:鼠标右键点图片,出现菜单,左键点[属性]就看到了. <BR><BR>将它做背景图以后的效果: <BR><BR>
<TABLE height=230 cellSpacing=0 cellPadding=0 width=390 background=http://aa.up.topzj.com/data/aa/76/94/5/a//d25/bbs025/76/94/76945/forumid_11459/m2m3_25XyxpWsOApf.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE><BR>代码:<BR>&lt;table border="0" cellpadding="0" cellspacing="0" <FONT color=yellow>width="390" height="230"</FONT> background="http://aa.up.topzj.com/data/aa/76/94/5/a//d25/bbs025/76/94/76945/forumid_11459/m2m3_25XyxpWsOApf.jpg"&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR><BR><BR>
<TABLE height=90 cellSpacing=0 cellPadding=0 width=90 background=http://aa.up.topzj.com/data/aa/76/94/5/a//d25/bbs025/76/94/76945/forumid_11459/m2m3_25XyxpWsOApf.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE><BR>代码:<BR>&lt;table border="0" cellpadding="0" cellspacing="0" <FONT color=yellow>width="90" height="90"</FONT> background="http://aa.up.topzj.com/data/aa/76/94/5/a//d25/bbs025/76/94/76945/forumid_11459/m2m3_25XyxpWsOApf.jpg"&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR><BR>处理背景图的方法: <BR><BR>1.选择花纹素材,如: <BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.e-yu.cn/attachments/ext_gif/4Mbq_v1.gif');}" alt="" src="http://bbs.e-yu.cn/attachments/ext_gif/4Mbq_v1.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0> <BR>做背景后效果: <BR>
<TABLE height=110 cellSpacing=0 cellPadding=0 width="100%" background=http://bbs.e-yu.cn/attachments/ext_gif/4Mbq_v1.gif border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE><BR>这样的图做背景被复制后不会变样. <BR>素材库里这种类型的素材是很多的. <BR><BR>2.有时我们看到很漂亮的图片,想完整显示做背景,怎么处理呢? <BR><BR>根据背景图的特点,唯一的办法就是将将表格的尺寸设置得和图片的原始尺寸一致.<BR>而且放进去内容的大小必须小于他,以免撑大. <BR><BR>如果图片的原始尺寸不满意,也只能改变它的原始尺寸.方法如下: <BR><BR><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/08JHV_sksIwbhp52fA.jpg"> <BR><BR>这张图的原始尺寸是 972X614 ,要把它改小. <BR><BR>先下载到自己电脑的图片收藏夹里, <BR>找到画图软件(每个电脑都有)把这个图片打开,点上面的[图像(I)],点[拉伸/扭曲],出现如下对话框,将水平和垂直按同样比例扩大或缩小,点确定就可以了. <BR><BR><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/08JHVABCD_yfmDXcspnakQ.jpg"> <BR><BR>结果满意后,再点[文件],点[另存为],写上文件名点[保存]就完成了.注意图片格式为:jpg或gif. <BR><BR>下面是按55%缩小后的大小(<FONT color=yellow>535X338</FONT>): <BR><BR><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/08JHVAB_6ESuWfX9LKzt.jpg"> <BR><BR>用它做背景图,放一张图和几个字上去<IMG alt="" src="http://bbs.greendown.cn/images/smilies/dajie.gif" border=0 smilieid="2">表格也设为:<FONT color=yellow>width=535 height=338</FONT>) <BR><BR>
<TABLE borderColor=#b22222 height=338 cellSpacing=6 width=535 align=center background=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/08JHVAB_6ESuWfX9LKzt.jpg border=9>
<TBODY>
<TR>
<TD>      <IMG src="http://i19.photobucket.com/albums/b182/ellenool/loveu.gif" width=160> <BR><BR><BR><BR>
<P align=center><FONT style="FONT-SIZE: 40pt" color=#ff00ff><B><PRE>   祝:
小芒果  生日快乐
</PRE></B></FONT>
<P></P></TD></TR></TBODY></TABLE><BR><BR>代码 <BR><BR>&lt;TABLE align=center background=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/08JHVAB_6ESuWfX9LKzt.jpg <FONT color=yellow>width=535 height=338</FONT> border=9 bordercolor=#00FF00 cellspacing=6&gt;&lt;TR&gt;&lt;TD&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&lt;img src=http://i19.photobucket.com/albums/b182/ellenool/loveu.gif width=160&gt;<BR>&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;<BR>&lt;<IMG alt="" src="http://bbs.greendown.cn/images/smilies/han.gif" border=0 smilieid="9"> align="center"&gt;<BR>&lt;FONT style="FONT-SIZE: 40pt" color=#B22222&gt;&lt;b&gt; <BR>&lt;pre&gt;<BR>   祝:<BR> 小芒果  生日快乐<BR>&lt;/pre&gt;<BR>&lt;/b&gt;&lt;/FONT&gt;&lt;/P&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt; <BR><BR><BR><FONT color=orange>四.图和文字放进框里的方法及注意点:</FONT> <BR><BR>&lt;table ......&gt;&lt;tr&gt;&lt;td&gt;内容&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR>将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里. <BR>代码安放的一些注意点: <BR><BR>1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高. <BR>凡是要空行的地方可用换行标签&lt;br&gt;来设定,不够可以多加几个&lt;br&gt;,到满意为止, <BR>也可用分段标签&lt;P&gt;......&lt;/P&gt;,不够再加&lt;br&gt;, <BR><BR>2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边. <BR>再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点. <BR>图片宽度好设定,文字一般也用&lt;br&gt;分行的方法来限定它的宽度 <BR><BR>3.内容居中:将位置属性<FONT color=yellow>align=center</FONT>放到最后一层表格的&lt;td&gt;标签里,框里的内容就会都居中了: <BR>&lt;table ......&gt;&lt;tr&gt;&lt;td <FONT color=yellow>align=center</FONT>&gt;内容&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR><BR><BR><FONT color=orange>五.做表格最容易犯的错误</FONT> <BR><BR>&lt;table ......&gt;&lt;tr&gt;&lt;td&gt;内容&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; <BR><BR>音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;,使得整个帖变形. <BR>所以,做了几个表格,就必须有几组收尾标签,多一个少一个都不行. <BR><BR><BR><BR><FONT face=黑体 color=#ff00ff size=6><B>第七章:怎样找源代码</B></FONT> <BR><BR><BR>看到好帖,怎样取它的源代码. <BR><BR>鼠标对准页面空地,点右键,出现菜单. <BR>鼠标左键点"查看源文件",这一页的原代码就全部出显在你的记事本上. <BR><BR>或鼠标左键点浏览器上方的"查看"→"源文件",网叶原代码也会出现. <BR><BR>如何复制: <BR>1.把你需要的代码涂蓝,对准你要的代码开始处或结尾处,按住鼠标左键拖到你需要的地方就涂蓝了. <BR>2.左键点左上角"编辑"再点"剪切",把记事本上代码全部删除,再右键出现菜单左键点"粘贴",那些涂蓝的就留在记事本上,可以存档了. <BR>或者右键点涂蓝处,出现菜单,左键点"复制",再右键点你要放的地方,出现菜单,左键点"粘贴"就把涂蓝的代码放好了. <BR><FONT color=orange>新手千万不要怕麻烦,这个复制的基本功是必需的.</FONT> <BR><BR>整页的原代码要找到你需要的,刚开始还有一定难度,办法就是要记住它的位置再到代码里找.比如(e-域)在18楼,那就在代码里出现"18楼"字样下面去找,熟悉了很快就可找到的.找到的代码还可以到"预览帖子"里去显示验证.<BR>其实在找源代码的过程中,会增长很多新知识的.<BR><BR>但是如果你只是找一首歌的地址就容易些(因为在唱的一定只有一首)方法如下:<BR>1.用上方法找出全部原代码(在你的记事本上)<BR>2.依次点(记事本)左上"编辑---查找" 在弹出的“查找内容”对话框中输入音乐文件的后缀名,如.mp3,再按“查找下一个”按钮,不妨多按1、2次 。如果提示没有,则考虑依次输入后缀名.rm或者.wma,一般情况下歌的地址就会出现(涂蓝那块)注意后缀名前有一小点.<BR>当然这种方法还可找其它的地址,<BR>如找flash则输入.swf<BR>如找图片.gif或.jpg等等....<BR><BR>必须强调一点,很多网站设置了防盗手段,一般方法取不了原代码 <BR><BR><BR><BR><FONT color=orange>HTML初级教程就写到这里.教程难免有问题,请指正,随时会修正.</FONT> <BR><BR>注:全文在所有属性后面都加了等于号,目的是为了大家复制后使用方便, <BR><BR><BR><BR>
<P align=center><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f14_03Mb7kI91pf9.gif');}" alt="" src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f14_03Mb7kI91pf9.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0> </P><BR><BR>附言: <BR><BR>很多想学代码的新手总感觉无从着手, 谈谈我的学习体会: <BR><FONT color=#ff6347>1.多练,</FONT><BR>建议在学堂单独开一个自己命名的学习帖,<BR>可参考我的学习笔记:从一窍不通到小学毕业的记录:<BR><A href="http://bbs.e-yu.cn/viewthread.php?tid=10126&extra=page%3D1" target=_blank><FONT color=#0000ff>http://bbs.e-yu.cn/viewthread.php?tid=10126&extra=page%3D1</FONT></A><BR>关键要多动手,多练才能熟,熟了才能巧.<BR>(前五章都是代码开头的,新手可先复制代码发表显示,再改变属性,内容变成自己的作品)<BR><FONT color=#ff6347>2.勤记.</FONT><BR>单独设一个代码记事本,<BR>学过的正确代码系统地记在记事本上,并把他发送到桌面上,<BR>这样要用时复制代码就不易犯错.<BR><FONT color=#ff6347>3.多收藏.</FONT><BR>所有喜欢的,包括音乐,图片,好作品,特效等都分门别类地收藏好,<BR>素材的收集也很重要呢. <BR><BR>介绍几个网上HTML教程: <BR><BR><A href="http://longka.flasher123.com/zy/index.html" target=_blank><FONT color=#0000ff>http://longka.flasher123.com/zy/index.html</FONT></A> <BR><BR><A href="http://www.gzsums.edu.cn/webclass/html/html_design.html" target=_blank><FONT color=#0000ff>http://www.gzsums.edu.cn/webclass/html/html_design.html</FONT></A> <BR><BR><A href="http://www.cniis.cn/edu/Article_Show.asp?ArticleID=214" target=_blank><FONT color=#0000ff>http://www.cniis.cn/edu/Article_Show.asp?ArticleID=214</FONT></A> </FONT><BR></BLOCKQUOTE></DIV>

TOP

这个可要好好的学习一下了。。。

TOP

好帖!!!!!!!!!

TOP

<font color=#00ff00 size=7 face=华文新魏>试下子 </font> </marquee>
http://www.cyworld.com.cn/tearsbaby
HOHO,欢迎光临偶的小窝

TOP

<FONT size=2>scrollamount=2 <FONT color=white>style="background-image:url(<IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/11/02/k1_YGP283FJ7QCK.gif');}" alt="" src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/11/02/k1_YGP283FJ7QCK.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>)"</FONT>&gt;&lt;font color=#FFFFFF size=5 face=华文新魏&gt;我在试个&lt;/font&gt;&lt;/marquee&gt;&lt;/center&gt; <BR></FONT><BR>
http://www.cyworld.com.cn/tearsbaby
HOHO,欢迎光临偶的小窝

TOP

<P>
引用:
原帖由 <I>FULL</I> 于 2007-8-7 09:40 AM 发表 <A href="http://bbs.jsbc.com/redirect.php?goto=findpost&pid=399655&ptid=57833" target=_blank><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open(this.src);}" alt="" src="http://bbs.jsbc.com/images/common/back.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0></A> scrollamount=2 style="background-image:url(screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel t ...
</P>
<P>怎么回事</P>
http://www.cyworld.com.cn/tearsbaby
HOHO,欢迎光临偶的小窝

TOP