打印

【HTML介绍和练习园地】

本主题由子易于 2007-10-14 20:40 移动

老呆

论坛元老

Rank: 8 Rank: 8

帖子: 682
精华: 17
积分: 3809
威望: 0
经验: 3193
性别: 男
来自: LNSY
在线时间: 206 小时
注册时间: 2004-11-19

1^# 大中小发表于 2006-1-16 09:47 只看该作者

【HTML介绍和练习园地】

（一）

一个完整的HTML帖子应该是：美贴＝背景＋文章＋插图＋收尾

原代码如下：

<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>帖子的文章加图片</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">

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

（全文作者：浩然）

找乐不老，动脑不呆。

TOP

老呆

论坛元老

Rank: 8 Rank: 8

帖子: 682
精华: 17
积分: 3809
威望: 0
经验: 3193
性别: 男
来自: LNSY
在线时间: 206 小时
注册时间: 2004-11-19

2^# 大中小发表于 2006-1-16 09:59 只看该作者

（二）

1.文字基本设制
基本代码如下：
<align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字</FONT></P>
<align=center>表示居中，< align=left>表示居左，<align=right>表示居右。
face=字体　常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等 size=字体大小，这里的最大值为7　取值越大文字就越大另一种贴法： <font style=font:40pt face=新宋体 color=#ff0000>插入文字</font> font:40pt　数值越大文字就越大。 color=颜色代码。

2.移动文字
效果：
移动文字可根据下面基本代码
自行调节效果
基本代码：
<marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1><font color=red size=+2 face=华文新魏>插入文字</font></marquee>
说明： direction=移动方向　可选值为向上(up)　向下(down)　向左(left)　向右(right) behavior=移动方式，　scroll 一圈一圈绕着走，　slide 只走一次，　behavior=alternate 来回走 width=宽度　　height=高度　　scrolldelay=速度　　scrollamount=位移上面的参数大家可以根据不同的情况自行调节。

3。文字特效
效果1
欢迎你的到来

欢迎你的到来

代码如下： <table align=center border=3 bordercolor="#CD5C5C" width=500 height=375><td background=http://www.3wbbs.com/dvbbs/UploadFile/2004-8/200481232442636.jpg><marquee behavior=alternate scrollamount=3 direction=down height=350><marquee behavior=alternate scrollamount=3 width=500><img src=http://news.xinhuanet.com/forum/2004-07/01/xinsrc_35060128173470723471.gif><font color=red size=6><b>欢迎你的到来</b><img src=http://news.xinhuanet.com/forum/2004-07/01/xinsrc_35060128173470723471.gif></font></marquee></table><br>

文字特效有很多种，本论坛有单独的教程。这里不再介绍　。（全文作者：浩然）

找乐不老，动脑不呆。

TOP

老呆

论坛元老

Rank: 8 Rank: 8

帖子: 682
精华: 17
积分: 3809
威望: 0
经验: 3193
性别: 男
来自: LNSY
在线时间: 206 小时
注册时间: 2004-11-19

3^# 大中小发表于 2006-1-16 10:16 只看该作者

(三).贴图
1.基本代码：
<img src=图片网址 width=图片宽度 height=图片长度>
注意：设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）。图片的居中，居左，居右上面已经介绍了，这里不再重复。。。。。
2.给图片加边框
效果：

基本代码：
<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://photocdn.sohu.com/20051228/Img227703094.jpg width=500 height=375></td></table>
说明：
border="6" 表格边框的厚度，不同浏览器有不同的内定值。
cellspacing="2" 表格格线的厚度
cellPadding=1　表格格线内厚度
borderColor=#841A00　边框色彩
3.图片朦胧
A.圆形效果

B.方形效果　

代码：　<IMG src="图片" style="FILTER: Alpha(opacity=200,style=3)" width=500 height=375 ALGIN="MIDDLE">

附件

圣诞节 2图片.jpg (75.67 KB)

2006-12-19 18:08

圣诞节 2图片.jpg

找乐不老，动脑不呆。

TOP

闲云山水

论坛元老

Rank: 8 Rank: 8

帖子: 3061
精华: 14
积分: 7770
威望: 43
经验: 5353
在线时间: 623 小时
注册时间: 2005-5-23

Medal No.1

4^# 大中小发表于 2006-1-17 11:07 只看该作者

不错，收藏，谢谢老呆。

TOP

老呆

论坛元老

Rank: 8 Rank: 8

帖子: 682
精华: 17
积分: 3809
威望: 0
经验: 3193
性别: 男
来自: LNSY
在线时间: 206 小时
注册时间: 2004-11-19

5^# 大中小发表于 2006-1-19 09:45 只看该作者

1.常用效果

代码如下：
<TABLE align=center background="" border=10 cellPadding=5 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD><br> <center><table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://www.lnsq.com/club/UploadFile/2006-1/200611793046763.jpg width=400 height=300></td></table></center><br> <EMBED style="LEFT: 400px; WIDTH: 400px; POSITION: absolute; TOP: 6910px; HEIGHT: 300px" align=right src=http://mailimg-fs.hanmail.net/fl/effect/4/e-spring2.swf width=290 height=235 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> </TD></TR></TBODY></TABLE>
注意：长和宽的设定要根据图片的实际大小来设定
2.定位透明FLASH效果
注意：这种方法由于是通过坐标的方式把透明FLASH固定到了某一点，所以在不同的环境和不同的论坛要相应调整不同的位置。定位较为麻烦，而且最大的弊病就是屏幕分辨率设置不一样，观看的效果也不一样（比如你是用分辨率1024×768做的帖子，你感觉固定的位置很好。但别人用分辨率800×600观看却偏得很远。本人建议一般不要用这种方法。
定位效果图

代码如下：
<TABLE align=center background="" border=10 cellPadding=5 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD><br> <center><table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://www.dongbeifeng.com/bbs/image_img/0601/43b803c69f3fa.jpg width=400 height=300></td></table></center><br> <EMBED style="LEFT: 400px; WIDTH: 400px; POSITION: absolute; TOP: 6910px; HEIGHT: 300px" align=right src=http://mailimg-fs.hanmail.net/fl/effect/4/e-spring2.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> </TD></TR></TBODY></TABLE>
说明：TOP: 6910px 指FLASH与帖子上边之间的距离。 LEFT: 400px 是指FLASH与帖子左边的距离 WIDTH: 400px　HEIGHT: 300px　是指FLASH定位的范围宽度和高度后面的width=400 height=300 就是指FLASH的宽和高了。

找乐不老，动脑不呆。

TOP

老呆

论坛元老

Rank: 8 Rank: 8

帖子: 682
精华: 17
积分: 3809
威望: 0
经验: 3193
性别: 男
来自: LNSY
在线时间: 206 小时
注册时间: 2004-11-19

6^# 大中小发表于 2006-1-19 10:08 只看该作者

(五)贴歌代码
1.背景音乐（适合　mid wma等格式） <bgsound src=音乐网址 Loop=-1>
2.音频（适合MP3 WMA RM等很多格式）

代码如下：

3.视频

4.FLASH <embed src=网址 width=400 height=400>

说明：

AutoStart=true　表示是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为true
Loop=true　表示设定播放重复次数，LOOP=3表示重复3次，true表示无限次播放，FALSE播放一次即停止。
width=宽度 height=高度　可以设定控制播放器面板的大小，如果都设置为0就可以把播放器隐藏了。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

背景音乐