太湖家园论坛_HTML初级教程 - Powered by Discuz! Archiver

物质力 发表于 2006-3-24 17:15

HTML初级教程

HTML初级教程
 

html语言是一种标注语言,它是可以直接写出(不用软件)的,通过文字和标签的描述在论坛或网叶上显示的语言.所以学会了各种标签的用法,就是学会了html语言.

 
第一章:文字的插入
 

下面是一段贴文字的代码:
 
&ltfont color=#ff4500 face=隶书 size=7&gt我们都是同学&lt/font&gt
 
显示效果为:
 
我们都是同学 
 
先看懂这个代码:
 
font
 
做文字标签的专用元素,
 
color, face, size
 
描述文字形态的三大属性(见以下详细说明)
 
/font
 
表示贴文字结束,俗称收尾.
 

写法说明:
 
元素前后加上小于号<和大于号>就组成了标签, 
标签分开始和结束两种,元素前再加一条斜杠/就成了结束标签, 
由开始标签 (如上面的&ltfont ..............&gt) 内容(如上面的\"我们都是同学\") 结束标签(如上面的&lt/font&gt) 就组成了代码的三大要素.
 
属性就是专门用来描述内容元素的,他必须写在开始标签里(如上面的:color=ff00ff face=黑体 size=7) 
写代码时,注意属性之间要有一个空格,不能多也不能少.
 
代码字母的大小写效果是一样的.
 
文字的三大属性就是专门用来描述文字的颜色,字体,大小的,下面分别介绍他们:
 
color=
 
颜色属性,用来描述文字的颜色,他的值可用英文颜色名称或十六进制数表示.(见附表)
 
face=
 
字体属性,用来描述文字的字体,他的值很多,我们看到的宋体,楷书,隶书,华文新魏,华文彩云等等都是,关键是只有你电脑里装有的字体才会显示.(自己电脑里有那些字体到控制面板里找\"字体\"即可知道)如没有,浏览器默认为宋体.
 
size=
 
大小属性,用来描述文字的大小,他的值1到7,7最大.(再大就要用CSS的方法了)
 
几个常用的对文字修饰的标签:
 
1.&ltb&GT粗体字&lt/b&gt 对指定的文字加粗. 
效果:.粗体字 
2.&lti&gt斜体字&lt/i&gt 对指定的文字变斜. 
效果:斜体字 
3.&ltu&gt下划线&lt/u&gt 在指定的文字下面划线. 
效果:下划线 
说明:这些标签不支持任何属性,所以它自己也没属性.每对标签只起一个特定作用,使用时只要在指定的文字前后分别加进开始,结束标签,这段文字就会显示你的指定.
 
在文章中加一条水平线的方法,如绿线: 
代码:&lthr color=#00ff00 width=360&gt 
效果:: 
<hr color=#00ff00 width=360> 
width=
 
横向宽度,他可以绝对值,如360,也可以相对值,如80%. 
color=
 
线条颜色.
 
文字的简单编排: 
标准的论坛,必须用代码来控制文章的空行空格, 
常用的有: 
&ltbr&gt
 
换行标签 (换行后不空行) 
&ltp&gt...&lt/p&gt
 
分段标签 (换行后再多空一行,段落结束后也再多空一行) 
&ampnbsp
 
空格标签,多个空格用符号;隔开. 
而用标签&ltpre&gt和&lt/pre&gt包起来的文字可保持书写的效果. 
 
附表:
 

 <img src=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27175/ysdm11_LkCCt0ItZHWL.gif\" border=\"0\" onload=\"if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt=\'单击这里开新视窗查看\\n按住CTRL,并滚动鼠标滚轮缩放图片大小\';}\" onmouseover=\"if(this.resized) this.style.cursor=\'hand\';\" onclick=\"if(!this.resized) {return true;} else {window.open(\'http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27175/ysdm11_LkCCt0ItZHWL.gif\');}\" onmousewheel=\"return imgzoom(this);\">

 
第二章:图片的插入
 


下面是一段贴图片的代码: 
&ltimg src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=500&gt
 
显示效果为: 
<img src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=500>
 
先看懂这个代码: 
img
 
贴图片的专用元素, 
src=
 
指定地址(url)的专用属性,在这个标签里他的内容只能写图片地址. 
width=
 
宽度属性,用于设定图片的宽度.
 
还有几个常用的属性: 
border=
 
边框厚度,给图像加个框,这个框的颜色默认值是黑色. 
height=
 
图片高度,除特殊需要一般不写为好,只写宽度,高度会按比例显示.(当然,有时需定高度,那就不写宽度,也一样比例正常) 宽和高都不写,则显示图片的原始尺寸. 
align=
 
位置属性,指定图片安放的位置,他的值有: 
 top:靠上, 
 absbottom:靠下, 
 left:靠左, 
 right:靠右, 
 center:居中. 
注: 
1.这个位置属性可以不写,浏览器默认为靠左. 
2.有的版本不识别align=center,那就将&ltcenter&gt和&lt/center&gt放在图片代码两边,图片就居中了.
 
加框: 
代码: 
&ltimg src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=360 border=6&gt
 
显示效果为: 
<img src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=360 border=6>
 

居中: 
代码: 
&ltcenter&gt&ltimg src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=360&gt&lt/center&gt
 
显示效果为: 
<center><img src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=360></center>

 
取得图片地址的方法: 
对准图片点右键,出现对话框(如下图),左键点属性,再双击地址涂蓝,最后复制. 
 
<img src=http://adu.bbs.topzj.com/attachments//10/96/1096/zrTDMP7Qk1N_0NWW2747VRJC.jpg width=500 style=\"border:3px red dashed\">
 
<img src=http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/126_lGKqa5R3EXlA.gif width=500 style=\"border:3px red dashed\">
 
现在很多取得的地址不能正常显示(发图者设置障碍) 
只能下载后,再上传到你贴图的论坛或不设反盗链的论坛,取得新的图片地址,

 
下载图片的方法:对准图片点右键,出现菜单(上上图),左键点\"图片另存为\",出现对话框(下图).保存格式一般为jpg或gif.填上名称再点保存即可.
 
<img src=http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/127_sl36f71YvulW.gif width=500 style=\"border:3px red dashed\">
 
自己文档里的图片必须上传后取得地址才可用代码贴出. 
上传方法:在上传框里点浏览,左键对准要上传的图片双击,把帖子发出即可,图片会以附件的形式出现.就有新的地址了. 
 
给几个可上传的地址: 
<a href=\"http://picsplace.to/index.php\" target=\"_blank\">http://picsplace.to/index.php</a> (可上传FLASH等,会直接给出地址) 

<a href=\"http://adu.bbs.topzj.com/\" target=\"_blank\">http://adu.bbs.topzj.com/</a> (老试贴区,开放2048 kb)
 


 
第三章:移动的运用
 


下面是一段贴文字移动的代码:
 
&ltmarquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1&gt &ltfont color=#00ff00 size=7 face=华文新魏&gt同学们好 &lt/font&gt
&lt/marquee&gt
 
显示效果为:
 
<marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1>同学们好</marquee>
 
先看懂这个代码: 
marquee
 这是移动的专用元素. 
他的属性如下: 
direction=
 移动方向,值有: 
 up 向上移动, 
 down 向下移动, 
 left 向左移动, 
 right 向右移动, 
 注: 这个移动方向属性可以不写,浏览器默认为向左. 
behavior=
 
移动方式,值有:scroll 不停的走;slide 只走一次 
behavior=alternate
 
左右来回走,与direction不能同用. 
width=
 
移动宽度. 
height=
 
移动高度. 
scrolldelay=
 
延时,延时一般设在80,延时数值大了,显示效果会跳跃式. 
scrollamount=
 
移动速度,值从1开始越大越快. 
(移动放到背景图上,因不能看到全部,常碰到定尺寸问题. 
实际上你把移动看成一张图片,先定宽和高,再定放到背景图上的位置就容易些.)

 
来回移动:behavior=alternate
 
<center><marquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2>请大家试试,试了才能印象深刻</marquee></center> 
代码: 
&ltcenter&gt&ltmarquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2&gt&ltfont color=#ff0000 size=5 face=华文新魏&gt请大家试试,试了才能印象深刻&lt/font&gt&lt/marquee&gt&lt/center&gt
 
移动还可以加入背景颜色或背景图,背景显示的范围就是移动设定的宽和高.
bgcolor:背景颜色属性.
background:背景图属性.
 
加背景颜色:bgcolor=#aaeeaa
 
<center><marquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2 bgcolor=#aaeeaa>请大家试试,试了才能印象深刻</marquee></center> 
代码: 
&ltcenter&gt&ltmarquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2 bgcolor=#aaeeaa&gt&ltfont color=#ff0000 size=5 face=华文新魏&gt请大家试试,试了才能印象深刻&lt/font&gt&lt/marquee&gt&lt/center&gt
 
加背景图:style=\"background-image:url(http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/k1_RkKDtr7WLT6S.gif)\"
 
<center><marquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2 style=\"background-image:url(http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/k1_RkKDtr7WLT6S.gif)\">请大家试试,试了才能印象深刻</marquee></center> 
代码: 
&ltcenter&gt&ltmarquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2 style=\"background-image:url(http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/k1_RkKDtr7WLT6S.gif)\"&gt&ltfont color=#FFFFFF size=5 face=华文新魏&gt请大家试试,试了才能印象深刻&lt/font&gt&lt/marquee&gt&lt/center&gt
 
图片的移动:只要将上面的文字换成图片就可以了.其实只要将移动的起始和结束标签放在任何的两头,都可以动起来. 
<marquee direction=left behavior=scroll scrolldelay=10 scrollamount=2><img src=\"http://www.ran.co.jp/Sozai/H1611146/021487.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H1611143/009976.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H1611149/035728.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114A/037935.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114D/048174.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114E/054680.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114E/054681.gif\"> <iimg src=\"http://www.ran.co.jp/Sozai/H161114D/048178.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114E/054678.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114E/055440.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114E/055441.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114E/055442.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114C/045249.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H161114E/055819.gif\"> <img src=\"http://www.ran.co.jp/Sozai/H1611145/019034.gif\">
</marquee>
 
代码为: 
&ltmarquee direction=left behavior=scroll scrolldelay=10 scrollamount=2&gt&ltimg src=\"http://www.ran.co.jp/Sozai/H1611146/021487.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H1611143/009976.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H1611149/035728.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114A/037935.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114D/048174.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114E/054680.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114E/054681.gif\"&gt &ltiimg src=\"http://www.ran.co.jp/Sozai/H161114D/048178.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114E/054678.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114E/055440.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114E/055441.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114E/055442.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114C/045249.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H161114E/055819.gif\"&gt &ltimg src=\"http://www.ran.co.jp/Sozai/H1611145/019034.gif\"&gt &lt/marquee&gt



 
第四章:音乐的插入
 


下面是一段贴音乐的代码:
 
&ltbgsound src=\"http://www.asia-records.com.tw/mAsia/listen/26703_2.mp3\" loop=\"1\"&gt
 
效果就是我们听到的音乐 
bgsound
 
内部媒体的专用元素,用他做的标签可以用来插入wav wma mid mp3等格式的音乐. 
src=
 
指定地址(url)的专用属性,在这个标签里他的内容只能写音乐地址.
 
loop=
 
播放次数的属性,值用自然数,无数次用\"-1\"或\"infinite\"来表示.
 
用bgsound做的标签不产生任何视觉效果.只播放音乐. 
这个代码随便放哪里效果是一样的,建议单独放在表格外方便些.

 
也可用显示播放器的方法播放音乐:
 
<EMBED SRC=\"midi.mid\" loop=true width=390 height=43>
 
代码: 
&ltEMBED SRC=\"音乐地址\" loop=true width=390 height=43&gt
 
EMBED
 
多媒体的专用元素, 
true:也起播放无数次的作用. 
width=390 height=43
 
播放器的宽和高. 
用播放器可调节音量,暂停等. 
也可将播放器的宽和高都设为0而隐去播放器.
 
他们的区别: 
用bgsound一定要下载完了才能听到歌声,下载慢了开始会听不到声音. 
用EMBED时边下载边放,下载慢了第一遍声音会断断续续. 

 
有时需要深色的播放器:
 
<EMBED SRC=\"gaoss33.mp3\" loop=\"true\" style=\"FILTER: xray\" width=390 height=43>
 

代码: 
&ltEMBED SRC=\"音乐地址\" loop=true style=\"FILTER: xray\" width=390 height=43&gt
 

警告:已有音乐的叶面就请不要再贴音乐了. 

<bgsound src=\"http://www.asia-records.com.tw/mAsia/listen/26703_2.mp3\" loop=\"1\">

 
第五章:FLASH的插入
 


下面是一段贴FLASH的代码:
 
&ltembed src=\"http://www.long21.net/card/main/0404/0404160f.swf\" width=360 height=280&gt&lt/embed&gt
 
显示效果为: 
<embed src=\"http://www.long21.net/card/main/0404/0404160f.swf\" width=360 height=280></embed>
 
embed
 
插入多媒体的专用元素,常用来贴FLASH和音乐. 
width=height=
 
视频图像的宽和高.
 
 
FLASH的功能有两种: 
一种直接贴出,显示动画片,有的还带有音乐. 
另一种要去掉背景来装饰图片,如下雨,闪电等,称作透明FLASH.
 
下面是一个透明FLASH. 
<embed src=\"http://imgfree.21cn.com/free/flash/88.swf\" width=360 height=280></embed>
 
代码: 
&ltembed src=\"http://imgfree.21cn.com/free/flash/88.swf\" width=360 height=280&gt&lt/embed&gt
 
透明处理后效果:
 
<embed src=\"http://imgfree.21cn.com/free/flash/88.swf\" width=360 height=280 wmode=\"transparent\"></embed> 
代码: 
&ltembed src=\"http://imgfree.21cn.com/free/flash/88.swf\" width=360 height=280 wmode=\"transparent\"&gt&lt/embed&gt
 
wmode=\"transparent\"
 
透明属性.
 
加到图片上的效果:
 
<table cellSpacing=5 cellPadding=5 border=13 bordercolor=#84B98D background=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/b0070090039_w1E680uFCJha.jpg\" width=490 height=450><tr><td align=center><embed src=\"http://imgfree.21cn.com/free/flash/88.swf\" width=490 height=360 wmode=\"transparent\"></embed></td></tr></table>
 
代码为: 
&lttable cellSpacing=5 cellPadding=5 border=13 bordercolor=#84B98D background=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/b0070090039_w1E680uFCJha.jpg\" width=490 height=450&gt&lttr&gt&lttd align=center&gt&ltembed src=\"http://imgfree.21cn.com/free/flash/92.swf\" width=490 height=360 wmode=\"transparent\"&gt&lt/embed&gt&lt/td&gt&lt/tr&gt&lt/table&gt
 
很明显,红色代码就是透明FLASH. 
透明FLASH加到图片上,关键是要将图片作背景图. 
要用做表格的方法才能将图片设为背景图(下一节讲表格制作)
 

一张背景图上可以重叠几个透明FLASH, 
只要将位置代码align=right放到标签里: 
&ltembed align=right src=\"http://imgfree.21cn.com/free/flash/88.swf\" width=360 height=280 wmode=\"transparent\"&gt&lt/embed&gt
 
下面放了四个透明FLASH:
 
<table cellSpacing=5 cellPadding=5 border=13 bordercolor=#84B98D background=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/b0070090039_w1E680uFCJha.jpg\" width=490 height=450><tr><td align=center>

<embed align=right src=\"http://imgfree.21cn.com/free/flash/88.swf\" width=490 height=290 wmode=\"transparent\"></embed>

<embed align=right src=\"http://imgfree.21cn.com/free/flash/62.swf\" width=160 height=130 wmode=\"transparent\"></embed>

<embed align=right src=\"http://imgfree.21cn.com/free/flash/89.swf\" width=360 height=280 wmode=\"transparent\"></embed>

<embed align=right src=\"http://imgfree.21cn.com/free/flash/16.swf\" width=490 height=290 wmode=\"transparent\"></embed>

</td></tr></table>
 
代码: 
<table cellSpacing=5 cellPadding=5 border=13 bordercolor=#84B98D background=\"<A href=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/b0070090039_w1E680uFCJha.jpg\">http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/b0070090039_w1E680uFCJha.jpg</A>\" width=490 height=450><tr><td align=center>
<embed align=right src=\"<A href=\"http://imgfree.21cn.com/free/flash/88.swf\">http://imgfree.21cn.com/free/flash/88.swf</A>\" width=490 height=290 wmode=\"transparent\"></embed>
<embed align=right src=\"<A href=\"http://imgfree.21cn.com/free/flash/62.swf\">http://imgfree.21cn.com/free/flash/62.swf</A>\" width=160 height=130 wmode=\"transparent\"></embed>
<embed align=right src=\"<A href=\"http://imgfree.21cn.com/free/flash/89.swf\">http://imgfree.21cn.com/free/flash/89.swf</A>\" width=360 height=280 wmode=\"transparent\"></embed>
<embed align=right src=\"<A href=\"http://imgfree.21cn.com/free/flash/16.swf\">http://imgfree.21cn.com/free/flash/16.swf</A>\" width=490 height=290 wmode=\"transparent\"></embed>
</td></tr></table>
 
透明FLASH放到背景图上,因不能看到全部,常碰到定尺寸问题. 
实际上你把FLASH看成一张图片,先定宽和高,再定放到背景图上的位置就容易些.

 
第六章:框(表格)的制作
 

表格的主要功能是做各种列表,我在这章里只谈与做音画帖有关的内容. 
主要讲边框做法,背景图处理方法和内容的排列要点.

 
一.表格的基本语法.

 
先看一个最简单的表格: 

<table width=\"450\" height=\"350\" border=\"18\" cellspacing=\"10\" cellpadding=\"10\" align=\"center\" valign=\"middle\" bgcolor=\"#55632F\" bordercolor=#6b8e23><tr><td>文字和图片</td></tr></table>
 

代码为:
 
&lttable width=\"450\" height=\"350\" border=\"18\" cellspacing=\"10\" cellpadding=\"10\" align=\"center\" valign=\"middle\" bgcolor=\"#55632F\" bordercolor=#6b8e23&gt&lttr&gt&lttd&gt文字和图片&lt/td&gt&lt/tr&gt&lt/table&gt

 
代码里的: 
&lttable.........&gt&lttr&gt&lttd&gt文字和图片&lt/td&gt&lt/tr&gt&lt/table&gt
 
就组成表格的基本语法:开始标签,内容,结束标签. 
这三个标记&lttable&gt&lttr&gt&lttd&gt是定义表格的最重要的标记，可以说只学这三个己足够了. 

先看懂这个代码: 
table
 
这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里, 
tr
 
描述列的元素. 
td
 
描述格的元素. 
列就是从上到下的行,格就是每行里的格(大概意思)这些知道就行了,不在学习范围内.
 

它的属性常用的有: 
width= 表格宽度，接受绝对值（如180）及相对值（如 80%） height= 表格高度，接受绝对值（如 180） border= 表格框的厚度. cellspacing= 表格格线离边框距离 cellpadding= 文字图片离格线的距离. align= 表格的摆放位置（水平），可选值为： left, right,center(左，右，中心) valign= 表格内字画等的摆放贴位置（垂直）可选值为： top, middle, bottom。(顶，中间，底部 ) background= 表格的背景图，与 bgcolor 不要同用。 bgcolor= 表格背景颜色，与background 不要同用. bordercolor= 表格边框颜色. bordercolorlight= 表格边框向光部分的颜色. bordercolordark= 表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效) 

二.边框的制作.

 
1.颜色框:
 

简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height 就会显示一个你所指定的颜色框.据此写一个代码: 

&lttable bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0&gt&lttr&gt&lttd&gt文字和图片&lt/td&gt&lt/tr&gt&lt/table&gt 

显示效果为: 

<table bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和图片</td></tr></table> 

这里多写了一个格线属性cellspacing=0,格线就是那根细线(打表格用的)不写格线属性浏览器就默认为1.我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的. 

下面是不写的效果: 

<table bordercolor=#00FF00 border=8 width=360 height=250><tr><td>文字和图片</td></tr></table> 

下面讲几个有关框的常识问题.
 
居中:将位置属性align=center放到开始标签里,这个框就居中了:
 

&lttable align=center bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0&gt&lttr&gt&lttd&gt文字和图片&lt/td&gt&lt/tr&gt&lt/table&gt 

显示效果为: 

<table align=center bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和图片</td></tr></table>
 
定好尺寸的框仍会被撑大:框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.例如还是上面那个尺寸的框,放进一张大的图片:
 
&lttable align=center bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0&gt&lttr&gt&lttd&gt 
&ltimg src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=460&gt 
&lt/td&gt&lt/tr&gt&lt/table&gt 

显示效果为: 

<table align=center bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td><img src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=460></td></tr></table>
 
这个原理要注意两点: 
a.有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大.
 
b.因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.(所以,上面代码里不写width=360 height=250效果是一样的)
 
2.素材框:
 
利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果. 
边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里. 
要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大, 
在白羽的套装素材里(<a href=\"http://bbs.e-yu.cn/viewthread.php?tid=7538&extra=page%3D1&page=2)\" target=\"_blank\">http://bbs.e-yu.cn/viewthread.php?tid=7538&extra=page%3D1&page=2)</a>选了几款:
 

 <img src=\"http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\" border=\"0\" onload=\"if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt=\'单击这里开新视窗查看\\n按住CTRL,并滚动鼠标滚轮缩放图片大小\';}\" onmouseover=\"if(this.resized) this.style.cursor=\'hand\';\" onclick=\"if(!this.resized) {return true;} else {window.open(\'http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\');}\" onmousewheel=\"return imgzoom(this);\"> 
 <img src=\"http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif\" border=\"0\" onload=\"if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt=\'单击这里开新视窗查看\\n按住CTRL,并滚动鼠标滚轮缩放图片大小\';}\" onmouseover=\"if(this.resized) this.style.cursor=\'hand\';\" onclick=\"if(!this.resized) {return true;} else {window.open(\'http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif\');}\" onmousewheel=\"return imgzoom(this);\"> 
 <img src=\"http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif\" border=\"0\" onload=\"if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt=\'单击这里开新视窗查看\\n按住CTRL,并滚动鼠标滚轮缩放图片大小\';}\" onmouseover=\"if(this.resized) this.style.cursor=\'hand\';\" onclick=\"if(!this.resized) {return true;} else {window.open(\'http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif\');}\" onmousewheel=\"return imgzoom(this);\"> 
 <img src=\"http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif\" border=\"0\" onload=\"if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt=\'单击这里开新视窗查看\\n按住CTRL,并滚动鼠标滚轮缩放图片大小\';}\" onmouseover=\"if(this.resized) this.style.cursor=\'hand\';\" onclick=\"if(!this.resized) {return true;} else {window.open(\'http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif\');}\" onmousewheel=\"return imgzoom(this);\">
 
用第一张做背景图: 
&lttable align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"10\" width=\"90%\" background=\"http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\"&gt&lttr&gt&lttd&gt图与文字&lt/td&gt&lt/tr&gt&lt/table&gt
 
<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"10\" width=\"90%\" background=\"http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\"><tr><td>图与文字</td></tr></table>
 
说明: 
代码中设了格线cellspacing=\"10\",这在下一张背景图放进去后才能看到, 
表格宽用了相对值90%,相对可显叶面的90%.
 
下面把第二张做背景图,将格线设为5,width=\"100%\".
 
&lttable align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"5\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif\"&gt&lttr&gt&lttd&gt图与文字&lt/td&gt&lt/tr&gt&lt/table&gt
 
将它放到前一张里:
 
&lttable align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"10\" width=\"90%\" background=\"http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\"&gt&lttr&gt&lttd&gt&lttable align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"5\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif\"&gt&lttr&gt&lttd&gt图与文字&lt/td&gt&lt/tr&gt&lt/table&gt&lt/td&gt&lt/tr&gt&lt/table&gt
 
<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"10\" width=\"90%\" background=\"http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"5\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif\"><tr><td>图与文字</td></tr></table></td></tr></table>
 
同理再将第三张放进去(格线为2):
 
<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"10\" width=\"90%\" background=\"http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"5\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"2\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif\"><tr><td>图与文字</td></tr></table></td></tr></table></td></tr></table>
 
再将第四张放进去(格线为6):
 
<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"10\" width=\"90%\" background=\"http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"5\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"2\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"6\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif\"><tr><td>图与文字</td></tr></table></td></tr></table></td></tr></table></td></tr></table>
 
放一张图片进去看看效果:
 
<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"10\" background=\"http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"5\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"2\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"6\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif\"><tr><td><img src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=460></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
 
代码:
 
&lttable align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"10\" background=\"http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif\"&gt&lttr&gt&lttd&gt&lttable align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"5\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif\"&gt&lttr&gt&lttd&gt

&lttable align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"2\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif\"&gt&lttr&gt&lttd&gt

&lttable align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"6\" width=\"100%\" background=\"http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif\"&gt&lttr&gt&lttd&gt
&ltimg src=http://www.sucaicd.com/4/JPEG640/071/001_050/CX024_L.jpg width=460&gt
&lt/td&gt&lt/tr&gt&lt/table&gt

&lt/td&gt&lt/tr&gt&lt/table&gt

&lt/td&gt&lt/tr&gt&lt/table&gt&lt/td&gt&lt/tr&gt&lt/table&gt

 
 
三.背景图的特点及处理方法.

 
这里讲的背景图是指最后一层显示的,在它上面可以放文字,图片,FLASH等等.
 
用表格做的背景图,它的显示特点是: 
当表格尺寸大于背景图原始尺寸时,会复制背景图. 
当表格尺寸小于背景图原始尺寸时,只显示背景图左上一部分. 
为了看清楚效果,选一张人物图片做背景图: 
 <img src=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\" border=\"0\" onload=\"if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt=\'单击这里开新视窗查看\\n按住CTRL,并滚动鼠标滚轮缩放图片大小\';}\" onmouseover=\"if(this.resized) this.style.cursor=\'hand\';\" onclick=\"if(!this.resized) {return true;} else {window.open(\'http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\');}\" onmousewheel=\"return imgzoom(this);\">
(原始尺寸为140X140)
 
注:找图片原始尺寸的方法:鼠标右键点图片,出显菜单,左键点[属性]就看到了.

 
将它做背景图以后的效果:
 
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"390\" height=230
background=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\"><tr><td></td></tr></table>
 代码: 
&lttable border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"390\" height=\"230\" background=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\"&gt&lttr&gt&lttd&gt&lt/td&gt&lt/tr&gt&lt/table&gt

 
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"90\" height=90
background=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\"><tr><td></td></tr></table>
 代码: 
&lttable border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"90\" height=\"90\" background=\"http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\"&gt&lttr&gt&lttd&gt&lt/td&gt&lt/tr&gt&lt/table&gt

 
处理背景图的方法:
 
1.选择花纹素材,如:
 
 <img src=\"http://bbs.e-yu.cn/attachments/ext_gif/4Mbq_v1.gif\" border=\"0\" onload=\"if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt=\'单击这里开新视窗查看\\n按住CTRL,并滚动鼠标滚轮缩放图片大小\';}\" onmouseover=\"if(this.resized) this.style.cursor=\'hand\';\" onclick=\"if(!this.resized) {return true;} else {window.open(\'http://bbs.e-yu.cn/attachments/ext_gif/4Mbq_v1.gif\');}\" onmousewheel=\"return imgzoom(this);\">
 
做背景后效果:
 
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" height=110
background=\"http://bbs.e-yu.cn/attachments/ext_gif/4Mbq_v1.gif\"><tr><td></td></tr></table>
 
这样的图做背景被复制后不会变样.
 
素材库里这种类型的素材是很多的.

 
2.有时我们看到很漂亮的图片,想完整显示做背景,怎么处理呢?
 

根据背景图的特点,唯一的办法就是将将表格的尺寸设置得和图片的原始尺寸一致. 
而且放进去内容的大小必须小于他,以免撑大.
 
如果图片的原始尺寸不满意,也只能改变它的原始尺寸.方法如下:

 
<img src=http://adu.bbs.topzj.com/attachments//10/96/1096/08JHV_H47MqK4vtOQK.jpg>
 
这张图的原始尺寸是 972X614 ,要把它改小.
 
先下载到自己电脑的图片收藏夹里,
 
找到画图软件(每个电脑都有)把这个图片打开,点上面的[图像(I)],点[拉伸/扭曲],出现如下对话框,将水平和垂直按同样比例扩大或缩小,点确定就可以了.
 
<img src=http://adu.bbs.topzj.com/attachments//10/96/1096/08JHVABCD_t6rY4OdgQaST.jpg>
 

结果满意后,再点[文件],点[另存为],写上文件名点[保存]就完成了.注意图片格式为:jpg或gif.
 
下面是按55%缩小后的大小(535X338):
 
<img src=http://adu.bbs.topzj.com/attachments//10/96/1096/08JHVAB_wnPitQsgT74k.jpg>
 
用它做背景图,放一张图和几个字上去:(表格也设为:width=535 height=338)

 

<TABLE align=center background=http://adu.bbs.topzj.com/attachments//10/96/1096/08JHVAB_wnPitQsgT74k.jpg width=535 height=338 border=9 bordercolor=#B22222 cellspacing=6><TR><TD>
&nbsp
 <img src=http://i19.photobucket.com/albums/b182/ellenool/loveu.gif width=160>
 


<pre>
祝:
小芒果生日快乐
</pre>
</TD></TR></TABLE>

 
代码
 
<TABLE align=center background=http://adu.bbs.topzj.com/attachments//10/96/1096/08JHVAB_wnPitQsgT74k.jpg width=535 height=338 border=9 bordercolor=#00FF00 cellspacing=6><TR><TD> &ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;
 
<img src=http://i19.photobucket.com/albums/b182/ellenool/loveu.gif width=160> <pre> 祝: 小芒果生日快乐 </pre> </TD></TR></TABLE>

 
四.图和文字放进框里的方法及注意点:
 
&lttable ......&gt&lttr&gt&lttd&gt内容&lt/td&gt&lt/tr&gt&lt/table&gt
 
将图和文字的代码从上到下按顺序代替上面的\"内容\"放到表格里.
 
代码安放的一些注意点:
 
1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高.
 
凡是要空行的地方可用换行标签&ltbr&gt来设定,不够可以多加几个&ltbr&gt,到满意为止,
 
也可用分段标签&ltP&gt......&lt/P&gt,不够再加&ltbr&gt,
 
2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边.
 
再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点.
 
图片宽度好设定,文字一般也用&ltbr&gt分行的方法来限定它的宽度
 
3.内容居中:将位置属性align=center放到最后一层表格的&LTtd&gt标签里,框里的内容就会都居中了:
 
&lttable ......&gt&lttr&gt&lttd align=center&gt内容&lt/td&gt&lt/tr&gt&lt/table&gt
 

五.做表格最容易犯的错误
 
&lttable ......&gt&lttr&gt&lttd&gt内容&lt/td&gt&lt/tr&gt&lt/table&gt
 
音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾&lt/td&gt&lt/tr&gt&lt/table&gt,使得整个帖变形.
 
所以,做了几个表格,就必须有几组收尾标签,多一个少一个都不行.
 
注:全文在所有属性后面都加了等于号,目的是为了大家复制后使用方便, 
HTML初级教程就写到这里.教程难免有问题,请指正,随时会修正.

 

 <img src=\"http://www.ran.co.jp/Sozai/H1611148/028099.png\" border=\"0\" onload=\"if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt=\'单击这里开新视窗查看\\n按住CTRL,并滚动鼠标滚轮缩放图片大小\';}\" onmouseover=\"if(this.resized) this.style.cursor=\'hand\';\" onclick=\"if(!this.resized) {return true;} else {window.open(\'http://www.ran.co.jp/Sozai/H1611148/028099.png\');}\" onmousewheel=\"return imgzoom(this);\">


 
附言:
 

很多想学代码的新手总感觉无从着手,
谈谈我的学习体会:
 
1.多练, 
建议在学堂单独开一个自己命名的学习帖, 
可参考我的学习笔记:从一窍不通到小学毕业的记录: 
<a href=\"http://bbs.e-yu.cn/viewthread.php?tid=10126&extra=page%3D1\" target=\"_blank\">http://bbs.e-yu.cn/viewthread.php?tid=10126&extra=page%3D1</a> 
关键要多动手,多练才能熟,熟了才能巧. 
(前五章都是代码开头的,新手可先复制代码发表显示,再改变属性,内容变成自己的作品) 
2.勤记. 
单独设一个代码记事本, 
学过的正确代码系统地记在记事本上,并把他发送到桌面上, 
这样要用时复制代码就不易犯错. 
3.多收藏. 
所有喜欢的,包括音乐,图片,好作品,特效等都分门别类地收藏好, 
素材的收集也很重要呢.
 

介绍几个网上HTML教程:
 
<a href=\"http://www.shanxiwindow.net/teaching/htmlbook/\" target=\"_blank\">http://www.shanxiwindow.net/teaching/htmlbook/</a>
 
<a href=\"http://www.gzsums.edu.cn/webclass/html/html_design.html\" target=\"_blank\">http://www.gzsums.edu.cn/webclass/html/html_design.html</a>
 
<a href=\"http://www.cniis.cn/edu/Article_Show.asp?ArticleID=214\" target=\"_blank\">http://www.cniis.cn/edu/Article_Show.asp?ArticleID=214</a>

月舞影 发表于 2006-3-24 17:27

谢谢楼主.辛苦了!

月舞影 发表于 2006-3-24 18:17

同学们好

楼主怎么不显示?还狂卡!

页: [1]

太湖家园论坛's Archiver

HTML初级教程