网页制作基础教程(HTML基础)
做贴其时并不难学!也不用每个代码都必需会写。只要知道大概意思即可。新手学贴可复制下面现成的代码,然后再更改图片地址即可。试试看,你也可以的!用HTML代码做贴先得把:查看HTML源代码之前的小方块打勾。下面是例子:
1、一层背景一张图片代码:
<center><table background=背景图片网址,图片格式为gif,jpg,jpeg,png等格式 cellpadding= cellspacing=不同背景之间的表格线距离数值 bgcolor=RGB颜色代码,表示背景颜色,如果有背景图片可有可无; border=数值,表示背景厚度。><tr><td>
这里是内容(文字或图片)
</td></table></center>
小知识:
table,tr,td 称为HTML的标签,以双标签的形式出现,所谓双标签,也就是有一个<table>就有一个对应的</table>与之对应,同样适用于其他的双标签。
一般标签都为双标签。
标签最终所显示的网页效果由各个属性来表达,属性可选择使用,不一定全部都用。
在整个帖子里双标签以首尾呼应的方式出现。
在它后面的background,cellpadding,cellspacing,bgcolor,border,都是用来修饰它的属性,属性在“=”后面给出,属性还有width,height等。
center表示表格居中,同类属性还有right,left;
background=背景图片地址,图片格式为gif,jpg,jpeg,png等格式;
cellspacing=数值或百分比,数值表示的是以象素为单位,百分比是相对于屏幕而言,表示格线与内容之间的距离;
cellspacing=数值或百分比,同上,表示格线与格线之间的距离;
bgcolor=RGB颜色代码,表示背景颜色,如果有背景图片可有可无;
border=数值,表示背景厚度。
实例代码:
<CENTER> <TABLE cellSpacing=0 background=http://www.mypcera.com/photo/b3/04/b.jpg border=10> <TBODY> <TR> <TD><IMG height=360 src="http://www.mypcera.com/photo/71/01/03.jpg" width=480 border=0></TD></TR></TBODY></TABLE></CENTER>效果如下:
贴图片代码:
注:img为单标签。width= height= 可有可无,一般只在图片较大的情况下才有必要使用,因为图片在没有指明宽度和高度的情况下以原尺寸显示。
width=以象素为单位的数值,height=以象素为单位的数值,前者表示图片的宽度,后者表示图片的高度。调整图片大小时一般维持原比例为好。
如何查看图片的大小和地址呢?点右键,查看属性:)
2、二层背景一张图片。
<center><table border= background=><tr><td><center><table border= cellspacing= background=><tr><td><img border= src= width= height=></td></table></td></table></center>
实例代码:
<TABLE borderColor=#de97e8 cellSpacing=10 background=http://www.mypcera.com/photo/b3/08/02.jpg border=1> <TBODY> <TR> <TD> <CENTER> <TABLE cellSpacing=10 background=http://www.mypcera.com/photo/58/02/04.jpg border=0> <TBODY> <TR> <TD><IMG height=360 src="http://www.mypcera.com/photo/61/01/07.jpg" width=480 border=0></TD></TR></TBODY></TABLE></CENTER> <P align=center><FONT color=#0000ff>加入文字等</FONT></P></TD></TR></TBODY></TABLE>效果
知识:
body表示HTML主体部分,双标签。属性:background,bgcolor,width等等,在网页里一般都用,如果直接用HTML语言发帖,帖子里可有可无。body可以用来做一些网页特效的修饰作用。一般不提倡加密和禁点。
font用来修饰文字,双标签,属性:size,color,face等等。
size修饰字体大小,face修饰字体类型。
关于br和p标签:br表示换行,p表示分段。
至此,你就可以作出简单的网页了,没有音乐?对了,给你贴播放器的代码:
<embed src="音乐地址" hidden=true controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types></embed>
hidden=true表示隐藏播放器,loop=ture表示无休止循环,这里的ture也可用数字表示,标志循环的次数,autostart=ture表示自动播放
现提供几个已经做好的代码及贴子你只要加入内容就可
代码:
<TABLE cellSpacing=25 cellPadding=0 width="100%" bgColor=#000b0d background=http://xz1.2000y.net/348114/uploadpic/200412620829479.gif border=0 link="#20CAC1" vlink="#20CAC1" alink="#20CAC1"> <TBODY> <TR> <TD> <TABLE cellSpacing=3 borderColorDark=#051414 cellPadding=0 width="100%" align=center borderColorLight=#297e7c background=http://xz1.2000y.net/348114/uploadpic/200412620850816.jpg border=1> <TBODY> <TR> <TD width="100%"> <TABLE cellSpacing=15 cellPadding=0 width="100%" align=center background=http://xz1.2000y.net/348114/uploadpic/200412620815881.gif border=0> <TBODY> <TR> <TD width="100%"> <TABLE cellSpacing=3 borderColorDark=#051414 cellPadding=0 width="100%" align=center borderColorLight=#297e7c background=http://xz1.2000y.net/348114/uploadpic/200412620850816.jpgborder=1> <TBODY> <TR> <TD width="100%"> <TABLE cellSpacing=10 cellPadding=0 width="100%" align=center background=http://xz1.2000y.net/348114/uploadpic/200412620829479.gif border=0> <TBODY> <TR> <TD width="100%"> <TABLE cellSpacing=5 borderColorDark=#051414 cellPadding=0 width="100%" align=center borderColorLight=#297e7c background=http://xz1.2000y.net/348114/uploadpic/200412620850816.jpg border=1> <TBODY> <TR> <TD width="100%"> <TABLE cellSpacing=1 cellPadding=0 width="100%" align=center background=http://yuandi.com/wysc/renwu/10/onmykneesmetstrip.jpg border=0> <TBODY> <TR> <TD width="100%"> <TABLE cellSpacing=0 cellPadding=0 width="100%" align=center background=http://xz1.2000y.net/348114/uploadpic/200412620758258.gif border=0> <TBODY> <TR> <TD width="100%"> <P align=center><BR><BR><FONT size=6><FONT color=#00ffff>加入内容<BR></FONT><BR></FONT><BR><BR></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> <DIV></DIV>
效果:
|